356 lines
12 KiB
JavaScript
356 lines
12 KiB
JavaScript
|
// 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];
|
||
|
|
|
||
|
|
// Initialize the library (all console debuggers enabled)
|
||
|
|
Janus.init({debug: "all", callback: function() {
|
||
|
|
// Make sure the browser supports WebRTC
|
||
|
|
if(!Janus.isWebrtcSupported()) {
|
||
|
|
bootbox.alert("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!');
|
||
|
|
vsiGumbi.forEach(function (gEl) {
|
||
|
|
gEl.toggleAttribute('disabled', true);
|
||
|
|
});
|
||
|
|
// @TODO spremeni interval
|
||
|
|
setTimeout(function () {
|
||
|
|
vsiGumbi.forEach(function (gEl) {
|
||
|
|
gEl.toggleAttribute('disabled', false);
|
||
|
|
});
|
||
|
|
}, 2000);
|
||
|
|
});
|
||
|
|
gDesno.addEventListener('click', function () {
|
||
|
|
console.log('GREMO DESNO!');
|
||
|
|
vsiGumbi.forEach(function (gEl) {
|
||
|
|
gEl.toggleAttribute('disabled', true);
|
||
|
|
});
|
||
|
|
// @TODO spremeni interval
|
||
|
|
setTimeout(function () {
|
||
|
|
vsiGumbi.forEach(function (gEl) {
|
||
|
|
gEl.toggleAttribute('disabled', false);
|
||
|
|
});
|
||
|
|
}, 2000);
|
||
|
|
});
|
||
|
|
gRavno.addEventListener('click', function () {
|
||
|
|
console.log('GREMO RAVNO!');
|
||
|
|
vsiGumbi.forEach(function (gEl) {
|
||
|
|
gEl.toggleAttribute('disabled', true);
|
||
|
|
});
|
||
|
|
// @TODO spremeni interval
|
||
|
|
setTimeout(function () {
|
||
|
|
vsiGumbi.forEach(function (gEl) {
|
||
|
|
gEl.toggleAttribute('disabled', false);
|
||
|
|
});
|
||
|
|
}, 2000);
|
||
|
|
});
|
||
|
|
} 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!");
|
||
|
|
},
|
||
|
|
ondata: function(data) {
|
||
|
|
Janus.debug("We got data from the DataChannel!", data);
|
||
|
|
console.log('DUBU DATA', 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();
|
||
|
|
}
|