From 37e08f3ffa4e8b97c80fa2d0bfd20f6c51ce3c9c Mon Sep 17 00:00:00 2001
From: Lorenzo Miniero <lminiero@gmail.com>
Date: Mon, 8 Jun 2020 20:00:04 +0200
Subject: [PATCH] Updated demos and janus.js to use tracks instead of streams

---
 conf/janus.plugin.streaming.jcfg.sample.in |   1 +
 html/audiobridgetest.js                    |  40 +-
 html/demos.html                            |   4 +
 html/devicetest.js                         | 255 ++++--
 html/e2etest.js                            | 234 +++--
 html/echotest.js                           | 234 +++--
 html/janus.js                              | 359 +++++---
 html/multiopus.js                          | 232 +++--
 html/mvideoroomtest.html                   | 159 ++++
 html/mvideoroomtest.js                     | 992 +++++++++++++++++++++
 html/navbar.html                           |   1 +
 html/nosiptest.js                          | 252 +++---
 html/recordplaytest.js                     | 192 ++--
 html/screensharingtest.js                  | 179 +++-
 html/siptest.js                            | 420 ++++++---
 html/streamingtest.html                    |  12 +-
 html/streamingtest.js                      | 608 ++++++++-----
 html/videocalltest.js                      | 248 ++++--
 html/videoroomtest.html                    |   6 +
 html/videoroomtest.js                      | 355 +++++---
 html/voicemailtest.js                      |   4 +-
 html/vp9svctest.js                         | 348 +++++---
 mainpage.dox                               |  37 +-
 23 files changed, 3804 insertions(+), 1368 deletions(-)
 create mode 100644 html/mvideoroomtest.html
 create mode 100644 html/mvideoroomtest.js

