Merge pull request #1067 from steveseguin/develop

sync main

check.html

@@ -66,36 +66,60 @@
 			<h1>
 				Welcome
 			</h1>
+			<br />
 			<h2>
 				This application will access your camera and complete a video test stream.
 				<br />
 				
 				<br />
-				The test will take a few minutes to complete.<br />
+				The full test will take a few minutes to complete.<br />
-				<button onclick="next1();">Continue</button>⭐⭐⭐
+				<button onclick="next1();">Continue</button>⭐⭐⭐⭐
 				
 			</h2>
 		</div>
 		<div class="fullscreen hidden" id="page2">
-			
+			<h1>
+				Please note, for best results:<br />
+			</h1>
+			<br />
 			<h2>
-				Please note, for best results:<br /><br />
+				
 				<li>Connect your computer to a wired connection, instead of Wi-Fi</li><br />
 				<li>Have no other applications open while running this test</li><br />
 				<li>If using a laptop, connect your laptop to a power outlet</li><br />
-				🌠<button onclick="next2();">Continue</button>⭐⭐
+				🌠<button onclick="next2();">Continue</button>⭐⭐⭐
 				
 			</h2>
 		</div>
+		
+		<div class="fullscreen hidden" id="page2a">
+			
+			<h1>
+				This first step will measure your network bandwidth<br />
+			</h1>
+			<br />
+			<h2>
+				We will test against Cloudflare's speed test servers.<br /><br />
+				It will take a minute to complete once started.<br />
+				
+				<br />
+				<div id="cloudflareresults">
+					🌠🌠<button id="cloudflare" disabled>Loading Files</button>⭐⭐
+				</div>
+				
+			</h2>
+		</div>
+		
 		<div class="fullscreen hidden" id="page3">
 			
 			<h2>
 				The next step will access your camera and microphone.<br /><br />
 				<br />
-				Accept the camera and microphone permissions if prompted.
+				Accept the camera and microphone permissions if prompted.<br /><br />
+				<small><i>No one will be able to see your video or audio, other than you.</i></small>
 				<br /><br />
 				<img src='./media/accept.png'/><br />
-				🌠🌠<button onclick="next3();">Continue</button>⭐
+				🌠🌠🌠<button onclick="next3();">Continue</button>⭐
 				
 			</h2>
 		</div>
@@ -164,8 +188,17 @@
 			
 			function next2(){
 				document.getElementById("page2").classList.add("hidden");
+				document.getElementById("page2a").classList.remove("hidden");
+				setTimeout(function(){
+					if (document.getElementById("playButton") && !document.getElementById("playButton").skip){
+						next2a();
+					}
+				},10000);
+			}
+			
+			function next2a(){
+				document.getElementById("page2a").classList.add("hidden");
 				document.getElementById("page3").classList.remove("hidden");
-				loadIframe(region);
 			}
 			
 			function next3(){
@@ -749,6 +782,46 @@
 				// now clear the right-most pixels:
 				context.clearRect(width - 1, 0, 1, height);
 			}
+			
+			
+			
+		</script>
+	
+		<script type="module">
+			import SpeedTest from 'https://cdn.skypack.dev/@cloudflare/speedtest';
+
+			const controlEl = document.getElementById('controls');
+			const playButton = document.getElementById("cloudflare");
+			
+			const resultsCl = document.getElementById("cloudflareresults");
+			
+			var Runstate = false;
+			const engine = new SpeedTest({
+			  autoStart: false
+			});
+			engine.onRunningChange = (running) => {playButton.textContent = running ? 'Running...' : 'Finished!';Runstate=running;}
+			engine.onResultsChange = ({ type }) => {
+			   console.log(type);
+			   if (Runstate){
+				console.log(engine.results.raw);
+			   }
+			   resultsCl.style.color = "green";
+			   resultsCl.innerHTML = Runstate ? '<b>Please wait</b><br .><br .>Testing in progress: '+type : 'Finished!';
+			};
+			
+			engine.onFinish = results => {
+			  console.log(results.getSummary());
+			  console.log(results.getScores());
+			  logData({['summary']: results.getSummary()});
+			  logData({['scores']: results.getScores()});
+			  next2a();
+			};
+			playButton.skip=true;
+			playButton.textContent = "Start test";
+			playButton.disabled = null;
+	
+			playButton.onclick = function(){playButton.disabled=true;playButton.onclick=null;engine.play();}
+
 		</script>
 	</body>
 </html>

index.html

@@ -56,7 +56,7 @@
 		<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
 		<meta name="msapplication-TileColor" content="#da532c" />
 		<meta name="theme-color" content="#ffffff" />
-		<link rel="stylesheet" href="./main.css?ver=304" />
+		<link rel="stylesheet" href="./main.css?ver=308" />
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script>
 		<style id="lightbox-animations" type="text/css"></style>
 		<!-- <link rel="manifest" href="manifest.json" /> -->
@@ -83,7 +83,7 @@
 		
 		<script type="text/javascript" crossorigin="anonymous"  src="./thirdparty/CodecsHandler.js?ver=47"></script>
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script>
-		<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=618"></script>
+		<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=622"></script>
 		<input id="zoomSlider" type="range" style="display: none;" />
 		<span id="electronDragZone" style="pointer-events: none; z-index:-10; position:absolute;top:0;left:0;width:100%;height:2%;-webkit-app-region: drag;min-height:20px;"></span>
 		<div id="header">
@@ -2486,11 +2486,11 @@
 			// session.hidehome = true; // If used, 'hide home' will make the landing page inaccessible, along with hiding a few go-home elements.
 			// session.record = false; // uncomment to block users from being able to record via vdo.ninja's built in recording function
 		</script>
