elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-11 13:48:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Steve Seguin 2022-05-21 02:11:32 -04:00 committed by GitHub
parent 2aa607e408
commit c145547454
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 2255 additions and 1386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

246
index.html
View File

@ -55,7 +55,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=155" />
<link rel="stylesheet" href="./main.css?ver=159" />
<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" /> -->
@ -80,7 +80,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=445"></script>
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=451"></script>
<input id="zoomSlider" type="range" style="display: none;" />
<div id="header">
@ -93,13 +93,13 @@
<input type="text" autocorrect="off" autocapitalize="none" id="joinroomID" name="joinroomID" size="22" placeholder="Join by Room Name here" alt="Enter a room name to join" title="Enter a room name to quick join" onkeyup="jumptoroom(event)"/>
<button onclick="jumptoroom();" role="button" aria-pressed="false" alt="Join room" title="Join room" >GO</button>
</div>
<div id="head5" class="advanced"></div>
<div id="head3" style="display: inline-block;" class="advanced">
<div id="head5" class="hidden"></div>
<div id="head3" style="display: inline-block;" class="hidden">
<font style="color: #888;" id="copythisurl"> &nbsp;
<span data-translate="copy-this-url">Copy this URL into an OBS "Browser Source"</span> <i style="color: #CCC;" class="las la-long-arrow-alt-right"></i> &nbsp;
</font>
</div>
<div id="head3a" style="display: inline-block;" class="advanced">
<div id="head3a" style="display: inline-block;" class="hidden">
<a
id="reshare"
data-drag="1"
@ -109,7 +109,7 @@
></a>
<i class="las la-paperclip" style="color: #DDD;" onclick="copyFunction(document.getElementById('reshare'), event);" onmouseover="this.style.cursor='pointer'"></i>
</div>
<div id="head4" style="display: inline-block;" class="advanced">
<div id="head4" style="display: inline-block;" class="hidden">
<font style="font-size: 68%; color: white;">
<span data-translate="you-are-in-the-control-center">Control center for room:</span>
@ -117,23 +117,23 @@
<span id="saveRoom" onclick="saveRoom(this)" style='cursor:pointer;margin-left:10px;' title="Will remember the room, prompting you the next time you visit if you wish to load this director's room again">💾</span>
</font>
</div>
<div id="head2" class="advanced" style="display: inline-block; text-decoration: none; font-size: 60%; color: white;">
<div id="head2" class="hidden" style="display: inline-block; text-decoration: none; font-size: 60%; color: white;">
<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="head7" class="advanced" data-translate="director-muted-you">The director has muted you.</div>
<div id="head6" class="hidden" data-translate="only-director-can-hear-you">Only the director can hear you currently.</div>
<div id="head7" class="hidden" data-translate="director-muted-you">The director has muted you.</div>
</div>
<div id="controlButtons" >
<div id="obsState" class="advanced" >ACTIVE</div>
<div id="obsState" class="hidden" >ACTIVE</div>
<div id="subControlButtons">
<div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="blindAllGuests(this, event)" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="advanced float" style="cursor: pointer;" >
<div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="blindAllGuests(this, event)" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i class="toggleSize las la-eye my-float"></i>
</div>
<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="nextQueue()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="advanced float" style="cursor: pointer;" >
<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="nextQueue()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="queuetoggle" class="toggleSize las la-stream my-float"></i>
<div id="queueNotification"></div>
</div>
@ -143,63 +143,63 @@
<div id="transferNotification"></div>
</div>
<div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleChat()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="advanced float" style="cursor: pointer;" >
<div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleChat()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="chattoggle" class="toggleSize las la-comment-alt my-float"></i>
<div id="chatNotification"></div>
</div>
<div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Mute the Speaker" onclick="toggleSpeakerMute()" tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="advanced float" style="cursor: pointer;" alt="Toggle the speaker output.">
<div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Mute the Speaker" onclick="toggleSpeakerMute()" tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" alt="Toggle the speaker output.">
<i id="mutespeakertoggle" class="toggleSize las la-volume-up my-float" style="position: relative; top: 0.5px;"></i>
</div>
<div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="advanced float" style="cursor: pointer;" alt="Toggle the mic">
<div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" alt="Toggle the mic">
<i id="mutetoggle" class="toggleSize las la-microphone my-float" style="position: relative; top: 0.5px;"></i>
</div>
<div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Disable the Camera" alt="Disable the Camera" onclick="toggleVideoMute()" tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="advanced float" style="cursor: pointer;">
<div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Disable the Camera" alt="Disable the Camera" onclick="toggleVideoMute()" tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;">
<i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-video my-float"></i>
</div>
<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 advanced" style="cursor: pointer;">
<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" 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 advanced" style="cursor: pointer;">
<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" 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 advanced" style="cursor: pointer;">
<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" style="cursor: pointer;">
<i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv my-float"></i>
</div>
<div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a website with your guests (IFRAME)" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float advanced" style="cursor: pointer;">
<div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a website with your guests (IFRAME)" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden" style="cursor: pointer;">
<i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-maximize my-float"></i>
</div>
<div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake advanced" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
<div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake hidden" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las my-float la-window-close" style="display: inline-block;"></i>
<div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
Stop Sharing Website
</div>
</div>
<div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cycle the Cameras" onclick="cycleCameras()" class="advanced float" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Cycle the Cameras">
<div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cycle the Cameras" onclick="cycleCameras()" class="hidden float" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Cycle the Cameras">
<i id="settingstoggle" class="toggleSize las la-sync-alt my-float"></i>
</div>
<div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Room Settings" onclick="toggleRoomSettings();" class="advanced float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu">
<div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Room Settings" onclick="toggleRoomSettings();" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu">
<i id="roomsettingstoggle" class="toggleSize las la-users-cog my-float"></i>
</div>
<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Your audio and video Settings" onclick="toggleSettings()" class="advanced float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu">
<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Your audio and video Settings" onclick="toggleSettings()" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu">
<i id="settingstoggle" class="toggleSize las la-cog my-float"></i>
</div>
<div id="hangupbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" alt="Hangup the Call" onclick="hangup()" class="advanced float" tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
<div id="hangupbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" alt="Hangup the Call" onclick="hangup()" class="hidden float" tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
<i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
</div>
<div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-raised="0" title="Alert the host you want to speak" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="advanced float" style="cursor: pointer;">
<div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-raised="0" title="Alert the host you want to speak" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="hidden float" style="cursor: pointer;">
<i class="toggleSize my-float las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div>
<div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="advanced float" style="cursor: pointer;">
<div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="hidden float" style="cursor: pointer;">
<i class="toggleSize my-float las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
</div>
<span id="miniPerformer" style="pointer-events: auto;" class="advanced"></span>
<span id="rooms" class="advanced" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
<span id="miniPerformer" style="pointer-events: auto;" class="hidden"></span>
<span id="rooms" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cancel the Director's Video/Audio" onclick="hangup2()" class="advanced float" tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Disconnect Direcotor's cam">
<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cancel the Director's Video/Audio" onclick="hangup2()" class="hidden float" tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Disconnect Direcotor's cam">
<i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
</div>
</div>
@ -368,7 +368,7 @@
<span data-translate="waiting-for-camera">Waiting for Camera to Load</span>
</button>
</span>
<div id="consentWarning" class="startupWarning advanced">
<div id="consentWarning" class="startupWarning hidden">
<i class="las la-exclamation-circle"></i>
<p><span data-translate="privacy-disabled">Privacy warning: The director will be able to remotely change your camera and microphone.</span></p>
</div>
@ -385,7 +385,7 @@
&nbsp;&nbsp;
<i class="las la-cog" style="font-size: 140%; vertical-align: middle;" aria-hidden="true"></i>
</span>
<div id="cameraTip1" class="cameraTip advanced">
<div id="cameraTip1" class="cameraTip hidden">
<i class="las la-info-circle"></i>
<p><span id="cameraTipContext1"></span></p>
</div>
@ -435,13 +435,13 @@
<i class="las la-headphones"></i><span data-translate="select-output-source"> Audio Output Destination:
</span><button onclick="playtone()" class="white" style="margin:0 0 0 15px;padding: 2px 10px 0px 10px;" type="button">Test</button></div>
<select id="outputSource" ></select>
<div id="headphoneTip1" class="cameraTip advanced">
<div id="headphoneTip1" class="cameraTip hidden">
<i class="las la-info-circle"></i>
<p><span id="headphoneTipContext1"></span></p>
</div>
</span>
<div id="avatarDiv" class="advanced">
<div id="avatarDiv" class="hidden">
<div style="text-align: left;display: inline-block;">
<i class="las la-robot"></i><span data-translate="select-avatar-image"> Default Avatar / Placeholder Image: </span>
</div>
@ -451,7 +451,7 @@
<i class="las la-minus-circle" style="font-size: 3em;"></i><br />No Image Selected
<button onclick="changeAvatarImage(event, this)" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;"></button>
</label>
<label style="width:130px;display:inline-block;margin:0 1px; text-align: center; cursor:pointer;">
<label style="width:130px;display:inline-block;margin:10px 1px; text-align: center; cursor:pointer;">
<i class="las la-hdd" style="font-size: 3em;"></i><br />Select Local Image
<input type="file" onchange="changeAvatarImage(event, this)" accept="image/*" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;">
</label>
@ -479,12 +479,7 @@
</span>
<div id="selectImageTFLITE" style="display:none;margin-top:10px;">
<img src="./media/bg_sample.webp" loading="lazy" style="max-width:130px;max-height:73.5px;display:inline-block;margin:10px;cursor:pointer;" onclick="changeTFLiteImage(event, this);"/>
<img src="./media/bg_sample2.webp" loading="lazy" style="max-width:130px;max-height:73.5px;display:inline-block;margin:10px;cursor:pointer;" onclick="changeTFLiteImage(event, this);"/>
<label style="width:130px;display:inline-block;margin:0 1px; text-align: center; cursor:pointer;">
<i class="las la-hdd" style="font-size: 3em;"></i><br />Select Local Image
<input type="file" onchange="changeTFLiteImage(event, this)" accept="image/*" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;">
</label>
</div>
<div id="selectEffectAmount" style="display:none;margin-top:10px;">
<label for="selectEffectAmountInput" style="width: 113px;display: inline-block;">Effect amount:</label>
@ -500,7 +495,7 @@
margin: 0 6px;"/>
</span>
<div id="SafariWarning" class="startupWarning advanced">
<div id="SafariWarning" class="startupWarning hidden">
<i class="las la-exclamation-circle"></i>
<p><span data-translate="use-chrome-instead">Consider using a Chromium-based browser instead.<br />
Safari is more prone to having audio issues</span></p>
@ -552,7 +547,7 @@
</form>
</span>
</center>
<div id="consentWarning2" class="startupWarning advanced">
<div id="consentWarning2" class="startupWarning hidden">
<i class="las la-exclamation-circle"></i>
<p><span data-translate="privacy-disabled">Privacy warning: The director will be able to remotely access your camera and microphone if you continue.</span></p>
</div>
@ -711,7 +706,7 @@
<div id="dropButton" onclick="dropDownButtonAction()" title="More Options"><i class="las la-chevron-down" ></i></div>
<div id="container-5" class="column columnfade pointer rounded card advanced" style=" overflow-y: auto;">
<div id="container-5" class="column columnfade pointer rounded card hidden" style=" overflow-y: auto;">
<h2><span data-translate="share-local-video-file">Stream Media File</span></h2>
<div class="container-inner">
@ -723,11 +718,11 @@
<h1>Warning</h1>
<p>Media file streaming is still quite experimental. Please do not rely on it heavily for your productions. Feedback welcome.</p>
</div>
<div class='warning message-card advanced' id='chrome_warning_fileshare'>
<div class='warning message-card hidden' id='chrome_warning_fileshare'>
<h1>Chrome/Edge users</h1>
<p>Keep this tab visible, else the video playback will stop</p>
</div>
<div class='warning message-card advanced' id='safari_warning_fileshare'>
<div class='warning message-card hidden' id='safari_warning_fileshare'>
<h1>Safari Users</h1>
<p>Safari does not support this feature. Consider Chrome or Firefox instead.</p>
</div>
@ -745,7 +740,7 @@
</div>
</div>
<div id="container-6" class="column columnfade pointer rounded card advanced" style=" overflow-y: auto;">
<div id="container-6" class="column columnfade pointer rounded card hidden" style=" overflow-y: auto;">
<h2><span data-translate="share-website-iframe">Share Website</span></h2>
<i style="margin-top:30px;font-size:560%;overflow:hidden;" class="las la-broadcast-tower"></i>
<div class="container-inner">
@ -777,32 +772,37 @@
</div>
<div id="container-7" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = './speedtest.html';">
<div id="container-7" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = './speedtest.html';">
<h2><span data-translate="run-a-speed-test">Run a Speed Test</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-tachometer-alt"></i>
</div>
<div id="container-8" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = './mixer.html';">
<div id="container-8" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = './mixer.html';">
<h2><span data-translate="try-the-mixer-out">Try out the Mixer</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-blender"></i>
</div>
<div id="container-9" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = 'https://guides.vdo.ninja';">
<div id="container-9" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = 'https://guides.vdo.ninja';">
<h2><span data-translate="read-the-guides">Basic Usage Guides</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-book-open"></i>
</div>
<div id="container-10" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = 'https://docs.vdo.ninja';">
<div id="container-13" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = 'https://linkgen.vdo.ninja';">
<h2><span data-translate="wizard-link-generator">Wizard Link Generator</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-hat-wizard"></i>
</div>
<div id="container-10" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = 'https://docs.vdo.ninja';">
<h2><span data-translate="get-full-documentation">Full Documentation</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-info"></i>
</div>
<div id="container-11" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = 'https://github.vdo.ninja';">
<div id="container-11" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = 'https://github.vdo.ninja';">
<h2><span data-translate="get-the-source-code">Source Code</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-code-branch"></i>
</div>
<div id="container-12" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = 'https://docs.vdo.ninja/getting-started/sponsor';">
<div id="container-12" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = 'https://docs.vdo.ninja/getting-started/sponsor';">
<h2><span data-translate="show-your-support">Show Your Support</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-heartbeat"></i>
</div>
@ -829,7 +829,8 @@
</i>
<br />
<li>
Windows users, upgrading to OBS 27.2 or newer will fix video glitching issues caused by network packet loss. <a href='https://github.com/obsproject/obs-studio/releases' target="_blank">Grab the newest OBS version here</a>.
If the video fails to load in OBS Studio, where the browser source remains blank, try disabling hardware-acceleration or
<a href='https://docs.vdo.ninja/common-errors-and-known-issues/obs.ninja-doesnt-show-up-in-obs-or-is-choppy' title="link out to the vdo.ninja help guide for OBS Studio" target="_blank">refer to this help guide</a> for more.
</li>
<li>
Samsung smartphones (A-series) may fail to publish video with some mobile browsers; try using Firefox Mobile or the native <a href='https://docs.vdo.ninja/getting-started/native-mobile-app-versions#android-download-link'>Android app</a> in these cases.
@ -845,7 +846,7 @@
<font style="color:#daad09;">Welcome to VDO Ninja! We've rebranded! Nothing else is changing and we're staying 100% free.</font>
</h4>
<br />
Site updated April 2022. <a target="_blank" href="https://docs.vdo.ninja/releases/v21">v21 release notes</a>. If having new issues, the previous version <a href="https://vdo.ninja/v20/">is here</a>, and the <a href="https://vdo.ninja/beta/">upcoming next version is here</a>; please test it when possible.
Site updated May 2022. <a target="_blank" href="https://docs.vdo.ninja/releases/v21">v21 release notes</a>. If having new issues, the previous version <a href="https://vdo.ninja/v20/">is here</a>, and the <a href="https://vdo.ninja/beta/">upcoming next version is here</a>; please test it when possible.
<br />
<br />
<h3>
@ -1250,13 +1251,13 @@
</div></div>
</div>
<div id="hiddenElements"></div>
<div id="overlayClockContainer" data-initial="600" class="advanced"><span id="overlayClock"></span></div>
<div id="overlayClockContainer" data-initial="600" class="hidden"><span id="overlayClock"></span></div>
<div id="overlayMsgs" onclick="this.innerHTML = '';" style="display:none"></div>
<div id="bigPlayButton" onclick="this.innerHTML = '';" style="display:none"></div>
<div id="controls_blank" style="display: none;">
<div class="controlsGrid">
<button data-action-type="forward" class="mainonly" data-value="0" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
<button data-action-type="forward" class="mainonly advanced" data-value="0" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
<i class="las la-paper-plane"></i>
<span data-translate="forward-to-room">Transfer</span>
</button>
@ -1270,22 +1271,23 @@
<span data-translate="disconnect-guest" >Hangup</span>
</button>
<button data-action-type="solo-chat" class="mainonly" title="Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private." onclick="session.toggleSoloChat(this.dataset.UUID, event);">
<button data-action-type="solo-chat" class="mainonly advanced" title="Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private." onclick="session.toggleSoloChat(this.dataset.UUID, event);">
<span data-translate="voice-chat"><i class="las la-microphone" style="color:#090"></i> Solo Talk</span>
</button>
<button data-action-type="addToScene" data-scene="1" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event, 1);">
<button data-action-type="addToScene" class="advanced" data-scene="1" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event, 1);">
<i class="las la-plus-square" style="color:#060"></i>
<span data-translate="add-to-scene">add to scene 1</span>
</button>
<button data-action-type="solo-video" style="text-shadow: 0px 0px yellow;" data-value="0" title="Solo this video everywhere" onclick="requestInfocus(this);">
<button data-action-type="solo-video" class="advanced" style="text-shadow: 0px 0px yellow;" data-value="0" title="Solo this video everywhere" onclick="requestInfocus(this);">
<i class="las la-user"></i>
<span data-translate="solo-video">Highlight guest</span>
</button>
<font class="tooltip" style="height: 0; border: 0;">
<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest" oninput="remoteVolumeUI(this)" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" onchange="remoteVolume(this);" style="grid-column: 2; margin:5px; width: 93%; position: relative;top: 0.6em; background-color:#fff0;"/><span class="tooltiptext" style='float: right; overflow: auto; left: 40px; width: 3em; top: -13px; margin: 0; position:relative;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span>
<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest" oninput="remoteVolumeUI(this)" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" onchange="remoteVolume(this);" style="grid-column: 2; margin:5px; width: 93%; position: relative;top: 0.6em; background-color:#fff0;"/>
<span class="tooltiptext" style='float: right; overflow: auto; left: 40px; width: 3em; top: -13px; margin: 0; position:relative;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span>
</font>
<button data-action-type="mute-guest" data-value="0" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
@ -1294,10 +1296,13 @@
</button>
<!---- /////// BREAK //////// -->
<span class="hideDropMenu" onclick="toggleByDataset('1');getById('chevarrow3').classList.toggle('bottom');getById('chevarrow3').classList.toggle('right');"><i id="chevarrow3" style="padding:0px 7px 0 3px;" class="chevron right" aria-hidden="true"></i><span data-translate="More-scene-options">More scene options</span></span>
<span class="hideDropMenu" onclick="toggleByDataset('1');getById('chevarrow3').classList.toggle('bottom');getById('chevarrow3').classList.toggle('right');">
<i id="chevarrow3" style="padding:0px 7px 0 3px;" class="chevron right" aria-hidden="true"></i>
<span data-translate="More-scene-options">More scene options</span>
</span>
<span class="hideDropMenu" style="grid-column: 2;"></span>
<button data-action-type="addToScene" class="hidden" data-cluster="1" data-scene="2" title="Add this Video to any remote '&scene=2'" onclick="directEnable(this, event, 2);">
<button data-action-type="addToScene" class="hidden advanced" data-cluster="1" data-scene="2" title="Add this Video to any remote '&scene=2'" onclick="directEnable(this, event, 2);">
<i class="las la-plus-square" style="color:#060"></i>
<span data-translate="add-to-scene2">add to scene 2</span>
</button>
@ -1307,7 +1312,7 @@
<span data-translate="mute-scene" >mute in scene</span>
</button>
<span class="hidden" data-cluster="1" data-action-type="sceneCluster1">
<span class="hidden advanced" data-cluster="1" data-action-type="sceneCluster1">
<button style="width: 35.2px" data-action-type="addToScene" data-scene="3" title="Add to Scene 3" onclick="directEnable(this, event, 3);">
<span >S3</span>
</button>
@ -1319,7 +1324,7 @@
</button>
</span>
<span class="hidden" data-cluster="1" data-action-type="sceneCluster2">
<span class="hidden advanced" data-cluster="1" data-action-type="sceneCluster2">
<button style="width: 35.2px" data-action-type="addToScene" data-scene="6" title="Add to Scene 6" onclick="directEnable(this, event, 6);">
<span >S6</span>
</button>
@ -1331,7 +1336,7 @@
</button>
</span>
<button class="hidden" data-cluster="1" data-action-type="force-keyframe" style=" background-image: linear-gradient(90deg, #C9F0FF 0%, #FFDFB9 39%, #FFDFDF 70%, #D9FFEC 100%);" data-value="0" title="Force the remote sender to issue a keyframe to all scenes, fixing Pixel Smearing issues." onclick="requestKeyframeScene(this);">
<button class="hidden advanced" data-cluster="1" data-action-type="force-keyframe" style=" background-image: linear-gradient(90deg, #C9F0FF 0%, #FFDFB9 39%, #FFDFDF 70%, #D9FFEC 100%);" data-value="0" title="Force the remote sender to issue a keyframe to all scenes, fixing Pixel Smearing issues." onclick="requestKeyframeScene(this);">
<span data-translate="force-keyframe">Rainbow Puke Fix</span>
</button>
@ -1340,25 +1345,26 @@
<span data-translate="stats-remote"> Scene Stats</span>
</button>
<span class="graphSection hidden" data-cluster="1" data-action-type="stats-graphs-bitrate" data-value="0">
<span class="hidden" data-no-scenes="true">No scenes active</span>
<span class="graphSection hidden" data-action-type="stats-graphs-bitrate" data-value="0">
<span class="hidden" data-message="true" data-no-scenes="true">No scenes active</span>
</span>
<span class="graphSection hidden" data-cluster="1" data-action-type="stats-graphs-details" data-value="0">
<span class="graphSection hidden" data-action-type="stats-graphs-details" data-value="0">
<span class="hidden" data-no-scenes="true"></span>
<span data-action-type="stats-graphs-details-container" class="hidden">
<span class="hidden" data-scene-name="true">scene</span>
<span class="hidden" data-bitrate="true">bitrate (kbps)</span>
<span class="hidden" data-resolution="true">resolution</span>
<span class="hidden" data-video-codec="true">video codec</span>
<span class="hidden" style="word-break: break-all;" data-video-codec="true">video codec</span>
</span>
</span>
<!---- /////// BREAK //////// -->
<span class="hideDropMenu" onclick="toggleByDataset('2');getById('chevarrow4').classList.toggle('bottom');getById('chevarrow4').classList.toggle('right');"><i id="chevarrow4" class="chevron right" aria-hidden="true" style="padding:0px 7px 0 3px;" ></i><span data-translate="additional-controls">Additional controls</span></span>
<span class="hideDropMenu" style="grid-column: 2;" ></span>
<span class="hideDropMenu" onclick="toggleByDataset('2');getById('chevarrow4').classList.toggle('bottom');getById('chevarrow4').classList.toggle('right');">
<i id="chevarrow4" class="chevron right" aria-hidden="true" style="padding:0px 7px 0 3px;" ></i>
<span data-translate="additional-controls">Additional controls</span>
</span>
<span class="hideDropMenu" style="grid-column: 2;" ></span>
<button class="hidden" data-cluster="2" data-action-type="hide-guest" title="Hide this guest everywhere" onclick="remoteMuteVideo(this, event);">
<i class="las la-video-slash"></i>
<span data-translate="hide-guest" >hide guest</span>
@ -1385,7 +1391,7 @@
</button>
</span>
<span class="hidden" data-cluster="2" data-action-type="ordering">
<span class="hidden advanced" data-cluster="2" data-action-type="ordering">
<button style="width:34px;" data-action-type="order-down" title="Shift this Video Down in Order" onclick="changeOrder(-1,this.dataset.UUID);">
<span data-translate="order-down"><i class="las la-minus"></i></span>
</button>
@ -1398,12 +1404,12 @@
</button>
</span>
<button class="hidden mainonly" data-cluster="2" data-action-type="change-url" data-value="0" title="Remotely reload the guest's page with a new URL" onclick="directPageReload(this, event);">
<button class="hidden mainonly advanced" data-cluster="2" data-action-type="change-url" data-value="0" title="Remotely reload the guest's page with a new URL" onclick="directPageReload(this, event);">
<i class="las la-sync"></i>
<span data-translate="change-url">Change URL</span>
</button>
<button class="hidden mainonly" data-cluster="2" data-action-type="change-params" style="display:none" title="Change user parameters" onclick="promptUser('transferSettingsTemplate', this.dataset.UUID);">
<button class="hidden mainonly advanced" data-cluster="2" data-action-type="change-params" style="display:none" title="Change user parameters" onclick="promptUser('transferSettingsTemplate', this.dataset.UUID);">
<i class="las la-cog"></i>
<span data-translate="change-params">URL Params</span>
</button>
@ -1417,7 +1423,7 @@
<span data-translate="record-remote"> Record Remote</span>
</button>
<button class="hidden mainonly" data-cluster="2" data-action-type="open-file-share" data-value="0" title="Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link." onclick="requestFileUpload(this)">
<button class="hidden mainonly advanced" data-cluster="2" data-action-type="open-file-share" data-value="0" title="Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link." onclick="requestFileUpload(this)">
<i class="las la-file-upload"></i>
<span data-translate="request-upload"> Request File</span>
</button>
@ -1428,7 +1434,7 @@
</button>
<span class="hidden" data-cluster="2">
<span class="hidden advanced" data-cluster="2">
<button style="width:35.2px;" data-action-type="add-channel" title="Set to Audio Channel 1" onclick="changeChannelOffset(this.dataset.UUID, 0);">
<span >C1</span>
@ -1441,7 +1447,7 @@
</button>
</span>
<span class="hidden" data-cluster="2">
<span class="hidden advanced" data-cluster="2">
<button style="width:35.2px;" data-action-type="add-channel" title="Set to Audio Channel 4" onclick="changeChannelOffset(this.dataset.UUID,3);">
<span >C4</span>
@ -1454,8 +1460,7 @@
</button>
</span>
<span class="hidden" data-cluster="2">
<span class="hidden advanced" data-cluster="2">
<button style="width:35.2px;" data-action-type="toggle-group" data-value="1" title="Add/remove from group 1" onclick="changeGroup(this);">
<span >G1</span>
</button>
@ -1467,7 +1472,7 @@
</button>
</span>
<span class="hidden" data-cluster="2">
<span class="hidden advanced" data-cluster="2">
<button style="width:35.2px;" data-action-type="toggle-group" data-value="4" title="Add/remove from group 4" onclick="changeGroup(this);">
<span >G4</span>
@ -1636,7 +1641,7 @@
<select id="outputSource3" ></select>
</span>
<div id="avatarDiv3" class="advanced">
<div id="avatarDiv3" class="hidden">
<div style="text-align: left;display: inline-block;">
<i class="las la-robot"></i><span data-translate="select-avatar-image"> Default Avatar / Placeholder Image: </span>
</div>
@ -1646,7 +1651,7 @@
<i class="las la-minus-circle" style="font-size: 3em;"></i><br />No Image Selected
<button onclick="changeAvatarImage(event, this)" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;"></button>
</label>
<label style="width:130px;display:inline-block;margin:0 1px; text-align: center; cursor:pointer;">
<label style="width:130px;display:inline-block;margin:0 1px; text-align: center; vertical-align: top;cursor:pointer;">
<i class="las la-hdd" style="font-size: 3em;"></i><br />Select Local Image
<input type="file" onchange="changeAvatarImage(event, this)" accept="image/*" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;">
</label>
@ -1671,12 +1676,7 @@
<i class="las la-info-circle"></i>
</span>
<div id="selectImageTFLITE3" style="display:none;margin-top:10px;">
<img src="./media/bg_sample.webp" loading="lazy" style="max-width:130px;max-height:73.5px;display:inline-block;margin:10px;cursor:pointer;" onclick="changeTFLiteImage(event, this);"/>
<img src="./media/bg_sample2.webp" loading="lazy" style="max-width:130px;max-height:73.5px;display:inline-block;margin:10px;cursor:pointer;" onclick="changeTFLiteImage(event, this);"/>
<label style="width:130px;display:inline-block;margin:0 10px; text-align: center; cursor:pointer;">
<i class="las la-hdd" style="font-size: 3em;"></i><br /><span data-translate="select-local-image">Select Local Image</span>
<input type="file" accept="image/*" onchange="changeTFLiteImage(event, this)" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;">
</label>
</div>
<div id="selectEffectAmount3" style="display:none;margin-top:10px;">
<label for="selectEffectAmountInput" style="width: 113px;display: inline-block;">Effect amount:</label>
@ -1689,7 +1689,7 @@
<button id="pIpStartButton" style="width: 135px; background-color:#EFEFEF;padding:20px;text-align:center;display:none;"><b>Preview PiP VIdeo</b><br /><i style="padding:5px; font-size:300%;color:black;" class="las la-compress-arrows-alt"></i></button>
<div class="advanced" id="grabDirectorSoloLinkParent" title="The solo view link of the Director's video."><i class="las la-user"></i> Director's solo link:<a onclick="copyFunction(this,event)" data-drag="1" draggable="true" id="grabDirectorSoloLink" class="task" ></a></div>
<div class="hidden" id="grabDirectorSoloLinkParent" title="The solo view link of the Director's video."><i class="las la-user"></i> Director's solo link:<a onclick="copyFunction(this,event)" data-drag="1" draggable="true" id="grabDirectorSoloLink" class="task" ></a></div>
<br />
<button onclick="toggleSettings()" class="toggleSettings"><i class="chevron right" style="font-size:150%;top:3px;position:relative;"></i> <b><span data-translate="close-settings">Close Settings</span></b></button>
@ -1756,7 +1756,7 @@
<span data-translate="show-controls-video">Show control bar</span>
</a>
</li>
<li class="context-menu__item advanced">
<li class="context-menu__item hidden">
<a href="#" class="context-menu__link" data-action="HideControls">
<i class="las la-external-link"></i>
<span data-translate="hide-controls-video">Hide control bar</span>
@ -1774,7 +1774,7 @@
<span data-translate="full-window">Full-window</span>
</a>
</li>
<li class="context-menu__item advanced">
<li class="context-menu__item hidden">
<a href="#" class="context-menu__link" data-action="ShrinkWindow">
<i class="las la-external-link"></i>
<span data-translate="shrink-window">Shrink-window</span>
@ -1786,7 +1786,7 @@
<span data-translate="pause-stream">Pause stream</span>
</a>
</li>
<li class="context-menu__item advanced">
<li class="context-menu__item hidden">
<a href="#" class="context-menu__link" data-action="UnPause">
<i class="las la-external-link"></i>
<span data-translate="resume-stream">Resume stream</span>
@ -1798,7 +1798,7 @@
<span data-translate="record-to-disk">Record to disk</span>
</a>
</li>
<li class="context-menu__item advanced">
<li class="context-menu__item hidden">
<a href="#" class="context-menu__link" data-action="StopRecording">
<i class="las la-external-link"></i>
<span data-translate="stop-record-to-disk">Stop Recording</span>
@ -1810,18 +1810,24 @@
<span data-translate="show-video-stats">Show Stats</span>
</a>
</li>
<li class="context-menu__item advanced" id="RemoteHangupContextOption">
<li class="context-menu__item hidden" id="RemoteHangupContextOption">
<a href="#" class="context-menu__link" data-action="RemoteHangup">
<i class="las la-external-link"></i>
<span data-translate="remote-hangup-connection">Remote Hang-up</span>
</a>
</li>
<li class="context-menu__item advanced" id="RemoteReloadContextOption">
<li class="context-menu__item hidden" id="RemoteReloadContextOption">
<a href="#" class="context-menu__link" data-action="RemoteReload">
<i class="las la-external-link"></i>
<span data-translate="remote-reload-connection">Remote Reload Page</span>
</a>
</li>
<li class="context-menu__item hidden">
<hr />
<span href="#" class="context-menu__tip" data-action="TipRightClick">
<small><i data-translate="hold-ctrl">tip: <b>CTRL</b>(⌘) + <b>Click</b> for alt-menu</i></small>
</span>
</li>
</ul>
</nav>
@ -1936,17 +1942,31 @@
</div>
</div>
<div id="signalMeterTemplate" class="signal-meter advanced" data-cpu="0" data-level="0">
<div id="signalMeterTemplate" class="signal-meter hidden" data-cpu="0" data-level="0">
<i class="las la-signal"></i>
<i class="las la-fire-alt"></i>
</div>
<div id="batteryMeterTemplate" class="battery advanced" data-plugged="1">
<div id="batteryMeterTemplate" class="battery hidden" data-plugged="1">
<div class="battery-level" style="height:100%;"></div>
<div class="battery-charging">+</div>
</div>
<div id="voiceMeterTemplate" class="video-meter advanced">
<div id="slotPicker" class="hidden">
<div data-slot="0">Unset</div>
<div data-slot="1">Slot 1</div>
<div data-slot="2">Slot 2</div>
<div data-slot="3">Slot 3</div>
<div data-slot="4">Slot 4</div>
<div data-slot="5">Slot 5</div>
<div data-slot="6">Slot 6</div>
<div data-slot="7">Slot 7</div>
<div data-slot="8">Slot 8</div>
<div data-slot="9">Slot 9</div>
<div data-slot="10">Slot 10</div>
<div class="battery-charging">+</div>
</div>
<div id="voiceMeterTemplate2" class="video-meter2 advanced">
<div id="voiceMeterTemplate" class="video-meter hidden">
</div>
<div id="voiceMeterTemplate2" class="video-meter2 hidden">
</div>
<div id="muteStateTemplate" style="display:none;" class="video-mute-state">
<i class="las la-microphone-slash"></i>
@ -1957,6 +1977,12 @@
<div id="raisedHandTemplate" style="display:none;" class="video-mute-state raisedHand">
<i class="las la-hand-paper"></i>
</div>
<div id="selectImageTFLITE_contents" style="display:flex;overflow-x:auto;" class="hidden">
<label style="min-width:100px;display:inline-block;margin:0px 1px; text-align:center; cursor:pointer;">
<i class="las la-hdd" style="font-size: 3em;"></i><br /><span data-translate="select-local-image">Select Local Image</span>
<input type="file" accept="image/*" onchange="changeTFLiteImage(event, this)" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;">
</label>
</div>
<audio id="testtone" style="display:none;" preload="none">
<source src="./media/tone.mp3" type="audio/mpeg">
<source src="./media/tone.ogg" type="audio/ogg">
@ -1972,7 +1998,6 @@
<div>See the
<a style="text-decoration: none; color: blue;" target="_blank" href="https://docs.vdo.ninja/advanced-settings">documentation</a> for more options and info.
</div>
</div>
<div id="messagePopup" class="popup-message"></div>
@ -2014,6 +2039,10 @@
<br />
</u>
</div>
<div id="meshcastMenu" class="hidden">
Publishing Region: <select name="edgelist" id="edgelist" onchange="reloadEdge();" title="Select a location that is closest to both you and your audience."></select>
</div>
<script>
if (window.location.hostname.indexOf("www.obs.ninja") == 0) {
@ -2065,7 +2094,7 @@
// session.audiobitrate // int in kbps
// session.view // "xxxx" ; the stream ID or a list of Stream IDs to Connect to. Not the same as &noaudio/&novideo. Set to "" (empty) if you don't wish to connect to any.
// session.remote // See docs, but allows for remote stats monitoring and remote focus/zoom control
// session.optimize // Whether to optimize invisible scenes in OBS. See docs.vdo.ninja
// session.optimize // Whether to optimize invisible scenes in OBS. See docs.vdo.ninja. Setting to 0 will pause the video/audio when not visible in OBS
// session.disableOBS // If true, will disable any OBS-specific events/functions.
// session.noaudio // False by default, otherwise specify a list [] of stream IDs to allow. Listing none allows no incoming audio streams
// session.novideo // False by default, otherwise specify a list [] of stream IDs to allow. Listing none allows no incoming video streams
@ -2092,13 +2121,14 @@
// session.lowBitrateCutoff = 300; // Set a minimum bitrate (in kbps) before the stream is hidden. Useful for IRL streams maybe
// session.apiserver = "wss://api.vdo.ninja:443"; // specifiy a custom websocket API URL.
// session.darkmode = false; // enable or disable the dark style theme as the default
// 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=320"></script>
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=327"></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=348"></script>
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=353"></script>
</body>
</html>

785
lib.js
View File

File diff suppressed because it is too large Load Diff

1483
main.css
View File

File diff suppressed because it is too large Load Diff

257
main.js
View File

@ -125,7 +125,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (!(session.cleanOutput)){
window.focus();
session.sticky = confirm(getStorage("settings"));
session.sticky = confirm("Would you like to load your previous session?\n\nThis will redirect you to: "+getStorage("settings"));
if (!session.sticky) {
setStorage("settings", "", 0);
log("deleting cookie as user said no");
@ -168,11 +168,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) {
try {
getById("electronDragZone").style.cursor="grab";
const ipcRenderer = require('electron').ipcRenderer;
if (!ipcRenderer){
ipcRenderer = require('electron').ipcRenderer;
}
window.prompt = function(title, val){
return ipcRenderer.sendSync('prompt', {title, val});
return ipcRenderer.sendSync('prompt', {title, val}); // call if needed in the future
};
ipcRenderer.sendSync('prompt', {title, val});
//ipcRenderer.sendSync('prompt', {title, val}); // call now -- but why?
} catch(e){}
}
@ -200,6 +202,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("mutebutton").style.setProperty("display", "none", "important");
}
if (urlParams.has('novice') ) {
document.documentElement.style.setProperty('--advanced-mode', "none"); // hide advanced items
}
if (urlParams.has('bgimage')) { // URL or data:base64 image. Becomes local to this viewer only. This is like &avatar, but slightly different. Just CSS in this case
var avatarImg = urlParams.get('bgimage') || false;
if (avatarImg){
@ -272,7 +278,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
log("MAKE DRAGGABLE");
delayedStartupFuncs.push([makeDraggableElement, document.getElementById("subControlButtons")]);
if (SafariVersion && !ChromeVersion){ // if desktop Safari, so macOS, give a note saying it sucks
getById("SafariWarning").classList.remove("advanced");
getById("SafariWarning").classList.remove("hidden");
}
}
@ -318,7 +324,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
if (urlParams.has('meshcast')) {
session.meshcast = urlParams.get('meshcast') || "both";
session.meshcast = urlParams.get('meshcast') || "any";
}
@ -404,7 +410,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.rooms = urlParams.get('rooms').split(",").map(function(e) {
return sanitizeRoomName(e);
});
getById("rooms").classList.remove('advanced');
getById("rooms").classList.remove('hidden');
}
if (urlParams.has('showdirector') || urlParams.has('sd')) {
@ -540,22 +546,22 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.screenshare = urlParams.get('screenshare') || urlParams.get('ss');
}
} else if (urlParams.has('fileshare') || urlParams.has('fs')) {
getById("container-5").classList.remove('advanced');
getById("container-5").classList.remove('hidden');
getById("container-5").classList.add("skip-animation");
getById("container-5").classList.remove('pointer');
if (SafariVersion){
getById("safari_warning_fileshare").classList.remove('advanced');
getById("safari_warning_fileshare").classList.remove('hidden');
} else if (!Firefox){
getById("chrome_warning_fileshare").classList.remove('advanced');
getById("chrome_warning_fileshare").classList.remove('hidden');
}
} else if (directorLanding) {
getById("container-1").classList.remove('advanced');
getById("container-1").classList.remove('hidden');
getById("container-1").classList.add("skip-animation");
getById("container-1").classList.remove('pointer');
} else if (urlParams.has('website') || urlParams.has('iframe')) {
getById("container-6").classList.remove('advanced');
getById("container-6").classList.remove('hidden');
getById("container-6").classList.add("skip-animation");
getById("container-6").classList.remove('pointer');
session.website = urlParams.get('website') || urlParams.get('iframe') || false;
@ -628,7 +634,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.directorBlindButton=true; // false == true in this case.
}
if (session.directorBlindButton){
getById("blindAllGuests").classList.remove("advanced");
getById("blindAllGuests").classList.remove("hidden");
}
if (urlParams.has('dpi') || urlParams.has('dpr')) {
@ -658,7 +664,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (session.speakerMuted){
getById("mutespeakertoggle").className = "las la-volume-mute my-float toggleSize";
//getById("mutespeakerbutton").className="advanced float2 red";
//getById("mutespeakerbutton").className="hidden float2 red";
getById("mutespeakerbutton").classList.add("red");
getById("mutespeakerbutton").classList.add("float2");
getById("mutespeakerbutton").classList.remove("float");
@ -682,16 +688,16 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.chatbutton = false;
} else {
session.chatbutton = true;
getById("chatbutton").classList.remove("advanced");
getById("chatbutton").classList.remove("hidden");
}
}
if (session.screenshare !== false) {
if (session.introButton){
getById("container-3").className = 'column columnfade advanced'; // Hide screen share
getById("head1").className = 'advanced';
getById("container-3").className = 'column columnfade hidden'; // Hide screen share
getById("head1").className = 'hidden';
} else {
getById("container-3").className = 'column columnfade advanced'; // Hide webcam
getById("container-3").className = 'column columnfade hidden'; // Hide webcam
getById("container-2").classList.add("skip-animation");
getById("container-2").classList.remove('pointer');
}
@ -815,6 +821,15 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
if (urlParams.has('nopush') || urlParams.has('noseed') || urlParams.has('viewonly') || urlParams.has('viewmode')) { // this is like a scene; Seeding is disabled. Can be used with &showall to show all videos on load
session.doNotSeed=true;
session.scene = null; // not a scene, but sorta. false vs null makes a difference here.
session.videoDevice = 0;
session.audioDevice = 0;
session.dataMode = true; // thios will let us connect
// session.showall = true; // this can be used to SHOW the videos. (&showall)
}
if (urlParams.has('scene') || urlParams.has('scn')) {
session.scene = urlParams.get('scene') || urlParams.get('scn') || 0;
if (typeof session.scene === "string"){
@ -827,6 +842,22 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.audioMeterGuest = false;
}
if (urlParams.has('datamode') || urlParams.has('dataonly')) { // this disables all media in/out.
session.cleanOutput=true;
session.videoDevice = 0;
session.audioDevice = 0;
//session.autostart = true;
session.novideo = [];
session.noaudio = [];
session.noiframe = [];
//session.webcamonly = true;
session.dataMode = true;
}
if (urlParams.has('autoadd')) { // the streams we want to view; if set, but let blank, we will request no streams to watch.
session.autoadd = urlParams.get('autoadd') || null; // this value can be comma seperated for multiple streams to pull
@ -931,8 +962,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
document.getElementById("defaultAvatar2").src = avatar;
}
document.getElementById("avatarDiv3").classList.remove("advanced");
document.getElementById("avatarDiv").classList.remove("advanced");
document.getElementById("avatarDiv3").classList.remove("hidden");
document.getElementById("avatarDiv").classList.remove("hidden");
}
if (urlParams.has('prompt') || urlParams.has('validate') || urlParams.has('approve')){
@ -1451,6 +1482,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (urlParams.has('directorview') || urlParams.has('dv')){
session.directorView = true;
}
if (urlParams.has('graphs')){
session.allowGraphs = true;
}
if (urlParams.has('ruler') || urlParams.has('grid') || urlParams.has('thirds')) {
session.ruleOfThirds=true;
@ -1500,6 +1534,11 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (urlParams.has('controlroombitrate') || urlParams.has('crb')) {
session.controlRoomBitrate = true;
}
if (urlParams.has('minroombitrate') || urlParams.has('mrb')) {
session.minimumRoomBitrate = urlParams.get('minroombitrate') || urlParams.get('mrb') || false;
session.minimumRoomBitrate = parseInt(session.minimumRoomBitrate) || false;
}
if (urlParams.has('remote') || urlParams.has('rem')) {
log("remote ENABLED");
@ -1825,7 +1864,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("previewWebcam").classList.add("miconly");
if (session.audioDevice === 0) {
miniTranslate(getById("add_camera"), "click-start-to-join", "Click Start to Join");
getById("container-2").className = 'column columnfade advanced'; // Hide screen share on mobile
getById("container-2").className = 'column columnfade hidden'; // Hide screen share on mobile
getById("container-3").classList.add("skip-animation");
getById("container-3").classList.remove('pointer');
delayedStartupFuncs.push([previewWebcam]);
@ -1840,26 +1879,28 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (session.mobile){
getById("shareScreenGear").style.display = "none";
getById("dropButton").style.display = "none";
getById("container-2").className = 'column columnfade advanced'; // Hide screen share on mobile
getById("container-2").className = 'column columnfade hidden'; // Hide screen share on mobile
session.screensharebutton = false;
screensharesupport = false;
if (session.audioDevice!==0){
getById("flipcamerabutton").classList.remove("advanced");
getById("flipcamerabutton").classList.remove("hidden");
}
}
if (urlParams.has('consent')){
session.consent = true;
getById("consentWarning").classList.remove("advanced");
getById("consentWarning2").classList.remove("advanced");
getById("consentWarning").classList.remove("hidden");
getById("consentWarning2").classList.remove("hidden");
}
if (urlParams.has('autojoin') || urlParams.has('autostart') || urlParams.has('aj') || urlParams.has('as')) {
session.autostart = true;
}
if (session.autostart){
if (session.dataMode){
delayedStartupFuncs.push([joinDataMode]);
} else if (session.autostart){
if (session.screenshare!==false) {
delayedStartupFuncs.push([publishScreen]);
}
@ -2084,9 +2125,15 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (urlParams.has('scale')) {
if (urlParams.get('scale') == "false") {} else if (urlParams.get('scale') == "0") {} else if (urlParams.get('scale') == "no") {} else if (urlParams.get('scale') == "off") {} else {
log("Resolution scale requested");
session.scale = parseInt(urlParams.get('scale')) || 100;
session.scale = parseFloat(urlParams.get('scale')) || 100;
}
session.dynamicScale = false; // default true
} else if (urlParams.has('viewwidth') || urlParams.has('vw')) {
session.viewwidth = urlParams.get('viewwidth') || urlParams.get('vw') ||false;
session.dynamicScale = false; // default true
} else if (urlParams.has('viewheight') || urlParams.has('vh')) {
session.viewheight = urlParams.get('viewheight') || urlParams.get('vh') ||false;
session.dynamicScale = false; // default true
}
@ -2310,18 +2357,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.statsMenu = true;
}
if (urlParams.has('datamode') || urlParams.has('dataonly')) {
session.cleanOutput=true;
session.videoDevice = 0;
session.audioDevice = 0;
session.autostart = true;
session.novideo = [];
session.noaudio = [];
session.noiframe = [];
session.webcamonly = true;
session.dataMode = true;
}
if (urlParams.has('cleandirector') || urlParams.has('cdv')) {
session.cleanDirector = true;
}
@ -2650,12 +2685,18 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.style = 4;
} else if (parseInt(session.style) == 5) { // random colored background
session.style = 5;
} else if (parseInt(session.style) == 7) { // shows video elements for all connections; even those without video/audio
session.style = parseInt(session.style);
session.showall = true;
} else if (parseInt(session.style)) { // 6 is the first letter of the name, surrounded with a colored circle
session.style = parseInt(session.style);
} else {
session.style = 1;
}
}
if (urlParams.has('showall')){ // just an alternative; might be compoundable
session.showall = true;
}
if (urlParams.has('samplerate') || urlParams.has('sr')) {
@ -2675,6 +2716,17 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.audioEffects = false; // disable audio inbound effects also.
session.audioMeterGuest = false;
}
// For info, see this: https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidatePairStats/availableOutgoingBitrate
if (urlParams.has('maxbandwidth')) { // limits the bitrate based on the outbound total available bandwidth; chromium-based
session.maxBandwidth = urlParams.get('maxbandwidth') || 80; // 0 to 100; will reduce bitrate as a percentage of available
session.maxBandwidth = parseInt(session.maxBandwidth);
if (session.maxBandwidth > 200){ // will over ride default 2500kbps if no bitrate is specified
session.maxBandwidth = 200;
} else if (session.maxBandwidth<0){
session.maxBandwidth = 0;
}
}
if (urlParams.has('tcp')){ // forces the TURN servers to use TCP mode; still need to add &private to force TURN also tho
session.forceTcpMode = true;
@ -2891,9 +2943,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
//createRoom(director_room_input);
session.permaid = false; // used to avoid a trigger later on.
} else {
getById("container-1").className = 'column columnfade advanced';
getById("container-4").className = 'column columnfade advanced';
getById("dropButton").className = 'column columnfade advanced';
getById("container-1").className = 'column columnfade hidden';
getById("container-4").className = 'column columnfade hidden';
getById("dropButton").className = 'column columnfade hidden';
getById("info").innerHTML = "";
if (session.videoDevice === 0) {
@ -2951,6 +3003,22 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.effects = urlParams.get('effects') || urlParams.get('effect') || null;
}
if (urlParams.has('imagelist')){ // "&imagelist="+encodeURIComponent(JSON.stringify(["./media/bg_sample.webp", "./media/bg_sample2.webp"]))
var imageList = urlParams.get('imagelist'); //
if (imageList){
try {
imageList = JSON.parse(decodeURIComponent(imageList));
} catch(e){
console.error(e);
}
if (imageList.length){
session.defaultBackgroundImages = imageList; // ["./media/bg_sample.webp", "./media/bg_sample2.webp"]
} else {
warnlog("empty image array; skipping");
}
}
}
if (session.effects!==false){
if (session.effects === null){
getById("effectsDiv").style.display = "block";
@ -2964,10 +3032,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
if (session.effects === "5"){
getById("selectImageTFLITE").style.display = "block";
getById("selectImageTFLITE3").style.display = "block";
loadTFLITEImages();
getById("effectSelector").style.display = "none";
getById("effectsDiv").style.display = "block";
}
if (session.effect === "3a"){ // heavier blur
session.effectValue = 5;
@ -2989,22 +3059,22 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (session.webcamonly == true) {
if (session.introButton){
getById("container-2").className = 'column columnfade advanced'; // Hide screen share
getById("head3").classList.add('advanced');
getById("head3a").classList.add('advanced');
getById("container-2").className = 'column columnfade hidden'; // Hide screen share
getById("head3").classList.add('hidden');
getById("head3a").classList.add('hidden');
} else {
getById("container-2").className = 'column columnfade advanced'; // Hide screen share
getById("container-2").className = 'column columnfade hidden'; // Hide screen share
getById("container-3").classList.add("skip-animation");
getById("container-3").classList.remove('pointer');
delayedStartupFuncs.push([previewWebcam]);
}
}
if (session.introOnClean && (session.permaid===false) && (session.roomid===false)){
//getById("container-2").className = 'column columnfade advanced'; // Hide screen share
getById("head3").classList.add('advanced');
getById("head3a").classList.add('advanced');
//getById("container-2").className = 'column columnfade hidden'; // Hide screen share
getById("head3").classList.add('hidden');
getById("head3a").classList.add('hidden');
} else if (session.introOnClean && (session.scene===false) && ((session.permaid!==false || session.roomid!==false))){
getById("container-2").className = 'column columnfade advanced'; // Hide screen share
getById("container-2").className = 'column columnfade hidden'; // Hide screen share
getById("container-3").classList.add("skip-animation");
getById("container-3").classList.remove('pointer');
delayedStartupFuncs.push([previewWebcam]);
@ -3100,8 +3170,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("videoname1").value = session.roomid;
getById("dirroomid").innerText = session.roomid;
getById("roomid").innerText = session.roomid;
getById("container-1").className = 'column columnfade advanced';
getById("container-4").className = 'column columnfade advanced';
getById("container-1").className = 'column columnfade hidden';
getById("container-4").className = 'column columnfade hidden';
// container 5 is share media file; 6 is share website
getById("container-7").style.display = 'none';
getById("container-8").style.display = 'none';
@ -3109,6 +3179,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("container-10").style.display = 'none';
getById("container-11").style.display = 'none';
getById("container-12").style.display = 'none';
getById("container-13").style.display = 'none';
getById("mainmenu").style.alignSelf = "center";
getById("mainmenu").classList.add("mainmenuclass");
getById("header").style.alignSelf = "center";
@ -3138,8 +3209,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
miniTranslate(getById("add_screen"), "share-your-screen", "Share your Screen");
}
getById("head3").classList.add('advanced');
getById("head3a").classList.add('advanced');
getById("head3").classList.add('hidden');
getById("head3a").classList.add('hidden');
getById("container-2").title = getById("add_screen").innerText;
getById("container-3").title = getById("add_camera").innerText;
@ -3148,10 +3219,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("container-3").className = 'column columnfade';
getById("container-2").className = 'column columnfade';
getById("container-1").className = 'column columnfade';
getById("header").className = 'advanced';
getById("info").className = 'advanced';
getById("head1").className = 'advanced';
getById("head2").className = 'advanced';
getById("header").className = 'hidden';
getById("info").className = 'hidden';
getById("head1").className = 'hidden';
getById("head2").className = 'hidden';
getById("mainmenu").style.display = "none";
getById("translateButton").style.display = "none";
log("Update Mixer Event on REsize SET");
@ -3164,15 +3235,15 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("main").style.overflow = "hidden";
if (session.chatbutton === true) {
getById("chatbutton").classList.remove("advanced");
getById("chatbutton").classList.remove("hidden");
getById("controlButtons").style.display = "inherit";
} else if (session.chatbutton === false) {
getById("chatbutton").classList.add("advanced");
getById("chatbutton").classList.add("hidden");
}
} else if ((session.permaid === null) && (session.roomid == "")) {
if (!(session.cleanOutput)) {
getById("head3").classList.remove('advanced');
getById("head3a").classList.remove('advanced');
getById("head3").classList.remove('hidden');
getById("head3a").classList.remove('hidden');
}
} else if ((window.obsstudio) && (session.permaid === false) && (session.director === false) && (session.view) &&(session.roomid.length>0)) { // we already know roomid !== false
updateURL("scene", true, false); // we also know it's not a scene, but we will assume it is in this specific case.
@ -3208,10 +3279,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
createRoom(director_room_input);
}
if (session.chatbutton === true) {
getById("chatbutton").classList.remove("advanced");
getById("chatbutton").classList.remove("hidden");
getById("controlButtons").style.display = "inherit";
} else if (session.chatbutton === false) {
getById("chatbutton").classList.add("advanced");
getById("chatbutton").classList.add("hidden");
}
} else if ((session.view) && (session.permaid === false)) {
//if (!session.activeSpeaker){
@ -3230,10 +3301,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("main").style.overflow = "hidden";
if (session.chatbutton === true) {
getById("chatbutton").classList.remove("advanced");
getById("chatbutton").classList.remove("hidden");
getById("controlButtons").style.display = "inherit";
} else if (session.chatbutton === false) {
getById("chatbutton").classList.add("advanced");
getById("chatbutton").classList.add("hidden");
}
}
@ -3241,13 +3312,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.hostedFiles = false;
session.nodownloads = true;
getById('sharefilebutton').style.display = "none";
getById('sharefilebutton').classList.add("advanced");
getById('sharefilebutton').classList.add("hidden");
} else if (session.mobile){
getById('sharefilebutton').style.display = "none";
getById('sharefilebutton').classList.add("advanced");
getById('sharefilebutton').classList.add("hidden");
} else if (session.roomid==false){
getById('sharefilebutton').style.display = "none";
getById('sharefilebutton').classList.add("advanced");
getById('sharefilebutton').classList.add("hidden");
}
if (session.audioEffects === null) {
@ -3295,13 +3366,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("container-3").className = 'column columnfade';
getById("container-2").className = 'column columnfade';
getById("container-1").className = 'column columnfade';
//getById("header").className = 'advanced';
getById("info").className = 'advanced';
getById("header").className = 'advanced';
getById("head1").className = 'advanced';
getById("head2").className = 'advanced';
getById("head3").classList.add('advanced');
getById("head3a").classList.add('advanced');
//getById("header").className = 'hidden';
getById("info").className = 'hidden';
getById("header").className = 'hidden';
getById("head1").className = 'hidden';
getById("head2").className = 'hidden';
getById("head3").classList.add('hidden');
getById("head3a").classList.add('hidden');
getById("mainmenu").style.backgroundRepeat = "no-repeat";
@ -3432,7 +3503,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.autohide=true;
}
if (session.autohide && !session.mobile && (session.scene===false)){// && (session.roomid!==false)){
getById("main").onmouseover = showControl;
getById("main").onmouseover = session.showControls;
}
// Please contact steve on discord.vdo.ninja if you'd like this iFRAME tweaked, expanded, etc -- it's updated based on user request
@ -3492,7 +3563,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
// Chat out gets called via getChatMessage function
// Related code: parent.postMessage({"chat": {"msg":-----,"type":----,"time":---} }, "*");
// session.requestResolution(vid.dataset.UUID, wrw*window.devicePixelRatio, hrh*window.devicePixelRatio);
if ("mic" in e.data) { // this should work for the director's mic mute button as well. Needs to be manually enabled the first time still tho.
if (e.data.mic === true) { // unmute
session.muted = false; // set
@ -3887,6 +3959,14 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
switchModes(e.data.previewMode);
}
if ("advancedMode" in e.data){
if (e.data.advancedMode){
document.documentElement.style.setProperty('--advanced-mode', "inline-block"); // show advanced items
} else {
document.documentElement.style.setProperty('--advanced-mode', "none"); // hide advanced items
}
}
if ("requestStream" in e.data){
if (e.data.requestStream){ // load a specific stream ID
log("requestStream iframe api");
@ -3902,7 +3982,22 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
updateMixer();
}
}
//////////// manual scale. Request a specific down-scaled resolution from a remote connection
var targetWidth = false;
var targetHeight = false;
if ("targetWidth" in e.data){
targetWidth = e.data.targetWidth || 0;
}
if ("targetHeight" in e.data){
targetHeight = e.data.targetHeight || 0;
}
// session.viewheight or session.viewwidth
if ((targetWidth || targetHeight) && e.data.UUID){
session.requestResolution(e.data.UUID, wrw || 4096 , hrh || 2160 ); // this is fine.
}
////////////////
if (("action" in e.data) && (e.data.action!="null")) { /////////////// reuse the Companion API
var resp = processMessage(e.data); // reuse the companion API
if (resp!==null){

547
mixer.html
View File

File diff suppressed because one or more lines are too long

314
stats.css
View File

@ -19,7 +19,7 @@ body{
overflow: hidden;
position: absolute;
background: #2e445c;
box-shadow: 20px 20px 60px #273a4e, -20px -20px 60px #354e6a;
box-shadow: 20px 20px 60px #273a4e, -20px -20px 60px #354e6a;
scrollbar-color:#666 #201c29;
}
header{
@ -34,22 +34,10 @@ iframe {
border: 0;
padding: 0;
display: block;
height: 100%;
width: 100%;
background-color: #0000;
border-radius: 3px;
position: absolute;
left: 0;
top: 0;
transition: background-color 0.05s ease-out;
}
iframe.aspectRatio{
max-height: min(calc(100vh - 80px), calc((100vw - 290px) / var(--aspect-ratio)));
max-width: min(calc((100vh - 80px) * var(--aspect-ratio)), calc(100vw - 290px));
height: 720px;
width: 1280px;
width: 100%;
}
.popup-message {
display: none;
align-text: center;
@ -252,11 +240,11 @@ label {
}
.thing:hover{
animation: horizontalShake 2s;
animation-iteration-count: once;
animation-iteration-count: 1;
}
#col1>.thing:hover{
animation: enlargeAnimation 2s;
animation-iteration-count: once;
animation-iteration-count: 1;
}
#col1>.thing:active{
transform: scale(1.05);
@ -273,33 +261,33 @@ label {
transform: none!important;
}
@keyframes enlargeAnimation {
0% { transform: scale(1.01); }
20% { transform: scale(1.03); }
80% { transform: scale(1.05); }
100% { transform: scale(1.06); }
0% { transform: scale(1.01); }
20% { transform: scale(1.03); }
80% { transform: scale(1.05); }
100% { transform: scale(1.06); }
}
@keyframes horizontalShake {
0% { transform: translate(3px, 0px) rotate(0deg); }
20% { transform: translate(7px, 0px) rotate(0deg); }
80% { transform: translate(8px, 0px) rotate(0deg); }
100% { transform: translate(-1px, 0px) rotate(0deg); }
0% { transform: translate(3px, 0px) rotate(0deg); }
20% { transform: translate(7px, 0px) rotate(0deg); }
80% { transform: translate(8px, 0px) rotate(0deg); }
100% { transform: translate(-1px, 0px) rotate(0deg); }
}
.shake {
animation: shake 0.5s;
animation-iteration-count: once;
animation: shake 0.5s;
animation-iteration-count: 1;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
input{
padding:5px;
@ -309,6 +297,96 @@ input{
.menuButton{
width: 92%;
}
.fadein, video {
animation: fadein 1s;
opacity: 1!important;
}
@keyframes fadeout {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes fadein {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
.partialFadeout{
opacity: .1 !important;
}
.icon{
width:16px;
height:16px;
display:inline-block;
vertical-align: text-bottom;
}
.greyout {
animation: greyout 3s;
opacity: 0.3!important;
}
@keyframes greyout {
0% {
opacity: 1
}
100% {
opacity: 0.3
}
}
.container{
border-radius: 15px;
background: #2e445c;
box-shadow: 14px 14px 28px #273a4e,
-14px -14px 28px #354e6a;
max-width: 730;
padding: 20px;
margin: 10px;
display:flex;
}
.graphSection{
width:380px;
display:block;
}
.stats-container{
display: flex;
color: white;
font-size: 12px;
position: relative;
top: 4px;
width: 390px;
right: 4px;
}
.stats-sub-container{
border-radius: 3px;
background: #2e445c;
box-shadow: inset 5px 5px 8px #293d53, inset -5px -5px 8px #334b65;
margin: 4px;
padding: 5px 0;
width: 121.5px;
text-align: center;
}
.right-side{
display:inline-block
}
.canvasStats{
width: 380px;
height: 90px;
padding:0;
border-radius: 10px 10px 3px 10px;
box-shadow: inset 2px 2px 6px #273a4e, inset -2px -2px 6px #354e6a;
background-color: #0001;
padding: 0 2px 3px 2px;
position: relative;
top: 3px;
}
button{
padding:5px;
margin:5px;
@ -316,12 +394,89 @@ button{
cursor:pointer;
background: linear-gradient(135deg, rgba(238,238,238,1) 60%,rgb(225, 225, 225, 1) 80%,rgb(210, 209, 209, 1) 100%);
}
video{
max-width: 320px;
min-height: 180px;
margin: 0 18px 0 4px;
}
.video-meter {
padding:0.5vh;
display:block;
width:0.5vh;
height:0.5vh;
min-width:10px;
min-height:10px;
top: 2vh;
right: 2vh;
background-color:green;
position:absolute;
border-radius: 2vh;
pointer-events:none;
border: 1px black solid;
}
.battery {
border: 3px solid #4192c5;
width: 11px;
height: 19px;
border-radius: 4px;
position: absolute;
left: 27px;
top: 3px;
background-color: #fff2;
font-size: 1.5em;
z-index: 2;
cursor: help;
display: none;
}
.video-mute-state {
top: 2vh;
right: 2vh;
position: absolute;
color: #fff;
border-radius: 2vh;
background-color: #b11313;
padding: 2px 2px 2px 1px;
}
canvas{
padding:10px;
cursor:pointer;
border-radius: 10px;
box-shadow: 2px 2px 6px #273a4e, -2px -2px 6px #354e6a;
.video-meter-director {
width: 10px;
height: 10px;
top: 8px;
right: 10px;
}
.video-meter2 {
display:block;
padding:0;
width: 1px;
height:0%;
bottom: 0;
right: 14px;
background-color:#0000;
position:absolute;
border-radius: 2vh 2vh 0 0;
pointer-events:none;
border: 1px black solid;
transition: height 0.1s ease, background-color 0.1s ease;
background-color: #38D !important;
}
.hasMedia > .video-meter2 {
display:block;
}
.hasMedia > .video-meter-2 {
display:block;
}
.hasMedia > .video-meter {
display:block;
}
#voiceMeterTemplate{
display:none;
}
#voiceMeterTemplate2{
display:none;
}
h2 {
text-shadow: 0 0 2px #a7a7a7;
@ -412,8 +567,9 @@ table {
}
.fadeout {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s linear;
animation: fadeout 0.5s;
opacity: 0!important;
}
.fade2black{
background-color: 000F;
@ -487,7 +643,7 @@ button.pressed {
display:inline-block;
}
.canvasContainer>canvas{
transform: scale(calc( var(--aspect-ratio) / (16 / 9)), 1);
transform: scale(calc( var(--aspect-ratio) / (16 / 9)), 1);
}
.pressed>button{
display:inline-block;
@ -515,48 +671,48 @@ a {
}
.modal {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
z-Index: 20;
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
z-Index: 20;
}
.modal-content {
position: relative;
padding: 20px;
margin: auto;
width: 75%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
border-radius: 4px;
background-color: #e2e2e2;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
position: relative;
padding: 20px;
margin: auto;
width: 75%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
border-radius: 4px;
background-color: #e2e2e2;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
.close-btn {
float: right;
color: lightgray;
font-size: 24px;
font-weight: bold;
float: right;
color: lightgray;
font-size: 24px;
font-weight: bold;
}
.close-btn:hover {
color: darkgray;
cursor:pointer;
color: darkgray;
cursor:pointer;
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#welcomeWindow{
@ -568,12 +724,12 @@ a {
height:100vh;
z-index:5;
background: #2775dc;
box-shadow: 20px 20px 60px #51729d,
box-shadow: 20px 20px 60px #51729d,
-20px -20px 60px #6d9ad5;
background: -moz-linear-gradient(-45deg, rgba(59,103,158,1) 2%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 79%, rgba(89, 165, 224,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(59,103,158,1) 2%,rgba(56, 134, 202,1) 50%,rgba(32,124,202,1) 79%,rgba(89, 165, 224,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(59,103,158,1) 2%,rgba(56, 134, 202,1) 50%,rgba(32,124,202,1) 79%,rgba(89, 165, 224,1) 100%);
background: linear-gradient(135deg, rgba(59,103,158,1) 2%,rgba(56, 134, 202,1) 50%,rgba(32,124,202,0.8) 79%,rgba(89, 165, 224,1) 100%), url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
background: linear-gradient(135deg, rgba(59,103,158,1) 2%,rgba(56, 134, 202,1) 50%,rgba(32,124,202,0.8) 79%,rgba(89, 165, 224,1) 100%), url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
}
.center-content{
align-content: center;

7
stats.html
View File

@ -572,11 +572,8 @@
var iframeContainer = document.getElementById("iframeContainer");
iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;";
if (roomname){
var iframesrc = "./index.html?ltb=350&transparent&cleanoutput&directorview&label=Stats_Monitor&scenelinkcodec=h264&scenelinkbitrate=12000&director="+roomname+additional+"&b64css="+injectCSS;
} else {
if (!roomname){
roomname = generateString(10);
var iframesrc = "./index.html?ltb=350&transparent&cleanoutput&directorview&scenelinkcodec=h264&scenelinkbitrate=12000&label=Stats_Monitordirector="+roomname+additional+"&b64css="+injectCSS;
}
var pathname = window.location.pathname.split('/');
@ -594,7 +591,7 @@
ele.innerHTML = roomname;
});
iframe.src = iframesrc;
iframe.src = "./index.html?graphs&lightmode&ltb=350&transparent&cleanoutput&directorview&label=Stats_Monitor&scenelinkcodec=h264&scenelinkbitrate=12000&director="+roomname+additional+"&b64css="+injectCSS;
iframeContainer.appendChild(iframe);
//document.getElementById("container").appendChild(iframeContainer);

2
webrtc.js
View File

File diff suppressed because one or more lines are too long