Add files via upload

This commit is contained in:
Steve Seguin
2021-07-03 16:30:31 -04:00
committed by GitHub
parent 8e023705f1
commit 7bf131b83f
7 changed files with 782 additions and 562 deletions

View File

@@ -290,7 +290,7 @@
<i class="las la-play"></i>
</label>
<div id="inputCombo">
<input type="text" id="changeText" class="inputfield" value="http://vdo.ninja/?view=" onchange="modURL" onkeyup="enterPressed(event, gohere);" />
<input type="text" id="changeText" class="inputfield" value="http://vdo.ninja/" onchange="modURL" onkeyup="enterPressed(event, gohere);" />
<button onclick="gohere();" id="gobutton">GO</button>
</div>
</div>

View File

@@ -55,7 +55,7 @@
}
</style>
<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
<link rel="stylesheet" href="./main.css?ver=65" />
<link rel="stylesheet" href="./main.css?ver=66" />
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.min.js"></script>
<style id="lightbox-animations" type="text/css"></style>
</head>
@@ -68,7 +68,7 @@
<link itemprop="url" href="./media/obsNinja_logo_full.png" />
</span>
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/CodecsHandler.js?ver=33"></script>
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=209"></script>
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=213"></script>
<input id="zoomSlider" type="range" style="display: none;" />
<div id="header">
@@ -108,7 +108,8 @@
<span data-translate="joining-room">You are in room</span>:
<div id="roomid" style="display: inline-block;"></div>
</div>
<div id="head6" class="advanced" data-translate="only-director-can-hear-you">Only the director can hear you currently</div>
<div id="head6" class="advanced" data-translate="only-director-can-hear-you">Only the director can hear you currently.</div>
<div id="head7" class="advanced" data-translate="director-muted-you">The director has muted you.</div>
</div>
<div id="controlButtons" >
@@ -1745,11 +1746,11 @@
// session.title // "zzzz"
</script>
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script>
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=6"></script>
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=7"></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=237"></script>
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=238"></script>
</body>
</html>

1091
lib.js

File diff suppressed because it is too large Load Diff

View File