diff --git a/conf/janus.plugin.streaming.jcfg.sample.in b/conf/janus.plugin.streaming.jcfg.sample.in
index f31d1b396a..f93bd17841 100644
--- a/conf/janus.plugin.streaming.jcfg.sample.in
+++ b/conf/janus.plugin.streaming.jcfg.sample.in
@@ -150,6 +150,7 @@ multistream-test: {
 	type = "rtp"
 	id = 123
 	description = "Multistream test (1 audio, 2 video)"
+	metadata = "This is an example of a multistream mountpoint: you'll get an audio stream and two video feeds"
 	media = (
 		{
 			type = "audio"
diff --git a/html/audiobridgetest.js b/html/audiobridgetest.js
index 013cc1ae00..161a4c4f14 100644
--- a/html/audiobridgetest.js
+++ b/html/audiobridgetest.js
@@ -52,6 +52,7 @@ var janus = null;
 var mixertest = null;
 var opaqueId = "audiobridgetest-"+Janus.randomString(12);
 
+var remoteStream = null;
 var spinner = null;
 
 var myroom = 1234;	// Demo room
@@ -123,8 +124,8 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									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");
@@ -276,23 +277,40 @@ $(document).ready(function() {
 										mixertest.handleRemoteJsep({ jsep: jsep });
 									}
 								},
-								onlocalstream: function(stream) {
-									Janus.debug(" ::: Got a local stream :::", stream);
+								onlocaltrack: function(track, on) {
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
 									// We're not going to attach the local audio stream
 									$('#audiojoin').hide();
 									$('#room').removeClass('hide').show();
 									$('#participant').removeClass('hide').html(myusername).show();
 								},
-								onremotestream: function(stream) {
+								onremotetrack: function(track, mid, on) {
+									Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+									if(remoteStream || track.kind !== "audio")
+										return;
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										if(remoteStream) {
+											try {
+												var tracks = remoteStream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										remoteStream = null;
+										$('#roomaudio').remove();
+										return;
+									}
+									remoteStream = new MediaStream();
+									remoteStream.addTrack(track.clone());
 									$('#room').removeClass('hide').show();
-									var addButtons = false;
 									if($('#roomaudio').length === 0) {
-										addButtons = true;
 										$('#mixedaudio').append('<audio class="rounded centered" id="roomaudio" width="100%" height="100%" autoplay/>');
 									}
-									Janus.attachMediaStream($('#roomaudio').get(0), stream);
-									if(!addButtons)
-										return;
+									Janus.attachMediaStream($('#roomaudio').get(0), remoteStream);
 									// Mute button
 									audioenabled = true;
 									$('#toggleaudio').click(
@@ -304,7 +322,6 @@ $(document).ready(function() {
 												$('#toggleaudio').html("Unmute").removeClass("btn-danger").addClass("btn-success");
 											mixertest.send({ message: { request: "configure", muted: !audioenabled }});
 										}).removeClass('hide').show();
-
 								},
 								oncleanup: function() {
 									webrtcUp = false;
@@ -313,6 +330,7 @@ $(document).ready(function() {
 									$('#list').empty();
 									$('#mixedaudio').empty();
 									$('#room').hide();
+									remoteStream = null;
 								}
 							});
 					},
diff --git a/html/demos.html b/html/demos.html
index 63763a3e07..472884d595 100644
--- a/html/demos.html
+++ b/html/demos.html
@@ -56,6 +56,10 @@ <h1>Janus WebRTC Server: Demo Tests</h1>
 					<td><a href="videoroomtest.html">Video Room</a></td>
 					<td>A videoconferencing demo, allowing you to join a video room with up to six users.</td>
 				</tr>
+				<tr>
+					<td><a href="mvideoroomtest.html">Video Room (multistream)</a></td>
+					<td>The same videoconferencing demo, but using one PeerConnection to receive multiple streams.</td>
+				</tr>
 				<tr>
 					<td><a href="audiobridgetest.html">Audio Room</a></td>
 					<td>An audio mixing/bridge demo, allowing you join an Audio Room room.</td>
diff --git a/html/devicetest.js b/html/devicetest.js
index e0dcf1ac7a..a729e23c18 100644
--- a/html/devicetest.js
+++ b/html/devicetest.js
@@ -53,6 +53,8 @@ var echotest = null;
 var opaqueId = "devicetest-"+Janus.randomString(12);
 
 var firstTime = true;
+var localTracks = {}, localVideos = 0,
+	remoteTracks = {}, remoteVideos = 0;
 var bitrateTimer = null;
 var spinner = null;
 
@@ -263,16 +265,16 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									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) {
+								slowLink: function(uplink, lost, mid) {
 									Janus.warn("Janus reports problems " + (uplink ? "sending" : "receiving") +
-										" packets on this PeerConnection (" + lost + " lost packets)");
+										" packets on mid " + mid + " (" + lost + " lost packets)");
 								},
 								onmessage: function(msg, jsep) {
 									Janus.debug(" ::: Got a message :::", msg);
@@ -288,9 +290,8 @@ $(document).ready(function() {
 											if(spinner)
 												spinner.stop();
 											spinner = null;
-											$('#myvideo').remove();
+											$('video').remove();
 											$('#waitingvideo').remove();
-											$('#peervideo').remove();
 											audioenabled = true;
 											$('#toggleaudio').attr('disabled', true).html("Disable audio").removeClass("btn-success").addClass("btn-danger");
 											videoenabled = true;
@@ -325,96 +326,179 @@ $(document).ready(function() {
 										updateSimulcastButtons(substream, temporal);
 									}
 								},
-								onlocalstream: function(stream) {
-									Janus.debug(" ::: Got a local stream :::", stream);
-									if($('#myvideo').length === 0) {
-										$('#videos').removeClass('hide').show();
-										$('#videoleft').append('<video class="rounded centered" id="myvideo" width=320 height=240 autoplay playsinline muted="muted"/>');
-									}
-									Janus.attachMediaStream($('#myvideo').get(0), stream);
-									$("#myvideo").get(0).muted = "muted";
-									if(echotest.webrtcStuff.pc.iceConnectionState !== "completed" &&
-											echotest.webrtcStuff.pc.iceConnectionState !== "connected") {
-										// No remote video yet
-										$('#videoright').append('<video class="rounded centered" id="waitingvideo" width=320 height=240 />');
-										if(spinner == null) {
-											var target = document.getElementById('videoright');
-											spinner = new Spinner({top:100}).spin(target);
-										} else {
-											spinner.spin();
+								onlocaltrack: function(track, on) {
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
 										}
-										var videoTracks = stream.getVideoTracks();
-										if(!videoTracks || videoTracks.length === 0) {
-											// No webcam
-											$('#myvideo').hide();
-											$('#videoleft').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No webcam available</span>' +
-												'</div>');
+										if(track.kind === "video") {
+											$('#myvideo' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videoleft .no-video-container').length === 0) {
+													$('#videoleft').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
 										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
+									if($('#videoleft video').length === 0) {
+										$('#videos').removeClass('hide').show();
 									}
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No webcam
-										$('#myvideo').hide();
-										if($('#videoleft .no-video-container').length === 0) {
-											$('#videoleft').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No webcam available</span>' +
-												'</div>');
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoleft .no-video-container').length === 0) {
+												$('#videoleft').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
 										}
 									} else {
+										// New video track: create a stream out of it
+										localVideos++;
 										$('#videoleft .no-video-container').remove();
-										$('#myvideo').removeClass('hide').show();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("Created local stream:", stream);
+										$('#videoleft').append('<video class="rounded centered" id="myvideo' + trackId + '" width=320 height=240 autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#myvideo' + trackId).get(0), stream);
+									}
+									if(echotest.webrtcStuff.pc.iceConnectionState !== "completed" &&
+											echotest.webrtcStuff.pc.iceConnectionState !== "connected") {
+										$("#videoleft").parent().block({
+											message: '<b>Publishing...</b>',
+											css: {
+												border: 'none',
+												backgroundColor: 'transparent',
+												color: 'white'
+											}
+										});
 									}
 									// Reset devices controls
 									$('#audio-device, #video-device').removeAttr('disabled');
 									$('#change-devices').removeAttr('disabled');
 								},
-								onremotestream: function(stream) {
-									Janus.debug(" ::: Got a remote stream :::", stream);
+								onremotetrack: function(track, mid, on) {
+									Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = remoteTracks[mid];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										$('#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(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No remote video available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete remoteTracks[mid];
+										return;
+									}
+									// If we're here, a new track was added
 									var addButtons = false;
-									if($('#peervideo').length === 0) {
+									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;
 										$('#videos').removeClass('hide').show();
-										$('#videoright').append('<video class="rounded centered hide" id="peervideo" width=320 height=240 autoplay playsinline/>');
-										// 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)
-												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(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No remote video available</span>' +
-												'</div>');
+									if(track.kind === "audio") {
+										// New audio track: create a stream out of it, and use a hidden <audio> element
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote audio stream:", stream);
+										if($('#peervideo'+mid).length === 0)
+											$('#videoright').append('<audio class="hide" id="peervideo' + mid + '" autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
+										if(remoteVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoright .no-video-container').length === 0) {
+												$('#videoright').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
 										}
 									} else {
+										// New video track: create a stream out of it
+										remoteVideos++;
 										$('#videoright .no-video-container').remove();
-										$('#peervideo').removeClass('hide').show();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote video stream:", stream);
+										if($('#peervideo'+mid).length === 0)
+											$('#videoright').append('<video class="rounded centered" id="peervideo' + mid + '" width=320 height=240 autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
+										// FIXME we'll need this for additional videos too
+										if(!bitrateTimer) {
+											$('#curbitrate').removeClass('hide').show();
+											bitrateTimer = setInterval(function() {
+												if(!$("#peervideo" + mid + ' video').get(0))
+													return;
+												// Display updated bitrate, if supported
+												var bitrate = echotest.getBitrate();
+												//~ Janus.debug("Current bitrate is " + echotest.getBitrate());
+												$('#curbitrate').text(bitrate);
+												// Check if the resolution changed too
+												var width = $("#peervideo" + mid).get(0).videoWidth;
+												var height = $("#peervideo" + mid).get(0).videoHeight;
+												if(width > 0 && height > 0)
+													$('#curres').removeClass('hide').text(width+'x'+height).show();
+											}, 1000);
+										}
 									}
 									if(!addButtons)
 										return;
 									// Enable audio/video buttons and bitrate limiter
 									audioenabled = true;
 									videoenabled = true;
-									$('#toggleaudio').removeAttr('disabled').click(
+									$('#toggleaudio').click(
 										function() {
 											audioenabled = !audioenabled;
 											if(audioenabled)
@@ -423,7 +507,7 @@ $(document).ready(function() {
 												$('#toggleaudio').html("Enable audio").removeClass("btn-danger").addClass("btn-success");
 											echotest.send({ message: { audio: audioenabled }});
 										});
-									$('#togglevideo').removeAttr('disabled').click(
+									$('#togglevideo').click(
 										function() {
 											videoenabled = !videoenabled;
 											if(videoenabled)
@@ -433,7 +517,7 @@ $(document).ready(function() {
 											echotest.send({ message: { video: videoenabled }});
 										});
 									$('#toggleaudio').parent().removeClass('hide').show();
-									$('#bitrate a').removeAttr('disabled').click(function() {
+									$('#bitrate a').click(function() {
 										var id = $(this).attr("id");
 										var bitrate = parseInt(id)*1000;
 										if(bitrate === 0) {
@@ -445,20 +529,6 @@ $(document).ready(function() {
 										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!");
@@ -474,10 +544,11 @@ $(document).ready(function() {
 									if(spinner)
 										spinner.stop();
 									spinner = null;
-									$('#myvideo').remove();
+									$('video').remove();
 									$('#waitingvideo').remove();
-									$('#peervideo').remove();
 									$('.no-video-container').remove();
+									$("#videoleft").empty().parent().unblock();
+									$('#videoright').empty();
 									audioenabled = true;
 									$('#toggleaudio').attr('disabled', true).html("Disable audio").removeClass("btn-success").addClass("btn-danger");
 									videoenabled = true;
@@ -494,6 +565,10 @@ $(document).ready(function() {
 									$('#outputdeviceset').html('Output device<span class="caret"></span>');
 									simulcastStarted = false;
 									$('#simulcast').remove();
+									localTracks = {};
+									localVideos = 0;
+									remoteTracks = {};
+									remoteVideos = 0;
 								}
 							});
 					},
diff --git a/html/e2etest.js b/html/e2etest.js
index 41ebb489c6..2f54291ced 100644
--- a/html/e2etest.js
+++ b/html/e2etest.js
@@ -52,6 +52,8 @@ var janus = null;
 var echotest = null;
 var opaqueId = "echotest-"+Janus.randomString(12);
 
+var localTracks = {}, localVideos = 0,
+	remoteTracks = {}, remoteVideos = 0;
 var bitrateTimer = null;
 var spinner = null;
 
@@ -141,16 +143,16 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									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) {
+								slowLink: function(uplink, lost, mid) {
 									Janus.warn("Janus reports problems " + (uplink ? "sending" : "receiving") +
-										" packets on this PeerConnection (" + lost + " lost packets)");
+										" packets on mid " + mid + " (" + lost + " lost packets)");
 								},
 								onmessage: function(msg, jsep) {
 									Janus.debug(" ::: Got a message :::", msg);
@@ -166,9 +168,8 @@ $(document).ready(function() {
 											if(spinner)
 												spinner.stop();
 											spinner = null;
-											$('#myvideo').remove();
+											$('video').remove();
 											$('#waitingvideo').remove();
-											$('#peervideo').remove();
 											$('#toggleaudio').attr('disabled', true);
 											$('#togglevideo').attr('disabled', true);
 											$('#bitrate').attr('disabled', true);
@@ -196,14 +197,72 @@ $(document).ready(function() {
 										updateSimulcastButtons(substream, temporal);
 									}
 								},
-								onlocalstream: function(stream) {
-									Janus.debug(" ::: Got a local stream :::", stream);
-									if($('#myvideo').length === 0) {
+								onlocaltrack: function(track, on) {
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										if(track.kind === "video") {
+											$('#myvideo' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videoleft .no-video-container').length === 0) {
+													$('#videoleft').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
+									if($('#videoleft video').length === 0) {
 										$('#videos').removeClass('hide').show();
-										$('#videoleft').append('<video class="rounded centered" id="myvideo" width=320 height=240 autoplay playsinline muted="muted"/>');
 									}
-									Janus.attachMediaStream($('#myvideo').get(0), stream);
-									$("#myvideo").get(0).muted = "muted";
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoleft .no-video-container').length === 0) {
+												$('#videoleft').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
+										}
+									} else {
+										// New video track: create a stream out of it
+										localVideos++;
+										$('#videoleft .no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("Created local stream:", stream);
+										$('#videoleft').append('<video class="rounded centered" id="myvideo' + trackId + '" width=320 height=240 autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#myvideo' + trackId).get(0), stream);
+									}
 									if(echotest.webrtcStuff.pc.iceConnectionState !== "completed" &&
 											echotest.webrtcStuff.pc.iceConnectionState !== "connected") {
 										$("#videoleft").parent().block({
@@ -214,66 +273,93 @@ $(document).ready(function() {
 												color: 'white'
 											}
 										});
-										// No remote video yet
-										$('#videoright').append('<video class="rounded centered" id="waitingvideo" width=320 height=240 />');
-										if(spinner == null) {
-											var target = document.getElementById('videoright');
-											spinner = new Spinner({top:100}).spin(target);
-										} else {
-											spinner.spin();
-										}
 									}
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No webcam
-										$('#myvideo').hide();
-										if($('#videoleft .no-video-container').length === 0) {
-											$('#videoleft').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No webcam available</span>' +
-												'</div>');
+								},
+								onremotetrack: function(track, mid, on) {
+									Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = remoteTracks[mid];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
 										}
-									} else {
-										$('#videoleft .no-video-container').remove();
-										$('#myvideo').removeClass('hide').show();
+										$('#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(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No remote video available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete remoteTracks[mid];
+										return;
 									}
-								},
-								onremotestream: function(stream) {
-									Janus.debug(" ::: Got a remote stream :::", stream);
+									// If we're here, a new track was added
 									var addButtons = false;
-									if($('#peervideo').length === 0) {
+									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;
 										$('#videos').removeClass('hide').show();
-										$('#videoright').append('<video class="rounded centered hide" id="peervideo" width=320 height=240 autoplay playsinline/>');
-										// 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(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No remote video available</span>' +
-												'</div>');
+									if(track.kind === "audio") {
+										// New audio track: create a stream out of it, and use a hidden <audio> element
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote audio stream:", stream);
+										if($('#peervideo'+mid).length === 0)
+											$('#videoright').append('<audio class="hide" id="peervideo' + mid + '" autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
+										if(remoteVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoright .no-video-container').length === 0) {
+												$('#videoright').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
 										}
 									} else {
+										// New video track: create a stream out of it
+										remoteVideos++;
 										$('#videoright .no-video-container').remove();
-										$('#peervideo').removeClass('hide').show();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote video stream:", stream);
+										if($('#peervideo'+mid).length === 0)
+											$('#videoright').append('<video class="rounded centered" id="peervideo' + mid + '" width=320 height=240 autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
+										// FIXME we'll need this for additional videos too
+										if(!bitrateTimer) {
+											$('#curbitrate').removeClass('hide').show();
+											bitrateTimer = setInterval(function() {
+												if(!$("#peervideo" + mid + ' video').get(0))
+													return;
+												// Display updated bitrate, if supported
+												var bitrate = echotest.getBitrate();
+												//~ Janus.debug("Current bitrate is " + echotest.getBitrate());
+												$('#curbitrate').text(bitrate);
+												// Check if the resolution changed too
+												var width = $("#peervideo" + mid).get(0).videoWidth;
+												var height = $("#peervideo" + mid).get(0).videoHeight;
+												if(width > 0 && height > 0)
+													$('#curres').removeClass('hide').text(width+'x'+height).show();
+											}, 1000);
+										}
 									}
 									if(!addButtons)
 										return;
@@ -311,20 +397,6 @@ $(document).ready(function() {
 										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!");
@@ -343,10 +415,10 @@ $(document).ready(function() {
 									if(bitrateTimer)
 										clearInterval(bitrateTimer);
 									bitrateTimer = null;
-									$('#myvideo').remove();
+									$('video').remove();
 									$('#waitingvideo').remove();
-									$("#videoleft").parent().unblock();
-									$('#peervideo').remove();
+									$("#videoleft").empty().parent().unblock();
+									$('#videoright').empty();
 									$('#toggleaudio').attr('disabled', true);
 									$('#togglevideo').attr('disabled', true);
 									$('#bitrate').attr('disabled', true);
@@ -355,6 +427,10 @@ $(document).ready(function() {
 									$('#datasend').attr('disabled', true);
 									simulcastStarted = false;
 									$('#simulcast').remove();
+									localTracks = {};
+									localVideos = 0;
+									remoteTracks = {};
+									remoteVideos = 0;
 								}
 							});
 					},
diff --git a/html/echotest.js b/html/echotest.js
index 0492efa815..7f91e92677 100644
--- a/html/echotest.js
+++ b/html/echotest.js
@@ -52,6 +52,8 @@ var janus = null;
 var echotest = null;
 var opaqueId = "echotest-"+Janus.randomString(12);
 
+var localTracks = {}, localVideos = 0,
+	remoteTracks = {}, remoteVideos = 0;
 var bitrateTimer = null;
 var spinner = null;
 
@@ -167,16 +169,16 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									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) {
+								slowLink: function(uplink, lost, mid) {
 									Janus.warn("Janus reports problems " + (uplink ? "sending" : "receiving") +
-										" packets on this PeerConnection (" + lost + " lost packets)");
+										" packets on mid " + mid + " (" + lost + " lost packets)");
 								},
 								onmessage: function(msg, jsep) {
 									Janus.debug(" ::: Got a message :::", msg);
@@ -192,9 +194,8 @@ $(document).ready(function() {
 											if(spinner)
 												spinner.stop();
 											spinner = null;
-											$('#myvideo').remove();
+											$('video').remove();
 											$('#waitingvideo').remove();
-											$('#peervideo').remove();
 											$('#toggleaudio').attr('disabled', true);
 											$('#togglevideo').attr('disabled', true);
 											$('#bitrate').attr('disabled', true);
@@ -220,14 +221,72 @@ $(document).ready(function() {
 										updateSimulcastButtons(substream, temporal);
 									}
 								},
-								onlocalstream: function(stream) {
-									Janus.debug(" ::: Got a local stream :::", stream);
-									if($('#myvideo').length === 0) {
+								onlocaltrack: function(track, on) {
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										if(track.kind === "video") {
+											$('#myvideo' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videoleft .no-video-container').length === 0) {
+													$('#videoleft').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
+									if($('#videoleft video').length === 0) {
 										$('#videos').removeClass('hide').show();
-										$('#videoleft').append('<video class="rounded centered" id="myvideo" width=320 height=240 autoplay playsinline muted="muted"/>');
 									}
-									Janus.attachMediaStream($('#myvideo').get(0), stream);
-									$("#myvideo").get(0).muted = "muted";
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoleft .no-video-container').length === 0) {
+												$('#videoleft').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
+										}
+									} else {
+										// New video track: create a stream out of it
+										localVideos++;
+										$('#videoleft .no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("Created local stream:", stream);
+										$('#videoleft').append('<video class="rounded centered" id="myvideo' + trackId + '" width=320 height=240 autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#myvideo' + trackId).get(0), stream);
+									}
 									if(echotest.webrtcStuff.pc.iceConnectionState !== "completed" &&
 											echotest.webrtcStuff.pc.iceConnectionState !== "connected") {
 										$("#videoleft").parent().block({
@@ -238,66 +297,93 @@ $(document).ready(function() {
 												color: 'white'
 											}
 										});
-										// No remote video yet
-										$('#videoright').append('<video class="rounded centered" id="waitingvideo" width=320 height=240 />');
-										if(spinner == null) {
-											var target = document.getElementById('videoright');
-											spinner = new Spinner({top:100}).spin(target);
-										} else {
-											spinner.spin();
-										}
 									}
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No webcam
-										$('#myvideo').hide();
-										if($('#videoleft .no-video-container').length === 0) {
-											$('#videoleft').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No webcam available</span>' +
-												'</div>');
+								},
+								onremotetrack: function(track, mid, on) {
+									Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = remoteTracks[mid];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
 										}
-									} else {
-										$('#videoleft .no-video-container').remove();
-										$('#myvideo').removeClass('hide').show();
+										$('#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(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No remote video available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete remoteTracks[mid];
+										return;
 									}
-								},
-								onremotestream: function(stream) {
-									Janus.debug(" ::: Got a remote stream :::", stream);
+									// If we're here, a new track was added
 									var addButtons = false;
-									if($('#peervideo').length === 0) {
+									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;
 										$('#videos').removeClass('hide').show();
-										$('#videoright').append('<video class="rounded centered hide" id="peervideo" width=320 height=240 autoplay playsinline/>');
-										// 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)
-												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(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No remote video available</span>' +
-												'</div>');
+									if(track.kind === "audio") {
+										// New audio track: create a stream out of it, and use a hidden <audio> element
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote audio stream:", stream);
+										if($('#peervideo'+mid).length === 0)
+											$('#videoright').append('<audio class="hide" id="peervideo' + mid + '" autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
+										if(remoteVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoright .no-video-container').length === 0) {
+												$('#videoright').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
 										}
 									} else {
+										// New video track: create a stream out of it
+										remoteVideos++;
 										$('#videoright .no-video-container').remove();
-										$('#peervideo').removeClass('hide').show();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote video stream:", stream);
+										if($('#peervideo'+mid).length === 0)
+											$('#videoright').append('<video class="rounded centered" id="peervideo' + mid + '" width=320 height=240 autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
+										// FIXME we'll need this for additional videos too
+										if(!bitrateTimer) {
+											$('#curbitrate').removeClass('hide').show();
+											bitrateTimer = setInterval(function() {
+												if(!$("#peervideo" + mid + ' video').get(0))
+													return;
+												// Display updated bitrate, if supported
+												var bitrate = echotest.getBitrate();
+												//~ Janus.debug("Current bitrate is " + echotest.getBitrate());
+												$('#curbitrate').text(bitrate);
+												// Check if the resolution changed too
+												var width = $("#peervideo" + mid).get(0).videoWidth;
+												var height = $("#peervideo" + mid).get(0).videoHeight;
+												if(width > 0 && height > 0)
+													$('#curres').removeClass('hide').text(width+'x'+height).show();
+											}, 1000);
+										}
 									}
 									if(!addButtons)
 										return;
@@ -335,20 +421,6 @@ $(document).ready(function() {
 										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!");
@@ -367,10 +439,10 @@ $(document).ready(function() {
 									if(bitrateTimer)
 										clearInterval(bitrateTimer);
 									bitrateTimer = null;
-									$('#myvideo').remove();
+									$('video').remove();
 									$('#waitingvideo').remove();
-									$("#videoleft").parent().unblock();
-									$('#peervideo').remove();
+									$("#videoleft").empty().parent().unblock();
+									$('#videoright').empty();
 									$('#toggleaudio').attr('disabled', true);
 									$('#togglevideo').attr('disabled', true);
 									$('#bitrate').attr('disabled', true);
@@ -379,6 +451,10 @@ $(document).ready(function() {
 									$('#datasend').attr('disabled', true);
 									simulcastStarted = false;
 									$('#simulcast').remove();
+									localTracks = {};
+									localVideos = 0;
+									remoteTracks = {};
+									remoteVideos = 0;
 								}
 							});
 					},
diff --git a/html/janus.js b/html/janus.js
index 7e830a0d31..87519c79bb 100644
--- a/html/janus.js
+++ b/html/janus.js
@@ -711,7 +711,7 @@ function Janus(gatewayCallbacks) {
 				Janus.debug("This handle is not attached to this session");
 				return;
 			}
-			pluginHandle.mediaState(json["type"], json["receiving"]);
+			pluginHandle.mediaState(json["type"], json["receiving"], json["mid"]);
 		} else if(json["janus"] === "slowlink") {
 			Janus.debug("Got a slowlink event on session " + sessionId);
 			Janus.debug(json);
@@ -726,7 +726,7 @@ function Janus(gatewayCallbacks) {
 				Janus.debug("This handle is not attached to this session");
 				return;
 			}
-			pluginHandle.slowLink(json["uplink"], json["lost"]);
+			pluginHandle.slowLink(json["uplink"], json["lost"], json["mid"]);
 		} else if(json["janus"] === "error") {
 			// Oops, something wrong happened
 			Janus.error("Ooops: " + json["error"].code + " " + json["error"].reason);	// FIXME
@@ -1074,8 +1074,8 @@ function Janus(gatewayCallbacks) {
 		callbacks.webrtcState = (typeof callbacks.webrtcState == "function") ? callbacks.webrtcState : Janus.noop;
 		callbacks.slowLink = (typeof callbacks.slowLink == "function") ? callbacks.slowLink : Janus.noop;
 		callbacks.onmessage = (typeof callbacks.onmessage == "function") ? callbacks.onmessage : Janus.noop;
-		callbacks.onlocalstream = (typeof callbacks.onlocalstream == "function") ? callbacks.onlocalstream : Janus.noop;
-		callbacks.onremotestream = (typeof callbacks.onremotestream == "function") ? callbacks.onremotestream : Janus.noop;
+		callbacks.onlocaltrack = (typeof callbacks.onlocaltrack == "function") ? callbacks.onlocaltrack : Janus.noop;
+		callbacks.onremotetrack = (typeof callbacks.onremotetrack == "function") ? callbacks.onremotetrack : Janus.noop;
 		callbacks.ondata = (typeof callbacks.ondata == "function") ? callbacks.ondata : Janus.noop;
 		callbacks.ondataopen = (typeof callbacks.ondataopen == "function") ? callbacks.ondataopen : Janus.noop;
 		callbacks.oncleanup = (typeof callbacks.oncleanup == "function") ? callbacks.oncleanup : Janus.noop;
@@ -1128,31 +1128,20 @@ function Janus(gatewayCallbacks) {
 							dtmfSender : null,
 							trickle : true,
 							iceDone : false,
-							volume : {
-								value : null,
-								timer : null
-							},
-							bitrate : {
-								value : null,
-								bsnow : null,
-								bsbefore : null,
-								tsnow : null,
-								tsbefore : null,
-								timer : null
-							}
+							bitrate : {}
 						},
 						getId : function() { return handleId; },
 						getPlugin : function() { return plugin; },
-						getVolume : function() { return getVolume(handleId, true); },
-						getRemoteVolume : function() { return getVolume(handleId, true); },
-						getLocalVolume : function() { return getVolume(handleId, false); },
-						isAudioMuted : function() { return isMuted(handleId, false); },
-						muteAudio : function() { return mute(handleId, false, true); },
-						unmuteAudio : function() { return mute(handleId, false, false); },
-						isVideoMuted : function() { return isMuted(handleId, true); },
-						muteVideo : function() { return mute(handleId, true, true); },
-						unmuteVideo : function() { return mute(handleId, true, false); },
-						getBitrate : function() { return getBitrate(handleId); },
+						getVolume : function(mid, result) { return getVolume(handleId, mid, true, result); },
+						getRemoteVolume : function(mid, result) { return getVolume(handleId, mid, true, result); },
+						getLocalVolume : function(mid, result) { return getVolume(handleId, mid, false, result); },
+						isAudioMuted : function(mid) { return isMuted(handleId, mid, false); },
+						muteAudio : function(mid) { return mute(handleId, mid, false, true); },
+						unmuteAudio : function(mid) { return mute(handleId, mid, false, false); },
+						isVideoMuted : function(mid) { return isMuted(handleId, mid, true); },
+						muteVideo : function(mid) { return mute(handleId, mid, true, true); },
+						unmuteVideo : function(mid) { return mute(handleId, mid, true, false); },
+						getBitrate : function(mid) { return getBitrate(handleId, mid); },
 						send : function(callbacks) { sendMessage(handleId, callbacks); },
 						data : function(callbacks) { sendData(handleId, callbacks); },
 						dtmf : function(callbacks) { sendDtmf(handleId, callbacks); },
@@ -1165,8 +1154,8 @@ function Janus(gatewayCallbacks) {
 						createOffer : function(callbacks) { prepareWebrtc(handleId, true, callbacks); },
 						createAnswer : function(callbacks) { prepareWebrtc(handleId, false, callbacks); },
 						handleRemoteJsep : function(callbacks) { prepareWebrtcPeer(handleId, callbacks); },
-						onlocalstream : callbacks.onlocalstream,
-						onremotestream : callbacks.onremotestream,
+						onlocaltrack : callbacks.onlocaltrack,
+						onremotetrack : callbacks.onremotetrack,
 						ondata : callbacks.ondata,
 						ondataopen : callbacks.ondataopen,
 						oncleanup : callbacks.oncleanup,
@@ -1213,31 +1202,20 @@ function Janus(gatewayCallbacks) {
 							dtmfSender : null,
 							trickle : true,
 							iceDone : false,
-							volume : {
-								value : null,
-								timer : null
-							},
-							bitrate : {
-								value : null,
-								bsnow : null,
-								bsbefore : null,
-								tsnow : null,
-								tsbefore : null,
-								timer : null
-							}
+							bitrate: {}
 						},
 						getId : function() { return handleId; },
 						getPlugin : function() { return plugin; },
-						getVolume : function() { return getVolume(handleId, true); },
-						getRemoteVolume : function() { return getVolume(handleId, true); },
-						getLocalVolume : function() { return getVolume(handleId, false); },
-						isAudioMuted : function() { return isMuted(handleId, false); },
-						muteAudio : function() { return mute(handleId, false, true); },
-						unmuteAudio : function() { return mute(handleId, false, false); },
-						isVideoMuted : function() { return isMuted(handleId, true); },
-						muteVideo : function() { return mute(handleId, true, true); },
-						unmuteVideo : function() { return mute(handleId, true, false); },
-						getBitrate : function() { return getBitrate(handleId); },
+						getVolume : function(mid, result) { return getVolume(handleId, mid, true, result); },
+						getRemoteVolume : function(mid, result) { return getVolume(handleId, mid, true, result); },
+						getLocalVolume : function(mid, result) { return getVolume(handleId, mid, false, result); },
+						isAudioMuted : function(mid) { return isMuted(handleId, mid, false); },
+						muteAudio : function(mid) { return mute(handleId, mid, false, true); },
+						unmuteAudio : function(mid) { return mute(handleId, mid, false, false); },
+						isVideoMuted : function(mid) { return isMuted(handleId, mid, true); },
+						muteVideo : function(mid) { return mute(handleId, mid, true, true); },
+						unmuteVideo : function(mid) { return mute(handleId, mid, true, false); },
+						getBitrate : function(mid) { return getBitrate(handleId, mid); },
 						send : function(callbacks) { sendMessage(handleId, callbacks); },
 						data : function(callbacks) { sendData(handleId, callbacks); },
 						dtmf : function(callbacks) { sendDtmf(handleId, callbacks); },
@@ -1250,8 +1228,8 @@ function Janus(gatewayCallbacks) {
 						createOffer : function(callbacks) { prepareWebrtc(handleId, true, callbacks); },
 						createAnswer : function(callbacks) { prepareWebrtc(handleId, false, callbacks); },
 						handleRemoteJsep : function(callbacks) { prepareWebrtcPeer(handleId, callbacks); },
-						onlocalstream : callbacks.onlocalstream,
-						onremotestream : callbacks.onremotestream,
+						onlocaltrack : callbacks.onlocaltrack,
+						onremotetrack : callbacks.onremotetrack,
 						ondata : callbacks.ondata,
 						ondataopen : callbacks.ondataopen,
 						oncleanup : callbacks.oncleanup,
@@ -1789,7 +1767,15 @@ function Janus(gatewayCallbacks) {
 				if(!event.streams)
 					return;
 				config.remoteStream = event.streams[0];
-				pluginHandle.onremotestream(config.remoteStream);
+				if(!event.track)
+					return;
+				// Notify about the new track event
+				var mid = event.transceiver ? event.transceiver.mid : event.track.id;
+				try {
+					pluginHandle.onremotetrack(event.track, mid, true);
+				} catch(e) {
+					Janus.error(e);
+				};
 				if(event.track.onended)
 					return;
 				if(config.receiverTransforms) {
@@ -1812,7 +1798,18 @@ function Janus(gatewayCallbacks) {
 					if(config.remoteStream) {
 						clearTimeout(trackMutedTimeoutId);
 						config.remoteStream.removeTrack(ev.target);
-						pluginHandle.onremotestream(config.remoteStream);
+						// Notify the application
+						var mid = ev.target.id;
+						if(Janus.unifiedPlan) {
+							var transceiver = config.pc.getTransceivers().find(
+								t => t.receiver.track === ev.target);
+							mid = transceiver.mid;
+						}
+						try {
+							pluginHandle.onremotetrack(ev.target, mid, false);
+						} catch(e) {
+							Janus.error(e);
+						};
 					}
 				};
 				event.track.onmute = function(ev) {
@@ -1822,7 +1819,18 @@ function Janus(gatewayCallbacks) {
 							Janus.log("Removing remote track");
 							if (config.remoteStream) {
 								config.remoteStream.removeTrack(ev.target);
-								pluginHandle.onremotestream(config.remoteStream);
+								// Notify the application the track is gone
+								var mid = ev.target.id;
+								if(Janus.unifiedPlan) {
+									var transceiver = config.pc.getTransceivers().find(
+										t => t.receiver.track === ev.target);
+									mid = transceiver.mid;
+								}
+								try {
+									pluginHandle.onremotetrack(ev.target, mid, false);
+								} catch(e) {
+									Janus.error(e);
+								};
 							}
 							trackMutedTimeoutId = null;
 						// Chrome seems to raise mute events only at multiples of 834ms;
@@ -1838,7 +1846,14 @@ function Janus(gatewayCallbacks) {
 					} else {
 						try {
 							config.remoteStream.addTrack(ev.target);
-							pluginHandle.onremotestream(config.remoteStream);
+							// Notify the application the track is back
+							var mid = ev.target.id;
+							if(Janus.unifiedPlan) {
+								var transceiver = config.pc.getTransceivers().find(
+									t => t.receiver.track === ev.target);
+								mid = transceiver.mid;
+							}
+							pluginHandle.onremotetrack(ev.target, mid, true);
 						} catch(e) {
 							Janus.error(e);
 						};
@@ -1897,7 +1912,24 @@ function Janus(gatewayCallbacks) {
 		}
 		// If there's a new local stream, let's notify the application
 		if(config.myStream) {
-			pluginHandle.onlocalstream(config.myStream);
+			var tracks = config.myStream.getTracks();
+			for(var i in tracks) {
+				var track = tracks[i];
+				track.onended = function(ev) {
+					// FIXME What does this event contain? Is there a reference to the track?
+					Janus.log("Local track removed:", ev);
+					try {
+						pluginHandle.onlocaltrack(ev.track, false);
+					} catch(e) {
+						Janus.error(e);
+					};
+				}
+				try {
+					pluginHandle.onlocaltrack(track, true);
+				} catch(e) {
+					Janus.error(e);
+				};
+			}
 		}
 		// Create offer/answer now
 		if(!jsep) {
@@ -2099,6 +2131,11 @@ function Janus(gatewayCallbacks) {
 					var at = config.myStream.getAudioTracks()[0];
 					Janus.log("Removing audio track:", at);
 					config.myStream.removeTrack(at);
+					try {
+						pluginHandle.onlocaltrack(at, false);
+					} catch(e) {
+						Janus.error(e);
+					};
 					try {
 						at.stop();
 					} catch(e) {}
@@ -2124,6 +2161,11 @@ function Janus(gatewayCallbacks) {
 					var vt = config.myStream.getVideoTracks()[0];
 					Janus.log("Removing video track:", vt);
 					config.myStream.removeTrack(vt);
+					try {
+						pluginHandle.onlocaltrack(vt, false);
+					} catch(e) {
+						Janus.error(e);
+					};
 					try {
 						vt.stop();
 					} catch(e) {}
@@ -2977,11 +3019,13 @@ function Janus(gatewayCallbacks) {
 		callbacks.success(config.mySdp);
 	}
 
-	function getVolume(handleId, remote) {
+	function getVolume(handleId, mid, remote, result) {
+		result = (typeof result == "function") ? result : Janus.noop;
 		var pluginHandle = pluginHandles[handleId];
 		if(!pluginHandle || !pluginHandle.webrtcStuff) {
 			Janus.warn("Invalid handle");
-			return 0;
+			result(0);
+			return;
 		}
 		var stream = remote ? "remote" : "local";
 		var config = pluginHandle.webrtcStuff;
@@ -2993,37 +3037,56 @@ function Janus(gatewayCallbacks) {
 				Janus.webRTCAdapter.browserDetails.browser === "safari")) {
 			if(remote && !config.remoteStream) {
 				Janus.warn("Remote stream unavailable");
-				return 0;
+				result(0);
+				return;
 			} else if(!remote && !config.myStream) {
 				Janus.warn("Local stream unavailable");
-				return 0;
+				result(0);
+				return;
 			}
-			if(!config.volume[stream].timer) {
-				Janus.log("Starting " + stream + " volume monitor");
-				config.volume[stream].timer = setInterval(function() {
-					config.pc.getStats()
-						.then(function(stats) {
-							stats.forEach(function (res) {
-								if(!res || res.kind !== "audio")
-									return;
-								if((remote && !res.remoteSource) || (!remote && res.type !== "media-source"))
-									return;
-								config.volume[stream].value = (res.audioLevel ? res.audioLevel : 0);
-							});
-						});
-				}, 200);
-				return 0;	// We don't have a volume to return yet
+			// Are we interested in a mid in particular? (only if transceivers are in use)
+			var query = config.pc;
+			if(mid && Janus.unifiedPlan) {
+				var transceiver = config.pc.getTransceivers()
+					.find(t => (t.mid === mid && t.receiver.track.kind === "audio"));
+				if(!transceiver) {
+					Janus.warn("No audio transceiver with mid " + mid);
+					result(0);
+					return;
+				}
+				if(remote && !transceiver.receiver) {
+					Janus.warn("Remote transceiver track unavailable");
+					result(0);
+					return;
+				} else if(!remote && !transceiver.sender) {
+					Janus.warn("Local transceiver track unavailable");
+					result(0);
+					return;
+				}
+				query = remote ? transceiver.receiver : transceiver.sender;
 			}
+			var currentVolume = -1;
+			query.getStats()
+				.then(function(stats) {
+					stats.forEach(function (res) {
+						if(!res || res.kind !== "audio")
+							return;
+						if((remote && !res.remoteSource) || (!remote && res.type !== "media-source"))
+							return;
+						result(res.audioLevel ? res.audioLevel : 0);
+					});
+				});
 			return config.volume[stream].value;
 		} else {
 			// audioInputLevel and audioOutputLevel seem only available in Chrome? audioLevel
 			// seems to be available on Chrome and Firefox, but they don't seem to work
 			Janus.warn("Getting the " + stream + " volume unsupported by browser");
-			return 0;
+			result(0);
+			return;
 		}
 	}
 
-	function isMuted(handleId, video) {
+	function isMuted(handleId, mid, video) {
 		var pluginHandle = pluginHandles[handleId];
 		if(!pluginHandle || !pluginHandle.webrtcStuff) {
 			Janus.warn("Invalid handle");
@@ -3044,18 +3107,46 @@ function Janus(gatewayCallbacks) {
 				Janus.warn("No video track");
 				return true;
 			}
-			return !config.myStream.getVideoTracks()[0].enabled;
+			if(mid && Janus.unifiedPlan) {
+				var transceiver = config.pc.getTransceivers()
+					.find(t => (t.mid === mid && t.receiver.track.kind === "video"));
+				if(!transceiver) {
+					Janus.warn("No video transceiver with mid " + mid);
+					return true;
+				}
+				if(!transceiver.sender || !transceiver.sender.track) {
+					Janus.warn("No video sender with mid " + mid);
+					return true;
+				}
+				return !transceiver.sender.track.enabled;
+			} else {
+				return !config.myStream.getVideoTracks()[0].enabled;
+			}
 		} else {
 			// Check audio track
 			if(!config.myStream.getAudioTracks() || config.myStream.getAudioTracks().length === 0) {
 				Janus.warn("No audio track");
 				return true;
 			}
-			return !config.myStream.getAudioTracks()[0].enabled;
+			if(mid && Janus.unifiedPlan) {
+				var transceiver = config.pc.getTransceivers()
+					.find(t => (t.mid === mid && t.receiver.track.kind === "audio"));
+				if(!transceiver) {
+					Janus.warn("No audio transceiver with mid " + mid);
+					return true;
+				}
+				if(!transceiver.sender || !transceiver.sender.track) {
+					Janus.warn("No audio sender with mid " + mid);
+					return true;
+				}
+				return !transceiver.sender.track.enabled;
+			} else {
+				return !config.myStream.getAudioTracks()[0].enabled;
+			}
 		}
 	}
 
-	function mute(handleId, video, mute) {
+	function mute(handleId, mid, video, mute) {
 		var pluginHandle = pluginHandles[handleId];
 		if(!pluginHandle || !pluginHandle.webrtcStuff) {
 			Janus.warn("Invalid handle");
@@ -3076,20 +3167,47 @@ function Janus(gatewayCallbacks) {
 				Janus.warn("No video track");
 				return false;
 			}
-			config.myStream.getVideoTracks()[0].enabled = !mute;
-			return true;
+			if(mid && Janus.unifiedPlan) {
+				var transceiver = config.pc.getTransceivers()
+					.find(t => (t.mid === mid && t.receiver.track.kind === "video"));
+				if(!transceiver) {
+					Janus.warn("No video transceiver with mid " + mid);
+					return false;
+				}
+				if(!transceiver.sender || !transceiver.sender.track) {
+					Janus.warn("No video sender with mid " + mid);
+					return false;
+				}
+				transceiver.sender.track.enabled = mute ? false : true;
+			} else {
+				config.myStream.getVideoTracks()[0].enabled = mute ? false : true;
+			}
 		} else {
 			// Mute/unmute audio track
 			if(!config.myStream.getAudioTracks() || config.myStream.getAudioTracks().length === 0) {
 				Janus.warn("No audio track");
 				return false;
 			}
-			config.myStream.getAudioTracks()[0].enabled = !mute;
-			return true;
+			if(mid && Janus.unifiedPlan) {
+				var transceiver = config.pc.getTransceivers()
+					.find(t => (t.mid === mid && t.receiver.track.kind === "audio"));
+				if(!transceiver) {
+					Janus.warn("No audio transceiver with mid " + mid);
+					return false;
+				}
+				if(!transceiver.sender || !transceiver.sender.track) {
+					Janus.warn("No audio sender with mid " + mid);
+					return false;
+				}
+				transceiver.sender.track.enabled = mute ? false : true;
+			} else {
+				config.myStream.getAudioTracks()[0].enabled = mute ? false : true;
+			}
 		}
+		return true;
 	}
 
-	function getBitrate(handleId) {
+	function getBitrate(handleId, mid) {
 		var pluginHandle = pluginHandles[handleId];
 		if(!pluginHandle || !pluginHandle.webrtcStuff) {
 			Janus.warn("Invalid handle");
@@ -3100,10 +3218,35 @@ function Janus(gatewayCallbacks) {
 			return "Invalid PeerConnection";
 		// Start getting the bitrate, if getStats is supported
 		if(config.pc.getStats) {
-			if(!config.bitrate.timer) {
-				Janus.log("Starting bitrate timer (via getStats)");
-				config.bitrate.timer = setInterval(function() {
-					config.pc.getStats()
+			var query = config.pc;
+			var target = mid ? mid : "default";
+			if(mid && Janus.unifiedPlan) {
+				var transceiver = config.pc.getTransceivers()
+					.find(t => (t.mid === mid && t.receiver.track.kind === "video"));
+				if(!transceiver) {
+					Janus.warn("No video transceiver with mid " + mid);
+					return ("No video transceiver with mid " + mid);
+				}
+				if(!transceiver.receiver) {
+					Janus.warn("No video receiver with mid " + mid);
+					return ("No video receiver with mid " + mid);
+				}
+				query = transceiver.receiver;
+			}
+			if(!config.bitrate[target]) {
+				config.bitrate[target] = {
+					timer: null,
+					bsnow: null,
+					bsbefore: null,
+					tsnow: null,
+					tsbefore: null,
+					value: "0 kbits/sec"
+				};
+			}
+			if(!config.bitrate[target].timer) {
+				Janus.log("Starting bitrate timer" + (mid ? (" for mid " + mid) : "") + " (via getStats)");
+				config.bitrate[target].timer = setInterval(function() {
+					query.getStats()
 						.then(function(stats) {
 							stats.forEach(function (res) {
 								if(!res)
@@ -3121,24 +3264,24 @@ function Janus(gatewayCallbacks) {
 								}
 								// Parse stats now
 								if(inStats) {
-									config.bitrate.bsnow = res.bytesReceived;
-									config.bitrate.tsnow = res.timestamp;
-									if(config.bitrate.bsbefore === null || config.bitrate.tsbefore === null) {
+									config.bitrate[target].bsnow = res.bytesReceived;
+									config.bitrate[target].tsnow = res.timestamp;
+									if(config.bitrate[target].bsbefore === null || config.bitrate[target].tsbefore === null) {
 										// Skip this round
-										config.bitrate.bsbefore = config.bitrate.bsnow;
-										config.bitrate.tsbefore = config.bitrate.tsnow;
+										config.bitrate[target].bsbefore = config.bitrate[target].bsnow;
+										config.bitrate[target].tsbefore = config.bitrate[target].tsnow;
 									} else {
 										// Calculate bitrate
-										var timePassed = config.bitrate.tsnow - config.bitrate.tsbefore;
+										var timePassed = config.bitrate[target].tsnow - config.bitrate[target].tsbefore;
 										if(Janus.webRTCAdapter.browserDetails.browser === "safari")
 											timePassed = timePassed/1000;	// Apparently the timestamp is in microseconds, in Safari
-										var bitRate = Math.round((config.bitrate.bsnow - config.bitrate.bsbefore) * 8 / timePassed);
+										var bitRate = Math.round((config.bitrate[target].bsnow - config.bitrate[target].bsbefore) * 8 / timePassed);
 										if(Janus.webRTCAdapter.browserDetails.browser === "safari")
 											bitRate = parseInt(bitRate/1000);
-										config.bitrate.value = bitRate + ' kbits/sec';
+										config.bitrate[target].value = bitRate + ' kbits/sec';
 										//~ Janus.log("Estimated bitrate is " + config.bitrate.value);
-										config.bitrate.bsbefore = config.bitrate.bsnow;
-										config.bitrate.tsbefore = config.bitrate.tsnow;
+										config.bitrate[target].bsbefore = config.bitrate[target].bsnow;
+										config.bitrate[target].tsbefore = config.bitrate[target].tsnow;
 									}
 								}
 							});
@@ -3146,7 +3289,7 @@ function Janus(gatewayCallbacks) {
 				}, 1000);
 				return "0 kbits/sec";	// We don't have a bitrate value yet
 			}
-			return config.bitrate.value;
+			return config.bitrate[target].value;
 		} else {
 			Janus.warn("Getting the video bitrate unsupported by browser");
 			return "Feature unsupported by browser";
@@ -3195,15 +3338,11 @@ function Janus(gatewayCallbacks) {
 				if(config.volume["remote"] && config.volume["remote"].timer)
 					clearInterval(config.volume["remote"].timer);
 			}
-			config.volume = {};
-			if(config.bitrate.timer)
-				clearInterval(config.bitrate.timer);
-			config.bitrate.timer = null;
-			config.bitrate.bsnow = null;
-			config.bitrate.bsbefore = null;
-			config.bitrate.tsnow = null;
-			config.bitrate.tsbefore = null;
-			config.bitrate.value = null;
+			for(var i in config.bitrate) {
+				if(config.bitrate[i].timer)
+					clearInterval(config.bitrate[i].timer);
+			}
+			config.bitrate = {};
 			try {
 				// Try a MediaStreamTrack.stop() for each track
 				if(!config.streamExternal && config.myStream) {
diff --git a/html/multiopus.js b/html/multiopus.js
index 53c2b39edb..ebe71efca4 100644
--- a/html/multiopus.js
+++ b/html/multiopus.js
@@ -52,6 +52,8 @@ var janus = null;
 var echotest = null;
 var opaqueId = "multiopus-"+Janus.randomString(12);
 
+var localTracks = {}, localVideos = 0,
+	remoteTracks = {}, remoteVideos = 0;
 var bitrateTimer = null;
 var spinner = null;
 
@@ -190,16 +192,16 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									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) {
+								slowLink: function(uplink, lost, mid) {
 									Janus.warn("Janus reports problems " + (uplink ? "sending" : "receiving") +
-										" packets on this PeerConnection (" + lost + " lost packets)");
+										" packets on mid " + mid + " (" + lost + " lost packets)");
 								},
 								onmessage: function(msg, jsep) {
 									Janus.debug(" ::: Got a message :::", msg);
@@ -215,9 +217,8 @@ $(document).ready(function() {
 											if(spinner)
 												spinner.stop();
 											spinner = null;
-											$('#myvideo').remove();
+											$('video').remove();
 											$('#waitingvideo').remove();
-											$('#peervideo').remove();
 											$('#toggleaudio').attr('disabled', true);
 											$('#togglevideo').attr('disabled', true);
 											$('#bitrate').attr('disabled', true);
@@ -243,8 +244,72 @@ $(document).ready(function() {
 										updateSimulcastButtons(substream, temporal);
 									}
 								},
-								onlocalstream: function(stream) {
-									Janus.debug(" ::: Got a local stream :::", stream);
+								onlocaltrack: function(track, on) {
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										if(track.kind === "video") {
+											$('#myvideo' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videoleft .no-video-container').length === 0) {
+													$('#videoleft').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
+									if($('#videoleft video').length === 0) {
+										$('#videos').removeClass('hide').show();
+									}
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoleft .no-video-container').length === 0) {
+												$('#videoleft').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
+										}
+									} else {
+										// New video track: create a stream out of it
+										localVideos++;
+										$('#videoleft .no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("Created local stream:", stream);
+										$('#videoleft').append('<video class="rounded centered" id="myvideo' + trackId + '" width=320 height=240 autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#myvideo' + trackId).get(0), stream);
+									}
 									if(echotest.webrtcStuff.pc.iceConnectionState !== "completed" &&
 											echotest.webrtcStuff.pc.iceConnectionState !== "connected") {
 										$("#videoleft").parent().block({
@@ -255,66 +320,93 @@ $(document).ready(function() {
 												color: 'white'
 											}
 										});
-										// No remote video yet
-										$('#videoright').append('<video class="rounded centered" id="waitingvideo" width=320 height=240 />');
-										if(spinner == null) {
-											var target = document.getElementById('videoright');
-											spinner = new Spinner({top:100}).spin(target);
-										} else {
-											spinner.spin();
-										}
 									}
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No webcam
-										$('#myvideo').hide();
-										if($('#videoleft .no-video-container').length === 0) {
-											$('#videoleft').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No webcam available</span>' +
-												'</div>');
+								},
+								onremotetrack: function(track, mid, on) {
+									Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = remoteTracks[mid];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
 										}
-									} else {
-										$('#videoleft .no-video-container').remove();
-										$('#myvideo').removeClass('hide').show();
+										$('#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(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No remote video available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete remoteTracks[mid];
+										return;
 									}
-								},
-								onremotestream: function(stream) {
-									Janus.debug(" ::: Got a remote stream :::", stream);
+									// If we're here, a new track was added
 									var addButtons = false;
-									if($('#peervideo').length === 0) {
+									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;
 										$('#videos').removeClass('hide').show();
-										$('#videoright').append('<video class="rounded centered hide" id="peervideo" width=320 height=240 autoplay playsinline/>');
-										// 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)
-												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(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No remote video available</span>' +
-												'</div>');
+									if(track.kind === "audio") {
+										// New audio track: create a stream out of it, and use a hidden <audio> element
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote audio stream:", stream);
+										if($('#peervideo'+mid).length === 0)
+											$('#videoright').append('<audio class="hide" id="peervideo' + mid + '" autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
+										if(remoteVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoright .no-video-container').length === 0) {
+												$('#videoright').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
 										}
 									} else {
+										// New video track: create a stream out of it
+										remoteVideos++;
 										$('#videoright .no-video-container').remove();
-										$('#peervideo').removeClass('hide').show();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote video stream:", stream);
+										if($('#peervideo'+mid).length === 0)
+											$('#videoright').append('<video class="rounded centered" id="peervideo' + mid + '" width=320 height=240 autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
+										// FIXME we'll need this for additional videos too
+										if(!bitrateTimer) {
+											$('#curbitrate').removeClass('hide').show();
+											bitrateTimer = setInterval(function() {
+												if(!$("#peervideo" + mid + ' video').get(0))
+													return;
+												// Display updated bitrate, if supported
+												var bitrate = echotest.getBitrate();
+												//~ Janus.debug("Current bitrate is " + echotest.getBitrate());
+												$('#curbitrate').text(bitrate);
+												// Check if the resolution changed too
+												var width = $("#peervideo" + mid).get(0).videoWidth;
+												var height = $("#peervideo" + mid).get(0).videoHeight;
+												if(width > 0 && height > 0)
+													$('#curres').removeClass('hide').text(width+'x'+height).show();
+											}, 1000);
+										}
 									}
 									if(!addButtons)
 										return;
@@ -352,20 +444,6 @@ $(document).ready(function() {
 										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!");
@@ -384,10 +462,10 @@ $(document).ready(function() {
 									if(bitrateTimer)
 										clearInterval(bitrateTimer);
 									bitrateTimer = null;
-									$('#myvideo').remove();
+									$('video').remove();
 									$('#waitingvideo').remove();
-									$("#videoleft").parent().unblock();
-									$('#peervideo').remove();
+									$("#videoleft").empty().parent().unblock();
+									$('#videoright').empty();
 									$('#toggleaudio').attr('disabled', true);
 									$('#togglevideo').attr('disabled', true);
 									$('#bitrate').attr('disabled', true);
@@ -408,6 +486,10 @@ $(document).ready(function() {
 										// Do nothing if this fails
 									}
 									localStream = null;
+									localTracks = {};
+									localVideos = 0;
+									remoteTracks = {};
+									remoteVideos = 0;
 								}
 							});
 					},
diff --git a/html/mvideoroomtest.html b/html/mvideoroomtest.html
new file mode 100644
index 0000000000..a27d05e532
--- /dev/null
+++ b/html/mvideoroomtest.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Janus WebRTC Server: Video Room Demo (multistream)</title>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.min.js" ></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js" ></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
+<script type="text/javascript" src="janus.js" ></script>
+<script type="text/javascript" src="mvideoroomtest.js"></script>
+<script>
+	$(function() {
+		$(".navbar-static-top").load("navbar.html", function() {
+			$(".navbar-static-top li.dropdown").addClass("active");
+			$(".navbar-static-top a[href='mvideoroomtest.html']").parent().addClass("active");
+		});
+		$(".footer").load("footer.html");
+	});
+</script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.4.0/cerulean/bootstrap.min.css" type="text/css"/>
+<link rel="stylesheet" href="css/demo.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
+</head>
+<body>
+
+<a href="https://github.com/meetecho/janus-gateway"><img style="position: absolute; top: 0; left: 0; border: 0; z-index: 1001;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
+
+<nav class="navbar navbar-default navbar-static-top">
+</nav>
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<div class="page-header">
+				<h1>Plugin Demo: Video Room (multistream)
+					<button class="btn btn-default" autocomplete="off" id="start">Start</button>
+				</h1>
+			</div>
+			<div class="container" id="details">
+				<div class="row">
+					<div class="col-md-12">
+						<h3>Demo details</h3>
+						<p>This is a variant of the <a href="videoroomtest.html">original VideoRoom demo</a>,
+						but taking advantage of the recently added multistream support to use a
+						single PeerConnection to receive all the contributions, rather than
+						creating a different one for each subscription. Apart from this, the
+						same considerations apply.</p>
+						<p>To use the demo, just insert a username to join the default room that
+						is configured. This will add you to the list of participants, and allow
+						you to automatically send your audio/video frames and receive the other
+						participants' feeds. The other participants will appear in separate
+						panels, whose title will be the names they chose when registering at
+						the demo.</p>
+						<p>Press the <code>Start</code> button above to launch the demo.</p>
+					</div>
+				</div>
+			</div>
+			<div class="container hide" id="videojoin">
+				<div class="row">
+					<span class="label label-info" id="you"></span>
+					<div class="col-md-12" id="controls">
+						<div class="input-group margin-bottom-md hide" id="registernow">
+							<span class="input-group-addon">@</span>
+							<input autocomplete="off" class="form-control" autocomplete="off" type="text" placeholder="Choose a display name" id="username" onkeypress="return checkEnter(this, event);"></input>
+							<span class="input-group-btn">
+								<button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="container hide" id="videos">
+				<div class="row">
+					<div class="col-md-4">
+						<div class="panel panel-default">
+							<div class="panel-heading">
+								<h3 class="panel-title">Local Video <span class="label label-primary hide" id="publisher"></span>
+									<div class="btn-group btn-group-xs pull-right hide">
+										<div class="btn-group btn-group-xs">
+											<button id="bitrateset" autocomplete="off" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+												Bandwidth<span class="caret"></span>
+											</button>
+											<ul id="bitrate" class="dropdown-menu" role="menu">
+												<li><a href="#" id="0">No limit</a></li>
+												<li><a href="#" id="128">Cap to 128kbit</a></li>
+												<li><a href="#" id="256">Cap to 256kbit</a></li>
+												<li><a href="#" id="512">Cap to 512kbit</a></li>
+												<li><a href="#" id="1024">Cap to 1mbit</a></li>
+												<li><a href="#" id="1500">Cap to 1.5mbit</a></li>
+												<li><a href="#" id="2000">Cap to 2mbit</a></li>
+											</ul>
+										</div>
+									</div>
+								</h3>
+							</div>
+							<div class="panel-body" id="videolocal"></div>
+						</div>
+					</div>
+					<div class="col-md-4">
+						<div class="panel panel-default">
+							<div class="panel-heading">
+								<h3 class="panel-title">Remote Video #1 <span class="label label-info hide" id="remote1"></span></h3>
+							</div>
+							<div class="panel-body relative" id="videoremote1"></div>
+						</div>
+					</div>
+					<div class="col-md-4">
+						<div class="panel panel-default">
+							<div class="panel-heading">
+								<h3 class="panel-title">Remote Video #2 <span class="label label-info hide" id="remote2"></span></h3>
+							</div>
+							<div class="panel-body relative" id="videoremote2"></div>
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-md-4">
+						<div class="panel panel-default">
+							<div class="panel-heading">
+								<h3 class="panel-title">Remote Video #3 <span class="label label-info hide" id="remote3"></span></h3>
+							</div>
+							<div class="panel-body relative" id="videoremote3"></div>
+						</div>
+					</div>
+					<div class="col-md-4">
+						<div class="panel panel-default">
+							<div class="panel-heading">
+								<h3 class="panel-title">Remote Video #4 <span class="label label-info hide" id="remote4"></span></h3>
+							</div>
+							<div class="panel-body relative" id="videoremote4"></div>
+						</div>
+					</div>
+					<div class="col-md-4">
+						<div class="panel panel-default">
+							<div class="panel-heading">
+								<h3 class="panel-title">Remote Video #5 <span class="label label-info hide" id="remote5"></span></h3>
+							</div>
+							<div class="panel-body relative" id="videoremote5"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<hr>
+	<div class="footer">
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/html/mvideoroomtest.js b/html/mvideoroomtest.js
new file mode 100644
index 0000000000..6b0bfac174
--- /dev/null
+++ b/html/mvideoroomtest.js
@@ -0,0 +1,992 @@
+// 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 sfutest = null;
+var opaqueId = "videoroomtest-"+Janus.randomString(12);
+
+var myroom = 1234;	// Demo room
+var myusername = null;
+var myid = null;
+var mystream = null;
+// We use this other ID just to map our subscriptions to us
+var mypvtid = null;
+
+var remoteFeed = null;
+var feeds = {}, feedStreams = {}, subStreams = {}, slots = {}, mids = {};
+var localTracks = {}, localVideos = 0, remoteTracks = {};
+var bitrateTimer = [], simulcastStarted = {};
+
+var doSimulcast = (getQueryStringValue("simulcast") === "yes" || getQueryStringValue("simulcast") === "true");
+var doSimulcast2 = (getQueryStringValue("simulcast2") === "yes" || getQueryStringValue("simulcast2") === "true");
+
+$(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;
+			}
+			// Create session
+			janus = new Janus(
+				{
+					server: server,
+					success: function() {
+						// Attach to video room test plugin
+						janus.attach(
+							{
+								plugin: "janus.plugin.videoroom",
+								opaqueId: opaqueId,
+								success: function(pluginHandle) {
+									$('#details').remove();
+									sfutest = pluginHandle;
+									Janus.log("Plugin attached! (" + sfutest.getPlugin() + ", id=" + sfutest.getId() + ")");
+									Janus.log("  -- This is a publisher/manager");
+									// Prepare the username registration
+									$('#videojoin').removeClass('hide').show();
+									$('#registernow').removeClass('hide').show();
+									$('#register').click(registerUsername);
+									$('#username').focus();
+									$('#start').removeAttr('disabled').html("Stop")
+										.click(function() {
+											$(this).attr('disabled', true);
+											janus.destroy();
+										});
+								},
+								error: function(error) {
+									Janus.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: '<div><img src="up_arrow.png"/></div>',
+											css: {
+												border: 'none',
+												padding: '15px',
+												backgroundColor: 'transparent',
+												color: '#aaa',
+												top: '10px',
+												left: (navigator.mozGetUserMedia ? '-100px' : '300px')
+											} });
+									} 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");
+									$("#videolocal").parent().parent().unblock();
+									if(!on)
+										return;
+									$('#publish').remove();
+									// This controls allows us to override the global room bitrate cap
+									$('#bitrate').parent().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() + '<span class="caret"></span>').parent().removeClass('open');
+										sfutest.send({ message: { request: "configure", bitrate: bitrate }});
+										return false;
+									});
+								},
+								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 (publisher) :::", msg);
+									var event = msg["videoroom"];
+									Janus.debug("Event: " + event);
+									if(event != undefined && event != null) {
+										if(event === "joined") {
+											// Publisher/manager created, negotiate WebRTC and attach to existing feeds, if any
+											myid = msg["id"];
+											mypvtid = msg["private_id"];
+											Janus.log("Successfully joined room " + msg["room"] + " with ID " + myid);
+											publishOwnFeed(true);
+											// Any new feed to attach to?
+											if(msg["publishers"]) {
+												var list = msg["publishers"];
+												Janus.debug("Got a list of available publishers/feeds:", list);
+												var sources = null;
+												for(var f in list) {
+													var id = list[f]["id"];
+													var display = list[f]["display"];
+													var streams = list[f]["streams"];
+													for(var i in streams) {
+														var stream = streams[i];
+														stream["id"] = id;
+														stream["display"] = display;
+													}
+													feedStreams[id] = {
+														id: id,
+														display: display,
+														streams: streams
+													}
+													Janus.debug("  >> [" + id + "] " + display + ":", streams);
+													if(sources === null)
+														sources = [];
+													sources.push(streams);
+												}
+												if(sources)
+													subscribeTo(sources);
+											}
+										} else if(event === "destroyed") {
+											// The room has been destroyed
+											Janus.warn("The room has been destroyed!");
+											bootbox.alert("The room has been destroyed", function() {
+												window.location.reload();
+											});
+										} else if(event === "event") {
+											// Any info on our streams or a new feed to attach to?
+											if(msg["streams"]) {
+												var streams = msg["streams"];
+												for(var i in streams) {
+													var stream = streams[i];
+													stream["id"] = myid;
+													stream["display"] = myusername;
+												}
+												feedStreams[myid] = {
+													id: myid,
+													display: myusername,
+													streams: streams
+												}
+											} else if(msg["publishers"]) {
+												var list = msg["publishers"];
+												Janus.debug("Got a list of available publishers/feeds:", list);
+												var sources = null;
+												for(var f in list) {
+													var id = list[f]["id"];
+													var display = list[f]["display"];
+													var streams = list[f]["streams"];
+													for(var i in streams) {
+														var stream = streams[i];
+														stream["id"] = id;
+														stream["display"] = display;
+													}
+													feedStreams[id] = {
+														id: id,
+														display: display,
+														streams: streams
+													}
+													Janus.debug("  >> [" + id + "] " + display + ":", streams);
+													if(sources === null)
+														sources = [];
+													sources.push(streams);
+												}
+												if(sources)
+													subscribeTo(sources);
+											} else if(msg["leaving"]) {
+												// One of the publishers has gone away?
+												var leaving = msg["leaving"];
+												Janus.log("Publisher left: " + leaving);
+												unsubscribeFrom(leaving);
+											} else if(msg["unpublished"]) {
+												// One of the publishers has unpublished?
+												var unpublished = msg["unpublished"];
+												Janus.log("Publisher left: " + unpublished);
+												if(unpublished === 'ok') {
+													// That's us
+													sfutest.hangup();
+													return;
+												}
+												unsubscribeFrom(unpublished);
+											} else if(msg["error"]) {
+												if(msg["error_code"] === 426) {
+													// This is a "no such room" error: give a more meaningful description
+													bootbox.alert(
+														"<p>Apparently room <code>" + myroom + "</code> (the one this demo uses as a test room) " +
+														"does not exist...</p><p>Do you have an updated <code>janus.plugin.videoroom.cfg</code> " +
+														"configuration file? If not, make sure you copy the details of room <code>" + myroom + "</code> " +
+														"from that sample in your current configuration file, then restart Janus and try again."
+													);
+												} else {
+													bootbox.alert(msg["error"]);
+												}
+											}
+										}
+									}
+									if(jsep) {
+										Janus.debug("Handling SDP as well...", jsep);
+										sfutest.handleRemoteJsep({ jsep: jsep });
+										// Check if any of the media we wanted to publish has
+										// been rejected (e.g., wrong or unsupported codec)
+										var audio = msg["audio_codec"];
+										if(mystream && mystream.getAudioTracks() && mystream.getAudioTracks().length > 0 && !audio) {
+											// Audio has been rejected
+											toastr.warning("Our audio stream has been rejected, viewers won't hear us");
+										}
+										var video = msg["video_codec"];
+										if(mystream && mystream.getVideoTracks() && mystream.getVideoTracks().length > 0 && !video) {
+											// Video has been rejected
+											toastr.warning("Our video stream has been rejected, viewers won't see us");
+											// Hide the webcam video
+											$('#myvideo').hide();
+											$('#videolocal').append(
+												'<div class="no-video-container">' +
+													'<i class="fa fa-video-camera fa-5 no-video-icon" style="height: 100%;"></i>' +
+													'<span class="no-video-text" style="font-size: 16px;">Video rejected, no webcam</span>' +
+												'</div>');
+										}
+									}
+								},
+								onlocaltrack: function(track, on) {
+									Janus.debug(" ::: Got a local track event :::");
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										if(track.kind === "video") {
+											$('#myvideo' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videolocal .no-video-container').length === 0) {
+													$('#videolocal').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
+									$('#videos').removeClass('hide').show();
+									if($('#mute').length === 0) {
+										// Add a 'mute' button
+										$('#videolocal').append('<button class="btn btn-warning btn-xs" id="mute" style="position: absolute; bottom: 0px; left: 0px; margin: 15px;">Mute</button>');
+										$('#mute').click(toggleMute);
+										// Add an 'unpublish' button
+										$('#videolocal').append('<button class="btn btn-warning btn-xs" id="unpublish" style="position: absolute; bottom: 0px; right: 0px; margin: 15px;">Unpublish</button>');
+										$('#unpublish').click(unpublishOwnFeed);
+									}
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videolocal .no-video-container').length === 0) {
+												$('#videolocal').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
+										}
+									} else {
+										// New video track: create a stream out of it
+										localVideos++;
+										$('#videolocal .no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("Created local stream:", stream);
+										Janus.log(stream.getTracks());
+										Janus.log(stream.getVideoTracks());
+										$('#videolocal').append('<video class="rounded centered" id="myvideo' + trackId + '" width=100% autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#myvideo' + trackId).get(0), stream);
+									}
+									if(sfutest.webrtcStuff.pc.iceConnectionState !== "completed" &&
+											sfutest.webrtcStuff.pc.iceConnectionState !== "connected") {
+										$("#videolocal").parent().parent().block({
+											message: '<b>Publishing...</b>',
+											css: {
+												border: 'none',
+												backgroundColor: 'transparent',
+												color: 'white'
+											}
+										});
+									}
+								},
+								onremotetrack: function(track, mid, on) {
+									// The publisher stream is sendonly, we don't expect anything here
+								},
+								oncleanup: function() {
+									Janus.log(" ::: Got a cleanup notification: we are unpublished now :::");
+									mystream = null;
+									delete feedStreams[myid];
+									$('#videolocal').html('<button id="publish" class="btn btn-primary">Publish</button>');
+									$('#publish').click(function() { publishOwnFeed(true); });
+									$("#videolocal").parent().parent().unblock();
+									$('#bitrate').parent().parent().addClass('hide');
+									$('#bitrate a').unbind('click');
+									localTracks = {};
+									localVideos = 0;
+								}
+							});
+					},
+					error: function(error) {
+						Janus.error(error);
+						bootbox.alert(error, function() {
+							window.location.reload();
+						});
+					},
+					destroyed: function() {
+						window.location.reload();
+					}
+				});
+		});
+	}});
+});
+
+function checkEnter(field, event) {
+	var theCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
+	if(theCode == 13) {
+		registerUsername();
+		return false;
+	} else {
+		return true;
+	}
+}
+
+function registerUsername() {
+	if($('#username').length === 0) {
+		// Create fields to register
+		$('#register').click(registerUsername);
+		$('#username').focus();
+	} else {
+		// Try a registration
+		$('#username').attr('disabled', true);
+		$('#register').attr('disabled', true).unbind('click');
+		var username = $('#username').val();
+		if(username === "") {
+			$('#you')
+				.removeClass().addClass('label label-warning')
+				.html("Insert your display name (e.g., pippo)");
+			$('#username').removeAttr('disabled');
+			$('#register').removeAttr('disabled').click(registerUsername);
+			return;
+		}
+		if(/[^a-zA-Z0-9]/.test(username)) {
+			$('#you')
+				.removeClass().addClass('label label-warning')
+				.html('Input is not alphanumeric');
+			$('#username').removeAttr('disabled').val("");
+			$('#register').removeAttr('disabled').click(registerUsername);
+			return;
+		}
+		var register = {
+			request: "join",
+			room: myroom,
+			ptype: "publisher",
+			display: username
+		};
+		myusername = username;
+		sfutest.send({ message: register });
+	}
+}
+
+function publishOwnFeed(useAudio) {
+	// Publish our stream
+	$('#publish').attr('disabled', true).unbind('click');
+	sfutest.createOffer(
+		{
+			// Add data:true here if you want to publish datachannels as well
+			media: { audioRecv: false, videoRecv: false, audioSend: useAudio, videoSend: true },	// Publishers are sendonly
+			// 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,
+			success: function(jsep) {
+				Janus.debug("Got publisher SDP!");
+				Janus.debug(jsep);
+				var publish = { request: "configure", audio: useAudio, video: true };
+				// You can force a specific codec to use when publishing by using the
+				// audiocodec and videocodec properties, for instance:
+				// 		publish["audiocodec"] = "opus"
+				// to force Opus as the audio codec to use, or:
+				// 		publish["videocodec"] = "vp9"
+				// to force VP9 as the videocodec to use. In both case, though, forcing
+				// a codec will only work if: (1) the codec is actually in the SDP (and
+				// so the browser supports it), and (2) the codec is in the list of
+				// allowed codecs in a room. With respect to the point (2) above,
+				// refer to the text in janus.plugin.videoroom.cfg for more details
+				sfutest.send({ message: publish, jsep: jsep });
+			},
+			error: function(error) {
+				Janus.error("WebRTC error:", error);
+				if (useAudio) {
+					 publishOwnFeed(false);
+				} else {
+					bootbox.alert("WebRTC error... " + error.message);
+					$('#publish').removeAttr('disabled').click(function() { publishOwnFeed(true); });
+				}
+			}
+		});
+}
+
+function toggleMute() {
+	var muted = sfutest.isAudioMuted();
+	Janus.log((muted ? "Unmuting" : "Muting") + " local stream...");
+	if(muted)
+		sfutest.unmuteAudio();
+	else
+		sfutest.muteAudio();
+	muted = sfutest.isAudioMuted();
+	$('#mute').html(muted ? "Unmute" : "Mute");
+}
+
+function unpublishOwnFeed() {
+	// Unpublish our stream
+	$('#unpublish').attr('disabled', true).unbind('click');
+	var unpublish = { request: "unpublish" };
+	sfutest.send({ message: unpublish });
+}
+
+var creatingFeed = false;
+function subscribeTo(sources) {
+	// New feeds are available, do we need create a new plugin handle first?
+	if(remoteFeed) {
+		// Prepare the streams to subscribe to, as an array: we have the list of
+		// streams the feeds are publishing, so we can choose what to pick or skip
+		var subscription = [];
+		for(var s in sources) {
+			var streams = sources[s];
+			for(var i in streams) {
+				var stream = streams[i];
+				// If the publisher is VP8/VP9 and this is an older Safari, let's avoid video
+				if(stream.type === "video" && Janus.webRTCAdapter.browserDetails.browser === "safari" &&
+						(stream.codec === "vp9" || (stream.codec === "vp8" && !Janus.safariVp8))) {
+					toastr.warning("Publisher is using " + stream.codec.toUpperCase +
+						", but Safari doesn't support it: disabling video stream #" + stream.mindex);
+					continue;
+				}
+				// Find an empty slot in the UI for each new source
+				if(!feedStreams[stream.id].slot) {
+					var slot;
+					for(var i=1;i<6;i++) {
+						if(feeds[i] === undefined || feeds[i] === null) {
+							slot = i;
+							feeds[slot] = stream.id;
+							feedStreams[stream.id].slot = slot;
+							feedStreams[stream.id].remoteVideos = 0;
+							$('#remote' + slot).removeClass('hide').html(stream.display).show();
+							break;
+						}
+					}
+				}
+				subscription.push({
+					feed: stream.id,	// This is mandatory
+					mid: stream.mid		// This is optional (all streams, if missing)
+				});
+			}
+		}
+		remoteFeed.send({ message: {
+			request: "subscribe",
+			streams: subscription
+		}});
+		return;
+	}
+	// We don't have a handle yet, but we may be creating one already
+	if(creatingFeed) {
+		// Still working on the handle
+		setTimeout(function() {
+			subscribeTo(sources);
+		}, 500);
+		return;
+	}
+	creatingFeed = true;
+	janus.attach(
+		{
+			plugin: "janus.plugin.videoroom",
+			opaqueId: opaqueId,
+			success: function(pluginHandle) {
+				remoteFeed = pluginHandle;
+				remoteTracks = {};
+				Janus.log("Plugin attached! (" + remoteFeed.getPlugin() + ", id=" + remoteFeed.getId() + ")");
+				Janus.log("  -- This is a multistream subscriber");
+				// Prepare the streams to subscribe to, as an array: we have the list of
+				// streams the feed is publishing, so we can choose what to pick or skip
+				var subscription = [];
+				for(var s in sources) {
+					var streams = sources[s];
+					for(var i in streams) {
+						var stream = streams[i];
+						// If the publisher is VP8/VP9 and this is an older Safari, let's avoid video
+						if(stream.type === "video" && Janus.webRTCAdapter.browserDetails.browser === "safari" &&
+								(stream.codec === "vp9" || (stream.codec === "vp8" && !Janus.safariVp8))) {
+							toastr.warning("Publisher is using " + stream.codec.toUpperCase +
+								", but Safari doesn't support it: disabling video stream #" + stream.mindex);
+							continue;
+						}
+						// Find an empty slot in the UI for each new source
+						if(!feedStreams[stream.id].slot) {
+							var slot;
+							for(var i=1;i<6;i++) {
+								if(feeds[i] === undefined || feeds[i] === null) {
+									slot = i;
+									feeds[slot] = stream.id;
+									feedStreams[stream.id].slot = slot;
+									feedStreams[stream.id].remoteVideos = 0;
+									$('#remote' + slot).removeClass('hide').html(stream.display).show();
+									break;
+								}
+							}
+						}
+						subscription.push({
+							feed: stream.id,	// This is mandatory
+							mid: stream.mid		// This is optional (all streams, if missing)
+						});
+					}
+				}
+				// We wait for the plugin to send us an offer
+				var subscribe = {
+					request: "join",
+					room: myroom,
+					ptype: "subscriber",
+					streams: subscription,
+					private_id: mypvtid
+				};
+				remoteFeed.send({ message: subscribe });
+			},
+			error: function(error) {
+				Janus.error("  -- Error attaching plugin...", error);
+				bootbox.alert("Error attaching plugin... " + error);
+			},
+			iceState: function(state) {
+				Janus.log("ICE state (remote feed) changed to " + state);
+			},
+			webrtcState: function(on) {
+				Janus.log("Janus says this WebRTC PeerConnection (remote feed) is " + (on ? "up" : "down") + " now");
+			},
+			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 (subscriber) :::", msg);
+				var event = msg["videoroom"];
+				Janus.debug("Event: " + event);
+				if(msg["error"]) {
+					bootbox.alert(msg["error"]);
+				} else if(event) {
+					if(event === "attached") {
+						creatingFeed = false;
+						Janus.log("Successfully attached to feed in room " + msg["room"]);
+					} else if(event === "event") {
+						// Check if we got an event on a simulcast-related event from this publisher
+						var mid = msg["mid"];
+						var substream = msg["substream"];
+						var temporal = msg["temporal"];
+						if((substream !== null && substream !== undefined) || (temporal !== null && temporal !== undefined)) {
+							// Check which this feed this refers to
+							var sub = subStreams[mid];
+							var feed = feedStreams[sub.feed_id];
+							var slot = slots[mid];
+							if(!simulcastStarted[slot]) {
+								simulcastStarted[slot] = true;
+								// Add some new buttons
+								addSimulcastButtons(slot, true);
+							}
+							// We just received notice that there's been a switch, update the buttons
+							updateSimulcastButtons(slot, substream, temporal);
+						}
+					} else {
+						// What has just happened?
+					}
+				}
+				if(msg["streams"]) {
+					// Update map of subscriptions by mid
+					for(var i in msg["streams"]) {
+						var mid = msg["streams"][i]["mid"];
+						subStreams[mid] = msg["streams"][i];
+						var feed = feedStreams[msg["streams"][i]["feed_id"]];
+						if(feed && feed.slot) {
+							slots[mid] = feed.slot;
+							mids[feed.slot] = mid;
+						}
+					}
+				}
+				if(jsep !== undefined && jsep !== null) {
+					Janus.debug("Handling SDP as well...", jsep);
+					// Answer and attach
+					remoteFeed.createAnswer(
+						{
+							jsep: jsep,
+							// Add data:true here if you want to subscribe to datachannels as well
+							// (obviously only works if the publisher offered them in the first place)
+							media: { audioSend: false, videoSend: false },	// We want recvonly audio/video
+							success: function(jsep) {
+								Janus.debug("Got SDP!");
+								Janus.debug(jsep);
+								var body = { request: "start", room: myroom };
+								remoteFeed.send({ message: body, jsep: jsep });
+							},
+							error: function(error) {
+								Janus.error("WebRTC error:", error);
+								bootbox.alert("WebRTC error... " + error.message);
+							}
+						});
+				}
+			},
+			onlocaltrack: function(track, on) {
+				// The subscriber stream is recvonly, we don't expect anything here
+			},
+			onremotetrack: function(track, mid, on) {
+				Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+				// Which publisher are we getting on this mid?
+				var sub = subStreams[mid];
+				var feed = feedStreams[sub.feed_id];
+				Janus.debug(" >> This track is coming from feed " + sub.feed_id + ":", feed);
+				var slot = slots[mid];
+				if(feed && !slot) {
+					slot = feed.slot;
+					slots[mid] = feed.slot;
+					mids[feed.slot] = mid;
+				}
+				Janus.debug(" >> mid " + mid + " is in slot " + slot);
+				if(!on) {
+					// Track removed, get rid of the stream and the rendering
+					var stream = remoteTracks[mid];
+					if(stream) {
+						try {
+							var tracks = stream.getTracks();
+							for(var i in tracks) {
+								var mst = tracks[i];
+								if(mst)
+									mst.stop();
+							}
+						} catch(e) {}
+					}
+					$('#remotevideo' + slot + '-' + mid).remove();
+					if(track.kind === "video" && feed) {
+						feed.remoteVideos--;
+						if(feed.remoteVideos === 0) {
+							// No video, at least for now: show a placeholder
+							if($('#videoremote' + slot + ' .no-video-container').length === 0) {
+								$('#videoremote' + slot).append(
+									'<div class="no-video-container">' +
+										'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+										'<span class="no-video-text">No remote video available</span>' +
+									'</div>');
+							}
+						}
+					}
+					delete remoteTracks[mid];
+					delete slots[mid];
+					delete mids[slot];
+					return;
+				}
+				// If we're here, a new track was added
+				if(feed.spinner) {
+					feed.spinner.stop();
+					feed.spinner = null;
+				}
+				if($('#remotevideo' + slot + '-' + mid).length > 0)
+					return;
+				if(track.kind === "audio") {
+					// New audio track: create a stream out of it, and use a hidden <audio> element
+					stream = new MediaStream();
+					stream.addTrack(track.clone());
+					remoteTracks[mid] = stream;
+					Janus.log("Created remote audio stream:", stream);
+					$('#videoremote' + slot).append('<audio class="hide" id="remotevideo' + slot + '-' + mid + '" autoplay playsinline/>');
+					Janus.attachMediaStream($('#remotevideo' + slot + '-' + mid).get(0), stream);
+					if(feed.remoteVideos === 0) {
+						// No video, at least for now: show a placeholder
+						if($('#videoremote' + slot + ' .no-video-container').length === 0) {
+							$('#videoremote' + slot).append(
+								'<div class="no-video-container">' +
+									'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+									'<span class="no-video-text">No remote video available</span>' +
+								'</div>');
+						}
+					}
+				} else {
+					// New video track: create a stream out of it
+					feed.remoteVideos++;
+					$('#videoremote' + slot + ' .no-video-container').remove();
+					stream = new MediaStream();
+					stream.addTrack(track.clone());
+					remoteTracks[mid] = stream;
+					Janus.log("Created remote video stream:", stream);
+					$('#videoremote' + slot).append('<video class="rounded centered" id="remotevideo' + slot + '-' + mid + '" width=100% autoplay playsinline/>');
+					$('#videoremote' + slot).append(
+						'<span class="label label-primary hide" id="curres'+slot+'" style="position: absolute; bottom: 0px; left: 0px; margin: 15px;"></span>' +
+						'<span class="label label-info hide" id="curbitrate'+slot+'" style="position: absolute; bottom: 0px; right: 0px; margin: 15px;"></span>');
+					Janus.attachMediaStream($('#remotevideo' + slot + '-' + mid).get(0), stream);
+					// Note: we'll need this for additional videos too
+					if(!bitrateTimer[slot]) {
+						$('#curbitrate' + slot).removeClass('hide').show();
+						bitrateTimer[slot] = setInterval(function() {
+							if(!$("#videoremote" + slot + ' video').get(0))
+								return;
+							// Display updated bitrate, if supported
+							var bitrate = remoteFeed.getBitrate(mid);
+							$('#curbitrate' + slot).text(bitrate);
+							// Check if the resolution changed too
+							var width = $("#videoremote" + slot + ' video').get(0).videoWidth;
+							var height = $("#videoremote" + slot + ' video').get(0).videoHeight;
+							if(width > 0 && height > 0)
+								$('#curres' + slot).removeClass('hide').text(width+'x'+height).show();
+						}, 1000);
+					}
+				}
+			},
+			oncleanup: function() {
+				Janus.log(" ::: Got a cleanup notification (remote feed) :::");
+				for(var i=1;i<6;i++) {
+					$('#remotevideo'+i).remove();
+					$('#waitingvideo'+i).remove();
+					$('#novideo'+i).remove();
+					$('#curbitrate'+i).remove();
+					$('#curres'+i).remove();
+					if(bitrateTimer[i])
+						clearInterval(bitrateTimer[i]);
+					bitrateTimer[i] = null;
+					feedStreams[i].simulcastStarted = false;
+					feedStreams[i].remoteVideos = 0;
+					$('#simulcast'+i).remove();
+				}
+				remoteTracks = {};
+			}
+		});
+}
+
+function unsubscribeFrom(id) {
+	// Unsubscribe from this publisher
+	var feed = feedStreams[id];
+	if(!feed)
+		return;
+	Janus.debug("Feed " + id + " (" + feed.display + ") has left the room, detaching");
+	if(bitrateTimer[feed.slot])
+		clearInterval(bitrateTimer[feed.slot]);
+	bitrateTimer[feed.slot] = null;
+	$('#remote' + feed.slot).empty().hide();
+	$('#videoremote' + feed.slot).empty();
+	delete simulcastStarted[feed.slot];
+	$('#simulcast' + feed.slot).remove();
+	delete feeds[feed.slot];
+	feeds.slot = 0;
+	delete feedStreams[id];
+	// Send an unsubscribe request
+	var unsubscribe = {
+		request: "unsubscribe",
+		streams: [{ feed: id }]
+	};
+	if(remoteFeed != null)
+		remoteFeed.send({ message: unsubscribe });
+}
+
+// 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(feed, temporal) {
+	var index = feed;
+	$('#remote'+index).parent().append(
+		'<div id="simulcast'+index+'" class="btn-group-vertical btn-group-vertical-xs pull-right">' +
+		'	<div class"row">' +
+		'		<div class="btn-group btn-group-xs" style="width: 100%">' +
+		'			<button id="sl'+index+'-2" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to higher quality" style="width: 33%">SL 2</button>' +
+		'			<button id="sl'+index+'-1" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to normal quality" style="width: 33%">SL 1</button>' +
+		'			<button id="sl'+index+'-0" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to lower quality" style="width: 34%">SL 0</button>' +
+		'		</div>' +
+		'	</div>' +
+		'	<div class"row">' +
+		'		<div class="btn-group btn-group-xs hide" style="width: 100%">' +
+		'			<button id="tl'+index+'-2" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 2" style="width: 34%">TL 2</button>' +
+		'			<button id="tl'+index+'-1" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 1" style="width: 33%">TL 1</button>' +
+		'			<button id="tl'+index+'-0" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 0" style="width: 33%">TL 0</button>' +
+		'		</div>' +
+		'	</div>' +
+		'</div>'
+	);
+	// Enable the simulcast selection buttons
+	$('#sl' + index + '-0').removeClass('btn-primary btn-success').addClass('btn-primary')
+		.unbind('click').click(function() {
+			var index = $(this).attr('id').split('sl')[1].split('-')[0];
+			toastr.info("Switching simulcast substream (mid=" + mids[index] + "), wait for it... (lower quality)", null, {timeOut: 2000});
+			if(!$('#sl' + index + '-2').hasClass('btn-success'))
+				$('#sl' + index + '-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+			if(!$('#sl' + index + '-1').hasClass('btn-success'))
+				$('#sl' + index + '-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+			$('#sl' + index + '-0').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			remoteFeed.send({ message: { request: "configure", mid: mids[index], substream: 0 }});
+		});
+	$('#sl' + index + '-1').removeClass('btn-primary btn-success').addClass('btn-primary')
+		.unbind('click').click(function() {
+			var index = $(this).attr('id').split('sl')[1].split('-')[0];
+			toastr.info("Switching simulcast substream (mid=" + mids[index] + "), wait for it... (normal quality)", null, {timeOut: 2000});
+			if(!$('#sl' + index + '-2').hasClass('btn-success'))
+				$('#sl' + index + '-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+			$('#sl' + index + '-1').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			if(!$('#sl' + index + '-0').hasClass('btn-success'))
+				$('#sl' + index + '-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+			remoteFeed.send({ message: { request: "configure", mid: mids[index], substream: 1 }});
+		});
+	$('#sl' + index + '-2').removeClass('btn-primary btn-success').addClass('btn-primary')
+		.unbind('click').click(function() {
+			var index = $(this).attr('id').split('sl')[1].split('-')[0];
+			toastr.info("Switching simulcast substream (mid=" + mids[index] + "), wait for it... (higher quality)", null, {timeOut: 2000});
+			$('#sl' + index + '-2').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			if(!$('#sl' + index + '-1').hasClass('btn-success'))
+				$('#sl' + index + '-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+			if(!$('#sl' + index + '-0').hasClass('btn-success'))
+				$('#sl' + index + '-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+			remoteFeed.send({ message: { request: "configure", mid: mids[index], substream: 2 }});
+		});
+	if(!temporal)	// No temporal layer support
+		return;
+	$('#tl' + index + '-0').parent().removeClass('hide');
+	$('#tl' + index + '-0').removeClass('btn-primary btn-success').addClass('btn-primary')
+		.unbind('click').click(function() {
+			var index = $(this).attr('id').split('tl')[1].split('-')[0];
+			toastr.info("Capping simulcast temporal layer (mid=" + mids[index] + "), wait for it... (lowest FPS)", null, {timeOut: 2000});
+			if(!$('#tl' + index + '-2').hasClass('btn-success'))
+				$('#tl' + index + '-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+			if(!$('#tl' + index + '-1').hasClass('btn-success'))
+				$('#tl' + index + '-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+			$('#tl' + index + '-0').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			remoteFeed.send({ message: { request: "configure", mid: mids[index], temporal: 0 }});
+		});
+	$('#tl' + index + '-1').removeClass('btn-primary btn-success').addClass('btn-primary')
+		.unbind('click').click(function() {
+			var index = $(this).attr('id').split('tl')[1].split('-')[0];
+			toastr.info("Capping simulcast temporal layer (mid=" + mids[index] + "), wait for it... (medium FPS)", null, {timeOut: 2000});
+			if(!$('#tl' + index + '-2').hasClass('btn-success'))
+				$('#tl' + index + '-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+			$('#tl' + index + '-1').removeClass('btn-primary btn-info').addClass('btn-info');
+			if(!$('#tl' + index + '-0').hasClass('btn-success'))
+				$('#tl' + index + '-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+			remoteFeed.send({ message: { request: "configure", mid: mids[index], temporal: 1 }});
+		});
+	$('#tl' + index + '-2').removeClass('btn-primary btn-success').addClass('btn-primary')
+		.unbind('click').click(function() {
+			var index = $(this).attr('id').split('tl')[1].split('-')[0];
+			toastr.info("Capping simulcast temporal layer (mid=" + mids[index] + "), wait for it... (highest FPS)", null, {timeOut: 2000});
+			$('#tl' + index + '-2').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			if(!$('#tl' + index + '-1').hasClass('btn-success'))
+				$('#tl' + index + '-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+			if(!$('#tl' + index + '-0').hasClass('btn-success'))
+				$('#tl' + index + '-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+			remoteFeed.send({ message: { request: "configure", mid: mids[index], temporal: 2 }});
+		});
+}
+
+function updateSimulcastButtons(feed, substream, temporal) {
+	// Check the substream
+	var index = feed;
+	if(substream === 0) {
+		toastr.success("Switched simulcast substream! (lower quality)", null, {timeOut: 2000});
+		$('#sl' + index + '-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#sl' + index + '-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#sl' + index + '-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' + index + '-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#sl' + index + '-1').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#sl' + index + '-0').removeClass('btn-primary btn-success').addClass('btn-primary');
+	} else if(substream === 2) {
+		toastr.success("Switched simulcast substream! (higher quality)", null, {timeOut: 2000});
+		$('#sl' + index + '-2').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#sl' + index + '-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#sl' + index + '-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' + index + '-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#tl' + index + '-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#tl' + index + '-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' + index + '-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#tl' + index + '-1').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#tl' + index + '-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' + index + '-2').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#tl' + index + '-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#tl' + index + '-0').removeClass('btn-primary btn-success').addClass('btn-primary');
+	}
+}
diff --git a/html/navbar.html b/html/navbar.html
index 2f8ecf2fcb..d381fc4c48 100644
--- a/html/navbar.html
+++ b/html/navbar.html
@@ -19,6 +19,7 @@
 					<li><a href="videocalltest.html">Video Call</a></li>
 					<li><a href="siptest.html">SIP Gateway</a></li>
 					<li><a href="videoroomtest.html">Video Room</a></li>
+					<li><a href="mvideoroomtest.html">Video Room (multistream)</a></li>
 					<li><a href="audiobridgetest.html">Audio Bridge</a></li>
 					<li><a href="textroomtest.html">Text Room</a></li>
 					<li><a href="voicemailtest.html">Voice Mail</a></li>
diff --git a/html/nosiptest.js b/html/nosiptest.js
index 098e00ff14..55c7c34698 100644
--- a/html/nosiptest.js
+++ b/html/nosiptest.js
@@ -53,7 +53,9 @@ var janus = null;
 // We'll need two handles for this demo: a caller and a callee
 var caller = null, callee = null;
 var opaqueId = Janus.randomString(12);
-
+// The local and remote tracks only refer to the caller, though (we ignore the callee)
+var localTracks = {}, localVideos = 0,
+	remoteTracks = {}, remoteVideos = 0;
 var spinner = null;
 
 var videoenabled = true;
@@ -142,16 +144,16 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("[caller] ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("[caller] Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									Janus.log("[caller] Janus " + (on ? "started" : "stopped") + " receiving our " + medium + " (mid=" + mid + ")");
 								},
 								webrtcState: function(on) {
 									Janus.log("[caller] Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now");
 									$("#videoleft").parent().unblock();
 								},
-								slowLink: function(uplink, lost) {
+								slowLink: function(uplink, lost, mid) {
 									Janus.warn("[caller] Janus reports problems " + (uplink ? "sending" : "receiving") +
-										" packets on this PeerConnection (" + lost + " lost packets)");
+										" packets on mid " + mid + " (" + lost + " lost packets)");
 								},
 								onmessage: function(msg, jsep) {
 									Janus.debug("[caller]  ::: Got a message :::", msg);
@@ -191,13 +193,72 @@ $(document).ready(function() {
 										}
 									}
 								},
-								onlocalstream: function(stream) {
-									Janus.debug("[caller]  ::: Got a local stream :::", stream);
-									$('#videos').removeClass('hide').show();
-									if($('#myvideo').length === 0)
-										$('#videoleft').append('<video class="rounded centered" id="myvideo" width=320 height=240 autoplay playsinline muted="muted"/>');
-									Janus.attachMediaStream($('#myvideo').get(0), stream);
-									$("#myvideo").get(0).muted = "muted";
+								onlocaltrack: function(track, on) {
+									Janus.debug("[caller] Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										if(track.kind === "video") {
+											$('#myvideo' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videoleft .no-video-container').length === 0) {
+													$('#videoleft').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
+									if($('#videoleft video').length === 0) {
+										$('#videos').removeClass('hide').show();
+									}
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoleft .no-video-container').length === 0) {
+												$('#videoleft').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
+										}
+									} else {
+										// New video track: create a stream out of it
+										localVideos++;
+										$('#videoleft .no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("[caller] Created local stream:", stream);
+										$('#videoleft').append('<video class="rounded centered" id="myvideo' + trackId + '" width=320 height=240 autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#myvideo' + trackId).get(0), stream);
+									}
 									if(caller.webrtcStuff.pc.iceConnectionState !== "completed" &&
 											caller.webrtcStuff.pc.iceConnectionState !== "connected") {
 										$("#videoleft").parent().block({
@@ -208,38 +269,45 @@ $(document).ready(function() {
 												color: 'white'
 											}
 										});
-										// No remote video yet
-										$('#videoright').append('<video class="rounded centered" id="waitingvideo" width=320 height=240 />');
-										if(spinner == null) {
-											var target = document.getElementById('videoright');
-											spinner = new Spinner({top:100}).spin(target);
-										} else {
-											spinner.spin();
-										}
 									}
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No webcam
-										$('#myvideo').hide();
-										if($('#videoleft .no-video-container').length === 0) {
-											$('#videoleft').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No webcam available</span>' +
-												'</div>');
+								},
+								onremotetrack: function(track, mid, on) {
+									Janus.debug("[caller] Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = remoteTracks[mid];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
 										}
-									} else {
-										$('#videoleft .no-video-container').remove();
-										$('#myvideo').removeClass('hide').show();
+										$('#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(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No remote video available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete remoteTracks[mid];
+										return;
 									}
-								},
-								onremotestream: function(stream) {
-									Janus.debug("[caller]  ::: Got a remote stream :::", stream);
-									if($('#peervideo').length === 0) {
+									// If we're here, a new track was added
+									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
+										$('#videos').removeClass('hide').show();
 										$('#videoright').parent().find('h3').html(
 											'Send DTMF: <span id="dtmf" class="btn-group btn-group-xs"></span>');
-										$('#videoright').append(
-											'<video class="rounded centered hide" id="peervideo" width=320 height=240 autoplay playsinline/>');
 										for(var i=0; i<12; i++) {
 											if(i<10)
 												$('#dtmf').append('<button class="btn btn-info dtmf">' + i + '</button>');
@@ -252,79 +320,49 @@ $(document).ready(function() {
 											// Send DTMF tone (inband)
 											caller.dtmf({dtmf: { tones: $(this).text()}});
 										});
-										// Show the peer and hide the spinner when we get a playing event
-										$("#peervideo").bind("playing", function () {
-											$('#waitingvideo').remove();
-											if(this.videoWidth)
-												$('#peervideo').removeClass('hide').show();
-											if(spinner)
-												spinner.stop();
-											spinner = null;
-										});
 									}
-									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(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No remote video available</span>' +
-												'</div>');
+									if(track.kind === "audio") {
+										// New audio track: create a stream out of it, and use a hidden <audio> element
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("[caller] Created remote audio stream:", stream);
+										$('#videoright').append('<audio class="hide" id="peervideo' + mid + '" autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
+										if(remoteVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoright .no-video-container').length === 0) {
+												$('#videoright').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No remote video available</span>' +
+													'</div>');
+											}
 										}
 									} else {
+										// New video track: create a stream out of it
+										remoteVideos++;
 										$('#videoright .no-video-container').remove();
-										$('#peervideo').removeClass('hide').show();
-									}
-
-									if(videoenabled) {
-										$('#togglevideo').html("Disable video").removeClass("btn-success").addClass("btn-danger");
-									} else {
-										$('#togglevideo').html("Enable video").removeClass("btn-danger").addClass("btn-success");
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("[caller] Created remote video stream:", stream);
+										$('#videoright').append('<video class="rounded centered" id="peervideo' + mid + '" width=320 height=240 autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
 									}
-
-									$('#togglevideo').unbind('click').removeAttr('disabled').click(
-										function() {
-											videoenabled = !videoenabled;
-											var media;
-											if(videoenabled) {
-												$('#togglevideo').html("Disable video").removeClass("btn-success").addClass("btn-danger");
-												media = {addVideo: true};
-											} else {
-												$('#togglevideo').html("Enable video").removeClass("btn-danger").addClass("btn-success");
-												media = {removeVideo: true};
-											}
-											caller.createOffer(
-												{
-													media: media,
-													success: function(jsep) {
-														Janus.debug("[caller] Got UPDATE SDP!");
-														Janus.debug(jsep);
-														var body = {
-															request: "generate",
-															update: true,
-															srtp: srtp
-														};
-														caller.send({message: body, jsep: jsep});
-													},
-													error: function(error) {
-														Janus.error("WebRTC error:", error);
-														bootbox.alert("WebRTC error... " + JSON.stringify(error));
-													}
-												});
-										});
 								},
 								oncleanup: function() {
 									Janus.log("[caller]  ::: Got a cleanup notification :::");
 									if(spinner)
 										spinner.stop();
 									spinner = null;
-									$('#myvideo').remove();
-									$('#waitingvideo').remove();
-									$("#videoleft").parent().unblock();
-									$('#peervideo').remove();
+									$("#videoleft").empty().parent().unblock();
+									$('#videoright').empty();
+									$('#dtmf').parent().html("Remote UA");
+									localTracks = {};
+									localVideos = 0;
+									remoteTracks = {};
+									remoteVideos = 0;
 								}
 							});
 						// Attach to NoSIP plugin as a callee
@@ -362,16 +400,16 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("[callee] ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("[callee] Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									Janus.log("[callee] Janus " + (on ? "started" : "stopped") + " receiving our " + medium + " (mid=" + mid + ")");
 								},
 								webrtcState: function(on) {
 									Janus.log("[callee] Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now");
 									$("#videoleft").parent().unblock();
 								},
-								slowLink: function(uplink, lost) {
+								slowLink: function(uplink, lost, mid) {
 									Janus.warn("[callee] Janus reports problems " + (uplink ? "sending" : "receiving") +
-										" packets on this PeerConnection (" + lost + " lost packets)");
+										" packets on mid " + mid + " (" + lost + " lost packets)");
 								},
 								onmessage: function(msg, jsep) {
 									Janus.debug("[callee]  ::: Got a message :::", msg);
@@ -435,10 +473,10 @@ $(document).ready(function() {
 										}
 									}
 								},
-								onlocalstream: function(stream) {
+								onlocaltrack: function(track, on) {
 									// The callee is our fake peer, we don't display anything
 								},
-								onremotestream: function(stream) {
+								onremotetrack: function(track, mid, on) {
 									// The callee is our fake peer, we don't display anything
 								},
 								oncleanup: function() {
diff --git a/html/recordplaytest.js b/html/recordplaytest.js
index 075032beea..0c09d37885 100644
--- a/html/recordplaytest.js
+++ b/html/recordplaytest.js
@@ -52,6 +52,8 @@ var janus = null;
 var recordplay = null;
 var opaqueId = "recordplaytest-"+Janus.randomString(12);
 
+var localTracks = {}, localVideos = 0,
+	remoteTracks = {}, remoteVideos = 0;
 var spinner = null;
 var bandwidth = 1024 * 1024;
 
@@ -129,13 +131,17 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									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");
 									$("#videobox").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);
 									var result = msg["result"];
@@ -233,17 +239,77 @@ $(document).ready(function() {
 										updateRecsList();
 									}
 								},
-								onlocalstream: function(stream) {
+								onlocaltrack: function(track, on) {
 									if(playing === true)
 										return;
-									Janus.debug(" ::: Got a local stream :::", stream);
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										if(track.kind === "video") {
+											$('#thevideo' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videobox .no-video-container').length === 0) {
+													$('#videobox').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
 									$('#videotitle').html("Recording...");
 									$('#stop').unbind('click').click(stop);
 									$('#video').removeClass('hide').show();
-									if($('#thevideo').length === 0)
-										$('#videobox').append('<video class="rounded centered" id="thevideo" width=320 height=240 autoplay playsinline muted="muted"/>');
-									Janus.attachMediaStream($('#thevideo').get(0), stream);
-									$("#thevideo").get(0).muted = "muted";
+									if($('#videobox video').length === 0) {
+										$('#videos').removeClass('hide').show();
+									}
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videobox .no-video-container').length === 0) {
+												$('#videobox').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
+										}
+									} else {
+										// New video track: create a stream out of it
+										localVideos++;
+										$('#videobox .no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("Created local stream:", stream);
+										$('#videobox').append('<video class="rounded centered" id="thevideo' + trackId + '" width=320 height=240 autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#thevideo' + trackId).get(0), stream);
+									}
 									if(recordplay.webrtcStuff.pc.iceConnectionState !== "completed" &&
 											recordplay.webrtcStuff.pc.iceConnectionState !== "connected") {
 										$("#videobox").parent().block({
@@ -255,63 +321,75 @@ $(document).ready(function() {
 											}
 										});
 									}
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No remote video
-										$('#thevideo').hide();
-										if($('#videobox .no-video-container').length === 0) {
-											$('#videobox').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No remote video available</span>' +
-												'</div>');
-										}
-									} else {
-										$('#videobox .no-video-container').remove();
-										$('#thevideo').removeClass('hide').show();
-									}
 								},
-								onremotestream: function(stream) {
+								onremotetrack: function(track, mid, on) {
 									if(playing === false)
 										return;
-									Janus.debug(" ::: Got a remote stream :::", stream);
-									if($('#thevideo').length === 0) {
+									Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = remoteTracks[mid];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										$('#thevideo' + mid).remove();
+										if(track.kind === "video") {
+											remoteVideos--;
+											if(remoteVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videobox .no-video-container').length === 0) {
+													$('#videobox').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No remote video available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete remoteTracks[mid];
+										return;
+									}
+									// If we're here, a new track was added
+									if($('#videobox audio').length === 0 && $('#videobox video').length === 0) {
 										$('#videotitle').html(selectedRecordingInfo);
 										$('#stop').unbind('click').click(stop);
 										$('#video').removeClass('hide').show();
-										$('#videobox').append('<video class="rounded centered hide" id="thevideo" width=320 height=240 autoplay playsinline/>');
-										// No remote video yet
-										$('#videobox').append('<video class="rounded centered" id="waitingvideo" width=320 height=240 />');
-										if(spinner == null) {
-											var target = document.getElementById('videobox');
-											spinner = new Spinner({top:100}).spin(target);
-										} else {
-											spinner.spin();
-										}
-										// Show the video, hide the spinner and show the resolution when we get a playing event
-										$("#thevideo").bind("playing", function () {
-											$('#waitingvideo').remove();
-											$('#thevideo').removeClass('hide');
-											if(spinner)
-												spinner.stop();
-											spinner = null;
-										});
 									}
-									Janus.attachMediaStream($('#thevideo').get(0), stream);
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No remote video
-										$('#thevideo').hide();
-										if($('#videobox .no-video-container').length === 0) {
-											$('#videobox').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No remote video available</span>' +
-												'</div>');
+									if(track.kind === "audio") {
+										// New audio track: create a stream out of it, and use a hidden <audio> element
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote audio stream:", stream);
+										$('#videobox').append('<audio class="hide" id="thevideo' + mid + '" autoplay playsinline/>');
+										Janus.attachMediaStream($('#thevideo' + mid).get(0), stream);
+										if(remoteVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videobox .no-video-container').length === 0) {
+												$('#videobox').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No remote video available</span>' +
+													'</div>');
+											}
 										}
 									} else {
+										// New video track: create a stream out of it
+										remoteVideos++;
 										$('#videobox .no-video-container').remove();
-										$('#thevideo').removeClass('hide').show();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote video stream:", stream);
+										$('#videobox').append('<video class="rounded centered" id="thevideo' + mid + '" width=320 height=240 autoplay playsinline/>');
+										Janus.attachMediaStream($('#thevideo' + mid).get(0), stream);
 									}
 								},
 								oncleanup: function() {
@@ -331,6 +409,10 @@ $(document).ready(function() {
 									$('#list').removeAttr('disabled').click(updateRecsList);
 									$('#recset').removeAttr('disabled');
 									$('#recslist').removeAttr('disabled');
+									localTracks = {};
+									localVideos = 0;
+									remoteTracks = {};
+									remoteVideos = 0;
 									updateRecsList();
 								}
 							});
diff --git a/html/screensharingtest.js b/html/screensharingtest.js
index e9165d5b79..5ff8c31854 100644
--- a/html/screensharingtest.js
+++ b/html/screensharingtest.js
@@ -61,6 +61,8 @@ var role = null;
 var room = null;
 var source = null;
 
+var localTracks = {}, localVideos = 0,
+	remoteTracks = {}, remoteVideos = 0;
 var spinner = null;
 
 
@@ -138,8 +140,8 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									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");
@@ -153,6 +155,10 @@ $(document).ready(function() {
 										});
 									}
 								},
+								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 (publisher) :::", msg);
 									var event = msg["videoroom"];
@@ -222,17 +228,73 @@ $(document).ready(function() {
 										screentest.handleRemoteJsep({ jsep: jsep });
 									}
 								},
-								onlocalstream: function(stream) {
-									Janus.debug(" ::: Got a local stream :::", stream);
+								onlocaltrack: function(track, on) {
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										if(track.kind === "video") {
+											$('#screenvideo' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#screencapture .no-video-container').length === 0) {
+													$('#screencapture').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
 									$('#screenmenu').hide();
-									$('#room').removeClass('hide').show();
-									if($('#screenvideo').length === 0) {
-										$('#screencapture').append('<video class="rounded centered" id="screenvideo" width="100%" height="100%" autoplay playsinline muted="muted"/>');
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#screencapture .no-video-container').length === 0) {
+												$('#screencapture').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
+										}
+									} else {
+										// New video track: create a stream out of it
+										localVideos++;
+										$('#screencapture .no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("Created local stream:", stream);
+										$('#screencapture').append('<video class="rounded centered" id="screenvideo' + trackId + '" width=100% autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#screenvideo' + trackId).get(0), stream);
 									}
-									Janus.attachMediaStream($('#screenvideo').get(0), stream);
 									if(screentest.webrtcStuff.pc.iceConnectionState !== "completed" &&
 											screentest.webrtcStuff.pc.iceConnectionState !== "connected") {
-										$("#screencapture").parent().block({
+										$("#screencapture").parent().parent().block({
 											message: '<b>Publishing...</b>',
 											css: {
 												border: 'none',
@@ -242,7 +304,7 @@ $(document).ready(function() {
 										});
 									}
 								},
-								onremotestream: function(stream) {
+								onremotetrack: function(track, mid, on) {
 									// The publisher stream is sendonly, we don't expect anything here
 								},
 								oncleanup: function() {
@@ -250,6 +312,8 @@ $(document).ready(function() {
 									$('#screencapture').empty();
 									$("#screencapture").parent().unblock();
 									$('#room').hide();
+									localTracks = {};
+									localVideos = 0;
 								}
 							});
 					},
@@ -409,6 +473,8 @@ function newRemoteFeed(id, display) {
 			opaqueId: opaqueId,
 			success: function(pluginHandle) {
 				remoteFeed = pluginHandle;
+				remoteFeed.remoteTracks = {};
+				remoteFeed.remoteVideos = 0;
 				Janus.log("Plugin attached! (" + remoteFeed.getPlugin() + ", id=" + remoteFeed.getId() + ")");
 				Janus.log("  -- This is a subscriber");
 				// We wait for the plugin to send us an offer
@@ -424,6 +490,16 @@ function newRemoteFeed(id, display) {
 				Janus.error("  -- Error attaching plugin...", error);
 				bootbox.alert("Error attaching plugin... " + error);
 			},
+			iceState: function(state) {
+				Janus.log("ICE state (feed #" + remoteFeed.rfindex + ") changed to " + state);
+			},
+			webrtcState: function(on) {
+				Janus.log("Janus says this WebRTC PeerConnection (feed #" + remoteFeed.rfindex + ") is " + (on ? "up" : "down") + " now");
+			},
+			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 (listener) :::", msg);
 				var event = msg["videoroom"];
@@ -463,24 +539,75 @@ function newRemoteFeed(id, display) {
 						});
 				}
 			},
-			onlocalstream: function(stream) {
+			onlocaltrack: function(track, on) {
 				// The subscriber stream is recvonly, we don't expect anything here
 			},
-			onremotestream: function(stream) {
-				if($('#screenvideo').length === 0) {
-					// No remote video yet
-					$('#screencapture').append('<video class="rounded centered" id="waitingvideo" width="100%" height="100%" />');
-					$('#screencapture').append('<video class="rounded centered hide" id="screenvideo" width="100%" height="100%" autoplay playsinline/>');
-					// Show the video, hide the spinner and show the resolution when we get a playing event
-					$("#screenvideo").bind("playing", function () {
-						$('#waitingvideo').remove();
-						$('#screenvideo').removeClass('hide');
-						if(spinner)
-							spinner.stop();
-						spinner = null;
-					});
+			onremotetrack: function(track, mid, on) {
+				Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+				if(!on) {
+					// Track removed, get rid of the stream and the rendering
+					var stream = remoteTracks[mid];
+					if(stream) {
+						try {
+							var tracks = stream.getTracks();
+							for(var i in tracks) {
+								var mst = tracks[i];
+								if(mst)
+									mst.stop();
+							}
+						} catch(e) {}
+					}
+					$('#screenvideo' + mid).remove();
+					if(track.kind === "video") {
+						remoteVideos--;
+						if(remoteVideos === 0) {
+							// No video, at least for now: show a placeholder
+							if($('#screencapture .no-video-container').length === 0) {
+								$('#screencapture').append(
+									'<div class="no-video-container">' +
+										'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+										'<span class="no-video-text">No remote video available</span>' +
+									'</div>');
+							}
+						}
+					}
+					delete remoteTracks[mid];
+					return;
+				}
+				// If we're here, a new track was added
+				if(spinner !== undefined && spinner !== null) {
+					spinner.stop();
+					spinner = null;
+				}
+				if(track.kind === "audio") {
+					// New audio track: create a stream out of it, and use a hidden <audio> element
+					stream = new MediaStream();
+					stream.addTrack(track.clone());
+					remoteTracks[mid] = stream;
+					Janus.log("Created remote audio stream:", stream);
+					$('#screencapture').append('<audio class="hide" id="screenvideo' + mid + '" autoplay playsinline/>');
+					Janus.attachMediaStream($('#screenvideo' + mid).get(0), stream);
+					if(remoteVideos === 0) {
+						// No video, at least for now: show a placeholder
+						if($('#screencapture .no-video-container').length === 0) {
+							$('#screencapture').append(
+								'<div class="no-video-container">' +
+									'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+									'<span class="no-video-text">No remote video available</span>' +
+								'</div>');
+						}
+					}
+				} else {
+					// New video track: create a stream out of it
+					remoteVideos++;
+					$('#screencapture .no-video-container').remove();
+					stream = new MediaStream();
+					stream.addTrack(track.clone());
+					remoteFeed.remoteTracks[mid] = stream;
+					Janus.log("Created remote video stream:", stream);
+					$('#screencapture').append('<video class="rounded centered" id="screenvideo' + mid + '" width=100% autoplay playsinline/>');
+					Janus.attachMediaStream($('#screenvideo' + mid).get(0), stream);
 				}
-				Janus.attachMediaStream($('#screenvideo').get(0), stream);
 			},
 			oncleanup: function() {
 				Janus.log(" ::: Got a cleanup notification (remote feed " + id + ") :::");
@@ -488,6 +615,8 @@ function newRemoteFeed(id, display) {
 				if(spinner)
 					spinner.stop();
 				spinner = null;
+				remoteFeed.remoteTracks = {};
+				remoteFeed.remoteVideos = 0;
 			}
 		});
 }
diff --git a/html/siptest.js b/html/siptest.js
index 52de4d02dd..cf97011bc3 100644
--- a/html/siptest.js
+++ b/html/siptest.js
@@ -52,6 +52,8 @@ var janus = null;
 var sipcall = null;
 var opaqueId = "siptest-"+Janus.randomString(12);
 
+var localTracks = {}, localVideos = 0,
+	remoteTracks = {}, remoteVideos = 0;
 var spinner = null;
 
 var selectedApproach = null;
@@ -146,13 +148,17 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									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);
 									// Any error?
@@ -449,13 +455,72 @@ $(document).ready(function() {
 										}
 									}
 								},
-								onlocalstream: function(stream) {
-									Janus.debug(" ::: Got a local stream :::", stream);
-									$('#videos').removeClass('hide').show();
-									if($('#myvideo').length === 0)
-										$('#videoleft').append('<video class="rounded centered" id="myvideo" width=320 height=240 autoplay playsinline muted="muted"/>');
-									Janus.attachMediaStream($('#myvideo').get(0), stream);
-									$("#myvideo").get(0).muted = "muted";
+								onlocaltrack: function(track, on) {
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										if(track.kind === "video") {
+											$('#myvideot' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videoleft .no-video-container').length === 0) {
+													$('#videoleft').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
+									if($('#videoleft video').length === 0) {
+										$('#videos').removeClass('hide').show();
+									}
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoleft .no-video-container').length === 0) {
+												$('#videoleft').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
+										}
+									} else {
+										// New video track: create a stream out of it
+										localVideos++;
+										$('#videoleft .no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("Created local stream:", stream);
+										$('#videoleft').append('<video class="rounded centered" id="myvideot' + trackId + '" width=320 height=240 autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#myvideot' + trackId).get(0), stream);
+									}
 									if(sipcall.webrtcStuff.pc.iceConnectionState !== "completed" &&
 											sipcall.webrtcStuff.pc.iceConnectionState !== "connected") {
 										$("#videoleft").parent().block({
@@ -466,43 +531,45 @@ $(document).ready(function() {
 												color: 'white'
 											}
 										});
-										// No remote video yet
-										$('#videoright').append('<video class="rounded centered" id="waitingvideo" width=320 height=240 />');
-										if(spinner == null) {
-											var target = document.getElementById('videoright');
-											spinner = new Spinner({top:100}).spin(target);
-										} else {
-											spinner.spin();
-										}
 									}
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No webcam
-										$('#myvideo').hide();
-										if($('#videoleft .no-video-container').length === 0) {
-											$('#videoleft').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No webcam available</span>' +
-												'</div>');
+								},
+								onremotetrack: function(track, mid, on) {
+									Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = remoteTracks[mid];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
 										}
-									} else {
-										$('#videoleft .no-video-container').remove();
-										$('#myvideo').removeClass('hide').show();
+										$('#peervideom' + 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(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No remote video available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete remoteTracks[mid];
+										return;
 									}
-								},
-								onremotestream: function(stream) {
-									Janus.debug(" ::: Got a remote stream :::", stream);
-									if($('#remotevideo').length === 0) {
+									// If we're here, a new track was added
+									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
+										$('#videos').removeClass('hide').show();
 										$('#videoright').parent().find('h3').html(
-											'Send DTMF: <span id="dtmf" class="btn-group btn-group-xs"></span>' +
-											'<span id="ctrls" class="pull-right btn-group btn-group-xs">' +
-												'<button id="msg" title="Send message" class="btn btn-info"><i class="fa fa-envelope"></i></button>' +
-												'<button id="info" title="Send INFO" class="btn btn-info"><i class="fa fa-info"></i></button>' +
-												'<button id="transfer" title="Transfer call" class="btn btn-info"><i class="fa fa-mail-forward"></i></button>' +
-											'</span>');
-										$('#videoright').append(
-											'<video class="rounded centered hide" id="remotevideo" width=320 height=240 autoplay playsinline/>');
+											'Send DTMF: <span id="dtmf" class="btn-group btn-group-xs"></span>');
 										for(var i=0; i<12; i++) {
 											if(i<10)
 												$('#dtmf').append('<button class="btn btn-info dtmf">' + i + '</button>');
@@ -515,7 +582,7 @@ $(document).ready(function() {
 											// Send DTMF tone (inband)
 											sipcall.dtmf({dtmf: { tones: $(this).text()}});
 											// Notice you can also send DTMF tones using SIP INFO
-											// 		sipcall.send({ message: { request: "dtmf_info", digit: $(this).text() }});
+											// 		sipcall.send({message: {request: "dtmf_info", digit: $(this).text()}});
 										});
 										$('#msg').click(function() {
 											bootbox.prompt("Insert message to send", function(result) {
@@ -595,43 +662,49 @@ $(document).ready(function() {
 												}
 											});
 										});
-										// Show the peer and hide the spinner when we get a playing event
-										$("#remotevideo").bind("playing", function () {
-											$('#waitingvideo').remove();
-											if(this.videoWidth)
-												$('#remotevideo').removeClass('hide').show();
-											if(spinner)
-												spinner.stop();
-											spinner = null;
-										});
 									}
-									Janus.attachMediaStream($('#remotevideo').get(0), stream);
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No remote video
-										$('#remotevideo').hide();
-										if($('#videoright .no-video-container').length === 0) {
-											$('#videoright').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No remote video available</span>' +
-												'</div>');
+									if(track.kind === "audio") {
+										// New audio track: create a stream out of it, and use a hidden <audio> element
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote audio stream:", stream);
+										$('#videoright').append('<audio class="hide" id="peervideom' + mid + '" autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideom' + mid).get(0), stream);
+										if(remoteVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoright .no-video-container').length === 0) {
+												$('#videoright').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No remote video available</span>' +
+													'</div>');
+											}
 										}
 									} else {
+										// New video track: create a stream out of it
+										remoteVideos++;
 										$('#videoright .no-video-container').remove();
-										$('#remotevideo').removeClass('hide').show();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote video stream:", stream);
+										$('#videoright').append('<video class="rounded centered" id="peervideom' + mid + '" width=320 height=240 autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideom' + mid).get(0), stream);
 									}
 								},
 								oncleanup: function() {
 									Janus.log(" ::: Got a cleanup notification :::");
-									$('#myvideo').remove();
-									$('#waitingvideo').remove();
-									$('#remotevideo').remove();
-									$('#videos .no-video-container').remove();
+									$("#videoleft").empty().parent().unblock();
+									$('#videoright').empty();
 									$('#videos').hide();
 									$('#dtmf').parent().html("Remote UA");
 									if(sipcall)
 										sipcall.callId = null;
+									localTracks = {};
+									localVideos = 0;
+									remoteTracks = {};
+									remoteVideos = 0;
 								}
 							});
 					},
@@ -945,7 +1018,9 @@ function doHangup(ev) {
 function addHelper(helperCreated) {
 	helpersCount++;
 	var helperId = helpersCount;
-	helpers[helperId] = { id: helperId };
+	helpers[helperId] = { id: helperId,
+		localTracks: {}, localVideos: 0,
+		remoteTracks: {}, remoteVideos: 0 };
 	// Add another row with a new "phone"
 	$('.footer').before(
 		'<div class="container" id="sipcall' + helperId + '">' +
@@ -1035,13 +1110,17 @@ function addHelper(helperCreated) {
 			iceState: function(state) {
 				Janus.log("[Helper #" + helperId + "] ICE state changed to " + state);
 			},
-			mediaState: function(medium, on) {
-				Janus.log("[Helper #" + helperId + "] Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+			mediaState: function(medium, mid, on) {
+				Janus.log("[Helper #" + helperId + "] Janus " + (on ? "started" : "stopped") + " receiving our " + medium + " (mid=" + mid + ")");
 			},
 			webrtcState: function(on) {
 				Janus.log("[Helper #" + helperId + "] Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now");
 				$("#videoleft" + helperId).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("[Helper #" + helperId + "]  ::: Got a message :::", msg);
 				// Any error?
@@ -1316,13 +1395,72 @@ function addHelper(helperCreated) {
 					}
 				}
 			},
-			onlocalstream: function(stream) {
-				Janus.debug("[Helper #" + helperId + "]  ::: Got a local stream :::", stream);
-				$('#videos' + helperId).removeClass('hide').show();
-				if($('#myvideo' + helperId).length === 0)
-					$('#videoleft' + helperId).append('<video class="rounded centered" id="myvideo' + helperId + '" width=320 height=240 autoplay playsinline muted="muted"/>');
-				Janus.attachMediaStream($('#myvideo' + helperId).get(0), stream);
-				$("#myvideo" + helperId).get(0).muted = "muted";
+			onlocaltrack: function(track, on) {
+				Janus.debug("[Helper #" + helperId + "] Local track " + (on ? "added" : "removed") + ":", track);
+				// We use the track ID as name of the element, but it may contain invalid characters
+				var trackId = track.id.replace(/[{}]/g, "");
+				if(!on) {
+					// Track removed, get rid of the stream and the rendering
+					var stream = helpers[helperId].localTracks[trackId];
+					if(stream) {
+						try {
+							var tracks = stream.getTracks();
+							for(var i in tracks) {
+								var mst = tracks[i];
+								if(mst)
+									mst.stop();
+							}
+						} catch(e) {}
+					}
+					if(track.kind === "video") {
+						$('#myvideo' + helperId + 't' + trackId).remove();
+						helpers[helperId].localVideos--;
+						if(helpers[helperId].localVideos === 0) {
+							// No video, at least for now: show a placeholder
+							if($('#videoleft' + helperId + ' .no-video-container').length === 0) {
+								$('#videoleft' + helperId).append(
+									'<div class="no-video-container">' +
+										'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+										'<span class="no-video-text">No webcam available</span>' +
+									'</div>');
+							}
+						}
+					}
+					delete helpers[helperId].localTracks[trackId];
+					return;
+				}
+				// If we're here, a new track was added
+				var stream = helpers[helperId].localTracks[trackId];
+				if(stream) {
+					// We've been here already
+					return;
+				}
+				if($('#videoleft' + helperId + ' video').length === 0) {
+					$('#videos' + helperId).removeClass('hide').show();
+				}
+				if(track.kind === "audio") {
+					// We ignore local audio tracks, they'd generate echo anyway
+					if(helpers[helperId].localVideos === 0) {
+						// No video, at least for now: show a placeholder
+						if($('#videoleft' + helperId + ' .no-video-container').length === 0) {
+							$('#videoleft' + helperId).append(
+								'<div class="no-video-container">' +
+									'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+									'<span class="no-video-text">No webcam available</span>' +
+								'</div>');
+						}
+					}
+				} else {
+					// New video track: create a stream out of it
+					helpers[helperId].localVideos++;
+					$('#videoleft' + helperId + ' .no-video-container').remove();
+					stream = new MediaStream();
+					stream.addTrack(track.clone());
+					helpers[helperId].localTracks[trackId] = stream;
+					Janus.log("[Helper #" + helperId + "] Created local stream:", stream);
+					$('#videoleft' + helperId).append('<video class="rounded centered" id="myvideo' + helperId + 't' + trackId + '" width=320 height=240 autoplay playsinline muted="muted"/>');
+					Janus.attachMediaStream($('#myvideo' + helperId + 't' + trackId).get(0), stream);
+				}
 				if(helpers[helperId].sipcall.webrtcStuff.pc.iceConnectionState !== "completed" &&
 						helpers[helperId].sipcall.webrtcStuff.pc.iceConnectionState !== "connected") {
 					$("#videoleft" + helperId).parent().block({
@@ -1333,43 +1471,45 @@ function addHelper(helperCreated) {
 							color: 'white'
 						}
 					});
-					// No remote video yet
-					$('#videoright' + helperId).append('<video class="rounded centered" id="waitingvideo' + helperId + '" width=320 height=240 />');
-					if(helpers[helperId].spinner == null) {
-						var target = document.getElementById('videoright' + helperId);
-						helpers[helperId].spinner = new Spinner({top:100}).spin(target);
-					} else {
-						helpers[helperId].spinner.spin();
-					}
 				}
-				var videoTracks = stream.getVideoTracks();
-				if(!videoTracks || videoTracks.length === 0) {
-					// No webcam
-					$('#myvideo' + helperId).hide();
-					if($('#videoleft' + helperId + ' .no-video-container').length === 0) {
-						$('#videoleft' + helperId).append(
-							'<div class="no-video-container">' +
-								'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-								'<span class="no-video-text">No webcam available</span>' +
-							'</div>');
+			},
+			onremotetrack: function(track, mid, on) {
+				Janus.debug("[Helper #" + helperId + "] Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+				if(!on) {
+					// Track removed, get rid of the stream and the rendering
+					var stream = helpers[helperId].remoteTracks[mid];
+					if(stream) {
+						try {
+							var tracks = stream.getTracks();
+							for(var i in tracks) {
+								var mst = tracks[i];
+								if(mst)
+									mst.stop();
+							}
+						} catch(e) {}
 					}
-				} else {
-					$('#videoleft' + helperId + ' .no-video-container').remove();
-					$('#myvideo' + helperId).removeClass('hide').show();
+					$('#peervideo' + helperId + 'm' + mid).remove();
+					if(track.kind === "video") {
+						remoteVideos--;
+						if(remoteVideos === 0) {
+							// No video, at least for now: show a placeholder
+							if($('#videoright' + helperId + ' .no-video-container').length === 0) {
+								$('#videoright').append(
+									'<div class="no-video-container">' +
+										'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+										'<span class="no-video-text">No remote video available</span>' +
+									'</div>');
+							}
+						}
+					}
+					delete helpers[helperId].remoteTracks[mid];
+					return;
 				}
-			},
-			onremotestream: function(stream) {
-				Janus.debug("[Helper #" + helperId + "]  ::: Got a remote stream :::", stream);
-				if($('#remotevideo' + helperId).length === 0) {
+				// If we're here, a new track was added
+				if($('#videoright' + helperId + ' audio').length === 0 && $('#videoright' + helperId + ' video').length === 0) {
+					$('#videos' + helperId).removeClass('hide').show();
 					$('#videoright' + helperId).parent().find('h3').html(
-						'Send DTMF: <span id="dtmf' + helperId + '" class="btn-group btn-group-xs"></span>' +
-						'<span id="ctrls' + helperId + '" class="pull-right btn-group btn-group-xs">' +
-							'<button id="msg' + helperId + '" title="Send message" class="btn btn-info"><i class="fa fa-envelope"></i></button>' +
-							'<button id="info' + helperId + '" title="Send INFO" class="btn btn-info"><i class="fa fa-info"></i></button>' +
-							'<button id="transfer' + helperId + '" title="Transfer call" class="btn btn-info"><i class="fa fa-mail-forward"></i></button>' +
-						'</span>');
-					$('#videoright' + helperId).append(
-						'<video class="rounded centered hide" id="remotevideo' + helperId + '" width=320 height=240 autoplay playsinline/>');
+						'Send DTMF: <span id="dtmf' + helperId + '" class="btn-group btn-group-xs"></span>');
 					for(var i=0; i<12; i++) {
 						if(i<10)
 							$('#dtmf' + helperId).append('<button class="btn btn-info dtmf">' + i + '</button>');
@@ -1469,43 +1609,51 @@ function addHelper(helperCreated) {
 							}
 						});
 					});
-					// Show the peer and hide the spinner when we get a playing event
-					$("#remotevideo" + helperId).bind("playing", function () {
-						$('#waitingvideo' + helperId).remove();
-						if(this.videoWidth)
-							$('#remotevideo' + helperId).removeClass('hide').show();
-						if(helpers[helperId].spinner)
-							helpers[helperId].spinner.stop();
-						helpers[helperId].spinner = null;
-					});
 				}
-				Janus.attachMediaStream($('#remotevideo' + helperId).get(0), stream);
-				var videoTracks = stream.getVideoTracks();
-				if(!videoTracks || videoTracks.length === 0) {
-					// No remote video
-					$('#remotevideo' + helperId).hide();
-					if($('#videoright' + helperId + ' .no-video-container').length === 0) {
-						$('#videoright' + helperId).append(
-							'<div class="no-video-container">' +
-								'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-								'<span class="no-video-text">No remote video available</span>' +
-							'</div>');
+				if(track.kind === "audio") {
+					// New audio track: create a stream out of it, and use a hidden <audio> element
+					stream = new MediaStream();
+					stream.addTrack(track.clone());
+					helpers[helperId].remoteTracks[mid] = stream;
+					Janus.log("[Helper #" + helperId + "] Created remote audio stream:", stream);
+					$('#videoright' + helperId).append('<audio class="hide" id="peervideo' + helperId + 'm' + mid + '" autoplay playsinline/>');
+					Janus.attachMediaStream($('#peervideo' + helperId + 'm' + mid).get(0), stream);
+					if(helpers[helperId].remoteVideos === 0) {
+						// No video, at least for now: show a placeholder
+						if($('#videoright' + helperId + ' .no-video-container').length === 0) {
+							$('#videoright' + helperId).append(
+								'<div class="no-video-container">' +
+									'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+									'<span class="no-video-text">No remote video available</span>' +
+								'</div>');
+						}
 					}
 				} else {
+					// New video track: create a stream out of it
+					helpers[helperId].remoteVideos++;
 					$('#videoright' + helperId + ' .no-video-container').remove();
-					$('#remotevideo' + helperId).removeClass('hide').show();
+					stream = new MediaStream();
+					stream.addTrack(track.clone());
+					helpers[helperId].remoteTracks[mid] = stream;
+					Janus.log("[Helper #" + helperId + "] Created remote video stream:", stream);
+					$('#videoright' + helperId).append('<video class="rounded centered" id="peervideo' + helperId + 'm' + mid + '" width=320 height=240 autoplay playsinline/>');
+					Janus.attachMediaStream($('#peervideo' + helperId + 'm' + mid).get(0), stream);
 				}
 			},
 			oncleanup: function() {
 				Janus.log("[Helper #" + helperId + "]  ::: Got a cleanup notification :::");
-				$('#myvideo' + helperId).remove();
-				$('#waitingvideo' + helperId).remove();
-				$('#remotevideo' + helperId).remove();
-				$('#videos' + helperId + ' .no-video-container').remove();
+				$('#videoleft' + helperId).empty().parent().unblock();
+				$('#videoleft' + helperId).empty();
 				$('#videos' + helperId).hide();
 				$('#dtmf' + helperId).parent().html("Remote UA");
 				if(helpers[helperId] && helpers[helperId].sipcall)
 					helpers[helperId].sipcall.callId = null;
+				if(helpers[helperId]) {
+					helpers[helperId].localTracks = {};
+					helpers[helperId].localVideos = 0;
+					helpers[helperId].remoteTracks = {};
+					helpers[helperId].remoteVideos = 0;
+				}
 			}
 		});
 
diff --git a/html/streamingtest.html b/html/streamingtest.html
index 639c221a77..e64360aba9 100644
--- a/html/streamingtest.html
+++ b/html/streamingtest.html
@@ -97,17 +97,7 @@ <h3 class="panel-title"><i class="fa fa-info-circle"></i> Metadata</h3>
 						</div>
 					</div>
 				</div>
-				<div class="col-md-6">
-					<div class="panel panel-default">
-						<div class="panel-heading">
-							<h3 class="panel-title">Stream
-								<span class="label label-info hide" id="status"></span>
-								<span class="label label-primary hide" id="curres"></span>
-								<span class="label label-info hide" id="curbitrate"></span>
-							</h3>
-						</div>
-						<div class="panel-body" id="stream"></div>
-					</div>
+				<div class="col-md-6" id="videos">
 				</div>
 			</div>
 		</div>
diff --git a/html/streamingtest.js b/html/streamingtest.js
index 39e956380d..3e8e02c094 100644
--- a/html/streamingtest.js
+++ b/html/streamingtest.js
@@ -52,11 +52,13 @@ var janus = null;
 var streaming = null;
 var opaqueId = "streamingtest-"+Janus.randomString(12);
 
-var bitrateTimer = null;
-var spinner = null;
+var remoteTracks = {}, remoteVideos = 0, dataMid = null;
+var bitrateTimer = {};
+var spinner = {};
 
-var simulcastStarted = false, svcStarted = false;
+var simulcastStarted = {}, svcStarted = {};
 
+var streamsList = {};
 var selectedStream = null;
 
 
@@ -91,7 +93,9 @@ $(document).ready(function() {
 									$('#start').removeAttr('disabled').html("Stop")
 										.click(function() {
 											$(this).attr('disabled', true);
-											clearInterval(bitrateTimer);
+											for(var i in bitrateTimer)
+												clearInterval(bitrateTimer[i]);
+											bitrateTimer = {};
 											janus.destroy();
 											$('#streamslist').attr('disabled', true);
 											$('#watch').attr('disabled', true).unbind('click');
@@ -108,6 +112,10 @@ $(document).ready(function() {
 								webrtcState: function(on) {
 									Janus.log("Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now");
 								},
+								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"];
@@ -121,27 +129,29 @@ $(document).ready(function() {
 											else 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) {
-													simulcastStarted = true;
-													addSimulcastButtons(temporal !== null && temporal !== undefined);
+												if(!simulcastStarted[mid]) {
+													simulcastStarted[mid] = true;
+													addSimulcastButtons(mid, temporal !== null && temporal !== undefined);
 												}
 												// We just received notice that there's been a switch, update the buttons
-												updateSimulcastButtons(substream, temporal);
+												updateSimulcastButtons(mid, substream, temporal);
 											}
 											// Is VP9/SVC in place?
 											var spatial = result["spatial_layer"];
 											temporal = result["temporal_layer"];
 											if((spatial !== null && spatial !== undefined) || (temporal !== null && temporal !== undefined)) {
-												if(!svcStarted) {
-													svcStarted = true;
-													addSvcButtons();
+												if(!svcStarted[mid]) {
+													svcStarted[mid] = true;
+													addSvcButtons(mid);
 												}
 												// We just received notice that there's been a switch, update the buttons
-												updateSvcButtons(spatial, temporal);
+												updateSvcButtons(mid, spatial, temporal);
 											}
 										}
 									} else if(msg["error"]) {
@@ -168,7 +178,7 @@ $(document).ready(function() {
 													Janus.debug("Got SDP!", jsep);
 													var body = { request: "start" };
 													streaming.send({ message: body, jsep: jsep });
-													$('#watch').html("Stop").removeAttr('disabled').click(stopStream);
+													$('#watch').html("Stop").removeAttr('disabled').unbind('click').click(stopStream);
 												},
 												error: function(error) {
 													Janus.error("WebRTC error:", error);
@@ -177,80 +187,120 @@ $(document).ready(function() {
 											});
 									}
 								},
-								onremotestream: function(stream) {
-									Janus.debug(" ::: Got a remote stream :::", stream);
-									var addButtons = false;
-									if($('#remotevideo').length === 0) {
-										addButtons = true;
-										$('#stream').append('<video class="rounded centered hide" id="remotevideo" width=320 height=240 autoplay playsinline/>');
-										// Show the stream and hide the spinner when we get a playing event
-										$("#remotevideo").bind("playing", function () {
-											$('#waitingvideo').remove();
-											if(this.videoWidth)
-												$('#remotevideo').removeClass('hide').show();
-											if(spinner)
-												spinner.stop();
-											spinner = null;
-											var videoTracks = stream.getVideoTracks();
-											if(!videoTracks || videoTracks.length === 0)
-												return;
-											var width = this.videoWidth;
-											var height = this.videoHeight;
-											$('#curres').removeClass('hide').text(width+'x'+height).show();
-											if(Janus.webRTCAdapter.browserDetails.browser === "firefox") {
-												// Firefox Stable has a bug: width and height are not immediately available after a playing
-												setTimeout(function() {
-													var width = $("#remotevideo").get(0).videoWidth;
-													var height = $("#remotevideo").get(0).videoHeight;
-													$('#curres').removeClass('hide').text(width+'x'+height).show();
-												}, 2000);
+								onremotetrack: function(track, mid, on) {
+									Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+									var mstreamId = "mstream"+mid;
+									if(streamsList[selectedStream] && streamsList[selectedStream].legacy)
+										mstreamId = "mstream0";
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = remoteTracks[mid];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										$('#remotevideo' + mid).remove();
+										if(track.kind === "video") {
+											remoteVideos--;
+											if(remoteVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#'+mstreamId+' .no-video-container').length === 0) {
+												$('#'+mstreamId).append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No remote video available</span>' +
+													'</div>');
+												}
 											}
-										});
+										}
+										delete remoteTracks[mid];
+										return;
 									}
-									Janus.attachMediaStream($('#remotevideo').get(0), stream);
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No remote video
-										$('#remotevideo').hide();
-										if($('#stream .no-video-container').length === 0) {
-											$('#stream').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No remote video available</span>' +
-												'</div>');
+									// If we're here, a new track was added
+									var stream = null;
+									if(track.kind === "audio") {
+										// New audio track: create a stream out of it, and use a hidden <audio> element
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote audio stream:", stream);
+										$('#'+mstreamId).append('<audio class="hide" id="remotevideo' + mid + '" autoplay playsinline/>');
+										if(remoteVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#'+mstreamId+' .no-video-container').length === 0) {
+												$('#'+mstreamId).append(
+													'<div class="no-video-container audioonly">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
 										}
 									} else {
-										$('#stream .no-video-container').remove();
-										$('#remotevideo').removeClass('hide').show();
-									}
-									if(!addButtons)
-										return;
-									if(videoTracks && videoTracks.length &&
-											(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 = streaming.getBitrate();
-											$('#curbitrate').text(bitrate);
-											// Check if the resolution changed too
-											var width = $("#remotevideo").get(0).videoWidth;
-											var height = $("#remotevideo").get(0).videoHeight;
-											if(width > 0 && height > 0)
-												$('#curres').removeClass('hide').text(width+'x'+height).show();
-										}, 1000);
+										// New video track: create a stream out of it
+										remoteVideos++;
+										$('.no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote video stream:", stream);
+										$('#'+mstreamId).append('<video class="rounded centered hide" id="remotevideo' + mid + '" width=320 height=240 autoplay playsinline/>');
+										// Use a custom timer for this stream
+										if(!bitrateTimer[mid]) {
+											$('#curbitrate'+mid).removeClass('hide').show();
+											bitrateTimer[mid] = setInterval(function() {
+												if(!$("#remotevideo" + mid).get(0))
+													return;
+												// Display updated bitrate, if supported
+												var bitrate = streaming.getBitrate(mid);
+												$('#curbitrate'+mid).text(bitrate);
+												// Check if the resolution changed too
+												var width = $("#remotevideo" + mid).get(0).videoWidth;
+												var height = $("#remotevideo" + mid).get(0).videoHeight;
+												if(width > 0 && height > 0)
+													$('#curres'+mid).removeClass('hide').text(width+'x'+height).show();
+											}, 1000);
+										}
 									}
+									// Play the stream and hide the spinner when we get a playing event
+									$("#remotevideo" + mid).bind("playing", function (ev) {
+										$('.waitingvideo').remove();
+										if(spinner[mid])
+											spinner[mid].stop();
+										spinner[mid] = null;
+										if(!this.videoWidth)
+											return;
+										$('#'+ev.target.id).removeClass('hide').show();
+										var width = this.videoWidth;
+										var height = this.videoHeight;
+										$('#curres'+mid).removeClass('hide').text(width+'x'+height).show();
+										if(Janus.webRTCAdapter.browserDetails.browser === "firefox") {
+											// Firefox Stable has a bug: width and height are not immediately available after a playing
+											setTimeout(function() {
+												var width = $('#'+ev.target.id).get(0).videoWidth;
+												var height = $('#'+ev.target.id).get(0).videoHeight;
+												$('#curres'+mid).removeClass('hide').text(width+'x'+height).show();
+											}, 2000);
+										}
+									});
+									Janus.attachMediaStream($('#remotevideo' + mid).get(0), stream);
 								},
 								ondataopen: function(data) {
 									Janus.log("The DataChannel is available!");
-									$('#waitingvideo').remove();
-									$('#stream').append(
+									$('.waitingvideo').remove();
+									$('#mstream' + dataMid).append(
 										'<input class="form-control" type="text" id="datarecv" disabled></input>'
 									);
-									if(spinner)
-										spinner.stop();
-									spinner = null;
+									for(var i in spinner) {
+										if(spinner[i])
+											spinner[i].stop();
+									}
+									spinner = {};
 								},
 								ondata: function(data) {
 									Janus.debug("We got data from the DataChannel!", data);
@@ -258,21 +308,23 @@ $(document).ready(function() {
 								},
 								oncleanup: function() {
 									Janus.log(" ::: Got a cleanup notification :::");
-									$('#waitingvideo').remove();
-									$('#remotevideo').remove();
-									$('#datarecv').remove();
-									$('.no-video-container').remove();
-									$('#bitrate').attr('disabled', true);
-									$('#bitrateset').html('Bandwidth<span class="caret"></span>');
-									$('#curbitrate').hide();
-									if(bitrateTimer)
-										clearInterval(bitrateTimer);
-									bitrateTimer = null;
-									$('#curres').hide();
-									$('#simulcast').remove();
-									$('#metadata').empty();
-									$('#info').addClass('hide').hide();
+									$('#videos').empty();
+									for(var i in bitrateTimer)
+										clearInterval(bitrateTimer[i]);
+									bitrateTimer = {};
+									for(var i in spinner) {
+										if(spinner[i])
+											spinner[i].stop();
+									}
+									spinner = {};
 									simulcastStarted = false;
+									remoteTracks = {};
+									remoteVideos = 0;
+									dataMid = null;
+									$('#streamset').removeAttr('disabled');
+									$('#streamslist').removeAttr('disabled');
+									$('#watch').html("Watch or Listen").removeAttr('disabled')
+										.unbind('click').click(startStream);
 								}
 							});
 					},
@@ -296,7 +348,7 @@ function updateStreamsList() {
 	Janus.debug("Sending message:", body);
 	streaming.send({ message: body, success: function(result) {
 		setTimeout(function() {
-			$('#update-streams').removeClass('fa-spin').click(updateStreamsList);
+			$('#update-streams').removeClass('fa-spin').unbind('click').click(updateStreamsList);
 		}, 500);
 		if(!result) {
 			bootbox.alert("Got no response to our query for available streams");
@@ -307,7 +359,6 @@ function updateStreamsList() {
 			$('#streamslist').empty();
 			$('#watch').attr('disabled', true).unbind('click');
 			var list = result["list"];
-			Janus.log("Got a list of available streams");
 			if(list && Array.isArray(list)) {
 				list.sort(function(a, b) {
 					if(!a || a.id < (b ? b.id : 0))
@@ -317,10 +368,30 @@ function updateStreamsList() {
 					return 0;
 				});
 			}
-			Janus.debug(list);
+			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"] + ")");
 				$('#streamslist').append("<li><a href='#' id='" + list[mp]["id"] + "'>" + list[mp]["description"] + " (" + list[mp]["type"] + ")" + "</a></li>");
+				// 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];
 			}
 			$('#streamslist a').unbind('click').click(function() {
 				selectedStream = $(this).attr("id");
@@ -336,7 +407,7 @@ function updateStreamsList() {
 function getStreamInfo() {
 	$('#metadata').empty();
 	$('#info').addClass('hide').hide();
-	if(!selectedStream)
+	if(!selectedStream || !streamsList[selectedStream])
 		return;
 	// Send a request for more info on the mountpoint we subscribed to
 	var body = { request: "info", id: parseInt(selectedStream) || selectedStream };
@@ -350,23 +421,73 @@ function getStreamInfo() {
 
 function startStream() {
 	Janus.log("Selected video id #" + selectedStream);
-	if(!selectedStream) {
+	if(!selectedStream || !streamsList[selectedStream]) {
 		bootbox.alert("Select a stream from the list");
 		return;
 	}
 	$('#streamset').attr('disabled', true);
 	$('#streamslist').attr('disabled', true);
 	$('#watch').attr('disabled', true).unbind('click');
-	var body = { request: "watch", id: parseInt(selectedStream) || selectedStream};
-	streaming.send({ message: body });
-	// No remote video yet
-	$('#stream').append('<video class="rounded centered" id="waitingvideo" width=320 height=240 />');
-	if(spinner == null) {
-		var target = document.getElementById('stream');
-		spinner = new Spinner({top:100}).spin(target);
+	// Add some panels to host the remote streams
+	if(streamsList[selectedStream].legacy) {
+		// At max 1-audio/1-video, so use a single panel
+		var mid = null;
+		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;
+			}
+		}
+		if($('#mstream0').length === 0) {
+			addPanel("0", mid);
+			// No remote video yet
+			$('#mstream0').append('<video class="rounded centered waitingvideo" id="waitingvideo0" width=320 height=240 />');
+		}
+		if(mid) {
+			if(spinner[mid] == null) {
+				var target = document.getElementById('mstream0');
+				spinner[mid] = new Spinner({top:100}).spin(target);
+			} else {
+				spinner[mid].spin();
+			}
+		}
+		dataMid = "0";
 	} else {
-		spinner.spin();
+		// Multistream mountpoint, create a panel for each stream
+		for(mi in streamsList[selectedStream].media) {
+			// Add a new panel
+			var type = streamsList[selectedStream].media[mi].type;
+			var mid = streamsList[selectedStream].media[mi].mid;
+			var label = streamsList[selectedStream].media[mi].label;
+			if($('#mstream'+mid).length === 0) {
+				addPanel(mid, mid, label);
+				// No remote media yet
+				$('#mstream'+mid).append('<video class="rounded centered waitingvideo" id="waitingvideo'+mid+'" width=320 height=240 />');
+			}
+			if(spinner[mid] == null) {
+				var target = document.getElementById('mstream'+mid);
+				spinner[mid] = new Spinner({top:100}).spin(target);
+			} else {
+				spinner[mid].spin();
+			}
+			if(type === 'data')
+				dataMid = mid;
+		}
 	}
+	// Prepare the request to start streaming and send it
+	var body = { request: "watch", id: parseInt(selectedStream) || selectedStream };
+	// Notice that, for RTP mountpoints, you can subscribe to a subset
+	// of the mountpoint media, rather than them all, by adding a "stream"
+	// array containing the list of stream mids you're interested in, e.g.:
+	//
+	//		body.streams = [ "0", "2" ];
+	//
+	// to only subscribe to the first and third stream, and skip the second
+	// (assuming those are the mids you got from a "list" or "info" request).
+	// By default, you always subscribe to all the streams in a mountpoint
+	streaming.send({ message: body });
 	// Get some more info for the mountpoint to display, if any
 	getStreamInfo();
 }
@@ -376,239 +497,244 @@ function stopStream() {
 	var body = { request: "stop" };
 	streaming.send({ message: body });
 	streaming.hangup();
-	$('#streamset').removeAttr('disabled');
-	$('#streamslist').removeAttr('disabled');
-	$('#watch').html("Watch or Listen").removeAttr('disabled').unbind('click').click(startStream);
-	$('#status').empty().hide();
-	$('#bitrate').attr('disabled', true);
-	$('#bitrateset').html('Bandwidth<span class="caret"></span>');
-	$('#curbitrate').hide();
-	if(bitrateTimer)
-		clearInterval(bitrateTimer);
-	bitrateTimer = null;
-	$('#curres').empty().hide();
-	$('#simulcast').remove();
-	simulcastStarted = false;
+}
+
+// Helper to add a new panel to the 'videos' div
+function addPanel(panelId, mid, desc) {
+	$('#videos').append(
+		'<div class="row" id="panel' + panelId + '">' +
+		'	<div class="panel panel-default">' +
+		'		<div class="panel-heading">' +
+		'			<h3 class="panel-title">' + (desc ? desc : "Stream") +
+		'				<span class="label label-info hide" id="status' + mid + '"></span>' +
+		'				<span class="label label-primary hide" id="curres' + mid + '"></span>' +
+		'				<span class="label label-info hide" id="curbitrate' + mid + '"></span>' +
+		'			</h3>' +
+		'		</div>' +
+		'		<div class="panel-body" id="mstream' + panelId + '"></div>' +
+		'	</div>' +
+		'</div>'
+	);
 }
 
 // Helpers to create Simulcast-related UI, if enabled
-function addSimulcastButtons(temporal) {
-	$('#curres').parent().append(
-		'<div id="simulcast" class="btn-group-vertical btn-group-vertical-xs pull-right">' +
+function addSimulcastButtons(mid, temporal) {
+	$('#curres'+mid).parent().append(
+		'<div id="simulcast'+mid+'" class="btn-group-vertical btn-group-vertical-xs pull-right">' +
 		'	<div class"row">' +
 		'		<div class="btn-group btn-group-xs" style="width: 100%">' +
-		'			<button id="sl-2" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to higher quality" style="width: 33%">SL 2</button>' +
-		'			<button id="sl-1" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to normal quality" style="width: 33%">SL 1</button>' +
-		'			<button id="sl-0" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to lower quality" style="width: 34%">SL 0</button>' +
+		'			<button id="m-'+mid+'-sl-2" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to higher quality" style="width: 33%">SL 2</button>' +
+		'			<button id="m-'+mid+'-sl-1" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to normal quality" style="width: 33%">SL 1</button>' +
+		'			<button id="m-'+mid+'-sl-0" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to lower quality" style="width: 34%">SL 0</button>' +
 		'		</div>' +
 		'	</div>' +
 		'	<div class"row">' +
 		'		<div class="btn-group btn-group-xs hide" style="width: 100%">' +
-		'			<button id="tl-2" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 2" style="width: 34%">TL 2</button>' +
-		'			<button id="tl-1" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 1" style="width: 33%">TL 1</button>' +
-		'			<button id="tl-0" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 0" style="width: 33%">TL 0</button>' +
+		'			<button id="m-'+mid+'-tl-2" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 2" style="width: 34%">TL 2</button>' +
+		'			<button id="m-'+mid+'-tl-1" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 1" style="width: 33%">TL 1</button>' +
+		'			<button id="m-'+mid+'-tl-0" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 0" style="width: 33%">TL 0</button>' +
 		'		</div>' +
 		'	</div>' +
 		'</div>');
 	// Enable the simulcast selection buttons
-	$('#sl-0').removeClass('btn-primary btn-success').addClass('btn-primary')
+	$('#m-'+mid+'-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');
-			streaming.send({ message: { request: "configure", substream: 0 }});
+			if(!$('#m-'+mid+'-sl-2').hasClass('btn-success'))
+				$('#m-'+mid+'-sl-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+			if(!$('#m-'+mid+'-sl-1').hasClass('btn-success'))
+				$('#m-'+mid+'-sl-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+			$('#m-'+mid+'-sl-0').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			streaming.send({ message: { request: "configure", mid: mid, substream: 0 }});
 		});
-	$('#sl-1').removeClass('btn-primary btn-success').addClass('btn-primary')
+	$('#m-'+mid+'-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');
-			streaming.send({ message: { request: "configure", substream: 1 }});
+			if(!$('#m-'+mid+'-sl-2').hasClass('btn-success'))
+				$('#m-'+mid+'-sl-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+			$('#m-'+mid+'-sl-1').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			if(!$('#m-'+mid+'-sl-0').hasClass('btn-success'))
+				$('#m-'+mid+'-sl-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+			streaming.send({ message: { request: "configure", mid: mid, substream: 1 }});
 		});
-	$('#sl-2').removeClass('btn-primary btn-success').addClass('btn-primary')
+	$('#m-'+mid+'-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');
-			streaming.send({ message: { request: "configure", substream: 2 }});
+			$('#m-'+mid+'-sl-2').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			if(!$('#m-'+mid+'-sl-1').hasClass('btn-success'))
+				$('#m-'+mid+'-sl-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+			if(!$('#m-'+mid+'-sl-0').hasClass('btn-success'))
+				$('#m-'+mid+'-sl-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+			streaming.send({ message: { request: "configure", mid: mid, substream: 2 }});
 		});
 	if(!temporal)	// No temporal layer support
 		return;
-	$('#tl-0').parent().removeClass('hide');
-	$('#tl-0').removeClass('btn-primary btn-success').addClass('btn-primary')
+	$('#m-'+mid+'-tl-0').parent().removeClass('hide');
+	$('#m-'+mid+'-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');
-			streaming.send({ message: { request: "configure", temporal: 0 }});
+			if(!$('#m-'+mid+'-tl-2').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+			if(!$('#m-'+mid+'-tl-1').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+			$('#m-'+mid+'-tl-0').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			streaming.send({ message: { request: "configure", mid: mid, temporal: 0 }});
 		});
-	$('#tl-1').removeClass('btn-primary btn-success').addClass('btn-primary')
+	$('#m-'+mid+'-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');
-			streaming.send({ message: { request: "configure", temporal: 1 }});
+			if(!$('#m-'+mid+'-tl-2').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+			$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-info').addClass('btn-info');
+			if(!$('#m-'+mid+'-tl-0').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+			streaming.send({ message: { request: "configure", mid: mid, temporal: 1 }});
 		});
-	$('#tl-2').removeClass('btn-primary btn-success').addClass('btn-primary')
+	$('#m-'+mid+'-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');
-			streaming.send({ message: { request: "configure", temporal: 2 }});
+			$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			if(!$('#m-'+mid+'-tl-1').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+			if(!$('#m-'+mid+'-tl-0').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+			streaming.send({ message: { request: "configure", mid: mid, temporal: 2 }});
 		});
 }
 
-function updateSimulcastButtons(substream, temporal) {
+function updateSimulcastButtons(mid, 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');
+		$('#m-'+mid+'-sl-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-sl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-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');
+		$('#m-'+mid+'-sl-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-sl-1').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#m-'+mid+'-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');
+		$('#m-'+mid+'-sl-2').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#m-'+mid+'-sl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-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');
+		$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-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');
+		$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#m-'+mid+'-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');
+		$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-tl-0').removeClass('btn-primary btn-success').addClass('btn-primary');
 	}
 }
 
 // Helpers to create SVC-related UI for a new viewer
-function addSvcButtons() {
+function addSvcButtons(mid) {
 	if($('#svc').length > 0)
 		return;
-	$('#curres').parent().append(
-		'<div id="svc" class="btn-group-vertical btn-group-vertical-xs pull-right">' +
+	$('#curres'+mid).parent().append(
+		'<div id="svc'+mid+'" class="btn-group-vertical btn-group-vertical-xs pull-right">' +
 		'	<div class"row">' +
 		'		<div class="btn-group btn-group-xs" style="width: 100%">' +
-		'			<button id="sl-1" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to normal resolution" style="width: 50%">SL 1</button>' +
-		'			<button id="sl-0" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to low resolution" style="width: 50%">SL 0</button>' +
+		'			<button id="m-'+mid+'-sl-1" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to normal resolution" style="width: 50%">SL 1</button>' +
+		'			<button id="m-'+mid+'-sl-0" type="button" class="btn btn-primary" data-toggle="tooltip" title="Switch to low resolution" style="width: 50%">SL 0</button>' +
 		'		</div>' +
 		'	</div>' +
 		'	<div class"row">' +
 		'		<div class="btn-group btn-group-xs" style="width: 100%">' +
-		'			<button id="tl-2" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 2 (high FPS)" style="width: 34%">TL 2</button>' +
-		'			<button id="tl-1" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 1 (medium FPS)" style="width: 33%">TL 1</button>' +
-		'			<button id="tl-0" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 0 (low FPS)" style="width: 33%">TL 0</button>' +
+		'			<button id="m-'+mid+'-tl-2" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 2 (high FPS)" style="width: 34%">TL 2</button>' +
+		'			<button id="m-'+mid+'-tl-1" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 1 (medium FPS)" style="width: 33%">TL 1</button>' +
+		'			<button id="m-'+mid+'-tl-0" type="button" class="btn btn-primary" data-toggle="tooltip" title="Cap to temporal layer 0 (low FPS)" style="width: 33%">TL 0</button>' +
 		'		</div>' +
 		'	</div>' +
 		'</div>'
 	);
 	// Enable the VP8 simulcast selection buttons
-	$('#sl-0').removeClass('btn-primary btn-success').addClass('btn-primary')
+	$('#m-'+mid+'-sl-0').removeClass('btn-primary btn-success').addClass('btn-primary')
 		.unbind('click').click(function() {
 			toastr.info("Switching SVC spatial layer, wait for it... (low resolution)", null, {timeOut: 2000});
-			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');
-			streaming.send({ message: { request: "configure", spatial_layer: 0 }});
+			if(!$('#m-'+mid+'-sl-1').hasClass('btn-success'))
+				$('#m-'+mid+'-sl-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+			$('#m-'+mid+'-sl-0').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			streaming.send({ message: { request: "configure", mid: mid, spatial_layer: 0 }});
 		});
-	$('#sl-1').removeClass('btn-primary btn-success').addClass('btn-primary')
+	$('#m-'+mid+'-sl-1').removeClass('btn-primary btn-success').addClass('btn-primary')
 		.unbind('click').click(function() {
 			toastr.info("Switching SVC spatial layer, wait for it... (normal resolution)", null, {timeOut: 2000});
-			$('#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');
-			streaming.send({ message: { request: "configure", spatial_layer: 1 }});
+			$('#m-'+mid+'-sl-1').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			if(!$('#m-'+mid+'-sl-0').hasClass('btn-success'))
+				$('#m-'+mid+'-sl-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+			streaming.send({ message: { request: "configure", mid: mid, spatial_layer: 1 }});
 		});
-	$('#tl-0').removeClass('btn-primary btn-success').addClass('btn-primary')
+	$('#m-'+mid+'-tl-0').removeClass('btn-primary btn-success').addClass('btn-primary')
 		.unbind('click').click(function() {
 			toastr.info("Capping SVC 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');
-			streaming.send({ message: { request: "configure", temporal_layer: 0 }});
+			if(!$('#m-'+mid+'-tl-2').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+			if(!$('#m-'+mid+'-tl-1').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+			$('#m-'+mid+'-tl-0').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			streaming.send({ message: { request: "configure", mid: mid, temporal_layer: 0 }});
 		});
-	$('#tl-1').removeClass('btn-primary btn-success').addClass('btn-primary')
+	$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-success').addClass('btn-primary')
 		.unbind('click').click(function() {
 			toastr.info("Capping SVC 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');
-			streaming.send({ message: { request: "configure", temporal_layer: 1 }});
+			if(!$('#m-'+mid+'-tl-2').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-info').addClass('btn-primary');
+			$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-info').addClass('btn-info');
+			if(!$('#m-'+mid+'-tl-0').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+			streaming.send({ message: { request: "configure", mid: mid, temporal_layer: 1 }});
 		});
-	$('#tl-2').removeClass('btn-primary btn-success').addClass('btn-primary')
+	$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-success').addClass('btn-primary')
 		.unbind('click').click(function() {
 			toastr.info("Capping SVC 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');
-			streaming.send({ message: { request: "configure", temporal_layer: 2 }});
+			$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-info btn-success').addClass('btn-info');
+			if(!$('#m-'+mid+'-tl-1').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-info').addClass('btn-primary');
+			if(!$('#m-'+mid+'-tl-0').hasClass('btn-success'))
+				$('#m-'+mid+'-tl-0').removeClass('btn-primary btn-info').addClass('btn-primary');
+			streaming.send({ message: { request: "configure", mid: mid, temporal_layer: 2 }});
 		});
 }
 
-function updateSvcButtons(spatial, temporal) {
+function updateSvcButtons(mid, spatial, temporal) {
 	// Check the spatial layer
 	if(spatial === 0) {
 		toastr.success("Switched SVC spatial layer! (lower resolution)", null, {timeOut: 2000});
-		$('#sl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
-		$('#sl-0').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#m-'+mid+'-sl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-sl-0').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
 	} else if(spatial === 1) {
 		toastr.success("Switched SVC spatial layer! (normal resolution)", null, {timeOut: 2000});
-		$('#sl-1').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
-		$('#sl-0').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-sl-1').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#m-'+mid+'-sl-0').removeClass('btn-primary btn-success').addClass('btn-primary');
 	}
 	// Check the temporal layer
 	if(temporal === 0) {
 		toastr.success("Capped SVC 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');
+		$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-tl-0').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
 	} else if(temporal === 1) {
 		toastr.success("Capped SVC 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');
+		$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#m-'+mid+'-tl-0').removeClass('btn-primary btn-success').addClass('btn-primary');
 	} else if(temporal === 2) {
 		toastr.success("Capped SVC 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');
+		$('#m-'+mid+'-tl-2').removeClass('btn-primary btn-info btn-success').addClass('btn-success');
+		$('#m-'+mid+'-tl-1').removeClass('btn-primary btn-success').addClass('btn-primary');
+		$('#m-'+mid+'-tl-0').removeClass('btn-primary btn-success').addClass('btn-primary');
 	}
 }
diff --git a/html/videocalltest.js b/html/videocalltest.js
index 594f9bbf07..af05a9c7ca 100644
--- a/html/videocalltest.js
+++ b/html/videocalltest.js
@@ -52,6 +52,8 @@ var janus = null;
 var videocall = null;
 var opaqueId = "videocalltest-"+Janus.randomString(12);
 
+var localTracks = {}, localVideos = 0,
+	remoteTracks = {}, remoteVideos = 0;
 var bitrateTimer = null;
 var spinner = null;
 
@@ -128,13 +130,17 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									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);
 									var result = msg["result"];
@@ -309,13 +315,72 @@ $(document).ready(function() {
 										bitrateTimer = null;
 									}
 								},
-								onlocalstream: function(stream) {
-									Janus.debug(" ::: Got a local stream :::", stream);
-									$('#videos').removeClass('hide').show();
-									if($('#myvideo').length === 0)
-										$('#videoleft').append('<video class="rounded centered" id="myvideo" width=320 height=240 autoplay playsinline muted="muted"/>');
-									Janus.attachMediaStream($('#myvideo').get(0), stream);
-									$("#myvideo").get(0).muted = "muted";
+								onlocaltrack: function(track, on) {
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst !== null && mst !== undefined)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										if(track.kind === "video") {
+											$('#myvideo' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videoleft .no-video-container').length === 0) {
+													$('#videoleft').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
+									if($('#videoleft video').length === 0) {
+										$('#videos').removeClass('hide').show();
+									}
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoleft .no-video-container').length === 0) {
+												$('#videoleft').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
+										}
+									} else {
+										// New video track: create a stream out of it
+										localVideos++;
+										$('#videoleft .no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("Created local stream:", stream);
+										$('#videoleft').append('<video class="rounded centered" id="myvideo' + trackId + '" width=320 height=240 autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#myvideo' + trackId).get(0), stream);
+									}
 									if(videocall.webrtcStuff.pc.iceConnectionState !== "completed" &&
 											videocall.webrtcStuff.pc.iceConnectionState !== "connected") {
 										$("#videoleft").parent().block({
@@ -326,74 +391,98 @@ $(document).ready(function() {
 												color: 'white'
 											}
 										});
-										// No remote video yet
-										$('#videoright').append('<video class="rounded centered" id="waitingvideo" width=320 height=240 />');
-										if(spinner == null) {
-											var target = document.getElementById('videoright');
-											spinner = new Spinner({top:100}).spin(target);
-										} else {
-											spinner.spin();
-										}
 									}
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No webcam
-										$('#myvideo').hide();
-										if($('#videoleft .no-video-container').length === 0) {
-											$('#videoleft').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No webcam available</span>' +
-												'</div>');
+								},
+								onremotetrack: function(track, mid, on) {
+									Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = remoteTracks[mid];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst)
+														mst.stop();
+												}
+											} catch(e) {}
 										}
-									} else {
-										$('#videoleft .no-video-container').remove();
-										$('#myvideo').removeClass('hide').show();
+										$('#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(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No remote video available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete remoteTracks[mid];
+										return;
 									}
-								},
-								onremotestream: function(stream) {
-									Janus.debug(" ::: Got a remote stream :::", stream);
+									// If we're here, a new track was added
 									var addButtons = false;
-									if($('#remotevideo').length === 0) {
+									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;
-										$('#videoright').append('<video class="rounded centered hide" id="remotevideo" width=320 height=240 autoplay playsinline/>');
-										// Show the video, hide the spinner and show the resolution when we get a playing event
-										$("#remotevideo").bind("playing", function () {
-											$('#waitingvideo').remove();
-											if(this.videoWidth)
-												$('#remotevideo').removeClass('hide').show();
-											if(spinner)
-												spinner.stop();
-											spinner = null;
-											var width = this.videoWidth;
-											var height = this.videoHeight;
-											$('#curres').removeClass('hide').text(width+'x'+height).show();
-										});
-										$('#callee').removeClass('hide').html(yourusername).show();
+										$('#videos').removeClass('hide').show();
 									}
-									Janus.attachMediaStream($('#remotevideo').get(0), stream);
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No remote video
-										$('#remotevideo').hide();
-										if($('#videoright .no-video-container').length === 0) {
-											$('#videoright').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No remote video available</span>' +
-												'</div>');
+									if(track.kind === "audio") {
+										// New audio track: create a stream out of it, and use a hidden <audio> element
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote audio stream:", stream);
+										$('#videoright').append('<audio class="hide" id="peervideo' + mid + '" autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
+										if(remoteVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videoright .no-video-container').length === 0) {
+												$('#videoright').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
 										}
 									} else {
+										// New video track: create a stream out of it
+										remoteVideos++;
 										$('#videoright .no-video-container').remove();
-										$('#remotevideo').removeClass('hide').show();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										remoteTracks[mid] = stream;
+										Janus.log("Created remote video stream:", stream);
+										$('#videoright').append('<video class="rounded centered" id="peervideo' + mid + '" width=320 height=240 autoplay playsinline/>');
+										Janus.attachMediaStream($('#peervideo' + mid).get(0), stream);
+										// Note: we'll need this for additional videos too
+										if(!bitrateTimer) {
+											$('#curbitrate').removeClass('hide').show();
+											bitrateTimer = setInterval(function() {
+												if(!$("#peervideo" + mid).get(0))
+													return;
+												// Display updated bitrate, if supported
+												var bitrate = videocall.getBitrate();
+												//~ Janus.debug("Current bitrate is " + videocall.getBitrate());
+												$('#curbitrate').text(bitrate);
+												// Check if the resolution changed too
+												var width = $("#peervideo" + mid).get(0).videoWidth;
+												var height = $("#peervideo" + mid).get(0).videoHeight;
+												if(width > 0 && height > 0)
+													$('#curres').removeClass('hide').text(width+'x'+height).show();
+											}, 1000);
+										}
 									}
 									if(!addButtons)
 										return;
 									// Enable audio/video buttons and bitrate limiter
 									audioenabled = true;
 									videoenabled = true;
-									$('#toggleaudio').html("Disable audio").removeClass("btn-success").addClass("btn-danger")
-											.unbind('click').removeAttr('disabled').click(
+									$('#toggleaudio').removeAttr('disabled').click(
 										function() {
 											audioenabled = !audioenabled;
 											if(audioenabled)
@@ -402,8 +491,7 @@ $(document).ready(function() {
 												$('#toggleaudio').html("Enable audio").removeClass("btn-danger").addClass("btn-success");
 											videocall.send({ message: { request: "set", audio: audioenabled }});
 										});
-									$('#togglevideo').html("Disable video").removeClass("btn-success").addClass("btn-danger")
-											.unbind('click').removeAttr('disabled').click(
+									$('#togglevideo').removeAttr('disabled').click(
 										function() {
 											videoenabled = !videoenabled;
 											if(videoenabled)
@@ -413,8 +501,7 @@ $(document).ready(function() {
 											videocall.send({ message: { request: "set", video: videoenabled }});
 										});
 									$('#toggleaudio').parent().removeClass('hide').show();
-									$('#bitrateset').html("Bandwidth");
-									$('#bitrate a').unbind('click').removeAttr('disabled').click(function() {
+									$('#bitrate a').removeAttr('disabled').click(function() {
 										var id = $(this).attr("id");
 										var bitrate = parseInt(id)*1000;
 										if(bitrate === 0) {
@@ -422,24 +509,10 @@ $(document).ready(function() {
 										} else {
 											Janus.log("Capping bandwidth to " + bitrate + " via REMB");
 										}
-										$('#bitrateset').html($(this).html()).parent().removeClass('open');
+										$('#bitrateset').html($(this).html() + '<span class="caret"></span>').parent().removeClass('open');
 										videocall.send({ message: { request: "set", 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 = videocall.getBitrate();
-											$('#curbitrate').text(bitrate);
-											// Check if the resolution changed too
-											var width = $("#remotevideo").get(0).videoWidth;
-											var height = $("#remotevideo").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!");
@@ -452,10 +525,8 @@ $(document).ready(function() {
 								},
 								oncleanup: function() {
 									Janus.log(" ::: Got a cleanup notification :::");
-									$('#myvideo').remove();
-									$('#remotevideo').remove();
-									$("#videoleft").parent().unblock();
-									$('.no-video-container').remove();
+									$("#videoleft").empty().parent().unblock();
+									$('#videoright').empty();
 									$('#callee').empty().hide();
 									yourusername = null;
 									$('#curbitrate').hide();
@@ -466,10 +537,9 @@ $(document).ready(function() {
 									$('#bitrate').attr('disabled', true);
 									$('#curbitrate').hide();
 									$('#curres').hide();
-									if(bitrateTimer !== null && bitrateTimer !== null)
+									if(bitrateTimer)
 										clearInterval(bitrateTimer);
 									bitrateTimer = null;
-									$('#waitingvideo').remove();
 									$('#videos').hide();
 									simulcastStarted = false;
 									$('#simulcast').remove();
@@ -477,6 +547,10 @@ $(document).ready(function() {
 									$('#call').removeAttr('disabled').html('Call')
 										.removeClass("btn-danger").addClass("btn-success")
 										.unbind('click').click(doCall);
+									localTracks = {};
+									localVideos = 0;
+									remoteTracks = {};
+									remoteVideos = 0;
 								}
 							});
 					},
diff --git a/html/videoroomtest.html b/html/videoroomtest.html
index 5d5d6c1695..c71b5e3483 100644
--- a/html/videoroomtest.html
+++ b/html/videoroomtest.html
@@ -54,6 +54,12 @@ <h3>Demo details</h3>
 						No mixing is involved: all media are just relayed in a publisher/subscriber
 						approach. This means that the plugin acts as a SFU (Selective Forwarding Unit)
 						rather than an MCU (Multipoint Control Unit).</p>
+						<div class="alert alert-info">Notice that this is the <b>original</b> VideoRoom
+						demo, and uses a different PeerConnections per each subscription: if
+						you want to test the new multistream support, instead, try the
+						<a href="mvideoroomtest.html">multistream VideoRoom demo</a>
+						instead. The two demos are interoperable, if you want to see how
+						different subscription mechanisms are used on the same sources.</div>
 						<p>If you're interested in testing how simulcasting can be used within
 						the context of a videoconferencing application, just pass the
 						<code>?simulcast=true</code> query string to the url of this page and
diff --git a/html/videoroomtest.js b/html/videoroomtest.js
index e0bd338d69..d2c303e8d4 100644
--- a/html/videoroomtest.js
+++ b/html/videoroomtest.js
@@ -59,7 +59,8 @@ var mystream = null;
 // We use this other ID just to map our subscriptions to us
 var mypvtid = null;
 
-var feeds = [];
+var localTracks = {}, localVideos = 0;
+var feeds = [], feedStreams = {};
 var bitrateTimer = [];
 
 var doSimulcast = (getQueryStringValue("simulcast") === "yes" || getQueryStringValue("simulcast") === "true");
@@ -128,8 +129,8 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									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");
@@ -152,6 +153,10 @@ $(document).ready(function() {
 										return false;
 									});
 								},
+								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 (publisher) :::", msg);
 									var event = msg["videoroom"];
@@ -169,11 +174,15 @@ $(document).ready(function() {
 												Janus.debug("Got a list of available publishers/feeds:", list);
 												for(var f in list) {
 													var id = list[f]["id"];
-													var display = list[f]["display"];
-													var audio = list[f]["audio_codec"];
-													var video = list[f]["video_codec"];
-													Janus.debug("  >> [" + id + "] " + display + " (audio: " + audio + ", video: " + video + ")");
-													newRemoteFeed(id, display, audio, video);
+													var streams = list[f]["streams"];
+													for(var i in streams) {
+														var stream = streams[i];
+														stream["id"] = id;
+														stream["display"] = display;
+													}
+													feedStreams[id] = streams;
+													Janus.debug("  >> [" + id + "] " + display + ":", streams);
+													newRemoteFeed(id, display, streams);
 												}
 											}
 										} else if(event === "destroyed") {
@@ -183,17 +192,30 @@ $(document).ready(function() {
 												window.location.reload();
 											});
 										} else if(event === "event") {
-											// Any new feed to attach to?
-											if(msg["publishers"]) {
+											// Any info on our streams or a new feed to attach to?
+											if(msg["streams"]) {
+												var streams = msg["streams"];
+												for(var i in streams) {
+													var stream = streams[i];
+													stream["id"] = myid;
+													stream["display"] = myusername;
+												}
+												feedStreams[myid] = streams;
+											} else if(msg["publishers"]) {
 												var list = msg["publishers"];
 												Janus.debug("Got a list of available publishers/feeds:", list);
 												for(var f in list) {
 													var id = list[f]["id"];
 													var display = list[f]["display"];
-													var audio = list[f]["audio_codec"];
-													var video = list[f]["video_codec"];
-													Janus.debug("  >> [" + id + "] " + display + " (audio: " + audio + ", video: " + video + ")");
-													newRemoteFeed(id, display, audio, video);
+													var streams = list[f]["streams"];
+													for(var i in streams) {
+														var stream = streams[i];
+														stream["id"] = id;
+														stream["display"] = display;
+													}
+													feedStreams[id] = streams;
+													Janus.debug("  >> [" + id + "] " + display + ":", streams);
+													newRemoteFeed(id, display, streams);
 												}
 											} else if(msg["leaving"]) {
 												// One of the publishers has gone away?
@@ -206,13 +228,14 @@ $(document).ready(function() {
 														break;
 													}
 												}
-												if(remoteFeed != null) {
+												if(remoteFeed) {
 													Janus.debug("Feed " + remoteFeed.rfid + " (" + remoteFeed.rfdisplay + ") has left the room, detaching");
 													$('#remote'+remoteFeed.rfindex).empty().hide();
 													$('#videoremote'+remoteFeed.rfindex).empty();
 													feeds[remoteFeed.rfindex] = null;
 													remoteFeed.detach();
 												}
+												delete feedStreams[leaving];
 											} else if(msg["unpublished"]) {
 												// One of the publishers has unpublished?
 												var unpublished = msg["unpublished"];
@@ -229,13 +252,14 @@ $(document).ready(function() {
 														break;
 													}
 												}
-												if(remoteFeed != null) {
+												if(remoteFeed) {
 													Janus.debug("Feed " + remoteFeed.rfid + " (" + remoteFeed.rfdisplay + ") has left the room, detaching");
 													$('#remote'+remoteFeed.rfindex).empty().hide();
 													$('#videoremote'+remoteFeed.rfindex).empty();
 													feeds[remoteFeed.rfindex] = null;
 													remoteFeed.detach();
 												}
+												delete feedStreams[unpublished];
 											} else if(msg["error"]) {
 												if(msg["error_code"] === 426) {
 													// This is a "no such room" error: give a more meaningful description
@@ -275,13 +299,48 @@ $(document).ready(function() {
 										}
 									}
 								},
-								onlocalstream: function(stream) {
-									Janus.debug(" ::: Got a local stream :::", stream);
-									mystream = stream;
-									$('#videojoin').hide();
+								onlocaltrack: function(track, on) {
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst !== null && mst !== undefined)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										if(track.kind === "video") {
+											$('#myvideo' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videolocal .no-video-container').length === 0) {
+													$('#videolocal').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
 									$('#videos').removeClass('hide').show();
-									if($('#myvideo').length === 0) {
-										$('#videolocal').append('<video class="rounded centered" id="myvideo" width="100%" height="100%" autoplay playsinline muted="muted"/>');
+									if($('#mute').length === 0) {
 										// Add a 'mute' button
 										$('#videolocal').append('<button class="btn btn-warning btn-xs" id="mute" style="position: absolute; bottom: 0px; left: 0px; margin: 15px;">Mute</button>');
 										$('#mute').click(toggleMute);
@@ -289,9 +348,31 @@ $(document).ready(function() {
 										$('#videolocal').append('<button class="btn btn-warning btn-xs" id="unpublish" style="position: absolute; bottom: 0px; right: 0px; margin: 15px;">Unpublish</button>');
 										$('#unpublish').click(unpublishOwnFeed);
 									}
-									$('#publisher').removeClass('hide').html(myusername).show();
-									Janus.attachMediaStream($('#myvideo').get(0), stream);
-									$("#myvideo").get(0).muted = "muted";
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videolocal .no-video-container').length === 0) {
+												$('#videolocal').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
+										}
+									} else {
+										// New video track: create a stream out of it
+										localVideos++;
+										$('#videolocal .no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("Created local stream:", stream);
+										Janus.log(stream.getTracks());
+										Janus.log(stream.getVideoTracks());
+										$('#videolocal').append('<video class="rounded centered" id="myvideo' + trackId + '" width=100% autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#myvideo' + trackId).get(0), stream);
+									}
 									if(sfutest.webrtcStuff.pc.iceConnectionState !== "completed" &&
 											sfutest.webrtcStuff.pc.iceConnectionState !== "connected") {
 										$("#videolocal").parent().parent().block({
@@ -303,33 +384,21 @@ $(document).ready(function() {
 											}
 										});
 									}
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No webcam
-										$('#myvideo').hide();
-										if($('#videolocal .no-video-container').length === 0) {
-											$('#videolocal').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No webcam available</span>' +
-												'</div>');
-										}
-									} else {
-										$('#videolocal .no-video-container').remove();
-										$('#myvideo').removeClass('hide').show();
-									}
 								},
-								onremotestream: function(stream) {
+								onremotetrack: function(track, mid, on) {
 									// The publisher stream is sendonly, we don't expect anything here
 								},
 								oncleanup: function() {
 									Janus.log(" ::: Got a cleanup notification: we are unpublished now :::");
 									mystream = null;
+									delete feedStreams[myid];
 									$('#videolocal').html('<button id="publish" class="btn btn-primary">Publish</button>');
 									$('#publish').click(function() { publishOwnFeed(true); });
 									$("#videolocal").parent().parent().unblock();
 									$('#bitrate').parent().parent().addClass('hide');
 									$('#bitrate a').unbind('click');
+									localTracks = {};
+									localVideos = 0;
 								}
 							});
 					},
@@ -451,45 +520,66 @@ function unpublishOwnFeed() {
 	sfutest.send({ message: unpublish });
 }
 
-function newRemoteFeed(id, display, audio, video) {
+function newRemoteFeed(id, display, streams) {
 	// A new feed has been published, create a new plugin handle and attach to it as a subscriber
 	var remoteFeed = null;
+	if(!streams)
+		streams = feedStreams[id];
 	janus.attach(
 		{
 			plugin: "janus.plugin.videoroom",
 			opaqueId: opaqueId,
 			success: function(pluginHandle) {
 				remoteFeed = pluginHandle;
+				remoteFeed.remoteTracks = {};
+				remoteFeed.remoteVideos = 0;
 				remoteFeed.simulcastStarted = false;
 				Janus.log("Plugin attached! (" + remoteFeed.getPlugin() + ", id=" + remoteFeed.getId() + ")");
 				Janus.log("  -- This is a subscriber");
+				// Prepare the streams to subscribe to, as an array: we have the list of
+				// streams the feed is publishing, so we can choose what to pick or skip
+				var subscription = [];
+				for(var i in streams) {
+					var stream = streams[i];
+					// If the publisher is VP8/VP9 and this is an older Safari, let's avoid video
+					if(stream.type === "video" && Janus.webRTCAdapter.browserDetails.browser === "safari" &&
+							(stream.codec === "vp9" || (stream.codec === "vp8" && !Janus.safariVp8))) {
+						toastr.warning("Publisher is using " + stream.codec.toUpperCase +
+							", but Safari doesn't support it: disabling video stream #" + stream.mindex);
+						continue;
+					}
+					subscription.push({
+						feed: stream.id,	// This is mandatory
+						mid: stream.mid		// This is optional (all streams, if missing)
+					});
+					// FIXME Right now, this is always the same feed: in the future, it won't
+					remoteFeed.rfid = stream.id;
+					remoteFeed.rfdisplay = stream.display;
+				}
 				// We wait for the plugin to send us an offer
 				var subscribe = {
 					request: "join",
 					room: myroom,
 					ptype: "subscriber",
-					feed: id,
+					streams: subscription,
 					private_id: mypvtid
 				};
-				// In case you don't want to receive audio, video or data, even if the
-				// publisher is sending them, set the 'offer_audio', 'offer_video' or
-				// 'offer_data' properties to false (they're true by default), e.g.:
-				// 		subscribe["offer_video"] = false;
-				// For example, if the publisher is VP8 and this is Safari, let's avoid video
-				if(Janus.webRTCAdapter.browserDetails.browser === "safari" &&
-						(video === "vp9" || (video === "vp8" && !Janus.safariVp8))) {
-					if(video)
-						video = video.toUpperCase()
-					toastr.warning("Publisher is using " + video + ", but Safari doesn't support it: disabling video");
-					subscribe["offer_video"] = false;
-				}
-				remoteFeed.videoCodec = video;
 				remoteFeed.send({ message: subscribe });
 			},
 			error: function(error) {
 				Janus.error("  -- Error attaching plugin...", error);
 				bootbox.alert("Error attaching plugin... " + error);
 			},
+			iceState: function(state) {
+				Janus.log("ICE state (feed #" + remoteFeed.rfindex + ") changed to " + state);
+			},
+			webrtcState: function(on) {
+				Janus.log("Janus says this WebRTC PeerConnection (feed #" + remoteFeed.rfindex + ") is " + (on ? "up" : "down") + " now");
+			},
+			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 (subscriber) :::", msg);
 				var event = msg["videoroom"];
@@ -506,15 +596,13 @@ function newRemoteFeed(id, display, audio, video) {
 								break;
 							}
 						}
-						remoteFeed.rfid = msg["id"];
-						remoteFeed.rfdisplay = msg["display"];
 						if(!remoteFeed.spinner) {
 							var target = document.getElementById('videoremote'+remoteFeed.rfindex);
 							remoteFeed.spinner = new Spinner({top:100}).spin(target);
 						} else {
 							remoteFeed.spinner.spin();
 						}
-						Janus.log("Successfully attached to feed " + remoteFeed.rfid + " (" + remoteFeed.rfdisplay + ") in room " + msg["room"]);
+						Janus.log("Successfully attached to feed in room " + msg["room"]);
 						$('#remote'+remoteFeed.rfindex).removeClass('hide').html(remoteFeed.rfdisplay).show();
 					} else if(event === "event") {
 						// Check if we got an event on a simulcast-related event from this publisher
@@ -554,78 +642,95 @@ function newRemoteFeed(id, display, audio, video) {
 						});
 				}
 			},
-			iceState: function(state) {
-				Janus.log("ICE state of this WebRTC PeerConnection (feed #" + remoteFeed.rfindex + ") changed to " + state);
-			},
-			webrtcState: function(on) {
-				Janus.log("Janus says this WebRTC PeerConnection (feed #" + remoteFeed.rfindex + ") is " + (on ? "up" : "down") + " now");
-			},
-			onlocalstream: function(stream) {
+			onlocaltrack: function(track, on) {
 				// The subscriber stream is recvonly, we don't expect anything here
 			},
-			onremotestream: function(stream) {
-				Janus.debug("Remote feed #" + remoteFeed.rfindex + ", stream:", stream);
-				var addButtons = false;
-				if($('#remotevideo'+remoteFeed.rfindex).length === 0) {
-					addButtons = true;
-					// No remote video yet
-					$('#videoremote'+remoteFeed.rfindex).append('<video class="rounded centered" id="waitingvideo' + remoteFeed.rfindex + '" width=320 height=240 />');
-					$('#videoremote'+remoteFeed.rfindex).append('<video class="rounded centered relative hide" id="remotevideo' + remoteFeed.rfindex + '" width="100%" height="100%" autoplay playsinline/>');
+			onremotetrack: function(track, mid, on) {
+				Janus.debug("Remote feed #" + remoteFeed.rfindex + ", remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+				if(!on) {
+					// Track removed, get rid of the stream and the rendering
+					var stream = remoteFeed.remoteTracks[mid];
+					if(stream) {
+						try {
+							var tracks = stream.getTracks();
+							for(var i in tracks) {
+								var mst = tracks[i];
+								if(mst !== null && mst !== undefined)
+									mst.stop();
+							}
+						} catch(e) {}
+					}
+					$('#remotevideo'+remoteFeed.rfindex + '-' + mid).remove();
+					if(track.kind === "video") {
+						remoteFeed.remoteVideos--;
+						if(remoteFeed.remoteVideos === 0) {
+							// No video, at least for now: show a placeholder
+							if($('#videoremote'+remoteFeed.rfindex + ' .no-video-container').length === 0) {
+								$('#videoremote'+remoteFeed.rfindex).append(
+									'<div class="no-video-container">' +
+										'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+										'<span class="no-video-text">No remote video available</span>' +
+									'</div>');
+							}
+						}
+					}
+					delete remoteFeed.remoteTracks[mid];
+					return;
+				}
+				// If we're here, a new track was added
+				if(remoteFeed.spinner) {
+					remoteFeed.spinner.stop();
+					remoteFeed.spinner = null;
+				}
+				if($('#remotevideo' + remoteFeed.rfindex + '-' + mid).length > 0)
+					return;
+				if(track.kind === "audio") {
+					// New audio track: create a stream out of it, and use a hidden <audio> element
+					stream = new MediaStream();
+					stream.addTrack(track.clone());
+					remoteFeed.remoteTracks[mid] = stream;
+					Janus.log("Created remote audio stream:", stream);
+					$('#videoremote'+remoteFeed.rfindex).append('<audio class="hide" id="remotevideo' + remoteFeed.rfindex + '-' + mid + '" autoplay playsinline/>');
+					Janus.attachMediaStream($('#remotevideo' + remoteFeed.rfindex + '-' + mid).get(0), stream);
+					if(remoteFeed.remoteVideos === 0) {
+						// No video, at least for now: show a placeholder
+						if($('#videoremote'+remoteFeed.rfindex + ' .no-video-container').length === 0) {
+							$('#videoremote'+remoteFeed.rfindex).append(
+								'<div class="no-video-container">' +
+									'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+									'<span class="no-video-text">No remote video available</span>' +
+								'</div>');
+						}
+					}
+				} else {
+					// New video track: create a stream out of it
+					remoteFeed.remoteVideos++;
+					$('#videoremote'+remoteFeed.rfindex + ' .no-video-container').remove();
+					stream = new MediaStream();
+					stream.addTrack(track.clone());
+					remoteFeed.remoteTracks[mid] = stream;
+					Janus.log("Created remote video stream:", stream);
+					$('#videoremote'+remoteFeed.rfindex).append('<video class="rounded centered" id="remotevideo' + remoteFeed.rfindex + '-' + mid + '" width=100% autoplay playsinline/>');
 					$('#videoremote'+remoteFeed.rfindex).append(
 						'<span class="label label-primary hide" id="curres'+remoteFeed.rfindex+'" style="position: absolute; bottom: 0px; left: 0px; margin: 15px;"></span>' +
 						'<span class="label label-info hide" id="curbitrate'+remoteFeed.rfindex+'" style="position: absolute; bottom: 0px; right: 0px; margin: 15px;"></span>');
-					// Show the video, hide the spinner and show the resolution when we get a playing event
-					$("#remotevideo"+remoteFeed.rfindex).bind("playing", function () {
-						if(remoteFeed.spinner)
-							remoteFeed.spinner.stop();
-						remoteFeed.spinner = null;
-						$('#waitingvideo'+remoteFeed.rfindex).remove();
-						if(this.videoWidth)
-							$('#remotevideo'+remoteFeed.rfindex).removeClass('hide').show();
-						var width = this.videoWidth;
-						var height = this.videoHeight;
-						$('#curres'+remoteFeed.rfindex).removeClass('hide').text(width+'x'+height).show();
-						if(Janus.webRTCAdapter.browserDetails.browser === "firefox") {
-							// Firefox Stable has a bug: width and height are not immediately available after a playing
-							setTimeout(function() {
-								var width = $("#remotevideo"+remoteFeed.rfindex).get(0).videoWidth;
-								var height = $("#remotevideo"+remoteFeed.rfindex).get(0).videoHeight;
+					Janus.attachMediaStream($('#remotevideo' + remoteFeed.rfindex + '-' + mid).get(0), stream);
+					// Note: we'll need this for additional videos too
+					if(!bitrateTimer[remoteFeed.rfindex]) {
+						$('#curbitrate'+remoteFeed.rfindex).removeClass('hide').show();
+						bitrateTimer[remoteFeed.rfindex] = setInterval(function() {
+							if(!$("#videoremote" + remoteFeed.rfindex + ' video').get(0))
+								return;
+							// Display updated bitrate, if supported
+							var bitrate = remoteFeed.getBitrate();
+							$('#curbitrate'+remoteFeed.rfindex).text(bitrate);
+							// Check if the resolution changed too
+							var width = $("#videoremote" + remoteFeed.rfindex + ' video').get(0).videoWidth;
+							var height = $("#videoremote" + remoteFeed.rfindex + ' video').get(0).videoHeight;
+							if(width > 0 && height > 0)
 								$('#curres'+remoteFeed.rfindex).removeClass('hide').text(width+'x'+height).show();
-							}, 2000);
-						}
-					});
-				}
-				Janus.attachMediaStream($('#remotevideo'+remoteFeed.rfindex).get(0), stream);
-				var videoTracks = stream.getVideoTracks();
-				if(!videoTracks || videoTracks.length === 0) {
-					// No remote video
-					$('#remotevideo'+remoteFeed.rfindex).hide();
-					if($('#videoremote'+remoteFeed.rfindex + ' .no-video-container').length === 0) {
-						$('#videoremote'+remoteFeed.rfindex).append(
-							'<div class="no-video-container">' +
-								'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-								'<span class="no-video-text">No remote video available</span>' +
-							'</div>');
+						}, 1000);
 					}
-				} else {
-					$('#videoremote'+remoteFeed.rfindex+ ' .no-video-container').remove();
-					$('#remotevideo'+remoteFeed.rfindex).removeClass('hide').show();
-				}
-				if(!addButtons)
-					return;
-				if(Janus.webRTCAdapter.browserDetails.browser === "chrome" || Janus.webRTCAdapter.browserDetails.browser === "firefox" ||
-						Janus.webRTCAdapter.browserDetails.browser === "safari") {
-					$('#curbitrate'+remoteFeed.rfindex).removeClass('hide').show();
-					bitrateTimer[remoteFeed.rfindex] = setInterval(function() {
-						// Display updated bitrate, if supported
-						var bitrate = remoteFeed.getBitrate();
-						$('#curbitrate'+remoteFeed.rfindex).text(bitrate);
-						// Check if the resolution changed too
-						var width = $("#remotevideo"+remoteFeed.rfindex).get(0).videoWidth;
-						var height = $("#remotevideo"+remoteFeed.rfindex).get(0).videoHeight;
-						if(width > 0 && height > 0)
-							$('#curres'+remoteFeed.rfindex).removeClass('hide').text(width+'x'+height).show();
-					}, 1000);
 				}
 			},
 			oncleanup: function() {
@@ -643,6 +748,8 @@ function newRemoteFeed(id, display, audio, video) {
 				bitrateTimer[remoteFeed.rfindex] = null;
 				remoteFeed.simulcastStarted = false;
 				$('#simulcast'+remoteFeed.rfindex).remove();
+				remoteFeed.remoteTracks = {};
+				remoteFeed.remoteVideos = 0;
 			}
 		});
 }
diff --git a/html/voicemailtest.js b/html/voicemailtest.js
index 7e3f60267d..4793f7bda4 100644
--- a/html/voicemailtest.js
+++ b/html/voicemailtest.js
@@ -178,10 +178,10 @@ $(document).ready(function() {
 										vmailtest.handleRemoteJsep({ jsep: jsep });
 									}
 								},
-								onlocalstream: function(stream) {
+								onlocaltrack: function(track, on) {
 									// We're not going to attach the local audio stream
 								},
-								onremotestream: function(stream) {
+								onremotetrack: function(track, mid, on) {
 									// We're not going to receive anything from the plugin
 								},
 								oncleanup: function() {
diff --git a/html/vp9svctest.js b/html/vp9svctest.js
index e2c36e8e7b..9c580760a9 100644
--- a/html/vp9svctest.js
+++ b/html/vp9svctest.js
@@ -59,7 +59,8 @@ var mystream = null;
 // We use this other ID just to map our subscriptions to us
 var mypvtid = null;
 
-var feeds = [];
+var localTracks = {}, localVideos = 0;
+var feeds = [], feedStreams = {};
 var bitrateTimer = [];
 
 
@@ -126,8 +127,8 @@ $(document).ready(function() {
 								iceState: function(state) {
 									Janus.log("ICE state changed to " + state);
 								},
-								mediaState: function(medium, on) {
-									Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
+								mediaState: function(medium, mid, on) {
+									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");
@@ -150,6 +151,10 @@ $(document).ready(function() {
 										return false;
 									});
 								},
+								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 (publisher) :::", msg);
 									var event = msg["videoroom"];
@@ -168,10 +173,15 @@ $(document).ready(function() {
 												for(var f in list) {
 													var id = list[f]["id"];
 													var display = list[f]["display"];
-													var audio = list[f]["audio_codec"];
-													var video = list[f]["video_codec"];
-													Janus.debug("  >> [" + id + "] " + display + " (audio: " + audio + ", video: " + video + ")");
-													newRemoteFeed(id, display, audio, video);
+													var streams = list[f]["streams"];
+													for(var i in streams) {
+														var stream = streams[i];
+														stream["id"] = id;
+														stream["display"] = display;
+													}
+													feedStreams[id] = streams;
+													Janus.debug("  >> [" + id + "] " + display + ":", streams);
+													newRemoteFeed(id, display, streams);
 												}
 											}
 										} else if(event === "destroyed") {
@@ -181,17 +191,30 @@ $(document).ready(function() {
 												window.location.reload();
 											});
 										} else if(event === "event") {
-											// Any new feed to attach to?
-											if(msg["publishers"]) {
+											// Any info on our streams or a new feed to attach to?
+											if(msg["streams"]) {
+												var streams = msg["streams"];
+												for(var i in streams) {
+													var stream = streams[i];
+													stream["id"] = myid;
+													stream["display"] = myusername;
+												}
+												feedStreams[myid] = streams;
+											} else if(msg["publishers"]) {
 												var list = msg["publishers"];
 												Janus.debug("Got a list of available publishers/feeds:", list);
 												for(var f in list) {
 													var id = list[f]["id"];
 													var display = list[f]["display"];
-													var audio = list[f]["audio_codec"];
-													var video = list[f]["video_codec"];
-													Janus.debug("  >> [" + id + "] " + display + " (audio: " + audio + ", video: " + video + ")");
-													newRemoteFeed(id, display, audio, video);
+													var streams = list[f]["streams"];
+													for(var i in streams) {
+														var stream = streams[i];
+														stream["id"] = id;
+														stream["display"] = display;
+													}
+													feedStreams[id] = streams;
+													Janus.debug("  >> [" + id + "] " + display + ":", streams);
+													newRemoteFeed(id, display, streams);
 												}
 											} else if(msg["leaving"]) {
 												// One of the publishers has gone away?
@@ -204,13 +227,14 @@ $(document).ready(function() {
 														break;
 													}
 												}
-												if(remoteFeed != null) {
+												if(remoteFeed) {
 													Janus.debug("Feed " + remoteFeed.rfid + " (" + remoteFeed.rfdisplay + ") has left the room, detaching");
 													$('#remote'+remoteFeed.rfindex).empty().hide();
 													$('#videoremote'+remoteFeed.rfindex).empty();
 													feeds[remoteFeed.rfindex] = null;
 													remoteFeed.detach();
 												}
+												delete feedStreams[leaving];
 											} else if(msg["unpublished"]) {
 												// One of the publishers has unpublished?
 												var unpublished = msg["unpublished"];
@@ -227,13 +251,14 @@ $(document).ready(function() {
 														break;
 													}
 												}
-												if(remoteFeed != null) {
+												if(remoteFeed) {
 													Janus.debug("Feed " + remoteFeed.rfid + " (" + remoteFeed.rfdisplay + ") has left the room, detaching");
 													$('#remote'+remoteFeed.rfindex).empty().hide();
 													$('#videoremote'+remoteFeed.rfindex).empty();
 													feeds[remoteFeed.rfindex] = null;
 													remoteFeed.detach();
 												}
+												delete feedStreams[unpublished];
 											} else if(msg["error"]) {
 												if(msg["error_code"] === 426) {
 													// This is a "no such room" error: give a more meaningful description
@@ -273,13 +298,48 @@ $(document).ready(function() {
 										}
 									}
 								},
-								onlocalstream: function(stream) {
-									Janus.debug(" ::: Got a local stream :::", stream);
-									mystream = stream;
-									$('#videojoin').hide();
+								onlocaltrack: function(track, on) {
+									Janus.debug("Local track " + (on ? "added" : "removed") + ":", track);
+									// We use the track ID as name of the element, but it may contain invalid characters
+									var trackId = track.id.replace(/[{}]/g, "");
+									if(!on) {
+										// Track removed, get rid of the stream and the rendering
+										var stream = localTracks[trackId];
+										if(stream) {
+											try {
+												var tracks = stream.getTracks();
+												for(var i in tracks) {
+													var mst = tracks[i];
+													if(mst !== null && mst !== undefined)
+														mst.stop();
+												}
+											} catch(e) {}
+										}
+										if(track.kind === "video") {
+											$('#myvideo' + trackId).remove();
+											localVideos--;
+											if(localVideos === 0) {
+												// No video, at least for now: show a placeholder
+												if($('#videolocal .no-video-container').length === 0) {
+													$('#videolocal').append(
+														'<div class="no-video-container">' +
+															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<span class="no-video-text">No webcam available</span>' +
+														'</div>');
+												}
+											}
+										}
+										delete localTracks[trackId];
+										return;
+									}
+									// If we're here, a new track was added
+									var stream = localTracks[trackId];
+									if(stream) {
+										// We've been here already
+										return;
+									}
 									$('#videos').removeClass('hide').show();
-									if($('#myvideo').length === 0) {
-										$('#videolocal').append('<video class="rounded centered" id="myvideo" width="100%" height="100%" autoplay playsinline muted="muted"/>');
+									if($('#mute').length === 0) {
 										// Add a 'mute' button
 										$('#videolocal').append('<button class="btn btn-warning btn-xs" id="mute" style="position: absolute; bottom: 0px; left: 0px; margin: 15px;">Mute</button>');
 										$('#mute').click(toggleMute);
@@ -287,9 +347,31 @@ $(document).ready(function() {
 										$('#videolocal').append('<button class="btn btn-warning btn-xs" id="unpublish" style="position: absolute; bottom: 0px; right: 0px; margin: 15px;">Unpublish</button>');
 										$('#unpublish').click(unpublishOwnFeed);
 									}
-									$('#publisher').removeClass('hide').html(myusername).show();
-									Janus.attachMediaStream($('#myvideo').get(0), stream);
-									$("#myvideo").get(0).muted = "muted";
+									if(track.kind === "audio") {
+										// We ignore local audio tracks, they'd generate echo anyway
+										if(localVideos === 0) {
+											// No video, at least for now: show a placeholder
+											if($('#videolocal .no-video-container').length === 0) {
+												$('#videolocal').append(
+													'<div class="no-video-container">' +
+														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<span class="no-video-text">No webcam available</span>' +
+													'</div>');
+											}
+										}
+									} else {
+										// New video track: create a stream out of it
+										localVideos++;
+										$('#videolocal .no-video-container').remove();
+										stream = new MediaStream();
+										stream.addTrack(track.clone());
+										localTracks[trackId] = stream;
+										Janus.log("Created local stream:", stream);
+										Janus.log(stream.getTracks());
+										Janus.log(stream.getVideoTracks());
+										$('#videolocal').append('<video class="rounded centered" id="myvideo' + trackId + '" width=100% autoplay playsinline muted="muted"/>');
+										Janus.attachMediaStream($('#myvideo' + trackId).get(0), stream);
+									}
 									if(sfutest.webrtcStuff.pc.iceConnectionState !== "completed" &&
 											sfutest.webrtcStuff.pc.iceConnectionState !== "connected") {
 										$("#videolocal").parent().parent().block({
@@ -301,33 +383,21 @@ $(document).ready(function() {
 											}
 										});
 									}
-									var videoTracks = stream.getVideoTracks();
-									if(!videoTracks || videoTracks.length === 0) {
-										// No webcam
-										$('#myvideo').hide();
-										if($('#videolocal .no-video-container').length === 0) {
-											$('#videolocal').append(
-												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-													'<span class="no-video-text">No webcam available</span>' +
-												'</div>');
-										}
-									} else {
-										$('#videolocal .no-video-container').remove();
-										$('#myvideo').removeClass('hide').show();
-									}
 								},
-								onremotestream: function(stream) {
+								onremotetrack: function(track, mid, on) {
 									// The publisher stream is sendonly, we don't expect anything here
 								},
 								oncleanup: function() {
 									Janus.log(" ::: Got a cleanup notification: we are unpublished now :::");
 									mystream = null;
+									delete feedStreams[myid];
 									$('#videolocal').html('<button id="publish" class="btn btn-primary">Publish</button>');
 									$('#publish').click(function() { publishOwnFeed(true); });
 									$("#videolocal").parent().parent().unblock();
 									$('#bitrate').parent().parent().addClass('hide');
 									$('#bitrate a').unbind('click');
+									localTracks = {};
+									localVideos = 0;
 								}
 							});
 					},
@@ -436,39 +506,64 @@ function unpublishOwnFeed() {
 	sfutest.send({ message: unpublish });
 }
 
-function newRemoteFeed(id, display, audio, video) {
+function newRemoteFeed(id, display, streams) {
 	// A new feed has been published, create a new plugin handle and attach to it as a subscriber
 	var remoteFeed = null;
+	if(!streams)
+		streams = feedStreams[id];
 	janus.attach(
 		{
 			plugin: "janus.plugin.videoroom",
 			opaqueId: opaqueId,
 			success: function(pluginHandle) {
 				remoteFeed = pluginHandle;
+				remoteFeed.remoteTracks = {};
+				remoteFeed.remoteVideos = 0;
 				Janus.log("Plugin attached! (" + remoteFeed.getPlugin() + ", id=" + remoteFeed.getId() + ")");
 				Janus.log("  -- This is a subscriber");
+				// Prepare the streams to subscribe to, as an array: we have the list of
+				// streams the feed is publishing, so we can choose what to pick or skip
+				var subscription = [];
+				for(var i in streams) {
+					var stream = streams[i];
+					// Safari doesn't support VP9
+					if(Janus.webRTCAdapter.browserDetails.browser === "safari") {
+						toastr.warning("Publisher is using " + stream.codec.toUpperCase +
+							", but Safari doesn't support it: disabling video stream #" + stream.mindex);
+						continue;
+					}
+					subscription.push({
+						feed: stream.id,	// This is mandatory
+						mid: stream.mid		// This is optional (all streams, if missing)
+					});
+					// FIXME Right now, this is always the same feed: in the future, it won't
+					remoteFeed.rfid = stream.id;
+					remoteFeed.rfdisplay = stream.display;
+				}
 				// We wait for the plugin to send us an offer
 				var subscribe = {
 					request: "join",
 					room: myroom,
 					ptype: "subscriber",
-					feed: id,
+					streams: subscription,
 					private_id: mypvtid
 				};
-				if(Janus.webRTCAdapter.browserDetails.browser === "safari") {
-					// Safari doesn't support VP9
-					if(video)
-						video = video.toUpperCase()
-					toastr.warning("Publisher is using " + video + ", but Safari doesn't support it: disabling video");
-					subscribe["offer_video"] = false;
-				}
-				remoteFeed.videoCodec = video;
 				remoteFeed.send({ message: subscribe });
 			},
 			error: function(error) {
 				Janus.error("  -- Error attaching plugin...", error);
 				bootbox.alert("Error attaching plugin... " + error);
 			},
+			iceState: function(state) {
+				Janus.log("ICE state (feed #" + remoteFeed.rfindex + ") changed to " + state);
+			},
+			webrtcState: function(on) {
+				Janus.log("Janus says this WebRTC PeerConnection (feed #" + remoteFeed.rfindex + ") is " + (on ? "up" : "down") + " now");
+			},
+			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 (subscriber) :::", msg);
 				var event = msg["videoroom"];
@@ -485,15 +580,13 @@ function newRemoteFeed(id, display, audio, video) {
 								break;
 							}
 						}
-						remoteFeed.rfid = msg["id"];
-						remoteFeed.rfdisplay = msg["display"];
 						if(!remoteFeed.spinner) {
 							var target = document.getElementById('videoremote'+remoteFeed.rfindex);
 							remoteFeed.spinner = new Spinner({top:100}).spin(target);
 						} else {
 							remoteFeed.spinner.spin();
 						}
-						Janus.log("Successfully attached to feed " + remoteFeed.rfid + " (" + remoteFeed.rfdisplay + ") in room " + msg["room"]);
+						Janus.log("Successfully attached to feed in room " + msg["room"]);
 						$('#remote'+remoteFeed.rfindex).removeClass('hide').html(remoteFeed.rfdisplay).show();
 					} else if(event === "event") {
 						// Check if we got an event on a SVC-related event from this publisher
@@ -533,78 +626,95 @@ function newRemoteFeed(id, display, audio, video) {
 						});
 				}
 			},
-			iceState: function(state) {
-				Janus.log("ICE state of this WebRTC PeerConnection (feed #" + remoteFeed.rfindex + ") changed to " + state);
-			},
-			webrtcState: function(on) {
-				Janus.log("Janus says this WebRTC PeerConnection (feed #" + remoteFeed.rfindex + ") is " + (on ? "up" : "down") + " now");
-			},
-			onlocalstream: function(stream) {
+			onlocaltrack: function(track, on) {
 				// The subscriber stream is recvonly, we don't expect anything here
 			},
-			onremotestream: function(stream) {
-				Janus.debug("Remote feed #" + remoteFeed.rfindex + ", stream:", stream);
-				var addButtons = false;
-				if($('#remotevideo'+remoteFeed.rfindex).length === 0) {
-					addButtons = true;
-					// No remote video yet
-					$('#videoremote'+remoteFeed.rfindex).append('<video class="rounded centered" id="waitingvideo' + remoteFeed.rfindex + '" width=320 height=240 />');
-					$('#videoremote'+remoteFeed.rfindex).append('<video class="rounded centered relative hide" id="remotevideo' + remoteFeed.rfindex + '" width="100%" height="100%" autoplay playsinline/>');
+			onremotetrack: function(track, mid, on) {
+				Janus.debug("Remote feed #" + remoteFeed.rfindex + ", remote track (mid=" + mid + ") " + (on ? "added" : "removed") + ":", track);
+				if(!on) {
+					// Track removed, get rid of the stream and the rendering
+					var stream = remoteFeed.remoteTracks[mid];
+					if(stream) {
+						try {
+							var tracks = stream.getTracks();
+							for(var i in tracks) {
+								var mst = tracks[i];
+								if(mst !== null && mst !== undefined)
+									mst.stop();
+							}
+						} catch(e) {}
+					}
+					$('#remotevideo'+remoteFeed.rfindex + '-' + mid).remove();
+					if(track.kind === "video") {
+						remoteFeed.remoteVideos--;
+						if(remoteFeed.remoteVideos === 0) {
+							// No video, at least for now: show a placeholder
+							if($('#videoremote'+remoteFeed.rfindex + ' .no-video-container').length === 0) {
+								$('#videoremote'+remoteFeed.rfindex).append(
+									'<div class="no-video-container">' +
+										'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+										'<span class="no-video-text">No remote video available</span>' +
+									'</div>');
+							}
+						}
+					}
+					delete remoteFeed.remoteTracks[mid];
+					return;
+				}
+				// If we're here, a new track was added
+				if(remoteFeed.spinner) {
+					remoteFeed.spinner.stop();
+					remoteFeed.spinner = null;
+				}
+				if($('#remotevideo' + remoteFeed.rfindex + '-' + mid).length > 0)
+					return;
+				if(track.kind === "audio") {
+					// New audio track: create a stream out of it, and use a hidden <audio> element
+					stream = new MediaStream();
+					stream.addTrack(track.clone());
+					remoteFeed.remoteTracks[mid] = stream;
+					Janus.log("Created remote audio stream:", stream);
+					$('#videoremote'+remoteFeed.rfindex).append('<audio class="hide" id="remotevideo' + remoteFeed.rfindex + '-' + mid + '" autoplay playsinline/>');
+					Janus.attachMediaStream($('#remotevideo' + remoteFeed.rfindex + '-' + mid).get(0), stream);
+					if(remoteFeed.remoteVideos === 0) {
+						// No video, at least for now: show a placeholder
+						if($('#videoremote'+remoteFeed.rfindex + ' .no-video-container').length === 0) {
+							$('#videoremote'+remoteFeed.rfindex).append(
+								'<div class="no-video-container">' +
+									'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+									'<span class="no-video-text">No remote video available</span>' +
+								'</div>');
+						}
+					}
+				} else {
+					// New video track: create a stream out of it
+					remoteFeed.remoteVideos++;
+					$('#videoremote'+remoteFeed.rfindex + ' .no-video-container').remove();
+					stream = new MediaStream();
+					stream.addTrack(track.clone());
+					remoteFeed.remoteTracks[mid] = stream;
+					Janus.log("Created remote video stream:", stream);
+					$('#videoremote'+remoteFeed.rfindex).append('<video class="rounded centered" id="remotevideo' + remoteFeed.rfindex + '-' + mid + '" width=100% autoplay playsinline/>');
 					$('#videoremote'+remoteFeed.rfindex).append(
 						'<span class="label label-primary hide" id="curres'+remoteFeed.rfindex+'" style="position: absolute; bottom: 0px; left: 0px; margin: 15px;"></span>' +
 						'<span class="label label-info hide" id="curbitrate'+remoteFeed.rfindex+'" style="position: absolute; bottom: 0px; right: 0px; margin: 15px;"></span>');
-					// Show the video, hide the spinner and show the resolution when we get a playing event
-					$("#remotevideo"+remoteFeed.rfindex).bind("playing", function () {
-						if(remoteFeed.spinner)
-							remoteFeed.spinner.stop();
-						remoteFeed.spinner = null;
-						$('#waitingvideo'+remoteFeed.rfindex).remove();
-						if(this.videoWidth)
-							$('#remotevideo'+remoteFeed.rfindex).removeClass('hide').show();
-						var width = this.videoWidth;
-						var height = this.videoHeight;
-						$('#curres'+remoteFeed.rfindex).removeClass('hide').text(width+'x'+height).show();
-						if(Janus.webRTCAdapter.browserDetails.browser === "firefox") {
-							// Firefox Stable has a bug: width and height are not immediately available after a playing
-							setTimeout(function() {
-								var width = $("#remotevideo"+remoteFeed.rfindex).get(0).videoWidth;
-								var height = $("#remotevideo"+remoteFeed.rfindex).get(0).videoHeight;
+					Janus.attachMediaStream($('#remotevideo' + remoteFeed.rfindex + '-' + mid).get(0), stream);
+					// Note: we'll need this for additional videos too
+					if(!bitrateTimer[remoteFeed.rfindex]) {
+						$('#curbitrate'+remoteFeed.rfindex).removeClass('hide').show();
+						bitrateTimer[remoteFeed.rfindex] = setInterval(function() {
+							if(!$("#videoremote" + remoteFeed.rfindex + ' video').get(0))
+								return;
+							// Display updated bitrate, if supported
+							var bitrate = remoteFeed.getBitrate();
+							$('#curbitrate'+remoteFeed.rfindex).text(bitrate);
+							// Check if the resolution changed too
+							var width = $("#videoremote" + remoteFeed.rfindex + ' video').get(0).videoWidth;
+							var height = $("#videoremote" + remoteFeed.rfindex + ' video').get(0).videoHeight;
+							if(width > 0 && height > 0)
 								$('#curres'+remoteFeed.rfindex).removeClass('hide').text(width+'x'+height).show();
-							}, 2000);
-						}
-					});
-				}
-				Janus.attachMediaStream($('#remotevideo'+remoteFeed.rfindex).get(0), stream);
-				var videoTracks = stream.getVideoTracks();
-				if(!videoTracks || videoTracks.length === 0) {
-					// No remote video
-					$('#remotevideo'+remoteFeed.rfindex).hide();
-					if($('#videoremote'+remoteFeed.rfindex + ' .no-video-container').length === 0) {
-						$('#videoremote'+remoteFeed.rfindex).append(
-							'<div class="no-video-container">' +
-								'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
-								'<span class="no-video-text">No remote video available</span>' +
-							'</div>');
+						}, 1000);
 					}
-				} else {
-					$('#videoremote'+remoteFeed.rfindex+ ' .no-video-container').remove();
-					$('#remotevideo'+remoteFeed.rfindex).removeClass('hide').show();
-				}
-				if(!addButtons)
-					return;
-				if(Janus.webRTCAdapter.browserDetails.browser === "chrome" || Janus.webRTCAdapter.browserDetails.browser === "firefox" ||
-						Janus.webRTCAdapter.browserDetails.browser === "safari") {
-					$('#curbitrate'+remoteFeed.rfindex).removeClass('hide').show();
-					bitrateTimer[remoteFeed.rfindex] = setInterval(function() {
-						// Display updated bitrate, if supported
-						var bitrate = remoteFeed.getBitrate();
-						$('#curbitrate'+remoteFeed.rfindex).text(bitrate);
-						// Check if the resolution changed too
-						var width = $("#remotevideo"+remoteFeed.rfindex).get(0).videoWidth;
-						var height = $("#remotevideo"+remoteFeed.rfindex).get(0).videoHeight;
-						if(width > 0 && height > 0)
-							$('#curres'+remoteFeed.rfindex).removeClass('hide').text(width+'x'+height).show();
-					}, 1000);
 				}
 			},
 			oncleanup: function() {
@@ -626,6 +736,8 @@ function newRemoteFeed(id, display, audio, video) {
 				$('#tl'+remoteFeed.rfindex+'-1').unbind('click');
 				$('#tl'+remoteFeed.rfindex+'-0').unbind('click');
 				$('#layers'+remoteFeed.rfindex).addClass('hide');
+				remoteFeed.remoteTracks = {};
+				remoteFeed.remoteVideos = 0;
 			}
 		});
 }
diff --git a/mainpage.dox b/mainpage.dox
index 6e299d00ea..d4d08053fc 100644
--- a/mainpage.dox
+++ b/mainpage.dox
@@ -359,8 +359,8 @@ var janus = new Janus(
  * possibly react accordingly (e.g., decrease the bitrate if most of our
  * packets are getting lost);
  * 		- \c onmessage: a message/event has been received from the plugin;
- * 		- \c onlocalstream: a local \c MediaStream is available and ready to be displayed;
- * 		- \c onremotestream: a remote \c MediaStream is available and ready to be displayed;
+ * 		- \c onlocaltrack: a local \c MediaStreamTrack is available and ready to be displayed;
+ * 		- \c onremotetrack: a remote \c MediaStreamTrack is available and ready to be displayed;
  * 		- \c ondataopen: a Data Channel is available and ready to be used;
  * 		- \c ondata: data has been received through the Data Channel;
  * 		- \c oncleanup: the WebRTC PeerConnection with the plugin was closed;
@@ -387,11 +387,11 @@ janus.attach(
 			// We got a message/event (msg) from the plugin
 			// If jsep is not null, this involves a WebRTC negotiation
 		},
-		onlocalstream: function(stream) {
-			// We have a local stream (getUserMedia worked!) to display
+		onlocaltrack: function(track, added) {
+			// A local track to display has just been added (getUserMedia worked!) or removed
 		},
-		onremotestream: function(stream) {
-			// We have a remote stream (working PeerConnection!) to display
+		onremotetrack: function(track, mid, added) {
+			// A remote track (working PeerConnection!) with a specific mid has just been added or removed
 		},
 		oncleanup: function() {
 			// PeerConnection with the plugin closed, clean the UI
@@ -421,7 +421,8 @@ janus.attach(
  * - \c handleRemoteJsep(callbacks): asks the library to handle an incoming WebRTC compliant session description;
  * - \c dtmf(parameters): sends a DTMF tone on the PeerConnection;
  * - \c data(parameters): sends data through the Data Channel, if available;
- * - \c getBitrate(): gets a verbose description of the currently received stream bitrate;
+ * - \c getBitrate(mid): gets a verbose description of the currently received
+ * video stream bitrate (optional mid to specify the stream, first video stream if missing);
  * - \c hangup(sendRequest): tells the library to close the PeerConnection; if the optional \c sendRequest argument is
  * set to \c true, then a \c hangup Janus API request is sent to Janus as well (disabled by default, Janus can usually
  * figure this out via DTLS alerts and the like but it may be useful to enable it sometimes);
@@ -447,8 +448,8 @@ janus.attach(
  * <code>send({msg, jsep})</code> to close the loop with the plugin), otherwise use
  * \c handleRemoteJsep ;
  * -# whether you took the initiative to set up a PeerConnection or the plugin did,
- * the \c onlocalstream and/or the \c onremotestream callbacks will provide
- * you with a stream you can display in your page;
+ * the \c onlocaltrack and/or the \c onremotetrack callbacks will provide
+ * you with info on media tracks you can display or play in your page;
  * -# each plugin may allow you to manipulate what should flow through the
  * PeerConnection channel: the \c send method and \c onmessage callback
  * will allow you to handle this interaction (e.g., to tell the plugin
@@ -553,13 +554,13 @@ janus.attach(
 			}
 		},
 		[..]
-		onlocalstream: function(stream) {
+		onlocaltrack: function(track, added) {
 			// Invoked after createOffer
-			// This is our video
+			// This is info on a local track: when added, we can choose to render
 		},
-		onremotestream: function(stream) {
+		onremotetrack: function(track, mid, added) {
 			// Invoked after handleRemoteJsep has got us a PeerConnection
-			// This is the remote video
+			// This is info on a remote track: when added, we can choose to render
 		},
 		[..]
   \endverbatim
@@ -567,7 +568,7 @@ janus.attach(
  * This, instead, is an example of how to use \c createAnswer, taken from the Streaming demo page:
  *
  \verbatim
-// Attach to echo test plugin
+// Attach to the Streaming plugin
 janus.attach(
 	{
 		plugin: "janus.plugin.streaming",
@@ -599,12 +600,12 @@ janus.attach(
 			}
 		},
 		[..]
-		onlocalstream: function(stream) {
+		onlocaltrack: function(track, added) {
 			// This will NOT be invoked, we chose recvonly
 		},
-		onremotestream: function(stream) {
+		onremotetrack: function(track, mid, added) {
 			// Invoked after send has got us a PeerConnection
-			// This is the remote video
+			// This is info on a remote track: when added, we can choose to render
 		},
 		[..]
   \endverbatim
@@ -735,7 +736,7 @@ echotest.createOffer(
  \endverbatim
  *
  * Notice that renegotiations involving media changes (both local and remote)
- * will likely result in new calls to the \c onlocalstream and \c onremotestream
+ * will likely result in new calls to the \c onlocaltrack and \c onremotetrack
  * application callbacks: as such, be prepared to see those callbacks called
  * for the same PeerConnection more than once during the course of a media session.
  *