-		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=749"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=766"></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=603"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=606"></script>
 	</body>
 </html>

main.css

@@ -2649,7 +2649,6 @@ img {
 	border-radius: var(--video-rounded);
 	border-width: var(--video-border);
 	border-color: var(--video-border-color);
-	background-color: var(--video-border-color);
 	border-style: solid;
 }
 
@@ -2701,6 +2700,7 @@ video {
 	-ms-user-select: none; /* IE10+ */
 	-webkit-tap-highlight-color:transparent;
 	outline-style:none;
+	border-style:solid;
 	background-size: var(--video-background-image-size);
 	background-repeat: no-repeat;
 	background-position: center;

main.js

@@ -791,6 +791,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 	}
 	if (urlParams.has('controlbarspace')){
 		session.dedicatedControlBarSpace = true;
+	} else if (urlParams.has('nocontrolbarspace')){
+		session.dedicatedControlBarSpace = false;
 	}
 	
 	if (urlParams.has('hidesolo') || urlParams.has('hs')){
@@ -939,7 +941,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 	} else if (urlParams.has('43')) {
 		session.aspectRatio = 3; //1:1 ?
 	}
-
+	
+	if (urlParams.has('structure')) {
+		session.structure = true;
+	}
+	
+	
 	
 	if (urlParams.has('aspectratio') || urlParams.has('ar')) {  // capture aspect ratio
 		session.forceAspectRatio = urlParams.get('aspectratio') || urlParams.get('ar') || false;
@@ -2185,7 +2192,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		} catch(e){errorlog("variable css failed");}
 	}
 	
-	
+	if (urlParams.has('color')) {
+		session.colorVideosBackground = urlParams.get('color') || session.borderColor || "#000";
+	}
 	
 	if (urlParams.has('retry')) {
 		session.forceRetry = parseInt(urlParams.get('retry')) || 30;
@@ -2828,6 +2837,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		}
 	}
 
+	if (urlParams.has('blur')){
+		session.blurBackground = urlParams.get('blur') || 10;
+		session.blurBackground = parseInt(session.blurBackground) || 10;
+		if (session.blurBackground<0){session.blurBackground=false;}
+		session.structure=true;
+	}
 
 	if (urlParams.has('limittotalbitrate') || urlParams.has('ltb')){
 		session.limitTotalBitrate = urlParams.get('limittotalbitrate') || urlParams.get('ltb') || 2500;

results.html

@@ -263,6 +263,16 @@
 						document.getElementById("details").innerHTML += "<br /><b>Test start time:</b> "+timeConverter(data.timestart)+"<br />";
 					}
 					
+					if (data.summary){
+						if (data.summary.download && data.summary.upload){
+							document.getElementById("details").innerHTML += "<br /><b>Max download bandwidth:</b> "+parseInt(data.summary.download/(1024*1024))+"-mbps<br />";
+							document.getElementById("details").innerHTML += "<br /><b>Max Upload bandwidth:</b> "+parseInt(data.summary.upload/(1024*1024))+"-mbps<br />";
+						}
+					}
+					if (data.scores && data.scores.gaming && data.scores.gaming.classificationName && data.scores.rtc && data.scores.rtc.classificationName && data.scores.streaming && data.scores.streaming.classificationName){
+						document.getElementById("details").innerHTML += "<br /><b>Gaming:</b> "+data.scores.gaming.classificationName+", <b>RTC:</b> "+data.scores.rtc.classificationName+", <b>Streaming:</b> "+data.scores.streaming.classificationName+"<br />";
+					}
+					
 					if ("resolution" in data){
 						updateData("resolution", data.resolution);
 					}
@@ -320,10 +330,10 @@
 					document.getElementById("container").innerHTML += "The network quality or bandwidth may have limited the performance.<br />";
 				}
 				
-				document.getElementById("container").innerHTML += "The average bitrate was: "+parseInt(BBB/counter)+"-kbps<br />";
+				document.getElementById("container").innerHTML += "The average video bitrate was: "+parseInt(BBB/counter)+"-kbps<br />";
 		
 				if (BBB/counter<500){
-					document.getElementById("container").innerHTML += "<h3>Bitrate is really bad</h3>";
+					document.getElementById("container").innerHTML += "<small><i>Did they select an active camera?</i></small><h3>Bitrate is really bad</h3>";
 				}
 				else if (BBB/counter<1000){
 					document.getElementById("container").innerHTML += "<h3>Bitrate is poor</h3>";
@@ -335,7 +345,7 @@
 					document.getElementById("container").innerHTML += "<h3>Bitrate is good</h3>";
 				}
 				
-				document.getElementById("container").innerHTML += "<br />The average buffer length was: "+parseInt(BUFF/BUFFCCC)+"-ms<br />";
+				document.getElementById("container").innerHTML += "<br />The average video buffer length was: "+parseInt(BUFF/BUFFCCC)+"-ms<br />";
 				
 				if (BUFF/BUFFCCC>500){
 					document.getElementById("container").innerHTML += "<h3>Video delay is really bad</h3><br />";
@@ -350,7 +360,7 @@
 					document.getElementById("container").innerHTML += "<h3>Video delay is good</h3><br />";
 				}
 				
-				document.getElementById("container").innerHTML += "The average packet loss was: "+(parseInt(PAK*1000/PAKCCC)/1000.0)+"%<br />";
+				document.getElementById("container").innerHTML += "The average video packet loss was: "+(parseInt(PAK*1000/PAKCCC)/1000.0)+"%<br />";
 				
 				if (PAK/PAKCCC>3){
 					document.getElementById("container").innerHTML += "<h3>Packet loss is extremely bad; Must Fix This</h3>";