@@ -231,6 +231,16 @@ button.white:active {
font-weight: 700;
}
#head7 {
display: inline-block;
text-decoration: none;
color: white;
text-align: left;
margin-left: 10px;
pointer-events: none;
font-weight: 700;
}
#overlayMsgs{
margin:0 auto;
background-color: #0000;
@@ -2952,6 +2962,14 @@ input:checked + .slider:before {
}
}
.iframeDetails {
margin: 10px;
position: relative;
word-break: break-all;
max-height: 500px;
overflow: hidden;
}
.desktop-capturer-selection {
position: fixed;
top: 0;

21
main.js
View File

@@ -264,8 +264,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
//}
session.minipreview = 2; // full screen if nothing else on screen.
session.style = 1;
getById("header").style.display = "none";
getById("header").style.opacity = 0;
//getById("header").style.display = "none";
//getById("header").style.opacity = 0;
session.showList=false;
}
@@ -1235,9 +1235,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
}
if (urlParams.has('noiframe') || urlParams.has('noiframes') || urlParams.has('nif')) {
if (urlParams.has('noiframe') || urlParams.has('noiframes') || urlParams.has('nif') || urlParams.has('nowebsite') ) {
session.noiframe = urlParams.get('noiframe') || urlParams.get('noiframes') || urlParams.get('nif');
session.noiframe = urlParams.get('noiframe') || urlParams.get('noiframes') || urlParams.get('nif') || urlParams.get('nowebsite');
if (!(session.noiframe)) {
session.noiframe = [];
@@ -1797,6 +1797,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
if (urlParams.has('speedtest')){ // forces essentially UDP mode, unless TCP is specified, and some other stuff
session.speedtest = true;
if (urlParams.get('speedtest')){
session.speedtest = urlParams.get('speedtest').toLowerCase();
}
}
if (urlParams.has('turn')) {
@@ -2975,15 +2978,17 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
});
function updateConnectionStatus() {
warnlog("Connection type changed from " + session.stats.network_type + " to " + Connection.effectiveType);
session.stats.network_type = Connection.effectiveType + " / " + Connection.type;
session.ping();
try{
warnlog("Connection type changed from " + session.stats.network_type + " to " + Connection.effectiveType);
session.stats.network_type = Connection.effectiveType + " / " + Connection.type;
session.ping();
} catch(e){warnlog(e);};
}
try {
var Connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
session.stats.network_type = Connection.effectiveType + " / " + Connection.type;
Connection.addEventListener('change', updateConnectionStatus);
} catch (e) {}
} catch (e) {warnlog(e);}
setInterval(function() {

View File

@@ -4,13 +4,84 @@
<link rel="stylesheet" href="./speedtest.css?ver=1" />
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OBSN Speed Test</title>
<title>VDON Speed Test</title>
</head>
<body onload="loadIframe();">
<h1>
VDO.Ninja Speed Test
</h1>
<div id="container">
</div>
<div id="graphs">
<div class="graph">
<h2>Bitrate (kbps)</h2>
<span>0</span>
<canvas id="bitrate-graph"></canvas>
</div>
<div class="graph">
<h2>Buffer delay (ms)</h2>
<span>0</span>
<canvas id="buffer-graph"></canvas>
</div>
<div class="graph">
<h2>Packet Loss (%)</h2>
<span>0</span>
<canvas id="packetloss-graph"></canvas>
</div>
</div>
<div id="log" onclick="copyFunction(this.innerText)">
<h2>Log <i class="las la-clipboard"></i></h2>
<ul></ul>
</div>
<div id="explanation">
<h2>How to use</h2>
<ol>
<li>Select your camera.</li>
<li>Hit start</li>
<li>
Wait for the video to load side-by-side. *If it does not auto-load
within 20s, refresh and try again.*
</li>
<li>
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>
Bitrate, Buffer delay, and packet loss are important connection
quality metrics
</li>
<li>
Change the video bitrate by pressing the buttons below the video. It
should approach 6000-kbps if the network allows.
</li>
</ol>
<div id="screen" style="color: #CCC; margin:10px 0;"><a href="./speedtest?screen" style="color: #CCC;">Test screen-sharing performance here</a></div>
<div id="remote"></div>
<br />
Testing location: <select name="turnlist" id="turnlist" onchange="reloadTurn();" title="Select an exact location to test against">
<option selected value="">Automatic</option>
<option value="de1">Saarbruecken, Germany</option>
<option value="fr1">Strasbourg, France</option>
<option value="cae1">Montreal, Canada</option>
<option value="usc1">Chicago, USA</option>
<option value="usw1">Los Angeles, USA</option>
<option value="aus1">Sidney, Australia</option>
</select>
<br /><br /><br />
</div>
<script>
function getChromeVersion() {
var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
return raw ? parseInt(raw[2], 10) : false;
}
if (!getChromeVersion()){
alert("This speedtest is optimized for Chromium-based browsers; graphs will not work for Firefox or Safari browsers.");
}
@@ -34,9 +105,11 @@
};
})(window);
var urlParams = new URLSearchParams(window.location.search);
var quality_reason = "";
var encoder = "";
var Round_Trip_Time_ms = "";
function copyFunction(copyText) {
alert("Log copied to the clipboard.");
try {
@@ -55,11 +128,40 @@
}
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;
}
function loadIframe() {
function logData(type, data) {
var log = document.getElementById("log").getElementsByTagName("ul")[0];
var entry = document.createElement('li');
entry.textContent =
"[" + new Date().toLocaleTimeString() + "] " + type + " : " + data;
log.prepend(entry);
}
function reloadTurn(){
console.log("Reloading to change TURN servers");
loadIframe(document.getElementById("turnlist").value);
}
function loadIframe(zone="") {
// 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();"> !!!
document.getElementById("container").innerHTML = "";
var streamID = "";
var possible = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789";
for (var i = 0; i < 7; i++) {
@@ -72,9 +174,7 @@
streamID = urlParams.get("sid");
}
document.getElementById("remote").innerHTML = "<a style='color:#CCC' href='./monitor?sid="+streamID+"'>Remote Monitoring Link</a><br /><br /><br /><br />";
document.getElementById("remote").innerHTML = "<a style='color:#CCC' href='./monitor?sid="+streamID+"'>Remote Monitoring Link</a><br />";
var iframe = document.createElement("iframe");
var iframeContainer = document.createElement("span");
@@ -84,7 +184,7 @@
iframe.allowfullscreen ="true";
//iframe.allow = "autoplay";
var srcString = "./?push=" + streamID + "&cleanoutput&privacy&speedtest&"+testType+"&audiodevice=0&fullscreen&transparent&remote";
var srcString = "./?push=" + streamID + "&cleanoutput&privacy&"+testType+"&audiodevice=0&fullscreen&transparent&remote&speedtest="+zone;
if (urlParams.has("turn")) {
srcString = srcString + "&turn=" + urlParams.get("turn");
@@ -124,7 +224,7 @@
var iframeContainer = document.createElement("span");
iframe.allow = "autoplay";
var srcString = "./?view=" + streamID + "&cleanoutput&privacy&noaudio&speedtest&scale=0";
var srcString = "./?view=" + streamID + "&cleanoutput&privacy&noaudio&scale=0&speedtest="+zone;
if (urlParams.has("turn")) {
srcString = srcString + "&turn=" + urlParams.get("turn");
@@ -289,90 +389,7 @@
});
}
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;
}
function logData(type, data) {
var log = document.getElementById("log").getElementsByTagName("ul")[0];
var entry = document.createElement('li');
entry.textContent =
"[" + new Date().toLocaleTimeString() + "] " + type + " : " + data;
log.prepend(entry);
}
</script>
</head>
<body onload="loadIframe();">
<div id="container">
<h1>
OBS.Ninja Speed Test
</h1>
</div>
<div id="graphs">
<div class="graph">
<h2>Bitrate (kbps)</h2>
<span>0</span>
<canvas id="bitrate-graph"></canvas>
</div>
<div class="graph">
<h2>Buffer delay (ms)</h2>
<span>0</span>
<canvas id="buffer-graph"></canvas>
</div>
<div class="graph">
<h2>Packet Loss (%)</h2>
<span>0</span>
<canvas id="packetloss-graph"></canvas>
</div>
</div>
<div id="log" onclick="copyFunction(this.innerText)">
<h2>Log <i class="las la-clipboard"></i></h2>
<ul></ul>
</div>
<div id="explanation">
<h2>How to use</h2>
<ol>
<li>Select your camera.</li>
<li>Hit start</li>
<li>
Wait for the video to load side-by-side. *If it does not auto-load
within 20s, refresh and try again.*
</li>
<li>
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>
Bitrate, Buffer delay, and packet loss are important connection
quality metrics
</li>
<li>
Change the video bitrate by pressing the buttons below the video. It
should approach 6000-kbps if the network allows.
</li>
</ol>
<div id="screen" style="color: #CCC; margin:10px 0;"><a href="./speedtest?screen" style="color: #CCC;">Test screen-sharing performance here</a></div>
<div id="remote"></div>
</div>
<script>
var testType= "webcam";
if (urlParams.has("screen") || urlParams.has("ss") || urlParams.has("screenshare") || urlParams.has("screentest")) {

File diff suppressed because one or more lines are too long