// We import the settings.js file to know which address we should contact // to talk to Janus, and optionally which STUN/TURN servers should be // used as well. Specifically, that file defines the "server" and // "iceServers" properties we'll pass when creating the Janus session. var janus = null; var streaming = null; var opaqueId = "streamingtest-"+Janus.randomString(12); var remoteTracks = {}, dataMid = null; var bitrateTimer = {}; var spinner = {}; var simulcastStarted = {}, svcStarted = {}; var streamsList = {}; // Kar fiksiramo na 666 var selectedStream = 666; window.addEventListener('DOMContentLoaded', function () { var predvajaj = document.querySelector('#predvajaj'); var gumbi = document.querySelector('#predvajaj'); var glavno = document.querySelector('#glavno'); var gLevo = document.querySelector('#levo'); var gDesno = document.querySelector('#desno'); var gRavno = document.querySelector('#ravno'); var vsiGumbi = [gLevo, gDesno, gRavno]; // Funkcije za veckratno rabo function omogociGumbe(kdaj) { setTimeout(function () { vsiGumbi.forEach(function (gEl) { gEl.toggleAttribute('disabled', false); }); }, kdaj); } function onemogociGumbe() { vsiGumbi.forEach(function (gEl) { gEl.toggleAttribute('disabled', true); }); } // Initialize the library (all console debuggers enabled) Janus.init({debug: "all", callback: function() { // Make sure the browser supports WebRTC if(!Janus.isWebrtcSupported()) { console.log("ERROR cannot start; no WebRTC support... "); return; } // Create session janus = new Janus({ server: server, iceServers: iceServers, // Should the Janus API require authentication, you can specify either the API secret or user token here too // token: "mytoken", // or // apisecret: "serversecret", success: function() { // Attach to Streaming plugin janus.attach({ plugin: "janus.plugin.streaming", opaqueId: opaqueId, success: function(pluginHandle) { streaming = pluginHandle; Janus.log("Plugin attached! (" + streaming.getPlugin() + ", id=" + streaming.getId() + ")"); // Setup streaming session updateStreamsList(); /* ustavitev neka? for(var i in bitrateTimer) clearInterval(bitrateTimer[i]); bitrateTimer = {}; janus.destroy(); */ // Kar zacnimo stream startStream(); }, error: function(error) { Janus.error(" -- Error attaching plugin... ", error); }, iceState: function(state) { Janus.log("ICE state changed to " + state); }, webrtcState: function(on) { Janus.log("Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now"); if (on) { // Gumbi levo in desno gLevo.addEventListener('click', function () { console.log('GREMO LEVO!'); window.peljiLevo(); onemogociGumbe(); omogociGumbe(DOLZINA + PAVZA); }); gDesno.addEventListener('click', function () { console.log('GREMO DESNO!'); window.peljiDesno(); onemogociGumbe(); omogociGumbe(DOLZINA + PAVZA); }); gRavno.addEventListener('click', function () { console.log('GREMO RAVNO!'); window.peljiRavno(); onemogociGumbe(); omogociGumbe(DOLZINA + PAVZA); }); } else { gLevo.removeEventListener('click'); gDesno.removeEventListener('click'); gRavno.removeEventListener('click'); } }, slowLink: function(uplink, lost, mid) { Janus.warn("Janus reports problems " + (uplink ? "sending" : "receiving") + " packets on mid " + mid + " (" + lost + " lost packets)"); }, onmessage: function(msg, jsep) { Janus.debug(" ::: Got a message :::", msg); var result = msg["result"]; if(result) { if(result["status"]) { var status = result["status"]; // if(status === 'starting') // else if(status === 'started') // else if(status === 'stopped') if(status === 'stopped') { stopStream(); } } else if(msg["streaming"] === "event") { // Does this event refer to a mid in particular? var mid = result["mid"] ? result["mid"] : "0"; // Is simulcast in place? var substream = result["substream"]; var temporal = result["temporal"]; if((substream !== null && substream !== undefined) || (temporal !== null && temporal !== undefined)) { if(!simulcastStarted[mid]) { simulcastStarted[mid] = true; } } // Is VP9/SVC in place? var spatial = result["spatial_layer"]; temporal = result["temporal_layer"]; } } else if(msg["error"]) { console.log('NAPAKA', msg["error"]); stopStream(); return; } if(jsep) { Janus.debug("Handling SDP as well...", jsep); var stereo = (jsep.sdp.indexOf("stereo=1") !== -1); // Offer from the plugin, let's answer streaming.createAnswer({ jsep: jsep, // We only specify data channels here, as this way in // case they were offered we'll enable them. Since we // don't mention audio or video tracks, we autoaccept them // as recvonly (since we won't capture anything ourselves) tracks: [{ type: 'data' }], customizeSdp: function(jsep) { if(stereo && jsep.sdp.indexOf("stereo=1") == -1) { // Make sure that our offer contains stereo too jsep.sdp = jsep.sdp.replace("useinbandfec=1", "useinbandfec=1;stereo=1"); } }, success: function(jsep) { Janus.debug("Got SDP!", jsep); var body = { request: "start" }; streaming.send({ message: body, jsep: jsep }); }, error: function(error) { Janus.error("WebRTC error:", error); } }); } }, onremotetrack: function(track, mid, on, metadata) { Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + (metadata ? " (" + metadata.reason + ") ": "") + ":", track ); var mstreamId = "mstream"+mid; if(streamsList[selectedStream] && streamsList[selectedStream].legacy) { mstreamId = "mstream0"; } console.log('dodam?', on); if(true) { // If we're here, a new track was added var stream = null; // New video track: create a stream out of it stream = new MediaStream([track]); console.log('MOJ PRETOK!', stream, track); remoteTracks[mid] = stream; Janus.log("Created remote video stream:", stream); var vidEl = document.querySelector('#videofeed'); /* bitrate in resolucija if(!bitrateTimer[mid]) { bitrateTimer[mid] = setInterval(function() { // Display updated bitrate, if supported var bitrate = streaming.getBitrate(mid); console.log('bitrate:', bitrate); // Check if the resolution changed too var width = vidEl.videoWidth; var height = vidEl.videoHeight; if (width > 0 && height > 0) console.log('resolucija', width+'x'+height); }, 1000); } */ console.log('dodajam pretok', vidEl, stream); Janus.attachMediaStream(vidEl, stream); // Moramo kliknit za predvajanje :/ predvajaj.style.display = 'block'; predvajaj.addEventListener('click', function () { predvajaj.style.display = 'none'; vidEl.play(); }); vidEl.addEventListener('play', function () { glavno.classList.add('predvajam'); predvajaj.style.display = 'none'; }); vidEl.play(); } }, ondataopen: function(data) { Janus.log("The DataChannel is available!"); window.dataKanal = data; }, ondata: function(data) { Janus.debug("We got data from the DataChannel!", data); console.log('DUBU DATA', data); obdelajData(data); }, oncleanup: function() { Janus.log(" ::: Got a cleanup notification :::"); for(var i in bitrateTimer) clearInterval(bitrateTimer[i]); bitrateTimer = {}; remoteTracks = {}; dataMid = null; } }); }, error: function(error) { Janus.error(error); }, destroyed: function() { window.location.reload(); } }); }}); }); function updateStreamsList() { var body = { request: "list" }; Janus.debug("Sending message:", body); streaming.send({ message: body, success: function(result) { if(!result) { console.log("Error: Got no response to our query for available streams"); return; } if(result["list"]) { var list = result["list"]; if(list && Array.isArray(list)) { list.sort(function(a, b) { if(!a || a.id < (b ? b.id : 0)) return -1; if(!b || b.id < (a ? a.id : 0)) return 1; return 0; }); } Janus.log("Got a list of available streams:", list); streamsList = {}; for(var mp in list) { Janus.debug(" >> [" + list[mp]["id"] + "] " + list[mp]["description"] + " (" + list[mp]["type"] + ")"); // Check the nature of the available streams, and if there are some multistream ones list[mp].legacy = true; if(list[mp].media) { var audios = 0, videos = 0; for(var mi in list[mp].media) { if(!list[mp].media[mi]) continue; if(list[mp].media[mi].type === "audio") audios++; else if(list[mp].media[mi].type === "video") videos++; if(audios > 1 || videos > 1) { list[mp].legacy = false; break; } } } // Keep track of all the available streams streamsList[list[mp]["id"]] = list[mp]; } // Dajmo kar zacet startStream(); } }}); } function getStreamInfo() { // Send a request for more info on the mountpoint we subscribed to var body = { request: "info", id: parseInt(selectedStream) || selectedStream }; streaming.send({ message: body, success: function(result) { if(result && result.info && result.info.metadata) { console.log('STREAM META', result.info.metadata); } }}); } function startStream() { Janus.log("Selected video id #" + selectedStream); console.log('zacenjam', selectedStream, streamsList[selectedStream]); if(!selectedStream || !streamsList[selectedStream]) { console.log("Error: No stream selected to start"); return; } if(streamsList[selectedStream].legacy) { for(mi in streamsList[selectedStream].media) { // Add a new panel var type = streamsList[selectedStream].media[mi].type; if(type === "video") { mid = streamsList[selectedStream].media[mi].mid; break; } } } // Prepare the request to start streaming and send it var body = { request: "watch", id: parseInt(selectedStream) || selectedStream }; streaming.send({ message: body }); getStreamInfo(); } function stopStream() { streaming.send({ message: body }); streaming.hangup(); } function obdelajData(data) { console.log('obdelam webrtc podatke', data); }