Updated demos and janus.js to use tracks instead of streams

meetecho · Jun 8, 2020 · 20c3904 · 20c3904
1 parent 9efd375
commit 20c3904
Show file tree

Hide file tree

Showing 23 changed files with 3,804 additions and 1,368 deletions.
diff --git 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
@@ -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
@@ -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>