mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 13:48:38 +00:00
v22.4 beta
This commit is contained in:
Steve Seguin
parent
a911e86b29
commit
0573fb38ba
77
check.html
77
check.html
@ -169,13 +169,13 @@
|
||||
function next2(){
|
||||
document.getElementById("page2").classList.add("hidden");
|
||||
document.getElementById("page3").classList.remove("hidden");
|
||||
loadIframe();
|
||||
loadIframe(region);
|
||||
}
|
||||
|
||||
function next3(){
|
||||
document.getElementById("page3").classList.add("hidden");
|
||||
document.getElementById("mainapp").classList.remove("hidden");
|
||||
loadIframe();
|
||||
loadIframe(region);
|
||||
}
|
||||
|
||||
(function (w) {
|
||||
@ -414,7 +414,33 @@
|
||||
|
||||
if (urlParams.has("sid")) {
|
||||
streamID = urlParams.get("sid");
|
||||
} else if (urlParams.has("push")) {
|
||||
streamID = urlParams.get("push");
|
||||
}
|
||||
|
||||
var region = "";
|
||||
if (urlParams.has("location")) {
|
||||
region = urlParams.get("location");
|
||||
} else if (urlParams.has("region")) {
|
||||
region = urlParams.get("region");
|
||||
}
|
||||
|
||||
<!-- <option selected value="">Automatic</option> -->
|
||||
<!-- <option value="de1">Saarbruecken, Germany</option> -->
|
||||
<!-- <option value="de2">Frankfurt, Germany</option> -->
|
||||
<!-- <option value="fr1">Strasbourg, France</option> -->
|
||||
<!-- <option value="bra1">São Paulo, Brazil</option> -->
|
||||
<!-- <option value="pol1">Warsaw, Poland</option> -->
|
||||
<!-- <option value="cae1">Montreal, Canada</option> -->
|
||||
<!-- <option value="use1">Virgina, USA</option> -->
|
||||
<!-- <option disabled value="usc1">Chicago, USA</option> -->
|
||||
<!-- <option disabled value="usw1">Los Angeles, USA</option> -->
|
||||
<!-- <option value="usw2">Oregon, USA</option> -->
|
||||
<!-- <option value="aus1">Sydney, Australia</option> -->
|
||||
<!-- <option value="jap1">Tokyo, Japan</option> -->
|
||||
<!-- <option value="sing1">Singapore</option> -->
|
||||
<!-- <option value="ind1">Mumbai, India</option> -->
|
||||
<!-- <option value="pol1">Warsaw, Poland</option> -->
|
||||
|
||||
var iframe1 = document.createElement("iframe");
|
||||
|
||||
@ -496,6 +522,8 @@
|
||||
|
||||
if (urlParams.has("id")) {
|
||||
recordResults = urlParams.get("id") || false;
|
||||
} else if (urlParams.has("session")) {
|
||||
recordResults = urlParams.get("session") || false;
|
||||
}
|
||||
|
||||
iframe.src = srcString;
|
||||
@ -566,6 +594,16 @@
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
if (timer == 30){
|
||||
iframe.contentWindow.postMessage({ bitrate: 4000 }, "*");
|
||||
bitrate.target = 4000;
|
||||
updateData("target", bitrate.target);
|
||||
}
|
||||
if (timer == 60){
|
||||
iframe.contentWindow.postMessage({ bitrate: 6000 }, "*");
|
||||
bitrate.target = 6000;
|
||||
updateData("target", bitrate.target);
|
||||
}
|
||||
|
||||
if (timer!==null){
|
||||
timer+=1
|
||||
@ -591,8 +629,8 @@
|
||||
var bitrate = {
|
||||
element: "bitrate-graph",
|
||||
data: 0,
|
||||
max: 6000,
|
||||
target: 3000,
|
||||
max: 6500,
|
||||
target: 2500,
|
||||
};
|
||||
var frames;
|
||||
var buffer = {
|
||||
@ -654,13 +692,28 @@
|
||||
var offset = borderWidth * 2;
|
||||
|
||||
// Create gradient
|
||||
|
||||
var grd = context.createLinearGradient(0, 0, 0, height);
|
||||
|
||||
|
||||
if (type == "bitrate") {
|
||||
// Higher values are green
|
||||
grd.addColorStop(0, "#33C433");
|
||||
grd.addColorStop(0.7, "#F3F304");
|
||||
grd.addColorStop(0.9, "#F30404");
|
||||
|
||||
if (stat.target == 2500){
|
||||
grd.addColorStop(0, "#33C433");
|
||||
grd.addColorStop(0.7, "#33C433");
|
||||
grd.addColorStop(0.8, "#F3F304");
|
||||
grd.addColorStop(0.92, "#F30404");
|
||||
} else if (stat.target == 4000){
|
||||
grd.addColorStop(0, "#33C433");
|
||||
grd.addColorStop(0.5, "#33C433");
|
||||
grd.addColorStop(0.8, "#F3F304");
|
||||
grd.addColorStop(0.92, "#F30404");
|
||||
} else if (stat.target == 6000){
|
||||
grd.addColorStop(0, "#33C433");
|
||||
grd.addColorStop(0.3, "#33C433");
|
||||
grd.addColorStop(0.8, "#F3F304");
|
||||
grd.addColorStop(0.92, "#F30404");
|
||||
}
|
||||
|
||||
} else {
|
||||
// Higher values are red
|
||||
grd.addColorStop(0, "#F30404");
|
||||
@ -673,10 +726,10 @@
|
||||
//context.fillStyle = "#009933";
|
||||
//context.imageSmoothingEnabled = true;
|
||||
|
||||
yScale = height / stat.target;
|
||||
yScale = height / stat.max;
|
||||
|
||||
if (stat.data > stat.target) {
|
||||
stat.data = stat.target;
|
||||
if (stat.data > stat.max) {
|
||||
stat.data = stat.max;
|
||||
}
|
||||
|
||||
if (type == "packetloss" && stat.data == 0.0) {
|
||||
|
||||
@ -1,16 +1,5 @@
|
||||
function effectsEngine(effectName){
|
||||
function loadScript(url){
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = url;
|
||||
script.onload = function(){
|
||||
this.remove();
|
||||
if (loadList.length){
|
||||
loadScript(loadList.pop());
|
||||
}
|
||||
}
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
async function effectsEngine(effectName){
|
||||
|
||||
var loadList = [];
|
||||
if (typeof JEELIZFACEFILTER == 'undefined' || JEELIZFACEFILTER==null){
|
||||
loadList.push("./thirdparty/jeeliz/jeelizFaceFilter.js");
|
||||
@ -29,9 +18,13 @@ function effectsEngine(effectName){
|
||||
|
||||
if (loadList.length){
|
||||
loadList.reverse();
|
||||
loadScript(loadList.pop());
|
||||
while (loadList.length){
|
||||
await loadScript(loadList.pop());
|
||||
}
|
||||
}
|
||||
|
||||
log("finished loading anon effect");
|
||||
|
||||
// some globals:
|
||||
let THREECAMERA = null; // should be prop of window
|
||||
let ANONYMOUSMESH = null;
|
||||
@ -63,6 +56,7 @@ function effectsEngine(effectName){
|
||||
isTransformed = false;
|
||||
init_faceFilter("effectsCanvasTarget", session.canvasSource);
|
||||
} catch(e){
|
||||
errorlog(e);
|
||||
}
|
||||
} else {
|
||||
setTimeout(function(){main();},500);
|
||||
@ -117,7 +111,7 @@ function effectsEngine(effectName){
|
||||
threeStuffs.scene.add(dirLight);
|
||||
},
|
||||
callbackTrack: function (detectState) {
|
||||
if (effectName !== session.effects){
|
||||
if (effectName !== session.effect){
|
||||
try{
|
||||
JEELIZFACEFILTER.toggle_pause(true,false); // unload the filter when no longer active. Leaving the track active is required, else it breaks the app
|
||||
} catch(e){errorlog(e);}
|
||||
|
||||
@ -1,16 +1,5 @@
|
||||
function effectsEngine(effectName){
|
||||
function loadScript(url){
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = url;
|
||||
script.onload = function(){
|
||||
this.remove();
|
||||
if (loadList.length){
|
||||
loadScript(loadList.pop());
|
||||
}
|
||||
}
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
async function effectsEngine(effectName){
|
||||
|
||||
var loadList = [];
|
||||
if (typeof JEELIZFACEFILTER == 'undefined' || JEELIZFACEFILTER==null){
|
||||
loadList.push("./thirdparty/jeeliz/jeelizFaceFilter.js");
|
||||
@ -32,10 +21,13 @@ function effectsEngine(effectName){
|
||||
|
||||
if (loadList.length){
|
||||
loadList.reverse();
|
||||
loadScript(loadList.pop());
|
||||
while (loadList.length){
|
||||
await loadScript(loadList.pop());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
var pathname = window.location.pathname.split("/");
|
||||
pathname.pop();
|
||||
pathname = window.location.protocol + "//" + window.location.host + pathname.join("/");
|
||||
@ -267,9 +259,9 @@ function effectsEngine(effectName){
|
||||
isTransformed = false;
|
||||
DOGOBJ3D = new THREE.Object3D();
|
||||
FRAMEOBJ3D = new THREE.Object3D();
|
||||
|
||||
init_faceFilter("effectsCanvasTarget", session.canvasSource);
|
||||
} catch(e){
|
||||
errorlog(e);
|
||||
}
|
||||
} else {
|
||||
setTimeout(function(){main();},500);
|
||||
@ -301,7 +293,7 @@ function effectsEngine(effectName){
|
||||
init_threeScene(spec);
|
||||
},
|
||||
callbackTrack: function (detectState) {
|
||||
if (effectName !== session.effects){
|
||||
if (effectName !== session.effect){
|
||||
try{
|
||||
JEELIZFACEFILTER.toggle_pause(true,false); // unload the filter when no longer active. Leaving the track active is required, else it breaks the app
|
||||
} catch(e){errorlog(e);}
|
||||
@ -353,5 +345,6 @@ function effectsEngine(effectName){
|
||||
}
|
||||
});
|
||||
}
|
||||
log("returning main");
|
||||
return main;
|
||||
}
|
||||
|
||||
@ -1,22 +1,18 @@
|
||||
function effectsEngine(){
|
||||
async function effectsEngine(){
|
||||
console.log('LOADED SAMPLE');
|
||||
function loadScript(url, callback=false){
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = url;
|
||||
script.onload = function(){this.remove();if(callback){callback();}}
|
||||
document.head.appendChild(script);
|
||||
|
||||
var loadList = [];
|
||||
loadList.push("./thirdparty/jeeliz/jeelizFaceFilter.js");
|
||||
loadList.push("./thirdparty/jeeliz/helpers/JeelizCanvas2DHelper.js");
|
||||
|
||||
if (loadList.length){
|
||||
loadList.reverse();
|
||||
while (loadList.length){
|
||||
await loadScript(loadList.pop());
|
||||
}
|
||||
}
|
||||
|
||||
loadScript("./thirdparty/jeeliz/jeelizFaceFilter.js",
|
||||
function(){
|
||||
loadScript("./thirdparty/jeeliz/helpers/JeelizCanvas2DHelper.js");
|
||||
}
|
||||
);
|
||||
|
||||
function main(){ // entry point
|
||||
console.log(".");
|
||||
console.log("LOADED MAIN OF SAMPLE");
|
||||
if (session.canvasSource && session.canvasSource.videoWidth && session.canvasSource.videoHeight && session.canvasWebGL){
|
||||
if (session.canvasWebGL && !(document.getElementById("effectsCanvasTarget"))){
|
||||
session.canvasWebGL.id = "effectsCanvasTarget";
|
||||
|
||||
32
index.html
32
index.html
@ -57,7 +57,7 @@
|
||||
<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
|
||||
<meta name="msapplication-TileColor" content="#da532c" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<link rel="stylesheet" href="./main.css?ver=190" />
|
||||
<link rel="stylesheet" href="./main.css?ver=209" />
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.min.js"></script>
|
||||
<style id="lightbox-animations" type="text/css"></style>
|
||||
<!-- <link rel="manifest" href="manifest.json" /> -->
|
||||
@ -82,7 +82,7 @@
|
||||
<link itemprop="url" href="./media/vdoNinja_logo_full.png" />
|
||||
</span>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/CodecsHandler.js?ver=37"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=515"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=520"></script>
|
||||
<input id="zoomSlider" type="range" style="display: none;" />
|
||||
<span id="electronDragZone" style="pointer-events: none; z-index:-10; position:absolute;top:0;left:0;width:100%;height:2%;-webkit-app-region: drag;min-height:20px;"></span>
|
||||
<div id="header">
|
||||
@ -163,7 +163,7 @@
|
||||
<div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a Screen with others" alt="Share a Screen with others" onclick="screenshareTypeDecider(1)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
|
||||
<i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-desktop my-float"></i>
|
||||
</div>
|
||||
<div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Create a Secondary Stream" alt="Create a Secondary Stream" onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
|
||||
<div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Add a Screen Share" alt="Add a Screen Share" onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
|
||||
<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv my-float"></i>
|
||||
</div>
|
||||
<div id="screenshare3button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Create a Third Stream" alt="Create a Third Stream" onclick="screenshareTypeDecider(3)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
|
||||
@ -423,6 +423,9 @@
|
||||
</span>
|
||||
</center>
|
||||
<div id="audioMenu" class="form-group multiselect" alt="tip: Hold CTRL (command) to select Multiple" title="tip: Hold CTRL (command) to select Multiple">
|
||||
<span class='gear_microphone hidden'>
|
||||
<input type="checkbox" id='micStereoMonoInput' onchange="toggleMonoStereoMic(this);">Mono
|
||||
</span>
|
||||
<a id="multiselect-trigger" class="form-control multiselect-trigger" >
|
||||
<div class="audioTitle">
|
||||
<i class="las la-microphone-alt"></i><span data-translate="select-audio-source"> Audio Source(s) </span>
|
||||
@ -482,8 +485,10 @@
|
||||
<option value="4" data-translate="digital-greenscreen">Digital greenscreen</option>
|
||||
<option value="5" data-translate="virtual-background">Virtual background</option>
|
||||
<option value="6" data-translate="face-mesh" title="experimental">Face mesh (slow load) 👨🔬</option>
|
||||
<option value="7" data-translate="digital-zoom">Digital zoom</option>
|
||||
<option value="anon" data-translate="anonymous-mask" title="experimental">Anonymous mask 👨🔬</option>
|
||||
<option value="dog" data-translate="dog-face" title="experimental">Dog ears and nose 👨🔬</option>
|
||||
<option value="1" disabled title='Enable the Chrome experimental features flag to use: chrome://flags/#enable-experimental-web-platform-features' class='facetracker' data-translate="face-tracker">Face Tracker</option>
|
||||
</select>
|
||||
<span data-warnSimdNotice="true" style='display:none; font-size: 140%; margin-left:10px; vertical-align: middle; cursor:pointer' title="Improve performance and quality with this tip" onclick="smdInfo();">
|
||||
<i class="las la-info-circle"></i>
|
||||
@ -1667,6 +1672,9 @@
|
||||
</span>
|
||||
|
||||
<div class="form-group multiselect" alt="tip: Hold CTRL (command) to select Multiple" title="tip: Hold CTRL (command) to select Multiple" >
|
||||
<span class='gear_microphone gearflat hidden'>
|
||||
<input type="checkbox" id='micStereoMonoInput3' onchange="toggleMonoStereoMic(this);">Mono
|
||||
</span>
|
||||
<a id="multiselect-trigger3" class="form-control multiselect-trigger" >
|
||||
<div id="audioTitle2" class="title">
|
||||
<i class="las la-microphone-alt"></i><span data-translate="select-audio-source"> Audio Source(s) </span>
|
||||
@ -1717,8 +1725,10 @@
|
||||
<option value="4" data-translate="digital-greenscreen">Digital greenscreen</option>
|
||||
<option value="5" data-translate="virtual-background">Virtual background</option>
|
||||
<option value="6" data-translate="face-mesh" title="experimental">Face mesh (slow load) 👨🔬</option>
|
||||
<option value="7" data-translate="digital-zoom">Digital zoom</option>
|
||||
<option value="anon" data-translate="anonymous-mask" title="experimental">Anonymous mask 👨🔬</option>
|
||||
<option value="dog" data-translate="dog-face" title="experimental">Dog ears and nose 👨🔬</option>
|
||||
<option value="1" disabled title='Face Detection API not detected; you may be able to enable it here: chrome://flags/#enable-experimental-web-platform-features' class='facetracker' data-translate="face-tracker">Face tracker</option>
|
||||
</select>
|
||||
<span data-warnSimdNotice="true" style='display:none; font-size: 140%; margin-left:10px; vertical-align: middle; cursor:pointer' title="Improve performance and quality with this tip" onclick="smdInfo();">
|
||||
<i class="las la-info-circle"></i>
|
||||
@ -1766,6 +1776,16 @@
|
||||
<label title="Choose a hotkey for Hold-to-Talk. If using Electron Capture, elevate privilleges to have it become global">Hold-to-Talk Hot-key</label>
|
||||
<input type="text" id="pptHotKey" placeholder="press a key here" style="padding-left: 7px;" onkeypress="event.preventDefault;event.stopPropagation();return false;" onkeyup="event.preventDefault;event.stopPropagation();return false;" onkeydown="setHotKey();"/>
|
||||
<button onclick="setHotKey(false);" style="margin: 0 0 0 4px; border-radius: 5px; padding: 3px 3px;">Clear</button>
|
||||
<br /><br />
|
||||
<label title="Enable Draw on Screen">Enable Draw-on-Screen</label>
|
||||
<button id='startDrawScreen' title="CTRL (cmd) + ALT + D to toggle" onclick="drawOnScreen();" style="margin: 0 0 0 4px; border-radius: 5px; padding: 3px 3px;">Enable</button>
|
||||
<button class='hidden drawActive' onclick="drawOnScreenObject.erase();" style="margin: 0 0 0 4px; border-radius: 5px; padding: 3px 3px;">Clear</button>
|
||||
<button class='hidden drawActive' onclick="drawOnScreenObject.stop();" style="margin: 0 0 0 4px; border-radius: 5px; padding: 3px 3px;" title="CTRL (cmd) + ALT + D to toggle" >Stop</button>
|
||||
<button class='hidden drawActive' onclick="drawOnScreenObject.color(this);" data-color='red' style="background-color:red; margin: 0 0 0 4px; border-radius: 5px; padding: 3px 3px;">✏️</button>
|
||||
<button class='hidden drawActive' onclick="drawOnScreenObject.color(this);" data-color='blue' style="background-color:blue; margin: 0 0 0 4px; border-radius: 5px; padding: 3px 3px;">✏️</button>
|
||||
<button class='hidden drawActive' onclick="drawOnScreenObject.color(this);" data-color='green' style="background-color:green; margin: 0 0 0 4px; border-radius: 5px; padding: 3px 3px;">✏️</button>
|
||||
<button class='hidden drawActive' onclick="drawOnScreenObject.color(this);" data-color='black' style="background-color:black; margin: 0 0 0 4px; border-radius: 5px; padding: 3px 3px;">✏️</button>
|
||||
<button class='hidden drawActive' onclick="drawOnScreenObject.color(this);" data-color='white' style="background-color:white; margin: 0 0 0 4px; border-radius: 5px; padding: 3px 3px;">🎨</button>
|
||||
</span>
|
||||
</div>
|
||||
<nav id="context-menu" class="context-menu">
|
||||
@ -2166,7 +2186,7 @@
|
||||
|
||||
|
||||
var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
|
||||
session.version = "22.3🇺🇦";
|
||||
session.version = "22.4";
|
||||
session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
|
||||
|
||||
session.defaultPassword = "someEncryptionKey123"; // Change this password if self-deploying for added security/privacy
|
||||
@ -2238,11 +2258,11 @@
|
||||
// session.defaultBackgroundImages = ["./media/bg_sample1.webp", "./media/bg_sample2.webp"]; // for &effects=5 (virtual backgrounds)
|
||||
</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=440"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=478"></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=432"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=442"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
85
main.css
85
main.css
@ -460,6 +460,12 @@ body.darktheme .credits>a:visited {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.advDirectGuestSettings {
|
||||
padding: 10px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.darktheme .advDirectGuestSettings label {
|
||||
color: #FFF;
|
||||
}
|
||||
@ -907,7 +913,9 @@ button.glyphicon-button.active.focus {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
|
||||
.nocontrolbar #container.vidcon {
|
||||
height:100%!important;
|
||||
}
|
||||
|
||||
.labelSmall {
|
||||
display:none;
|
||||
@ -1222,10 +1230,13 @@ input[type='radio'] { cursor:pointer; }
|
||||
}
|
||||
#retryimage{
|
||||
display: block;
|
||||
margin: 25vh auto;
|
||||
max-width: 50%;
|
||||
max-height: 50%;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: fadeIn 2s;
|
||||
object-fit: contain;
|
||||
}
|
||||
#retrymessage{
|
||||
display: block;
|
||||
@ -1327,7 +1338,9 @@ body {
|
||||
color: black;
|
||||
font-weight: bold !important;;
|
||||
}
|
||||
|
||||
#mainmenu {
|
||||
height:100vh;
|
||||
}
|
||||
.mainmenuclass {
|
||||
display: inherit;
|
||||
}
|
||||
@ -1482,6 +1495,18 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
background: #367ebd;
|
||||
}
|
||||
|
||||
|
||||
.popupSelector_constraints{
|
||||
margin:25px 9% 0 7%;
|
||||
}
|
||||
.popupSelector_constraints label{
|
||||
color:white;
|
||||
text-shadow: 0px 0px 6px #000000FF;
|
||||
font-weight: 700;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-height: 650px) {
|
||||
body {
|
||||
font-size: 0.9em;
|
||||
@ -1628,6 +1653,9 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
font-size: 92%;
|
||||
width: 385px !important
|
||||
}
|
||||
.popupSelector_constraints{
|
||||
margin:25px 15% 0 1%;
|
||||
}
|
||||
.mobileHide{
|
||||
display:none !important;
|
||||
}
|
||||
@ -1638,27 +1666,25 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-height: 355px) {
|
||||
|
||||
.popupSelector_constraints{
|
||||
margin:20px 12% 0 2%;
|
||||
}
|
||||
|
||||
#popupSelector {
|
||||
padding: 0 !important;
|
||||
padding: 0 0 20px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 330px) {
|
||||
#popupSelector {
|
||||
padding: 0 !important;
|
||||
font-size: 92%;
|
||||
}
|
||||
}
|
||||
|
||||
.popupSelector_constraints{
|
||||
margin:30px 9% 0 7%;
|
||||
}
|
||||
.popupSelector_constraints label{
|
||||
color:white;
|
||||
text-shadow: 0px 0px 6px #000000FF;
|
||||
font-weight: 700;
|
||||
|
||||
}
|
||||
|
||||
#popupSelector_user_settings label{
|
||||
color:white;
|
||||
text-shadow: 0px 0px 6px #000000FF;
|
||||
@ -1887,7 +1913,7 @@ label {
|
||||
}
|
||||
|
||||
.partialFadeout{
|
||||
opacity: .1 !important;
|
||||
opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
.greyout {
|
||||
@ -1967,11 +1993,16 @@ span[data-action-type="stats-graphs-details-container"]>span{
|
||||
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgogIDxnPgogICAgPGc+CiAgICAgIDxwYXRoIGQ9Im0xOC43LDEyMi41aDkxLjZjMi4zLDAgNC4xLTEuOCA0LjEtNC4xdi0xMDcuOWMwLTIuMy0xLjgtNC4xLTQuMS00LjFoLTY4LjdjLTAuMywwLTAuNywwLTEsMC4xLTAuMSwwLTAuMiwwLjEtMC4yLDAuMS0wLjMsMC4xLTAuNSwwLjItMC44LDAuMy0wLjEsMC4xLTAuMiwwLjEtMC4zLDAuMi0wLjMsMC4yLTAuNiwwLjQtMC44LDAuN2wtMjIuOSwyN2MtMC4zLDAuMy0wLjUsMC43LTAuNywxLjEtMC4xLDAuMS0wLjEsMC4zLTAuMSwwLjQtMC4xLDAuMy0wLjEsMC42LTAuMiwwLjkgMCwwLjEgMCwwLjEgMCwwLjJ2ODAuOWMtMS4wNjU4MWUtMTQsMi40IDEuOSw0LjIgNC4xLDQuMnptMTguOC0xMDAuOHYxMS44aC0xMGwxMC0xMS44em0tMTQuNywxOS45aDE4LjhjMi4zLDAgNC4xLTEuOCA0LjEtNC4xdi0yMi45aDYwLjV2OTkuN2gtODMuNHYtNzIuN3oiIGZpbGw9IiMwMDAwMDAiLz4KICAgICAgPHBhdGggZD0ibTk0LDUwLjVoLTU5Yy0yLjMsMC00LjEsMS44LTQuMSw0LjEgMCwyLjMgMS44LDQuMSA0LjEsNC4xaDU5YzIuMywwIDQuMS0xLjggNC4xLTQuMSAwLTIuMy0xLjgtNC4xLTQuMS00LjF6IiBmaWxsPSIjMDAwMDAwIi8+CiAgICAgIDxwYXRoIGQ9Im05NCw3MC4zaC01OWMtMi4zLDAtNC4xLDEuOC00LjEsNC4xIDAsMi4zIDEuOCw0LjEgNC4xLDQuMWg1OWMyLjMsMCA0LjEtMS44IDQuMS00LjEgMC0yLjItMS44LTQuMS00LjEtNC4xeiIgZmlsbD0iIzAwMDAwMCIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==)
|
||||
}
|
||||
|
||||
.controlVideoBox {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.container-inner {
|
||||
display: none;
|
||||
background-color: rgb(221, 221, 221);
|
||||
max-height: 100%;
|
||||
min-height: 90%;
|
||||
margin-bottom:30px;
|
||||
}
|
||||
.canvasStats{
|
||||
background-color: black;
|
||||
@ -1984,6 +2015,7 @@ span[data-action-type="stats-graphs-details-container"]>span{
|
||||
display: inline-block;
|
||||
overflow: scroll;
|
||||
padding: 1px 0 0 5px;
|
||||
margin-top: 14px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#add_screen {
|
||||
@ -2473,6 +2505,25 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.gear_microphone{
|
||||
user-select: none;
|
||||
float: right;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
top: 6px;
|
||||
position: relative;
|
||||
}
|
||||
.gear_microphone.gearflat{
|
||||
top: -1px;
|
||||
}
|
||||
.gear_microphone>input{
|
||||
top: 1px;
|
||||
position: relative;
|
||||
}
|
||||
#micStereoMonoInput3{
|
||||
width: 10px;
|
||||
height: 11px;
|
||||
}
|
||||
#headphonesDiv3 {
|
||||
text-align: left;
|
||||
margin: 17px 0 0 0;
|
||||
|
||||
201
main.js
201
main.js
@ -130,21 +130,25 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
setStorage("redirect", "", 0);
|
||||
session.sticky = true;
|
||||
} else if (getStorage("settings") != "") {
|
||||
|
||||
if (!(session.cleanOutput)){
|
||||
var URLGOTO = getStorage("settings");
|
||||
if (URLGOTO === window.location.href) {
|
||||
// continue, as its already matched
|
||||
} else if (!(session.cleanOutput)){
|
||||
|
||||
window.focus();
|
||||
session.sticky = confirm("Would you like to load your previous session?\n\nThis will redirect you to: "+getStorage("settings"));
|
||||
window.focus();
|
||||
document.body.classList.remove("hidden");
|
||||
|
||||
session.sticky = await confirmAlt("Would you like to load your previous session?\n\nThis will redirect you to:\n\n"+URLGOTO, true);
|
||||
if (!session.sticky) {
|
||||
setStorage("settings", "", 0);
|
||||
log("deleting cookie as user said no");
|
||||
} else {
|
||||
var cookieSettings = decodeURI(getStorage("settings"));
|
||||
var cookieSettings = decodeURI(URLGOTO);
|
||||
setStorage("redirect", "yes", 1);
|
||||
window.location.replace(cookieSettings);
|
||||
}
|
||||
} else {
|
||||
var cookieSettings = decodeURI(getStorage("settings"));
|
||||
var cookieSettings = decodeURI(URLGOTO);
|
||||
setStorage("redirect", "yes", 1);
|
||||
window.location.replace(cookieSettings);
|
||||
}
|
||||
@ -283,6 +287,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
if (urlParams.has('pushloudness') || urlParams.has('getloudness')) { // this sets the loudness IFRAME API output, if available.
|
||||
session.pushLoudness = true;
|
||||
}
|
||||
|
||||
if (urlParams.has('pushfaces') || urlParams.has('getfaces')) {
|
||||
session.grabFaceData = true;
|
||||
setTimeout(function(){ // give the app some time to load
|
||||
getFaces();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
if (urlParams.has('notmobile')){
|
||||
session.mobile = false;
|
||||
@ -663,10 +674,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
if (urlParams.has('hidesolo') || urlParams.has('hs')){
|
||||
session.hidesololinks=true;
|
||||
}
|
||||
|
||||
if (urlParams.has('ssb') || urlParams.has('screensharebutton')) {
|
||||
session.screensharebutton = true;
|
||||
}
|
||||
|
||||
if (urlParams.has('mute') || urlParams.has('muted') || urlParams.has('m')) {
|
||||
session.muted = true;
|
||||
@ -1370,6 +1377,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.autoGainControl = false;
|
||||
session.noiseSuppression = false;
|
||||
}
|
||||
|
||||
if (Firefox && !session.stereo || (session.stereo === 3)){
|
||||
session.mono = true; // this will set the SDP to mono if firefox
|
||||
}
|
||||
|
||||
if (urlParams.has('mono')) {
|
||||
session.mono = true;
|
||||
@ -1377,7 +1388,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.stereo = 3;
|
||||
session.audiobitrate = 128;
|
||||
} else if (session.stereo == 5) {
|
||||
session.stereo = 3;
|
||||
session.stereo = 3; // stereo out only
|
||||
session.audiobitrate = 128;
|
||||
} else if (session.stereo == 2) {
|
||||
session.stereo = 0;
|
||||
@ -1385,7 +1396,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
}
|
||||
|
||||
if (urlParams.has("channelcount") || urlParams.has("ac") || urlParams.has("inputchannels")) {
|
||||
if (urlParams.has("channelcount") || urlParams.has("ac") || urlParams.has("inputchannels")) { // if updates to this, see also function toggleMonoStereoMic()
|
||||
session.audioInputChannels = urlParams.get('channelcount') || urlParams.get('ac') || urlParams.get('inputchannels') || 0;
|
||||
session.audioInputChannels = parseInt(session.audioInputChannels);
|
||||
if (!session.audioInputChannels) {
|
||||
@ -1394,6 +1405,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
} else if (urlParams.has("monomic")){
|
||||
session.audioInputChannels = 1;
|
||||
}
|
||||
|
||||
if ((session.stereo === 5) && !session.audioInputChannels){ // allow the guest to set their mic to mono.
|
||||
document.querySelectorAll(".gear_microphone").forEach(ele=>{
|
||||
ele.classList.remove("hidden");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (urlParams.has("echocancellation") || urlParams.has("aec") || urlParams.has("ec")) {
|
||||
@ -2606,6 +2623,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
|
||||
if (session.cleanOutput){
|
||||
session.screensharebutton = false;
|
||||
getById("translateButton").style.display = "none";
|
||||
getById("credits").style.display = "none";
|
||||
getById("header").style.display = "none";
|
||||
@ -2627,6 +2645,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
getById("credits").innerHTML = "Version: " + session.version + " - " + getById("credits").innerHTML;
|
||||
|
||||
if (urlParams.has('ssb') || urlParams.has('screensharebutton')) {
|
||||
session.screensharebutton = true;
|
||||
}
|
||||
|
||||
if (urlParams.has('hideheader') || urlParams.has('noheader') || urlParams.has('hh')) { // needs to happen the room and permaid applications
|
||||
getById("header").style.display = "none";
|
||||
getById("header").style.opacity = 0;
|
||||
@ -3320,13 +3342,22 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.roomid = sanitizeRoomName(roomid);
|
||||
}
|
||||
|
||||
if ((session.permaid===false) && (session.roomid===false) && (session.view===false) && (session.effects===false) && (session.director===false)){
|
||||
session.effects = null;
|
||||
if ((session.permaid===false) && (session.roomid===false) && (session.view===false) && (session.effect===false) && (session.director===false)){
|
||||
session.effect = null;
|
||||
}
|
||||
|
||||
if (urlParams.has('effects') || urlParams.has('effect')) {
|
||||
session.effects = urlParams.get('effects') || urlParams.get('effect') || null;
|
||||
session.effect = urlParams.get('effects') || urlParams.get('effect') || null;
|
||||
}
|
||||
if (window.FaceDetector !== undefined){
|
||||
document.querySelectorAll(".facetracker").forEach(ele=>{
|
||||
ele.disabled = null;
|
||||
ele.removeAttribute("disabled");
|
||||
ele.title = "Will slowly pan, tilt, and zoom in on the first face detected";
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (urlParams.has('imagelist')){ // "&imagelist="+encodeURIComponent(JSON.stringify(["./media/bg_sample.webp", "./media/bg_sample2.webp"]))
|
||||
var imageList = urlParams.get('imagelist'); //
|
||||
@ -3344,19 +3375,19 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
}
|
||||
|
||||
if (session.effects!==false){
|
||||
if (session.effects === null){
|
||||
if (session.effect!==false){
|
||||
if (session.effect === null){
|
||||
getById("effectsDiv").style.display = "block";
|
||||
session.effects = "0";
|
||||
} else if (session.effects === "0" || session.effects === "false" || session.effects === "off" || session.effects === 0){
|
||||
session.effects = false;
|
||||
session.effect = "0";
|
||||
} else if (session.effect === "0" || session.effect === "false" || session.effect === "off" || session.effect === 0){
|
||||
session.effect = false;
|
||||
getById("effectSelector3").style.display = "none";
|
||||
getById("effectsDiv3").style.display = "none";
|
||||
getById("effectSelector").style.display = "none";
|
||||
getById("effectsDiv").style.display = "none";
|
||||
}
|
||||
|
||||
if (session.effects === "5"){
|
||||
if (session.effect === "5"){
|
||||
|
||||
loadTFLITEImages();
|
||||
|
||||
@ -3369,6 +3400,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.effect = "3";
|
||||
} else if (session.effect === "3"){
|
||||
session.effectValue = 2;
|
||||
} else if (session.effect === "7"){
|
||||
session.effectValue = 1;
|
||||
}
|
||||
// mirror == 2
|
||||
// face == 1
|
||||
@ -3377,6 +3410,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
// image = 5
|
||||
}
|
||||
|
||||
|
||||
if (urlParams.has('effectvalue') || urlParams.has('ev')) {
|
||||
session.effectValue = parseInt(urlParams.get('effectvalue')) || parseInt(urlParams.get('ev')) || 0;
|
||||
session.effectValue_default = session.effectValue;
|
||||
@ -3681,7 +3715,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
};
|
||||
}
|
||||
|
||||
if ((session.view) && (session.roomid === false)) {
|
||||
if (urlParams.has('waitimage')){
|
||||
session.waitImage = urlParams.get('waitimage') || false;
|
||||
}
|
||||
|
||||
|
||||
if (((session.view) && (session.roomid === false)) || (session.waitImage && (session.scene!==false))) {
|
||||
|
||||
getById("container-4").className = 'column columnfade';
|
||||
getById("container-3").className = 'column columnfade';
|
||||
@ -3698,24 +3737,30 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
|
||||
getById("mainmenu").style.backgroundRepeat = "no-repeat";
|
||||
getById("mainmenu").style.backgroundPosition = "bottom center";
|
||||
getById("mainmenu").style.height = "100%";
|
||||
getById("mainmenu").style.minHeight = "100%";
|
||||
getById("mainmenu").style.minWidth = "100%";
|
||||
getById("mainmenu").style.backgroundSize = "100px 100px";
|
||||
getById("mainmenu").innerHTML = '';
|
||||
getById("mainmenu").classList.remove("row");
|
||||
|
||||
var timeout = 5000;
|
||||
getById("mainmenu").style.display = "block";
|
||||
|
||||
if (urlParams.has('waittimeout')){
|
||||
timeout = parseInt(urlParams.get('waittimeout')) || 0;
|
||||
session.waitImageTimeout = parseInt(urlParams.get('waittimeout')) || 0;
|
||||
}
|
||||
setTimeout(function() {
|
||||
session.waitImageTimeoutObject = setTimeout(function() {
|
||||
session.waitImageTimeoutObject = true;
|
||||
try {
|
||||
if ((session.view)) {
|
||||
if (document.getElementById("mainmenu")) {
|
||||
if (urlParams.has('waitimage')){
|
||||
if (session.waitImage){
|
||||
getById("mainmenu").innerHTML += '<img id="retryimage"/>';
|
||||
getById("retryimage").src = decodeURIComponent(urlParams.get('waitimage'));
|
||||
getById("retryimage").src = decodeURIComponent(session.waitImage);
|
||||
getById("retryimage").onerror = function(){this.style.display='none';};
|
||||
|
||||
if (session.cover) {
|
||||
getById("retryimage").style.objectFit = "cover";
|
||||
}
|
||||
|
||||
} else if (!(session.cleanOutput)){
|
||||
getById("mainmenu").innerHTML += '<div class="retry-spinner" id="retrySpinner"></div>';
|
||||
getById("retrySpinner").onclick = function(){
|
||||
@ -3734,7 +3779,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
} catch (e) {
|
||||
errorlog(e);
|
||||
}
|
||||
}, timeout);
|
||||
}, session.waitImageTimeout);
|
||||
|
||||
log("auto playing");
|
||||
if ((iPad || iOS) && navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && SafariVersion > 13) { // Modern iOS doesn't need pop up
|
||||
@ -3777,29 +3822,50 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
delayedStartupFuncs = [];
|
||||
},50);
|
||||
|
||||
if ((session.effects=="3") || (session.effects=="4") || (session.effects=="5")){
|
||||
if ((session.effect=="3") || (session.effect=="4") || (session.effect=="5")){
|
||||
attemptTFLiteJsFileLoad();
|
||||
} else if (session.effects=="6"){
|
||||
} else if (session.effect=="6"){
|
||||
loadTensorflowJS();
|
||||
} else if (session.effects=="9"){
|
||||
var script = document.createElement('script');
|
||||
script.onload = function() {
|
||||
effectsEngine();
|
||||
}
|
||||
script.src = "./filters/sample.js";
|
||||
document.head.appendChild(script);
|
||||
} else if (session.effect=="9"){
|
||||
session.effect="sample";
|
||||
//loadEffect(session.effect);
|
||||
warnUser("Loading custom effects model...",1000);
|
||||
} else if (session.effects=="10"){
|
||||
var script = document.createElement('script');
|
||||
script.onload = function() {
|
||||
effectsEngine();
|
||||
}
|
||||
script.src = "./filters/cube.js";
|
||||
document.head.appendChild(script);
|
||||
} else if (session.effect=="10"){
|
||||
session.effect="dog";
|
||||
//loadEffect(session.effect);
|
||||
warnUser("Loading custom effects model...",1000);
|
||||
} else if (session.effects=="11"){
|
||||
session.effects="anon";
|
||||
//loadEffect(session.effects);
|
||||
} else if (session.effect=="11"){
|
||||
session.effect="anon";
|
||||
//loadEffect(session.effect);
|
||||
warnUser("Loading custom effects model...",1000);
|
||||
} else if (session.effect=="12"){
|
||||
session.effect="sample";
|
||||
//loadEffect(session.effect);
|
||||
warnUser("Loading custom effects model...",1000);
|
||||
} else if (session.effect=="facetracking"){
|
||||
session.effect="1";
|
||||
} else if (session.effect=="zoom"){
|
||||
session.effect="7";
|
||||
}
|
||||
|
||||
if (session.effect === "3"){
|
||||
getById("selectEffectAmount").style.display = "block";
|
||||
getById("selectEffectAmount3").style.display = "block";
|
||||
getById("selectEffectAmountInput").value = session.effectValue;
|
||||
getById("selectEffectAmountInput3").value = session.effectValue;
|
||||
} else if (session.effect === "7"){
|
||||
getById("selectEffectAmount").style.display = "block";
|
||||
getById("selectEffectAmount3").style.display = "block";
|
||||
session.effectValue = 1.0;
|
||||
getById("selectEffectAmountInput").min = 1;
|
||||
getById("selectEffectAmountInput").max = 1.99;
|
||||
getById("selectEffectAmountInput").step = 0.01
|
||||
getById("selectEffectAmountInput3").min = 1;
|
||||
getById("selectEffectAmountInput3").max = 1.99;
|
||||
getById("selectEffectAmountInput3").step = 0.01
|
||||
|
||||
getById("selectEffectAmountInput").value = session.effectValue;
|
||||
getById("selectEffectAmountInput3").value = session.effectValue;
|
||||
}
|
||||
|
||||
if (location.protocol !== 'https:') {
|
||||
@ -3808,8 +3874,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (session.sensorData) {
|
||||
setupSensorData(parseInt(session.sensorData));
|
||||
}
|
||||
@ -3823,9 +3887,11 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
if (urlParams.has('autohide')) {
|
||||
session.autohide=true;
|
||||
}
|
||||
if (session.autohide && !session.mobile && (session.scene===false)){// && (session.roomid!==false)){
|
||||
if (session.autohide && (session.scene===false)){// && (session.roomid!==false)){
|
||||
getById("main").onmouseover = showControl; // this is correct. (it's not session.showControls)
|
||||
document.ontouchstart = showControl; // this is correct. (it's not session.showControls)
|
||||
getById("controlButtons").classList.add("zeroHeight");
|
||||
getById("gridlayout").classList.add("nocontrolbar");
|
||||
}
|
||||
|
||||
if (urlParams.has('flagship')) {
|
||||
@ -4226,6 +4292,15 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
if ("reload" in e.data) { // reload the page
|
||||
reloadRequested(); // location.reload();, but with no user prompt (force reload)
|
||||
}
|
||||
|
||||
if ("getFaces" in e.data){
|
||||
if (e.data.faceTrack){
|
||||
session.grabFaceData = true;
|
||||
getFaces();
|
||||
} else {
|
||||
session.grabFaceData = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (("getStats" in e.data)){
|
||||
var stats = {};
|
||||
@ -4768,8 +4843,15 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
return;
|
||||
}
|
||||
|
||||
log("Connection type changed from " + session.stats.network_type + " to " + Connection.effectiveType);
|
||||
session.stats.network_type = Connection.effectiveType + " / " + Connection.type;
|
||||
log("Connection type changed from " + session.stats.network_type + " to " + Connection.type);
|
||||
|
||||
if (session.stats.network_type && (session.stats.network_type !== Connection.type)){
|
||||
var miniInfo = {};
|
||||
miniInfo.con = Connection.type;
|
||||
session.sendMessage({"miniInfo":miniInfo});
|
||||
}
|
||||
|
||||
session.stats.network_type = Connection.type;
|
||||
session.ping();
|
||||
|
||||
} catch(e){warnlog(e);};
|
||||
@ -4778,7 +4860,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
try {
|
||||
var Connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
|
||||
if (Connection){
|
||||
session.stats.network_type = Connection.effectiveType + " / " + Connection.type;
|
||||
session.stats.network_type = Connection.type
|
||||
Connection.addEventListener('change', updateConnectionStatus);
|
||||
}
|
||||
} catch (e) {log(e);} // effectiveType is not yet supported by Firefox or Safari; 2021
|
||||
@ -5065,6 +5147,15 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return;
|
||||
} else if (event.keyCode == 68) { // S
|
||||
if (!drawOnScreenObject){
|
||||
drawOnScreen();
|
||||
} else {
|
||||
drawOnScreenObject.stop();
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
94
regions.html
Normal file
94
regions.html
Normal file
@ -0,0 +1,94 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<style>
|
||||
div {
|
||||
padding:10px;
|
||||
}
|
||||
body {
|
||||
font-family: verdana, tahoma, arial;
|
||||
margin:10px;
|
||||
background: #0021;
|
||||
}
|
||||
|
||||
#main>div div:nth-child(even) {
|
||||
background: #0001;
|
||||
}
|
||||
|
||||
.entry {
|
||||
display:block;
|
||||
}
|
||||
.content {
|
||||
display:block;
|
||||
}
|
||||
.avatar {
|
||||
display:inline-block;
|
||||
max-height:32px;
|
||||
max-width:32px;
|
||||
vertical-align: top;
|
||||
border-radius: 32px;
|
||||
margin: 3px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.name {
|
||||
display:inline-block;
|
||||
font-weight: bold;
|
||||
vertical-align: top;
|
||||
}
|
||||
.time {
|
||||
display: inline-block;
|
||||
font-style: italic;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
div:empty {
|
||||
display:none;
|
||||
}
|
||||
</style>
|
||||
<title>Regions for VDO.Ninja Tech Check</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1>Testing Regions for <a href="https://vdo.ninja/alpha/check" target="_blank">VDO.Ninja Tech Check</a>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
|
||||
var data = fetch("https://turnservers.vdo.ninja/regions?ts="+Date.now()).then((response) => response.json())
|
||||
.then((data) => {
|
||||
data = data.servers;
|
||||
data.forEach(message => {
|
||||
console.log(message);
|
||||
var ele = document.createElement("div");
|
||||
ele.className = "entry";
|
||||
|
||||
var name = document.createElement("div");
|
||||
name.innerText = message.name;
|
||||
name.className = "name";
|
||||
ele.appendChild(name);
|
||||
|
||||
var distance = document.createElement("div");
|
||||
distance.className = "time";
|
||||
distance.innerText = message.distance + " km away";
|
||||
ele.appendChild(distance);
|
||||
|
||||
|
||||
var content = document.createElement("div");
|
||||
|
||||
// do some basic formatting replacements
|
||||
var msgCnt = "<a href='https://vdo.ninja/alpha/check?region="+message.locale+"'>https://vdo.ninja/alpha/check?region="+message.locale+"</a>";
|
||||
content.innerHTML = msgCnt;
|
||||
content.className = "content";
|
||||
|
||||
|
||||
ele.appendChild(content);
|
||||
document.getElementById("main").appendChild(ele);
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
65
results.html
65
results.html
@ -87,6 +87,8 @@
|
||||
<canvas id="packetloss-graph"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="details">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -184,7 +186,7 @@
|
||||
element: "bitrate-graph",
|
||||
data: 0,
|
||||
max: 6000,
|
||||
target: 3000,
|
||||
target: 2500,
|
||||
};
|
||||
var frames;
|
||||
var buffer = {
|
||||
@ -225,6 +227,9 @@
|
||||
counter += 1;
|
||||
}
|
||||
}
|
||||
if ("target" in data){
|
||||
updateData("target", data.target);
|
||||
}
|
||||
if ("buffer" in data){
|
||||
updateData("buffer", data.buffer);
|
||||
if (data.buffer!==null){
|
||||
@ -254,13 +259,29 @@
|
||||
}
|
||||
if ("info" in data){
|
||||
if (data.info.Browser){
|
||||
document.getElementById("container").innerHTML += "<br />Browser used: "+data.info.Browser+"<br />";
|
||||
document.getElementById("details").innerHTML += "<br /><b>Browser used:</b> "+data.info.Browser+"<br />";
|
||||
if (!data.info.Browser.startsWith("Chromium")){
|
||||
document.getElementById("container").innerHTML += "<h3>A Chromium-based browser is recommended.</h3>";
|
||||
} else {
|
||||
document.getElementById("container").innerHTML += "<br />";
|
||||
document.getElementById("details").innerHTML += "<h3>A Chromium-based browser is recommended.</h3>";
|
||||
}
|
||||
}
|
||||
if ("plugged_in" in data.info){
|
||||
if (!data.info.plugged_in){
|
||||
document.getElementById("details").innerHTML += "<h3>The user's power is not plugged in</h3>";
|
||||
}
|
||||
}
|
||||
if (data.info.platform){
|
||||
document.getElementById("details").innerHTML += "<br /><b>Platform (os):</b> "+data.info.platform+"<br />";
|
||||
}
|
||||
if (data.info.gpGPU){
|
||||
document.getElementById("details").innerHTML += "<br /><b>GPU:</b> "+data.info.gpGPU+"<br />";
|
||||
}
|
||||
if (data.info.conn_type){
|
||||
document.getElementById("details").innerHTML += "<br /><b>Connection type:</b> "+data.info.conn_type+"<br />";
|
||||
if (data.info.conn_type == "wifi"){
|
||||
document.getElementById("details").innerHTML += "<h3>Avoid using WiFi if at all possible</h3>";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
// container
|
||||
@ -341,6 +362,11 @@
|
||||
|
||||
|
||||
function updateData(type, data) {
|
||||
|
||||
if (type == "target"){
|
||||
bitrate.target = data;
|
||||
}
|
||||
|
||||
if (type == "bitrate") {
|
||||
bitrate.data = data;
|
||||
plotData("bitrate", bitrate);
|
||||
@ -387,10 +413,24 @@
|
||||
var grd = context.createLinearGradient(0, 0, 0, height);
|
||||
|
||||
if (type == "bitrate") {
|
||||
// Higher values are green
|
||||
grd.addColorStop(0, "#33C433");
|
||||
grd.addColorStop(0.7, "#F3F304");
|
||||
grd.addColorStop(0.9, "#F30404");
|
||||
|
||||
if (stat.target <= 3000){
|
||||
grd.addColorStop(0, "#33C433");
|
||||
grd.addColorStop(0.7, "#33C433");
|
||||
grd.addColorStop(0.8, "#F3F304");
|
||||
grd.addColorStop(0.92, "#F30404");
|
||||
} else if (stat.target <= 4000){
|
||||
grd.addColorStop(0, "#33C433");
|
||||
grd.addColorStop(0.5, "#33C433");
|
||||
grd.addColorStop(0.8, "#F3F304");
|
||||
grd.addColorStop(0.92, "#F30404");
|
||||
} else {
|
||||
grd.addColorStop(0, "#33C433");
|
||||
grd.addColorStop(0.3, "#33C433");
|
||||
grd.addColorStop(0.8, "#F3F304");
|
||||
grd.addColorStop(0.92, "#F30404");
|
||||
}
|
||||
|
||||
} else {
|
||||
// Higher values are red
|
||||
grd.addColorStop(0, "#F30404");
|
||||
@ -403,16 +443,17 @@
|
||||
//context.fillStyle = "#009933";
|
||||
//context.imageSmoothingEnabled = true;
|
||||
|
||||
yScale = height / stat.target;
|
||||
yScale = height / stat.max;
|
||||
|
||||
if (stat.data > stat.target) {
|
||||
stat.data = stat.target;
|
||||
if (stat.data > stat.max) {
|
||||
stat.data = stat.max;
|
||||
}
|
||||
|
||||
if (type == "packetloss" && stat.data == 0.0) {
|
||||
stat.data = 0.1;
|
||||
}
|
||||
|
||||
|
||||
var x = width - 1;
|
||||
var y = height - stat.data * yScale;
|
||||
var w = 1;
|
||||
|
||||
@ -37,6 +37,7 @@ body {
|
||||
}
|
||||
#container-3{
|
||||
background-image:unset;
|
||||
overflow:hidden!important;
|
||||
}
|
||||
.column>h2{
|
||||
color:white!important;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user