+
+
+
+
+
+ +
+
+
+
diff --git a/html/e2etest.js b/html/e2etest.js
new file mode 100644
index 0000000000..41ebb489c6
--- /dev/null
+++ b/html/e2etest.js
@@ -0,0 +1,652 @@
+// We make use of this 'server' variable to provide the address of the
+// REST Janus API. By default, in this example we assume that Janus is
+// co-located with the web server hosting the HTML pages but listening
+// on a different port (8088, the default for HTTP in Janus), which is
+// why we make use of the 'window.location.hostname' base address. Since
+// Janus can also do HTTPS, and considering we don't really want to make
+// use of HTTP for Janus if your demos are served on HTTPS, we also rely
+// on the 'window.location.protocol' prefix to build the variable, in
+// particular to also change the port used to contact Janus (8088 for
+// HTTP and 8089 for HTTPS, if enabled).
+// In case you place Janus behind an Apache frontend (as we did on the
+// online demos at http://janus.conf.meetecho.com) you can just use a
+// relative path for the variable, e.g.:
+//
+// var server = "/janus";
+//
+// which will take care of this on its own.
+//
+//
+// If you want to use the WebSockets frontend to Janus, instead, you'll
+// have to pass a different kind of address, e.g.:
+//
+// var server = "ws://" + window.location.hostname + ":8188";
+//
+// Of course this assumes that support for WebSockets has been built in
+// when compiling the server. WebSockets support has not been tested
+// as much as the REST API, so handle with care!
+//
+//
+// If you have multiple options available, and want to let the library
+// autodetect the best way to contact your server (or pool of servers),
+// you can also pass an array of servers, e.g., to provide alternative
+// means of access (e.g., try WebSockets first and, if that fails, fall
+// back to plain HTTP) or just have failover servers:
+//
+// var server = [
+// "ws://" + window.location.hostname + ":8188",
+// "/janus"
+// ];
+//
+// This will tell the library to try connecting to each of the servers
+// in the presented order. The first working server will be used for
+// the whole session.
+//
+var server = null;
+if(window.location.protocol === 'http:')
+ server = "http://" + window.location.hostname + ":8088/janus";
+else
+ server = "https://" + window.location.hostname + ":8089/janus";
+
+var janus = null;
+var echotest = null;
+var opaqueId = "echotest-"+Janus.randomString(12);
+
+var bitrateTimer = null;
+var spinner = null;
+
+var audioenabled = false;
+var videoenabled = false;
+
+var doSimulcast = (getQueryStringValue("simulcast") === "yes" || getQueryStringValue("simulcast") === "true");
+var doSimulcast2 = (getQueryStringValue("simulcast2") === "yes" || getQueryStringValue("simulcast2") === "true");
+var acodec = (getQueryStringValue("acodec") !== "" ? getQueryStringValue("acodec") : null);
+var vcodec = (getQueryStringValue("vcodec") !== "" ? getQueryStringValue("vcodec") : null);
+var simulcastStarted = false;
+
+$(document).ready(function() {
+ // 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;
+ }
+ // Make sure Insertable Streams are supported too
+ if(!RTCRtpSender.prototype.createEncodedAudioStreams ||
+ !RTCRtpSender.prototype.createEncodedVideoStreams) {
+ bootbox.alert("Insertable Streams not supported by this browser... ");
+ return;
+ }
+ // Create session
+ janus = new Janus(
+ {
+ server: server,
+ // No "iceServers" is provided, meaning janus.js will use a default STUN server
+ // Here are some examples of how an iceServers field may look like to support TURN
+ // iceServers: [{urls: "turn:yourturnserver.com:3478", username: "janususer", credential: "januspwd"}],
+ // iceServers: [{urls: "turn:yourturnserver.com:443?transport=tcp", username: "janususer", credential: "januspwd"}],
+ // iceServers: [{urls: "turns:yourturnserver.com:443?transport=tcp", username: "janususer", credential: "januspwd"}],
+ // 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() + ")");
+ $('#start').removeAttr('disabled').html("Stop")
+ .click(function() {
+ $(this).attr('disabled', true);
+ if(bitrateTimer)
+ clearInterval(bitrateTimer);
+ bitrateTimer = null;
+ janus.destroy();
+ });
+ // Before starting, we prompt for a secret
+ promptCryptoKey();
+ },
+ 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: '
+
+
+
+
+
+
+ Plugin Demo: End-to-end Encryption + +
+
+
+
+
+
+
+
+
+ Demo details
+This is a variant of the Echo Test demo: everything is exactly + the same in term of available controls, features, and the like, with + the substantial difference that it shows how you can configure an + end-to-end encryption context using the recently introduced + Insertable Streams.
+Specifically, this demo will prompt for a secret, and then use the same transform functions as + this official demo + to encrypt the media: this means Janus will NOT have access to the media, but + will still be able to pass the packets to the EchoTest plugin and send them + back, thus ensuring an end-to-end encryption of the content. In this context, + the same page that encrypted the media will also decrypt it, which means + that if you see both local and remote video, then it's working as expected. + You'll probably want to then experiment with this feature by playing with + other plugins as well, e.g., the VideoRoom, for E2E-encrypted conferences.
+Notice that at the time of writing, only video can be end-to-end encrypted, + and not audio. More importantly, at the moment this will only work if you're + using a recent of Chrome version that has been started either with the following flag:
+--enable-experimental-web-platform-features --force-fieldtrials=WebRTC-GenericDescriptorAdvertised/Enabled/Press the Start button above to launch the demo.
+ +
' +
+ '' +
+ 'No webcam available' +
+ '
');
+ }
+ } else {
+ $('#videoleft .no-video-container').remove();
+ $('#myvideo').removeClass('hide').show();
+ }
+ },
+ onremotestream: function(stream) {
+ Janus.debug(" ::: Got a remote stream :::", stream);
+ var addButtons = false;
+ if($('#peervideo').length === 0) {
+ addButtons = true;
+ $('#videos').removeClass('hide').show();
+ $('#videoright').append('');
+ // Show the video, hide the spinner and show the resolution when we get a playing event
+ $("#peervideo").bind("playing", function () {
+ $('#waitingvideo').remove();
+ if(this.videoWidth)
+ $('#peervideo').removeClass('hide').show();
+ if(spinner !== null && spinner !== undefined)
+ spinner.stop();
+ spinner = null;
+ var width = this.videoWidth;
+ var height = this.videoHeight;
+ $('#curres').removeClass('hide').text(width+'x'+height).show();
+ });
+ }
+ Janus.attachMediaStream($('#peervideo').get(0), stream);
+ var videoTracks = stream.getVideoTracks();
+ if(!videoTracks || videoTracks.length === 0) {
+ // No remote video
+ $('#peervideo').hide();
+ if($('#videoright .no-video-container').length === 0) {
+ $('#videoright').append(
+ '' +
+ '' +
+ 'No remote video available' +
+ '
');
+ }
+ } else {
+ $('#videoright .no-video-container').remove();
+ $('#peervideo').removeClass('hide').show();
+ }
+ if(!addButtons)
+ return;
+ // Enable audio/video buttons and bitrate limiter
+ audioenabled = true;
+ videoenabled = true;
+ $('#toggleaudio').click(
+ function() {
+ audioenabled = !audioenabled;
+ if(audioenabled)
+ $('#toggleaudio').html("Disable audio").removeClass("btn-success").addClass("btn-danger");
+ else
+ $('#toggleaudio').html("Enable audio").removeClass("btn-danger").addClass("btn-success");
+ echotest.send({ message: { audio: audioenabled }});
+ });
+ $('#togglevideo').click(
+ function() {
+ videoenabled = !videoenabled;
+ if(videoenabled)
+ $('#togglevideo').html("Disable video").removeClass("btn-success").addClass("btn-danger");
+ else
+ $('#togglevideo').html("Enable video").removeClass("btn-danger").addClass("btn-success");
+ echotest.send({ message: { video: videoenabled }});
+ });
+ $('#toggleaudio').parent().removeClass('hide').show();
+ $('#bitrate a').click(function() {
+ var id = $(this).attr("id");
+ var bitrate = parseInt(id)*1000;
+ if(bitrate === 0) {
+ Janus.log("Not limiting bandwidth via REMB");
+ } else {
+ Janus.log("Capping bandwidth to " + bitrate + " via REMB");
+ }
+ $('#bitrateset').html($(this).html() + '').parent().removeClass('open');
+ echotest.send({ message: { bitrate: bitrate }});
+ return false;
+ });
+ if(Janus.webRTCAdapter.browserDetails.browser === "chrome" || Janus.webRTCAdapter.browserDetails.browser === "firefox" ||
+ Janus.webRTCAdapter.browserDetails.browser === "safari") {
+ $('#curbitrate').removeClass('hide').show();
+ bitrateTimer = setInterval(function() {
+ // Display updated bitrate, if supported
+ var bitrate = echotest.getBitrate();
+ $('#curbitrate').text(bitrate);
+ // Check if the resolution changed too
+ var width = $("#peervideo").get(0).videoWidth;
+ var height = $("#peervideo").get(0).videoHeight;
+ if(width > 0 && height > 0)
+ $('#curres').removeClass('hide').text(width+'x'+height).show();
+ }, 1000);
+ }
+ },
+ ondataopen: function(data) {
+ Janus.log("The DataChannel is available!");
+ $('#videos').removeClass('hide').show();
+ $('#datasend').removeAttr('disabled');
+ },
+ ondata: function(data) {
+ Janus.debug("We got data from the DataChannel!", data);
+ $('#datarecv').val(data);
+ },
+ oncleanup: function() {
+ Janus.log(" ::: Got a cleanup notification :::");
+ if(spinner)
+ spinner.stop();
+ spinner = null;
+ if(bitrateTimer)
+ clearInterval(bitrateTimer);
+ bitrateTimer = null;
+ $('#myvideo').remove();
+ $('#waitingvideo').remove();
+ $("#videoleft").parent().unblock();
+ $('#peervideo').remove();
+ $('#toggleaudio').attr('disabled', true);
+ $('#togglevideo').attr('disabled', true);
+ $('#bitrate').attr('disabled', true);
+ $('#curbitrate').hide();
+ $('#curres').hide();
+ $('#datasend').attr('disabled', true);
+ simulcastStarted = false;
+ $('#simulcast').remove();
+ }
+ });
+ },
+ error: function(error) {
+ Janus.error(error);
+ bootbox.alert(error, function() {
+ window.location.reload();
+ });
+ },
+ destroyed: function() {
+ window.location.reload();
+ }
+ });
+ });
+ }});
+});
+
+function checkEnter(event) {
+ var theCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
+ if(theCode == 13) {
+ sendData();
+ return false;
+ } else {
+ return true;
+ }
+}
+
+function sendData() {
+ var data = $('#datasend').val();
+ if(data === "") {
+ bootbox.alert('Insert a message to send on the DataChannel');
+ return;
+ }
+ echotest.data({
+ text: data,
+ error: function(reason) { bootbox.alert(reason); },
+ success: function() { $('#datasend').val(''); },
+ });
+}
+
+// Helper to parse query string
+function getQueryStringValue(name) {
+ name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+ var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+ results = regex.exec(location.search);
+ return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+}
+
+// Helpers to create Simulcast-related UI, if enabled
+function addSimulcastButtons(temporal) {
+ $('#curres').parent().append(
+ '' +
+ '
');
+ // Enable the simulcast selection buttons
+ $('#sl-0').removeClass('btn-primary btn-success').addClass('btn-primary')
+ .unbind('click').click(function() {
+ toastr.info("Switching simulcast substream, wait for it... (lower quality)", null, {timeOut: 2000});
+ if(!$('#sl-2').hasClass('btn-success'))
+ $('#sl-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+ if(!$('#sl-1').hasClass('btn-success'))
+ $('#sl-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+ $('#sl-0').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+ echotest.send({ message: { substream: 0 }});
+ });
+ $('#sl-1').removeClass('btn-primary btn-success').addClass('btn-primary')
+ .unbind('click').click(function() {
+ toastr.info("Switching simulcast substream, wait for it... (normal quality)", null, {timeOut: 2000});
+ if(!$('#sl-2').hasClass('btn-success'))
+ $('#sl-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+ $('#sl-1').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+ if(!$('#sl-0').hasClass('btn-success'))
+ $('#sl-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+ echotest.send({ message: { substream: 1 }});
+ });
+ $('#sl-2').removeClass('btn-primary btn-success').addClass('btn-primary')
+ .unbind('click').click(function() {
+ toastr.info("Switching simulcast substream, wait for it... (higher quality)", null, {timeOut: 2000});
+ $('#sl-2').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+ if(!$('#sl-1').hasClass('btn-success'))
+ $('#sl-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+ if(!$('#sl-0').hasClass('btn-success'))
+ $('#sl-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+ echotest.send({ message: { substream: 2 }});
+ });
+ if(!temporal) // No temporal layer support
+ return;
+ $('#tl-0').parent().removeClass('hide');
+ $('#tl-0').removeClass('btn-primary btn-success').addClass('btn-primary')
+ .unbind('click').click(function() {
+ toastr.info("Capping simulcast temporal layer, wait for it... (lowest FPS)", null, {timeOut: 2000});
+ if(!$('#tl-2').hasClass('btn-success'))
+ $('#tl-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+ if(!$('#tl-1').hasClass('btn-success'))
+ $('#tl-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+ $('#tl-0').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+ echotest.send({ message: { temporal: 0 }});
+ });
+ $('#tl-1').removeClass('btn-primary btn-success').addClass('btn-primary')
+ .unbind('click').click(function() {
+ toastr.info("Capping simulcast temporal layer, wait for it... (medium FPS)", null, {timeOut: 2000});
+ if(!$('#tl-2').hasClass('btn-success'))
+ $('#tl-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+ $('#tl-1').removeClass('btn-primary btn-info').addClass('btn-info');
+ if(!$('#tl-0').hasClass('btn-success'))
+ $('#tl-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+ echotest.send({ message: { temporal: 1 }});
+ });
+ $('#tl-2').removeClass('btn-primary btn-success').addClass('btn-primary')
+ .unbind('click').click(function() {
+ toastr.info("Capping simulcast temporal layer, wait for it... (highest FPS)", null, {timeOut: 2000});
+ $('#tl-2').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+ if(!$('#tl-1').hasClass('btn-success'))
+ $('#tl-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+ if(!$('#tl-0').hasClass('btn-success'))
+ $('#tl-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+ echotest.send({ message: { temporal: 2 }});
+ });
+}
+
+function updateSimulcastButtons(substream, temporal) {
+ // Check the substream
+ if(substream === 0) {
+ toastr.success("Switched simulcast substream! (lower quality)", null, {timeOut: 2000});
+ $('#sl-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+ $('#sl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+ $('#sl-0').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+ } else if(substream === 1) {
+ toastr.success("Switched simulcast substream! (normal quality)", null, {timeOut: 2000});
+ $('#sl-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+ $('#sl-1').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+ $('#sl-0').removeClass('btn-primary btn-success').addClass('btn-primary');
+ } else if(substream === 2) {
+ toastr.success("Switched simulcast substream! (higher quality)", null, {timeOut: 2000});
+ $('#sl-2').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+ $('#sl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+ $('#sl-0').removeClass('btn-primary btn-success').addClass('btn-primary');
+ }
+ // Check the temporal layer
+ if(temporal === 0) {
+ toastr.success("Capped simulcast temporal layer! (lowest FPS)", null, {timeOut: 2000});
+ $('#tl-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+ $('#tl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+ $('#tl-0').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+ } else if(temporal === 1) {
+ toastr.success("Capped simulcast temporal layer! (medium FPS)", null, {timeOut: 2000});
+ $('#tl-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+ $('#tl-1').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+ $('#tl-0').removeClass('btn-primary btn-success').addClass('btn-primary');
+ } else if(temporal === 2) {
+ toastr.success("Capped simulcast temporal layer! (highest FPS)", null, {timeOut: 2000});
+ $('#tl-2').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+ $('#tl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+ $('#tl-0').removeClass('btn-primary btn-success').addClass('btn-primary');
+ }
+}
+
+// Custom functions to use with Insertable streams: the senderTransform
+// function is what we use to "encrypt" the media we send, while the
+// receiverTransform is what we use to "decrypt" the media we receive.
+// Both functions will use a secret that we'll prompt for when opening
+// the page, meaning that, ideally, we'll be the only one able to decrypt
+// it: Janus will not have access to the media. In a scenario involving
+// multiple participants (e.g., a video call or conference), to use these
+// same functions you'll want to distribute the secret among all participants
+// using an out of band mechanism, so that they can encrypt and decrypt
+// the media and keep Janus out of the loop. Notice that these functions
+// are just an example, and are basically exact copies from this demo:
+// https://github.com/webrtc/samples/blob/gh-pages/src/content/peerconnection/endtoend-encryption/js/main.js
+// That said, you're free (or actually, encouraged) to try and use other
+// custom, and more advanced, transform functions as well (e.g., SFrames).
+var currentCryptoKey = null;
+var currentKeyIdentifier = 0;
+function promptCryptoKey() {
+ bootbox.prompt("Insert crypto key (e.g., 'mysecret') to use", function(result) {
+ if(!result || result === "") {
+ promptCryptoKey();
+ return;
+ }
+ // Take note of the secret
+ currentCryptoKey = result;
+ currentKeyIdentifier++;
+ // Negotiate the WebRTC PeerConnection, now (clone of EchoTest demo code)
+ Janus.debug("Trying a createOffer too (audio/video sendrecv)");
+ echotest.createOffer(
+ {
+ // No media provided: by default, it's sendrecv for audio and video
+ media: { data: true }, // Let's negotiate data channels as well
+ // If you want to test simulcasting (Chrome and Firefox only), then
+ // pass a ?simulcast=true when opening this demo page: it will turn
+ // the following 'simulcast' property to pass to janus.js to true.
+ simulcast: doSimulcast,
+ simulcast2: doSimulcast2,
+ // Since we want to use Insertable Streams,
+ // we specify the transform functions to use
+ senderTransforms: senderTransforms,
+ receiverTransforms: receiverTransforms,
+ success: function(jsep) {
+ Janus.debug("Got SDP!", jsep);
+ var body = { audio: true, video: true, data: 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;
+ echotest.send({ message: body, jsep: jsep });
+ },
+ error: function(error) {
+ Janus.error("WebRTC error:", error);
+ bootbox.alert("WebRTC error... " + error.message);
+ }
+ });
+ });
+}
+var senderTransforms = {}, receiverTransforms = {};
+for(var m of ["audio", "video"]) {
+ senderTransforms[m] = new TransformStream({
+ start() {
+ // Called on startup.
+ console.log("[Sender transform)] Startup");
+ },
+ transform(chunk, controller) {
+ // Copy of the above mentioned demo's encodeFunction()
+ const view = new DataView(chunk.data);
+ const newData = new ArrayBuffer(chunk.data.byteLength + 5);
+ const newView = new DataView(newData);
+ for(let i=0; i<10; ++i) {
+ newView.setInt8(i, view.getInt8(i));
+ }
+ // This is a bitwise xor of the key with the payload. This is not strong encryption, just a demo.
+ for(let i=10; i' +
+ '
' +
+ ' ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '
' +
+ ' ' +
+ ' ' +
+ '
' +
+ '