elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-11 21:58:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated check test page with bandwidth component

Browse Source
This commit is contained in:
steveseguin 2023-04-21 00:49:04 -04:00
parent 257d2c8468
commit 361ab7a3f6
2 changed files with 95 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
check.html
View File

@ -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 />
<button onclick="next1();">Continue</button>⭐⭐⭐
The full test will take a few minutes to complete.<br />
<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 />
<small>No one will be able to see your video or audio, other than you.</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>

18
results.html
View File

@ -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>";