mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-21 10:28:38 +00:00
merge fix?
This commit is contained in:
STeve Seguin
parent
c87781dcbd
commit
9a7446a083
119
speedtest.css
Normal file
119
speedtest.css
Normal file
@ -0,0 +1,119 @@
|
||||
body {
|
||||
background-color: #141926;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
h1 small {
|
||||
display: block;
|
||||
margin-top: 0.5em;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
#container, #graphs, #log {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#explanation {
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#explanation h2 {
|
||||
border-bottom: 1px solid #383838;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
min-height: 30vh;
|
||||
width: 39vw;
|
||||
}
|
||||
|
||||
#controls {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#controls button {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
canvas {
|
||||
background-color: black;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
#log {
|
||||
margin-top: 20px;
|
||||
background: #2a2a2a;
|
||||
padding: 20px 0px;
|
||||
border: 1px solid #383838;
|
||||
}
|
||||
|
||||
#log ul {
|
||||
margin: 20px;
|
||||
list-style: none;
|
||||
color: #cacaca;
|
||||
max-height: 20vh;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#graphs {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
background: #2a2a2a;
|
||||
padding: 20px 0px;
|
||||
border: 1px solid #383838;
|
||||
}
|
||||
|
||||
.graph {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph h2, #log h2 {
|
||||
margin: 0px 20px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.graph > span {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
color: #cacaca;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-left: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 375px)
|
||||
and (max-device-width: 812px)
|
||||
and (orientation: portrait) {
|
||||
|
||||
#container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#graphs {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 90vw;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#statsdiv {display: none;}
|
||||
201
speedtest.html
201
speedtest.html
@ -1,201 +0,0 @@
|
||||
<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);
|
||||
|
||||
setInterval(function(){iframe.contentWindow.postMessage({"getStats":true}, '*');},5000);
|
||||
|
||||
|
||||
var iframe2 = document.createElement("iframe");
|
||||
var iframeContainer = document.createElement("span");
|
||||
|
||||
iframe2.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");
|
||||
}
|
||||
|
||||
iframe2.src = srcString;
|
||||
|
||||
iframeContainer.appendChild(iframe2);
|
||||
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(){iframe2.contentWindow.postMessage({"close":true}, '*');}
|
||||
document.getElementById("container").appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Low Bitrate";
|
||||
button.onclick = function(){iframe2.contentWindow.postMessage({"bitrate":100}, '*');}
|
||||
document.getElementById("container").appendChild(button);
|
||||
|
||||
|
||||
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "High Bitrate";
|
||||
button.onclick = function(){iframe2.contentWindow.postMessage({"bitrate":6000}, '*');}
|
||||
document.getElementById("container").appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Default Bitrate";
|
||||
button.onclick = function(){iframe2.contentWindow.postMessage({"bitrate":-1}, '*');}
|
||||
document.getElementById("container").appendChild(button);
|
||||
|
||||
setInterval(function(){iframe2.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 = "";
|
||||
console.log( e.data.stats);
|
||||
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];
|
||||
}
|
||||
for (var i in e.data.stats.outbound_stats){
|
||||
if ("quality_Limitation_Reason" in e.data.stats.outbound_stats[i]){
|
||||
document.getElementById("statsdivOut").innerHTML = "<b>Quality Limitation Reasons:</b> "+e.data.stats.outbound_stats[i].quality_Limitation_Reason+"";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
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 10px;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)</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>
|
||||
<div id="statsdivOut" style="font-size:200%;width:48%;padding:20px;margin:0;border:0;display:inline-block;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user