dev progress update; minor changes

2026-05-01 11:05:24 +00:00 · 2024-01-17 03:52:10 -05:00
parent e54b2d1fd9
commit 4845391035
11 changed files with 746 additions and 276 deletions
--- a/360.html
+++ b/360.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="./thirdparty/aframe.min.js"></script>
+    <script>
+		// This snippet of AFRAME code was taken from an AFRAME 360 video sample
+		// AFRAME code is MIT licenced - fork of lic here:  https://github.com/steveseguin/aframe/tree/master#MIT-1-ov-file
+		//		source code ref - https://github.com/steveseguin/aframe/blob/master/examples/js/hide-on-play.js
+		//		source code ref - https://github.com/steveseguin/aframe/blob/master/examples/js/play-on-click.js
+		AFRAME.registerComponent('play-on-click', {
+		  init: function () {
+			this.onClick = this.onClick.bind(this);
+		  },
+		  play: function () {
+			window.addEventListener('click', this.onClick);
+		  },
+		  pause: function () {
+			window.removeEventListener('click', this.onClick);
+		  },
+		  onClick: function (evt) {
+			var videoEl = this.el.getAttribute('material').src;
+			if (!videoEl) { return; }
+			this.el.object3D.visible = true;
+			videoEl.play();
+		  }
+		});
+		AFRAME.registerComponent('hide-on-play', {
+		  schema: {type: 'selector'},
+		  init: function () {
+			this.onPlaying = this.onPlaying.bind(this);
+			this.onPause = this.onPause.bind(this);
+			this.el.object3D.visible = !this.data.playing;
+		  },
+		  play: function () {
+			if (this.data) {
+			  this.data.addEventListener('playing', this.onPlaying);
+			  this.data.addEventListener('pause', this.onPause);
+			}
+		  },
+		  pause: function () {
+			if (this.data) {
+			  this.data.removeEventListener('playing', this.onPlaying);
+			  this.data.removeEventListener('pause', this.onPause);
+			}
+		  },
+		  onPlaying: function (evt) {
+			this.el.object3D.visible = false;
+		  },
+		  onPause: function (evt) {
+			this.el.object3D.visible = true;
+		  }
+		});
+	</script>
+</head>
+<body>
+    <a-scene>
+      <a-assets>
+        <video id="video"
+               loop
+               crossorigin="anonymous"
+               playsinline webkit-playsinline>
+        </video>
+      </a-assets>
+      <a-videosphere
+        rotation="0 -90 0" src="#video" play-on-click>
+      </a-videosphere>
+
+      <a-camera>
+        <a-entity
+          position="0 0 -1.5"
+          text="align:center;
+                width:6;
+                wrapCount:100;
+                color: white;
+                value: Click or tap to start video"
+          hide-on-play="#video">
+        </a-entity>
+      </a-camera>
+    </a-scene>
+	
+	<iframe id="iframe" allow="cross-origin-isolated;autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;"></iframe>
+
+    <script>
+		// the following code is VDO.Ninja's code.  
+		var urlEdited = window.location.search.replace(/\?\?/g, "?");
+		urlEdited = urlEdited.replace(/\?/g, "&");
+		urlEdited = urlEdited.replace(/\&/, "?");
+
+		if (urlEdited !== window.location.search){
+			warnlog(window.location.search + " changed to " + urlEdited);
+			window.history.pushState({path: urlEdited.toString()}, '', urlEdited.toString());
+		}
+		var urlParams = new URLSearchParams(urlEdited);
+		
+		var view = false;
+		if (urlParams.has("view") || urlParams.has("v")){
+			view = urlParams.get("view") || urlParams.get("v") || false;
+		}
+		
+		var password = false;
+		if (urlParams.has("password") || urlParams.has("pw") || urlParams.has("p")){
+			password = urlParams.get("password") || urlParams.get("pw") || urlParams.get("p") || false;
+			if (password===false){
+				password = prompt("Please enter a password") || false;
+			}
+		}
+		if (password){
+			document.getElementById("iframe").src = "./?speakermuted&sendframes&manual&scale=100&ltb=80&bitrate=12000&cleanoutput&label=360_viewer&view="+view+"&password="+password;
+		} else {
+			document.getElementById("iframe").src = "./?speakermuted&sendframes&manual&scale=100&ltb=80&bitrate=12000&cleanoutput&label=360_viewer&view="+view
+		}
+		
+		
+        // Your existing JavaScript code for handling video frames
+        var media = {
+            tracks: {},
+            streams: {}
+        };
+
+        window.addEventListener('message', function (e) {
+            if (e.data.frame) {
+                if (!media.tracks[e.data.trackID]){
+					console.log("NEW");
+					media.tracks[e.data.trackID] = {};
+					media.tracks[e.data.trackID].generator = new MediaStreamTrackGenerator({kind:e.data.kind});
+					media.tracks[e.data.trackID].stream = new MediaStream([media.tracks[e.data.trackID].generator]);
+					media.tracks[e.data.trackID].frameWriter = media.tracks[e.data.trackID].generator.writable.getWriter();
+					
+					media.tracks[e.data.trackID].frameWriter.write(e.data.frame);
+					
+					if (!media.streams[e.data.streamID]){
+						media.streams[e.data.streamID] = document.getElementById("video");
+						media.streams[e.data.streamID].srcObject = media.tracks[e.data.trackID].stream;
+					} else {
+						if (e.data.kind=="video"){
+							media.streams[e.data.streamID].srcObject.getVideoTracks().forEach(trk=>{
+								media.streams[e.data.streamID].srcObject.removeTrack(trk);
+							});
+						} else if (e.data.kind=="audio"){
+							media.streams[e.data.streamID].srcObject.getAudioTracks().forEach(trk=>{
+								media.streams[e.data.streamID].srcObject.removeTrack(trk);
+							});
+						} 
+						media.tracks[e.data.trackID].stream.getTracks().forEach(trk=>{
+							media.streams[e.data.streamID].srcObject.addTrack(trk);
+						});
+					}
+					
+				} else {
+					media.tracks[e.data.trackID].frameWriter.write(e.data.frame);
+				}
+            }
+        }, false);
+    </script>
+</body>
+</html>
--- a/devices.css
+++ b/devices.css
@@ -1,3 +1,9 @@
+body {
+	position:inherit;
+	height:unset;
+	padding-bottom:100px;
+}
+
 #devices {
    max-width: 80%;
    width: fit-content;
