mirror of
https://github.com/SrIzan10/vdo.ninja.git
synced 2026-05-01 11:05:24 +00:00
Add files via upload
This commit is contained in:
@@ -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>
|
||||
|
||||
11
index.html
11
index.html
@@ -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>
|
||||
|
||||
18
main.css
18
main.css
@@ -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
21
main.js
@@ -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() {
|
||||
|
||||
199
speedtest.html
199
speedtest.html
@@ -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")) {
|
||||
|
||||
Reference in New Issue
Block a user