// 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.
/* global iceServers:readonly, Janus:readonly, server:readonly */
var janus = null;
var echotest = null;
var opaqueId = "multiopus-" + Janus.randomString(12);
var remoteTracks = {},
remoteVideos = 0;
var bitrateTimer = null;
var audioenabled = false;
var videoenabled = false;
var acodec = "multiopus";
var vcodec =
getQueryStringValue("vcodec") !== "" ? getQueryStringValue("vcodec") : null;
var vprofile =
getQueryStringValue("vprofile") !== ""
? getQueryStringValue("vprofile")
: null;
var simulcastStarted = false;
// We'll use a pre-recorded with surround audio as our local stream
var localStream = null;
$(document).ready(function () {
// Preload the video
$("#videoleft").append(
'"
);
let myvideo = $("#myvideo").get(0);
// Initialize the library (all console debuggers enabled)
Janus.init({
debug: "all",
callback: function () {
// Use a button to start the demo
$("#start").one("click", function () {
$(this).attr("disabled", true).unbind("click");
// 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 EchoTest plugin
janus.attach({
plugin: "janus.plugin.echotest",
opaqueId: opaqueId,
success: function (pluginHandle) {
$("#details").remove();
echotest = pluginHandle;
Janus.log(
"Plugin attached! (" +
echotest.getPlugin() +
", id=" +
echotest.getId() +
")"
);
// Use the surround video as our local stream
localStream = myvideo.captureStream();
myvideo.play();
// Negotiate WebRTC
let body = { audio: true, video: true };
// We can try and force a specific codec, by telling the plugin what we'd prefer
// For simplicity, you can set it via a query string (e.g., ?vcodec=vp9)
if (acodec) body["audiocodec"] = acodec;
if (vcodec) body["videocodec"] = vcodec;
// For the codecs that support them (VP9 and H.264) you can specify a codec
// profile as well (e.g., ?vprofile=2 for VP9, or ?vprofile=42e01f for H.264)
if (vprofile) body["videoprofile"] = vprofile;
Janus.debug("Sending message:", body);
echotest.send({ message: body });
Janus.debug("Trying a createOffer too (audio/video sendrecv)");
echotest.createOffer({
// We provide our own stream, plus data channels
tracks: [
{
type: "audio",
capture: localStream.getAudioTracks()[0],
recv: true,
},
{
type: "video",
capture: localStream.getVideoTracks()[0],
recv: true,
},
{ type: "data" },
],
customizeSdp(jsep) {
// Offer multiopus
jsep.sdp = jsep.sdp
.replace("opus/48000/2", "multiopus/48000/6")
.replace(
"useinbandfec=1",
"useinbandfec=1;channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2"
);
},
success: function (jsep) {
Janus.debug("Got SDP!", jsep);
echotest.send({ message: body, jsep: jsep });
// Create a spinner waiting for the remote video
$("#videoright").html(
'
' +
'
' +
' Loading...' +
"
" +
"
"
);
},
error: function (error) {
Janus.error("WebRTC error:", error);
bootbox.alert("WebRTC error... " + error.message);
},
});
$("#start")
.removeAttr("disabled")
.html("Stop")
.click(function () {
$(this).attr("disabled", true);
if (bitrateTimer) clearInterval(bitrateTimer);
bitrateTimer = null;
janus.destroy();
});
},
error: function (error) {
console.error(" -- Error attaching plugin...", error);
bootbox.alert("Error attaching plugin... " + error);
},
consentDialog: function (on) {
Janus.debug(
"Consent dialog should be " + (on ? "on" : "off") + " now"
);
if (on) {
// Darken screen and show hint
$.blockUI({
message: '
',
baseZ: 3001,
css: {
border: "none",
padding: "15px",
backgroundColor: "transparent",
color: "#aaa",
top: "10px",
left: "100px",
},
});
} else {
// Restore screen
$.unblockUI();
}
},
iceState: function (state) {
Janus.log("ICE state changed to " + state);
},
mediaState: function (medium, on, mid) {
Janus.log(
"Janus " +
(on ? "started" : "stopped") +
" receiving our " +
medium +
" (mid=" +
mid +
")"
);
},
webrtcState: function (on) {
Janus.log(
"Janus says our WebRTC PeerConnection is " +
(on ? "up" : "down") +
" now"
);
$("#videoleft").parent().unblock();
},
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);
if (jsep) {
Janus.debug("Handling SDP as well...", jsep);
echotest.handleRemoteJsep({ jsep: jsep });
}
let result = msg["result"];
if (result) {
if (result === "done") {
// The plugin closed the echo test
bootbox.alert("The Echo Test is over");
$("video").remove();
$("#waitingvideo").remove();
$("#toggleaudio").attr("disabled", true);
$("#togglevideo").attr("disabled", true);
$("#bitrate").attr("disabled", true);
$("#curbitrate").addClass("hide");
$("#curres").addClass("hide");
return;
}
// Any loss?
let status = result["status"];
if (status === "slow_link") {
toastr.warning(
"Janus apparently missed many packets we sent, maybe we should reduce the bitrate",
"Packet loss?",
{ timeOut: 2000 }
);
}
}
// Is simulcast in place?
let substream = msg["substream"];
let temporal = msg["temporal"];
if (
(substream !== null && substream !== undefined) ||
(temporal !== null && temporal !== undefined)
) {
if (!simulcastStarted) {
simulcastStarted = true;
addSimulcastButtons(msg["videocodec"] === "vp8");
}
// We just received notice that there's been a switch, update the buttons
updateSimulcastButtons(substream, temporal);
}
},
// eslint-disable-next-line no-unused-vars
onlocaltrack: function (track, on) {
// We ignore the stream we got here, we're using the static video to render it
if (
echotest.webrtcStuff.pc.iceConnectionState !== "completed" &&
echotest.webrtcStuff.pc.iceConnectionState !== "connected"
) {
$("#videoleft")
.parent()
.block({
message: "Publishing...",
css: {
border: "none",
backgroundColor: "transparent",
color: "white",
},
});
}
},
onremotetrack: function (track, mid, on, metadata) {
Janus.debug(
"Remote track (mid=" +
mid +
") " +
(on ? "added" : "removed") +
(metadata ? " (" + metadata.reason + ") " : "") +
":",
track
);
if (!on) {
// Track removed, get rid of the stream and the rendering
$("#peervideo" + mid).remove();
if (track.kind === "video") {
remoteVideos--;
if (remoteVideos === 0) {
// No video, at least for now: show a placeholder
if ($("#videoright .no-video-container").length === 0) {
$("#videoright").append(
'
' +
'' +
'No remote video available' +
"
"
);
}
}
}
delete remoteTracks[mid];
return;
}
// If we're here, a new track was added
$("#spinner").remove();
let addButtons = false;
if (
$("#videoright audio").length === 0 &&
$("#videoright video").length === 0
) {
addButtons = true;
$("#videos").removeClass("hide");
}
if (track.kind === "audio") {
// New audio track: create a stream out of it, and use a hidden