--- a/devices.html
+++ b/devices.html
@@ -2,7 +2,7 @@
 	<head>
 		<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
 		<link rel="stylesheet" href="./main.css?ver=11" />
-		<link rel="stylesheet" href="./devices.css?ver=1" />
+		<link rel="stylesheet" href="./devices.css?ver=2" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta charset="utf8" />
 	</head>
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@
 		<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
 		<meta name="msapplication-TileColor" content="#da532c" />
 		<meta name="theme-color" content="#0f131d" />
-		<link rel="stylesheet" href="./main.css?ver=375" />
+		<link rel="stylesheet" href="./main.css?ver=376" />
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script>
 		<style id="lightbox-animations" type="text/css"></style>
 		
@@ -2567,7 +2567,7 @@
 			// if (!window.location.search){document.body.innerHTML = "";} // uncomment this line, if you wish to try it.
 			
 			var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
-			session.version = "24.5";
+			session.version = "24.6";
 			session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
 			
 			session.defaultPassword = "someEncryptionKey123"; // Change this password if self-deploying for added security/privacy
@@ -2684,11 +2684,11 @@
 			// session.decrypted = session.decodeInvite("U2FsdGVkX1+d58DFIHoO3EQZSuX86ch4PqW2ouztnJ0="); // get a code from invite.cam
 			
 		</script>
-		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=1066"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=1073"></script>
 		<!-- 
 		// If you wish to change branding, blank offers a good clean start.
 		<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
 		-->
-		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=789"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=793"></script>
 	</body>
 </html>
--- a/lib.js
+++ b/lib.js
--- a/main.css
+++ b/main.css
@@ -649,13 +649,14 @@ button.hint {
 	cursor:pointer;
 }
 .overlayCloseBtn{
-	padding: 0;
-	margin: 10px;
-	width: 16px;
-	height: 16px;
-	position: relative;
-	bottom: 10px;
-	background-color: #DDDD;
+    padding: 0;
+    width: 16px;
+    height: 16px;
+    position: relative;
+    bottom: 7px;
+    padding: 18px 18px 20px 18px;
+    font-size: 22px;
+	margin-left: 20px;
 }

 #overlayMsgs{
--- a/main.js
+++ b/main.js
@@ -892,8 +892,11 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 			document.documentElement.style.setProperty('--full-screen-button', 'none');
 			getById("fullscreenPage").classList.remove("hidden");
 		}
+	} else if (urlParams.has('nofullscreenbutton') || urlParams.has('nofsb')){ // just an alternative; might be compoundable
+		session.nofullwindowbutton = true;
 	}
 	
+	
 	if (urlParams.has('pip2') || urlParams.has('pipall')){ // just an alternative; might be compoundable
 		if (typeof documentPictureInPicture !== "undefined"){
 			getById("PictureInPicturePage").classList.remove("hidden");
@@ -1124,7 +1127,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 	}
 	
 	if (urlParams.has('layout')) {
-		session.accept_layouts = true;
+		
+		if (!urlParams.get('layout')){
+			session.accept_layouts = true;
+		}
 		try {
 			session.layout = JSON.parse(decodeURIComponent(urlParams.get('layout'))) || JSON.parse(urlParams.get('layout')) || {};
 		} catch(e){
@@ -3909,6 +3915,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 			setInterval(function(){activeSpeaker(false);},100);
 		}
 	}
+	if (urlParams.has('activespeakerdelay') || urlParams.has('speakerviewdelay')  || urlParams.has('sasdelay')){
+		session.activeSpeakerTimeout = urlParams.get('activespeakerdelay') || urlParams.get('speakerviewdelay')  || urlParams.get('sasdelay') || 0;
+		session.activeSpeakerTimeout = parseInt(session.activeSpeakerTimeout);
+	}
 	
 	if (urlParams.has('noisegatesettings')){
 		 session.noisegateSettings = urlParams.get('noisegatesettings');
--- a/mixer.html
+++ b/mixer.html
--- a/supports.css
+++ b/supports.css
@@ -1,3 +1,9 @@
+body {
+	position:inherit;
+	height:unset;
+	padding-bottom:100px;
+}
+
 #supports .card:nth-child(2){
 	margin-top: 40px;
 }
--- a/supports.html
+++ b/supports.html
@@ -2,7 +2,7 @@
 	<head>
 		<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
 		<link rel="stylesheet" href="./main.css?ver=11" />
-		<link rel="stylesheet" href="./supports.css?ver=2" />
+		<link rel="stylesheet" href="./supports.css?ver=4" />
 		<meta charset="utf8" />
 	</head>
 	<body id="supports">
--- a/webrtc.js
+++ b/webrtc.js