From 99957c9fae1c41f00e9dfc8457332687dcc32039 Mon Sep 17 00:00:00 2001 From: Lorenzo Miniero Date: Wed, 29 Nov 2023 15:41:13 +0100 Subject: [PATCH 1/8] Updated demos and docs to Bootstrap 4.x --- docs/doxy-boot.js | 59 +++++++++-------- docs/header.html | 52 ++++++++------- html/admin.html | 121 ++++++++++++++++++----------------- html/admin.js | 102 +++++++++++++++++++---------- html/audiobridgetest.html | 56 ++++++++-------- html/audiobridgetest.js | 59 ++++++++--------- html/canvas.html | 111 +++++++++++++++++--------------- html/canvas.js | 42 ++++++------ html/citeus.html | 30 ++++----- html/css/demo.css | 50 ++++++++++++++- html/demos.html | 30 ++++----- html/devicetest.html | 91 +++++++++++++------------- html/devicetest.js | 67 ++++++++++--------- html/docs/index.html | 18 +++--- html/e2etest.html | 77 +++++++++++----------- html/e2etest.js | 46 ++++++------- html/echotest.html | 77 +++++++++++----------- html/echotest.js | 46 ++++++------- html/index.html | 18 +++--- html/multiopus.html | 77 +++++++++++----------- html/multiopus.js | 44 ++++++------- html/mvideoroomtest.html | 103 +++++++++++++++--------------- html/mvideoroomtest.js | 60 ++++++++--------- html/navbar.html | 93 +++++++++++++-------------- html/nosiptest.html | 48 +++++++------- html/nosiptest.js | 6 +- html/recordplaytest.html | 75 +++++++++++----------- html/recordplaytest.js | 23 ++++--- html/screensharingtest.html | 50 ++++++++------- html/screensharingtest.js | 17 ++--- html/siptest.html | 124 ++++++++++++++++++++---------------- html/siptest.js | 98 ++++++++++++++-------------- html/streamingtest.html | 59 +++++++++-------- html/streamingtest.js | 81 ++++++++++++----------- html/support.html | 18 +++--- html/textroomtest.html | 58 +++++++++-------- html/textroomtest.js | 12 ++-- html/videocalltest.html | 109 +++++++++++++++++-------------- html/videocalltest.js | 74 ++++++++++----------- html/videoroomtest.html | 103 +++++++++++++++--------------- html/videoroomtest.js | 62 +++++++++--------- html/virtualbg.html | 59 ++++++++--------- html/virtualbg.js | 44 ++++++------- html/webaudio.html | 73 ++++++++++++--------- html/webaudio.js | 1 + 45 files changed, 1438 insertions(+), 1285 deletions(-) diff --git a/docs/doxy-boot.js b/docs/doxy-boot.js index d13a5508f1..476747dd59 100644 --- a/docs/doxy-boot.js +++ b/docs/doxy-boot.js @@ -1,8 +1,8 @@ $(document).ready(function() { - $("div.headertitle").addClass("page-header"); + $("div.headertitle").addClass("pb-2 mt-4 mb-2 border-bottom"); $("div.title").addClass("h1"); - + $('li > a[href="index.html"] > span').before(" "); // $('li > a[href="index.html"] > span').text("CoActionOS"); $('li > a[href="modules.html"] > span').before(" "); @@ -15,51 +15,54 @@ $(document).ready(function() { $('li > a[href="functions_vars.html"] > span').before(" "); $('li > a[href="functions_enum.html"] > span').before(" "); $('li > a[href="functions_eval.html"] > span').before(" "); - $('img[src="ftv2ns.png"]').replaceWith('N '); - $('img[src="ftv2cl.png"]').replaceWith('C '); - - $("ul.tablist").addClass("nav nav-pills nav-justified"); + $('img[src="ftv2ns.png"]').replaceWith('N '); + $('img[src="ftv2cl.png"]').replaceWith('C '); + + $("ul.tablist").addClass("nav nav-pills nav-fill"); $("ul.tablist").css("margin-top", "0.5em"); $("ul.tablist").css("margin-bottom", "0.5em"); - $("li.current").addClass("active"); + $("ul.tablist > li").addClass("nav-item"); + $("ul.tablist > li > a").addClass("nav-link"); + $("li.current").children().addClass("active"); $("iframe").attr("scrolling", "yes"); - + $("#nav-path > ul").addClass("breadcrumb"); - + $("table.params").addClass("table"); $("div.ingroups").wrapInner(""); + $("div.ingroups > small > a").addClass("text-muted"); $("div.levels").css("margin", "0.5em"); - $("div.levels > span").addClass("btn btn-default btn-xs"); + $("div.levels > span").addClass("btn btn-secondary btn-sm"); $("div.levels > span").css("margin-right", "0.25em"); - + $("table.directory").addClass("table table-striped"); - $("div.summary > a").addClass("btn btn-default btn-xs"); + $("div.summary > a").addClass("btn btn-secondary btn-sm"); $("table.fieldtable").addClass("table"); - $(".fragment").addClass("well"); - $(".memitem").addClass("panel panel-default"); - $(".memproto").addClass("panel-heading"); - $(".memdoc").addClass("panel-body"); - $("span.mlabel").addClass("label label-info"); - + $(".fragment").addClass("card card-body bg-gray"); + $(".memitem").addClass("card"); + $(".memproto").addClass("card-header"); + $(".memdoc").addClass("card-body"); + $("span.mlabel").addClass("badge badge-info"); + $("table.memberdecls").addClass("table"); $("[class^=memitem]").addClass("active"); - - $("div.ah").addClass("btn btn-default"); + + $("div.ah").addClass("btn btn-secondary"); $("span.mlabels").addClass("pull-right"); $("table.mlabels").css("width", "100%") $("td.mlabels-right").addClass("pull-right"); - $("div.ttc").addClass("panel panel-info"); - $("div.ttname").addClass("panel-heading"); - $("div.ttdef,div.ttdoc,div.ttdeci").addClass("panel-body"); - - $('div.tabs').addClass('container well'); - $('div.tabs2').addClass('container well'); - $('div.tabs3').addClass('container well'); + $("div.ttc").addClass("card card-info"); + $("div.ttname").addClass("card-header"); + $("div.ttdef,div.ttdoc,div.ttdeci").addClass("card-body"); + + $('div.tabs').addClass('container card card-body bg-gray mb-3'); + $('div.tabs2').addClass('container card card-body bg-gray mb-3'); + $('div.tabs3').addClass('container card card-body bg-gray mb-3'); $('div.header').addClass('container'); $('div.contents').addClass('container'); $('div.groupHeader').addClass('alert-link').parent().parent().addClass('alert alert-info'); - + $('#MSearchBox').remove();//.parent().appendTo('#topmenu'); $('code').each(function() { $(this).html($(this).html().replace("–", "--")); } ); diff --git a/docs/header.html b/docs/header.html index fb93c1b79b..59756f100c 100644 --- a/docs/header.html +++ b/docs/header.html @@ -13,41 +13,39 @@ $search $mathjax $extrastylesheet - + - +
-Fork me on GitHub +Fork me on GitHub - +
diff --git a/html/admin.html b/html/admin.html index 8b445e751a..c764d8a460 100644 --- a/html/admin.html +++ b/html/admin.html @@ -6,49 +6,49 @@ Janus WebRTC Server (multistream): Admin/Monitor - + - + -Fork me on GitHub +Fork me on GitHub - +
+
-
+

Janus WebRTC Server: Admin/Monitor

-
+
-
+

This is just an example of how you can build an UI on top of the existing Admin/Monitor interface. This page will only work as it is if you enabled the API (which is disabled by default) @@ -83,41 +83,46 @@

Janus WebRTC Server: Admin/Monitor

you enabled the stored-token authentication mechanism in Janus, of course.

-

Server Info

+
Server Info
+
+ +
+
+
Dependencies
- +
-

Dependencies

+
Plugins
- +
-

Plugins

+
Transports
- +
-

Transports

+
Event handlers
- +
-

Event handlers

+
Loggers
- +
-

Settings

+
Settings
-

Plugins

+
Plugins
@@ -131,13 +136,13 @@
Request
Response
- 

+									

 								

-						
Transports

+						
Transports

 						

 							

 								

 								
 								
 							
 						
 					
 					

@@ -151,42 +156,44 @@ 
Tweak/Query

 									
Response

-									

+									

 								

-						

-							
Sessions (0) 

-							

-							

-						

-						

-							
Handles () 

-							

+						

+							

+								
Sessions (0) 

+								

+								

 							

-						

-						

-							
Handle Info 

-							

-								
-								
-								
+							

+								
Handles () 

+								

+								

 							

-							

+							

+								
Handle Info 

+								

+									
+									
+									
+								

+								

+								

 							

 						

 					

 					

-						
Stored Tokens 

+						
Stored Tokens 

 						

 							

 								
 								
 							
 						
 					
 					

 							

diff --git a/html/admin.js b/html/admin.js
index 6f569e9833..f55e50af37 100644
--- a/html/admin.js
+++ b/html/admin.js
@@ -10,7 +10,7 @@ if(window.location.protocol === 'http:')
 else
 	server = "https://" + window.location.hostname + ":7889/admin";
 // If you don't want the page to prompt you for a password, insert it here
-var secret = "";
+var secret = "janusoverlord";
 
 var session = null;		// Selected session
 var handle = null;		// Selected handle
@@ -49,12 +49,16 @@ function promptAccessDetails() {
 	let serverPlaceholder = "Insert the address of the Admin API backend";
 	let secretPlaceholder = "Insert the Admin API secret";
 	bootbox.alert({
-		message: "
" +
-			"	" +
+		message: "
" +
+			"	
" +
+			"		" +
+			"	
" +
 			"	" +
 			"
" +
-			"
" +
-			"	" +
+			"
" +
+			"	
" +
+			"		" +
+			"	
" +
 			"	" +
 			"
",
 		closeButton: false,
@@ -103,14 +107,16 @@ function updateServerInfo() {
 			}
 			console.log("Got server info:");
 			console.log(json);
-			var pluginsJson = json.plugins;
+			let pluginsJson = json.plugins;
 			let transportsJson = json.transports;
 			let eventsJson = json.events;
+			let loggersJson = json.loggers;
 			delete json.janus;
 			delete json.transaction;
 			delete json.plugins;
 			delete json.transports;
 			delete json.events;
+			delete json.loggers;
 			$('#server-details').empty();
 			for(let k in json) {
 				if(k === "dependencies") {
@@ -158,7 +164,9 @@ function updateServerInfo() {
 					'');
 				pluginsIndex.push(p);
 				$('#plugins-list').append(
-					''+p+''
+					'' +
+						'' + p + '' +
+					''
 				);
 				$('#plugin-'+(pluginsIndex.length-1)).click(function(event) {
 					event.preventDefault();
@@ -190,7 +198,9 @@ function updateServerInfo() {
 					'');
 				transportsIndex.push(t);
 				$('#transports-list').append(
-					''+t+''
+					'' +
+						'' + t + '' +
+					''
 				);
 				$('#transport-'+(transportsIndex.length-1)).click(function(event) {
 					event.preventDefault();
@@ -220,13 +230,31 @@ function updateServerInfo() {
 					'	' + v.version_string + '' +
 					'');
 			}
+			$('#server-loggers').html(
+				'' +
+				'	Name' +
+				'	Author' +
+				'	Description' +
+				'	Version' +
+				''
+			);
+			for(let e in loggersJson) {
+				let v = loggersJson[e];
+				$('#server-loggers').append(
+					'' +
+					'	' + v.name + '' +
+					'	' + v.author + '' +
+					'	' + v.description + '' +
+					'	' + v.version_string + '' +
+					'');
+			}
 			// Unlock tabs
-			$('#admintabs li').removeClass('disabled');
+			$('#admintabs li a').removeClass('disabled');
 			// Refresh settings now
 			updateSettings();
 			// Refresh sessions and handles now
-			$('#handles').hide();
-			$('#info').hide();
+			$('#handles').addClass('hide');
+			$('#info').addClass('hide');
 			$('#update-sessions').click(updateSessions);
 			$('#update-handles').click(updateHandles);
 			$('#update-handle').click(updateHandleInfo);
@@ -256,7 +284,7 @@ function updateServerInfo() {
 			});
 			// Only check tokens if the mechanism is enabled
 			if(!json["auth_token"]) {
-				$('a[href=#tokens]').parent().addClass('disabled');
+				$('a[href=#tokens]').addClass('disabled');
 				$('a[href=#tokens]').attr('href', '#').unbind('click').click(function (e) { e.preventDefault(); return false; });
 			} else {
 				updateTokens();
@@ -880,10 +908,10 @@ function updateSessions() {
 				handle = null;
 				currentHandle = null;
 				$('#handles-list').empty();
-				$('#handles').hide();
+				$('#handles').addClass('hide');
 				$('#handle-info').empty();
-				$('#options').hide();
-				$('#info').hide();
+				$('#options').addClass('hide');
+				$('#info').addClass('hide');
 				return;
 			}
 			console.log("Got sessions:");
@@ -894,7 +922,9 @@ function updateSessions() {
 			for(let i=0; i'+s+''
+					'' +
+						'' + s + '' +
+					''
 				);
 				$('#session-'+s).click(function() {
 					let sh = $(this).text();
@@ -905,10 +935,10 @@ function updateSessions() {
 					handle = null;
 					currentHandle = null;
 					$('#handles-list').empty();
-					$('#handles').show();
+					$('#handles').removeClass('hide');
 					$('#handle-info').empty();
-					$('#options').hide();
-					$('#info').hide();
+					$('#options').addClass('hide');
+					$('#info').addClass('hide');
 					updateHandles();
 				});
 			}
@@ -921,10 +951,10 @@ function updateSessions() {
 					handle = null;
 					currentHandle = null;
 					$('#handles-list').empty();
-					$('#handles').hide();
+					$('#handles').addClass('hide');
 					$('#handle-info').empty();
-					$('#options').hide();
-					$('#info').hide();
+					$('#options').addClass('hide');
+					$('#info').addClass('hide');
 				}
 			}
 			setTimeout(function() {
@@ -944,10 +974,10 @@ function updateSessions() {
 			handle = null;
 			currentHandle = null;
 			$('#handles-list').empty();
-			$('#handles').hide();
+			$('#handles').addClass('hide');
 			$('#handle-info').empty();
-			$('#options').hide();
-			$('#info').hide();
+			$('#options').addClass('hide');
+			$('#info').addClass('hide');
 			if(!prompting && !alerted) {
 				alerted = true;
 				bootbox.alert("Couldn't contact the backend: is Janus down, or is the Admin/Monitor interface disabled?", function() {
@@ -1002,7 +1032,9 @@ function updateHandles() {
 			for(let i=0; i'+h+''
+					'' +
+						'' + h + '' +
+					''
 				);
 				$('#handle-'+h).click(function() {
 					let hi = $(this).text();
@@ -1013,8 +1045,8 @@ function updateHandles() {
 					$('#handles-list a').removeClass('active');
 					$('#handle-'+hi).addClass('active');
 					$('#handle-info').empty();
-					$('#options').hide();
-					$('#info').show();
+					$('#options').addClass('hide');
+					$('#info').removeClass('hide');
 					updateHandleInfo();
 				});
 			}
@@ -1026,8 +1058,8 @@ function updateHandles() {
 					handle = null;
 					currentHandle = null;
 					$('#handle-info').empty();
-					$('#options').hide();
-					$('#info').hide();
+					$('#options').addClass('hide');
+					$('#info').addClass('hide');
 				}
 			}
 			setTimeout(function() {
@@ -1115,7 +1147,7 @@ function updateHandleInfo(refresh) {
 				$('#update-handle').removeClass('fa-spin').click(updateHandleInfo);
 			}, 1000);
 			// Show checkboxes
-			$('#options').removeClass('hide').show();
+			$('#options').removeClass('hide');
 			// If the related box is checked, autorefresh this handle info every tot seconds
 			if($('#autorefresh')[0].checked) {
 				setTimeout(function() {
@@ -1150,13 +1182,13 @@ function updateHandleInfo(refresh) {
 
 function rawHandleInfo() {
 	// Just use 
 and show the handle info as it is
-	$('#handle-info').html('
' + JSON.stringify(handleInfo, null, 4) + '
');
+	$('#handle-info').html('
' + JSON.stringify(handleInfo, null, 4) + '
');
 }
 
 function prettyHandleInfo() {
 	// Prettify the handle info, processing it and turning it into tables
 	$('#handle-info').html('
');
-	$('#options').hide();
+	$('#options').addClass('hide');
 	for(let k in handleInfo) {
 		let v = handleInfo[k];
 		if(k === "plugin_specific") {
@@ -1318,7 +1350,7 @@ function prettyHandleInfo() {
 				'');
 		}
 	}
-	$('#options').show();
+	$('#options').removeClass('hide');
 }
 
 // Tokens
@@ -1528,7 +1560,7 @@ function captureTrafficPrompt() {
 			},
 			{
 				label: "Close",
-				className: "btn btn-default pull-left",
+				className: "btn btn-secondary pull-left",
 				callback: function() {
 					$('#capture').removeAttr('checked');
 					$('#capturetext').html('Start capture');
diff --git a/html/audiobridgetest.html b/html/audiobridgetest.html
index 90abc151e3..c683e462db 100644
--- a/html/audiobridgetest.html
+++ b/html/audiobridgetest.html
@@ -8,7 +8,7 @@
 
 
 
-
+
 
 
 
@@ -17,34 +17,34 @@
 
 
-
+
 
 
 
 
 
 
-Fork me on GitHub
+Fork me on GitHub
 
-
+

+

 
 

 	

 		

-			

+			

 				
Plugin Demo: Audio Room (mixed)
-					
+					
 				

 			

-			

+			

 				

 					

 						
Demo details

@@ -63,12 +63,14 @@ 
Demo details

 					

 				

 			

-			

+			

 				

-					
+					
 					

-						

-							@
+						

+							

+								@
+							

 							
 							
 								
@@ -77,27 +79,29 @@ 
Demo details

 					

 				

 			

-			

+			

 				

 					

-						

-							

-								
Participants 
-								
-								

+						

+							

+								Participants 
+								

+									
+									
+								

 							

-							

+							

 								
    
 								

 							

 						

 					

 					

-						

-							

-								
Mixed Audio

+						

+							

+								Mixed Audio
 							

-							

+							

 						

 					

 				

diff --git a/html/audiobridgetest.js b/html/audiobridgetest.js
index 9d9a8d95d5..6b977d375c 100644
--- a/html/audiobridgetest.js
+++ b/html/audiobridgetest.js
@@ -58,8 +58,8 @@ $(document).ready(function() {
 									mixertest = pluginHandle;
 									Janus.log("Plugin attached! (" + mixertest.getPlugin() + ", id=" + mixertest.getId() + ")");
 									// Prepare the username registration
-									$('#audiojoin').removeClass('hide').show();
-									$('#registernow').removeClass('hide').show();
+									$('#audiojoin').removeClass('hide');
+									$('#registernow').removeClass('hide');
 									$('#register').click(registerUsername);
 									$('#username').focus();
 									$('#start').removeAttr('disabled').html("Stop")
@@ -78,6 +78,7 @@ $(document).ready(function() {
 										// Darken screen and show hint
 										$.blockUI({
 											message: '
',
+											baseZ: 3001,
 											css: {
 												border: 'none',
 												padding: '15px',
@@ -160,18 +161,18 @@ $(document).ready(function() {
 															' ');
 														if(spatial !== null && spatial !== undefined) {
 															$('#sp' + id).slider({ min: 0, max: 100, step: 1, value: 50, handle: 'triangle', enabled: false });
-															$('#position').removeClass('hide').show();
+															$('#position').removeClass('hide');
 														}
-														$('#rp' + id + ' > i').hide();
+														$('#rp' + id + ' > i').addClass('hide');
 													}
 													if(muted === true || muted === "true")
-														$('#rp' + id + ' > i.abmuted').removeClass('hide').show();
+														$('#rp' + id + ' > i.abmuted').removeClass('hide');
 													else
-														$('#rp' + id + ' > i.abmuted').hide();
+														$('#rp' + id + ' > i.abmuted').addClass('hide');
 													if(setup === true || setup === "true")
-														$('#rp' + id + ' > i.absetup').hide();
+														$('#rp' + id + ' > i.absetup').addClass('hide');
 													else
-														$('#rp' + id + ' > i.absetup').removeClass('hide').show();
+														$('#rp' + id + ' > i.absetup').removeClass('hide');
 													if(spatial !== null && spatial !== undefined)
 														$('#sp' + id).slider('setValue', spatial);
 												}
@@ -204,18 +205,18 @@ $(document).ready(function() {
 															' ');
 														if(spatial !== null && spatial !== undefined) {
 															$('#sp' + id).slider({ min: 0, max: 100, step: 1, value: 50, handle: 'triangle', enabled: false });
-															$('#position').removeClass('hide').show();
+															$('#position').removeClass('hide');
 														}
-														$('#rp' + id + ' > i').hide();
+														$('#rp' + id + ' > i').addClass('hide');
 													}
 													if(muted === true || muted === "true")
-														$('#rp' + id + ' > i.abmuted').removeClass('hide').show();
+														$('#rp' + id + ' > i.abmuted').removeClass('hide');
 													else
-														$('#rp' + id + ' > i.abmuted').hide();
+														$('#rp' + id + ' > i.abmuted').addClass('hide');
 													if(setup === true || setup === "true")
-														$('#rp' + id + ' > i.absetup').hide();
+														$('#rp' + id + ' > i.absetup').addClass('hide');
 													else
-														$('#rp' + id + ' > i.absetup').removeClass('hide').show();
+														$('#rp' + id + ' > i.absetup').removeClass('hide');
 													if(spatial !== null && spatial !== undefined)
 														$('#sp' + id).slider('setValue', spatial);
 												}
@@ -249,18 +250,18 @@ $(document).ready(function() {
 															' ');
 														if(spatial !== null && spatial !== undefined) {
 															$('#sp' + id).slider({ min: 0, max: 100, step: 1, value: 50, handle: 'triangle', enabled: false });
-															$('#position').removeClass('hide').show();
+															$('#position').removeClass('hide');
 														}
-														$('#rp' + id + ' > i').hide();
+														$('#rp' + id + ' > i').addClass('hide');
 													}
 													if(muted === true || muted === "true")
-														$('#rp' + id + ' > i.abmuted').removeClass('hide').show();
+														$('#rp' + id + ' > i.abmuted').removeClass('hide');
 													else
-														$('#rp' + id + ' > i.abmuted').hide();
+														$('#rp' + id + ' > i.abmuted').addClass('hide');
 													if(setup === true || setup === "true")
-														$('#rp' + id + ' > i.absetup').hide();
+														$('#rp' + id + ' > i.absetup').addClass('hide');
 													else
-														$('#rp' + id + ' > i.absetup').removeClass('hide').show();
+														$('#rp' + id + ' > i.absetup').removeClass('hide');
 													if(spatial !== null && spatial !== undefined)
 														$('#sp' + id).slider('setValue', spatial);
 												}
@@ -295,9 +296,9 @@ $(document).ready(function() {
 								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();
+									$('#audiojoin').addClass('hide');
+									$('#room').removeClass('hide');
+									$('#participant').removeClass('hide').html(myusername).removeClass('hide');
 								},
 								onremotetrack: function(track, mid, on, metadata) {
 									Janus.debug(
@@ -314,7 +315,7 @@ $(document).ready(function() {
 										return;
 									}
 									remoteStream = new MediaStream([track]);
-									$('#room').removeClass('hide').show();
+									$('#room').removeClass('hide');
 									if($('#roomaudio').length === 0) {
 										$('#mixedaudio').append('