Added bootstrap-based spinner to a few demos

meetecho · Dec 1, 2023 · e4da5d7 · e4da5d7
1 parent cbc9bfa
commit e4da5d7
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 3 deletions.
diff --git a/html/audiobridgetest.html b/html/audiobridgetest.html
@@ -40,7 +40,7 @@
 	<div class="row">
 		<div class="col-md-12">
 			<div class="pb-2 mt-4 mb-2 border-bottom">
-				<h1>Plugin Demo: Audio Room (mixed)
+				<h1>Plugin Demo: Audio Bridge (mixed)
 					<button class="btn btn-secondary" autocomplete="off" id="start">Start</button>
 				</h1>
 			</div>

diff --git a/html/audiobridgetest.js b/html/audiobridgetest.js
@@ -124,6 +124,13 @@ $(document).ready(function() {
 																if(stereo && jsep.sdp.indexOf("stereo=1") == -1) {
 																	// Make sure that our offer contains stereo too
 																	jsep.sdp = jsep.sdp.replace("useinbandfec=1", "useinbandfec=1;stereo=1");
+																	// Create a spinner waiting for the remote video
+																	$('#mixedaudio').html(
+																		'<div class="text-center">' +
+																		'	<div id="spinner" class="spinner-border" role="status">' +
+																		'		<span class="visually-hidden">Loading...</span>' +
+																		'	</div>' +
+																		'</div>');
 																}
 															},
 															success: function(jsep) {
@@ -314,12 +321,16 @@ $(document).ready(function() {
 										$('#roomaudio').remove();
 										return;
 									}
+									$('#spinner').remove();
 									remoteStream = new MediaStream([track]);
 									$('#room').removeClass('hide');
 									if($('#roomaudio').length === 0) {
-										$('#mixedaudio').append('<audio class="rounded centered" id="roomaudio" width="100%" height="100%" autoplay/>');
+										$('#mixedaudio').append('<audio class="rounded centered w-100" id="roomaudio" controls autoplay/>');
+										$('#roomaudio').get(0).volume = 0;
 									}
 									Janus.attachMediaStream($('#roomaudio').get(0), remoteStream);
+									$('#roomaudio').get(0).play();
+									$('#roomaudio').get(0).volume = 1;
 									// Mute button
 									audioenabled = true;
 									$('#toggleaudio').click(

diff --git a/html/canvas.js b/html/canvas.js
@@ -197,6 +197,7 @@ $(document).ready(function() {
 										return;
 									}
 									// If we're here, a new track was added
+									$('#spinner').remove();
 									let addButtons = false;
 									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;
@@ -417,6 +418,13 @@ function createCanvas() {
 						success: function(jsep) {
 							Janus.debug("Got SDP!", jsep);
 							echotest.send({ message: body, jsep: jsep });
+							// Create a spinner waiting for the remote video
+							$('#videoright').html(
+								'<div class="text-center">' +
+								'	<div id="spinner" class="spinner-border" role="status">' +
+								'		<span class="visually-hidden">Loading...</span>' +
+								'	</div>' +
+								'</div>');
 						},
 						error: function(error) {
 							Janus.error("WebRTC error:", error);

diff --git a/html/devicetest.js b/html/devicetest.js
@@ -165,6 +165,13 @@ function restartCapture() {
 			success: function(jsep) {
 				Janus.debug("Got SDP!", jsep);
 				echotest.send({ message: body, jsep: jsep });
+				// Create a spinner waiting for the remote video
+				$('#videoright').html(
+					'<div class="text-center">' +
+					'	<div id="spinner" class="spinner-border" role="status">' +
+					'		<span class="visually-hidden">Loading...</span>' +
+					'	</div>' +
+					'</div>');
 			},
 			error: function(error) {
 				Janus.error("WebRTC error:", error);
@@ -402,6 +409,7 @@ $(document).ready(function() {
 										return;
 									}
 									// If we're here, a new track was added
+									$('#spinner').remove();
 									let addButtons = false;
 									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;

diff --git a/html/e2etest.js b/html/e2etest.js
@@ -246,6 +246,7 @@ $(document).ready(function() {
 										return;
 									}
 									// If we're here, a new track was added
+									$('#spinner').remove();
 									let addButtons = false;
 									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;
@@ -586,6 +587,13 @@ function promptCryptoKey() {
 					if(vcodec)
 						body["videocodec"] = vcodec;
 					echotest.send({ message: body, jsep: jsep });
+					// Create a spinner waiting for the remote video
+					$('#videoright').html(
+						'<div class="text-center">' +
+						'	<div id="spinner" class="spinner-border" role="status">' +
+						'		<span class="visually-hidden">Loading...</span>' +
+						'	</div>' +
+						'</div>');
 				},
 				error: function(error) {
 					Janus.error("WebRTC error:", error);

diff --git a/html/echotest.js b/html/echotest.js
@@ -115,6 +115,13 @@ $(document).ready(function() {
 											success: function(jsep) {
 												Janus.debug("Got SDP!", jsep);
 												echotest.send({ message: body, jsep: jsep });
+												// Create a spinner waiting for the remote video
+												$('#videoright').html(
+													'<div class="text-center">' +
+													'	<div id="spinner" class="spinner-border" role="status">' +
+													'		<span class="visually-hidden">Loading...</span>' +
+													'	</div>' +
+													'</div>');
 											},
 											error: function(error) {
 												Janus.error("WebRTC error:", error);
@@ -320,6 +327,7 @@ $(document).ready(function() {
 										return;
 									}
 									// If we're here, a new track was added
+									$('#spinner').remove();
 									let addButtons = false;
 									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;

diff --git a/html/multiopus.js b/html/multiopus.js
@@ -97,6 +97,13 @@ $(document).ready(function() {
 											success: function(jsep) {
 												Janus.debug("Got SDP!", jsep);
 												echotest.send({ message: body, jsep: jsep });
+												// Create a spinner waiting for the remote video
+												$('#videoright').html(
+													'<div class="text-center">' +
+													'	<div id="spinner" class="spinner-border" role="status">' +
+													'		<span class="visually-hidden">Loading...</span>' +
+													'	</div>' +
+													'</div>');
 											},
 											error: function(error) {
 												Janus.error("WebRTC error:", error);
@@ -229,6 +236,7 @@ $(document).ready(function() {
 										return;
 									}
 									// If we're here, a new track was added
+									$('#spinner').remove();
 									let addButtons = false;
 									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;

diff --git a/html/nosiptest.js b/html/nosiptest.js
@@ -75,6 +75,13 @@ $(document).ready(function() {
 														srtp: srtp
 													};
 													caller.send({ message: body, jsep: jsep });
+													// Create a spinner waiting for the remote video
+													$('#videoright').html(
+														'<div class="text-center">' +
+														'	<div id="spinner" class="spinner-border" role="status">' +
+														'		<span class="visually-hidden">Loading...</span>' +
+														'	</div>' +
+														'</div>');
 												},
 												error: function(error) {
 													Janus.error("WebRTC error:", error);
@@ -270,6 +277,7 @@ $(document).ready(function() {
 									if($('#peervideo' + mid).length > 0)
 										return;
 									// If we're here, a new track was added
+									$('#spinner').remove();
 									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										$('#videos').removeClass('hide');
 										$('#videoright').parent().find('h3').html(

diff --git a/html/streamingtest.js b/html/streamingtest.js
@@ -184,6 +184,7 @@ $(document).ready(function() {
 									if($('#remotevideo' + mid).length > 0)
 										return;
 									// If we're here, a new track was added
+									$('#spinner' + mid).remove();
 									let stream = null;
 									if(track.kind === "audio") {
 										// New audio track: create a stream out of it, and use a hidden <audio> element
@@ -265,6 +266,7 @@ $(document).ready(function() {
 								oncleanup: function() {
 									Janus.log(" ::: Got a cleanup notification :::");
 									$('#videos').empty();
+									$('#info').addClass('hide');
 									for(let i in bitrateTimer)
 										clearInterval(bitrateTimer[i]);
 									bitrateTimer = {};
@@ -459,7 +461,13 @@ function addPanel(panelId, mid, desc) {
 		'				<span class="badge bg-info hide" id="curbitrate' + mid + '"></span>' +
 		'			</span>' +
 		'		</div>' +
-		'		<div class="card-body" id="mstream' + panelId + '"></div>' +
+		'		<div class="card-body" id="mstream' + panelId + '">' +
+		'			<div class="text-center">' +
+		'				<div id="spinner' + mid + '" class="spinner-border" role="status">' +
+		'					<span class="visually-hidden">Loading...</span>' +
+		'				</div>' +
+		'			</div>' +
+		'		</div>' +
 		'	</div>' +
 		'</div>'
 	);

diff --git a/html/videocalltest.js b/html/videocalltest.js
@@ -383,6 +383,7 @@ $(document).ready(function() {
 									if($('#peervideo' + mid).length > 0)
 										return;
 									// If we're here, a new track was added
+									$('#spinner').remove();
 									let addButtons = false;
 									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;
@@ -592,6 +593,13 @@ function doCall() {
 				Janus.debug("Got SDP!", jsep);
 				let body = { request: "call", username: $('#peer').val() };
 				videocall.send({ message: body, jsep: jsep });
+				// Create a spinner waiting for the remote video
+				$('#videoright').html(
+					'<div class="text-center">' +
+					'	<div id="spinner" class="spinner-border" role="status">' +
+					'		<span class="visually-hidden">Loading...</span>' +
+					'	</div>' +
+					'</div>');
 			},
 			error: function(error) {
 				Janus.error("WebRTC error...", error);

diff --git a/html/virtualbg.js b/html/virtualbg.js
@@ -257,6 +257,7 @@ $(document).ready(function() {
 										return;
 									}
 									// If we're here, a new track was added
+									$('#spinner').remove();
 									let addButtons = false;
 									if($('#videoright audio').length === 0 && $('#videoright video').length === 0) {
 										addButtons = true;
@@ -461,6 +462,13 @@ function createCanvas() {
 						success: function(jsep) {
 							Janus.debug("Got SDP!", jsep);
 							echotest.send({ message: body, jsep: jsep });
+							// Create a spinner waiting for the remote video
+							$('#videoright').html(
+								'<div class="text-center">' +
+								'	<div id="spinner" class="spinner-border" role="status">' +
+								'		<span class="visually-hidden">Loading...</span>' +
+								'	</div>' +
+								'</div>');
 						},
 						error: function(error) {
 							Janus.error("WebRTC error:", error);

diff --git a/html/webaudio.js b/html/webaudio.js
@@ -152,6 +152,7 @@ $(document).ready(function() {
 										return;
 									}
 									// If we're here, a new track was added
+									$('#spinner').remove();
 									if(track.kind === "audio") {
 										// New audio track: create a stream out of it, and use a hidden <audio> element
 										let stream = new MediaStream([track]);
@@ -309,6 +310,13 @@ function setupWebAudioDemo() {
 						Janus.debug("Got SDP!", jsep);
 						let body = { audio: true, video: true };
 						echotest.send({ message: body, jsep: jsep });
+						// Create a spinner waiting for the remote video
+						$('#remote').html(
+							'<div class="text-center">' +
+							'	<div id="spinner" class="spinner-border" role="status">' +
+							'		<span class="visually-hidden">Loading...</span>' +
+							'	</div>' +
+							'</div>');
 					},
 					error: function(error) {
 						Janus.error("WebRTC error:", error);