mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 21:58:35 +00:00
192 lines
5.6 KiB
HTML
192 lines
5.6 KiB
HTML
<html>
|
|
<head><title>OBSN Speed Test</title>
|
|
<style>
|
|
body{
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
iframe {
|
|
border:0;
|
|
margin:0;
|
|
padding:0;
|
|
display:inline-block;
|
|
margin:0;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
span {
|
|
border:0;
|
|
margin:0;
|
|
padding:0;
|
|
display:inline-block;
|
|
margin:0;
|
|
width:50%;
|
|
height:45%;
|
|
}
|
|
#viewlink {
|
|
width:400px;
|
|
}
|
|
#container {
|
|
display:block;
|
|
padding:0px;
|
|
}
|
|
input{
|
|
padding:5px;
|
|
margin:5px;
|
|
}
|
|
button{
|
|
padding:5px;
|
|
margin:5px;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
(function (w) {
|
|
w.URLSearchParams = w.URLSearchParams || function (searchString) {
|
|
var self = this;
|
|
self.searchString = searchString;
|
|
self.get = function (name) {
|
|
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
|
|
if (results == null) {
|
|
return null;
|
|
}
|
|
else {
|
|
return decodeURI(results[1]) || 0;
|
|
}
|
|
};
|
|
};
|
|
|
|
})(window);
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
|
|
function loadIframe(){ // this is pretty important if you want to avoid camera permission popup problems. YOu need to load the iFRAME after you load the parent body. A quick solution is like: <body onload=>loadIframe();"> !!!
|
|
|
|
var streamID = "";
|
|
var possible = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789";
|
|
for (var i = 0; i < 7; i++){
|
|
streamID += possible.charAt(Math.floor(Math.random() * possible.length));
|
|
}
|
|
|
|
|
|
var iframe = document.createElement("iframe");
|
|
var iframeContainer = document.createElement("span");
|
|
|
|
iframe.allow="autoplay";
|
|
var srcString = "./?push="+streamID+"&cleanoutput&privacy&webcam&audiodevice=0&fullscreen";
|
|
|
|
if (urlParams.has('turn')){
|
|
srcString = srcString+"&turn="+urlParams.get("turn");
|
|
}
|
|
|
|
// we are changing some text on page load, just to demonstrate what's possible.
|
|
iframe.onload = function(e){e.target.contentWindow.postMessage({"function":"changeHTML", "target":"add_camera","value":"Select your Camera"}, '*');};
|
|
iframe.src = srcString;
|
|
|
|
iframeContainer.appendChild(iframe);
|
|
document.getElementById("container").appendChild(iframeContainer);
|
|
|
|
|
|
|
|
|
|
var iframe = document.createElement("iframe");
|
|
var iframeContainer = document.createElement("span");
|
|
|
|
iframe.allow="autoplay";
|
|
var srcString = "./?view="+streamID+"&cleanoutput&privacy&noaudio";
|
|
|
|
if (urlParams.has('turn')){
|
|
srcString = srcString+"&turn="+urlParams.get("turn");
|
|
}
|
|
|
|
if (urlParams.has('buffer')){
|
|
srcString = srcString+"&buffer="+urlParams.get("buffer");
|
|
}
|
|
|
|
iframe.src = srcString;
|
|
|
|
iframeContainer.appendChild(iframe);
|
|
document.getElementById("container").appendChild(iframeContainer);
|
|
|
|
var button = document.createElement("br");
|
|
document.getElementById("container").appendChild(button);
|
|
|
|
var button = document.createElement("button");
|
|
button.innerHTML = "Disconnect";
|
|
button.onclick = function(){iframe.contentWindow.postMessage({"close":true}, '*');}
|
|
document.getElementById("container").appendChild(button);
|
|
|
|
var button = document.createElement("button");
|
|
button.innerHTML = "Low Bitrate";
|
|
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":30}, '*');}
|
|
document.getElementById("container").appendChild(button);
|
|
|
|
|
|
|
|
|
|
var button = document.createElement("button");
|
|
button.innerHTML = "High Bitrate";
|
|
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":6000}, '*');}
|
|
document.getElementById("container").appendChild(button);
|
|
|
|
var button = document.createElement("button");
|
|
button.innerHTML = "Default Bitrate";
|
|
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":-1}, '*');}
|
|
document.getElementById("container").appendChild(button);
|
|
|
|
setInterval(function(){iframe.contentWindow.postMessage({"getStats":true}, '*');},1000);
|
|
|
|
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
|
|
var eventer = window[eventMethod];
|
|
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
|
|
|
|
eventer(messageEvent, function (e) {
|
|
|
|
if ("stats" in e.data){
|
|
var out = "";
|
|
|
|
for (var streamID in e.data.stats.inbound_stats){
|
|
out += printValues(e.data.stats.inbound_stats[streamID]);
|
|
}
|
|
if (out.split("Bitrate_in_kbps").length>1){
|
|
document.getElementById("statsdiv").innerHTML = "<b>Bitrate_in_kbps</b>"+out.split("Bitrate_in_kbps")[1];
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function printValues( obj) {
|
|
var out = "";
|
|
for (var key in obj) {
|
|
if (typeof obj[key] === "object") {
|
|
out +="<br />";
|
|
out += printValues(obj[key]);
|
|
} else {
|
|
if (key.startsWith("_")){} else {
|
|
out +="<b>"+key+"</b>: "+obj[key]+"<br />";
|
|
}
|
|
}
|
|
}
|
|
return out;
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="loadIframe();">
|
|
<div id="container">
|
|
</div>
|
|
<div style="width:48%;padding:0;margin:0;border:0;display:inline-block;">
|
|
<h3>OBS.Ninja Speed Test - prototype version</h3>
|
|
(Tests connection to TURN server and back)<br /><br />
|
|
<li>1.Select your camera.</li>
|
|
<li>2.Hit start</li>
|
|
<li>3.Wait for the video to load side-by-side. *If it does not auto-load within 20s, refresh and try again.*</li>
|
|
<li>4.Stats will load on the right-hand side of the page here. (or press CTRL + LeftClick on the new video to open stats that way)</li>
|
|
<li>5.Bitrate_in_kbps, Buffer_Delay_in_ms, and packetLoss_percentage are important connection quality metrics</li>
|
|
<li>6.Increase the video bitrate by pressing <i>High Bitrate</i>; it should approach 6000-kbps if the network allows.</li>
|
|
</div>
|
|
<div id="statsdiv" style="width:48%;padding:0;margin:0;border:0;display:inline-block;">
|
|
</div>
|
|
</body>
|
|
</html> |