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

Merge pull request #960 from steveseguin/steveseguin-patch-1

Browse Source 
Add files via upload
This commit is contained in:
Steve Seguin 2022-05-21 02:12:29 -04:00 committed by GitHub
commit 82da4e54e9
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

244
index.html
View File

@ -55,7 +55,7 @@
<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" /> <meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
<meta name="msapplication-TileColor" content="#da532c" /> <meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" /> <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> <script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.min.js"></script>
<style id="lightbox-animations" type="text/css"></style> <style id="lightbox-animations" type="text/css"></style>
<!-- <link rel="manifest" href="manifest.json" /> --> <!-- <link rel="manifest" href="manifest.json" /> -->
@ -80,7 +80,7 @@
<link itemprop="url" href="./media/vdoNinja_logo_full.png" /> <link itemprop="url" href="./media/vdoNinja_logo_full.png" />
</span> </span>
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/CodecsHandler.js?ver=37"></script> <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;" /> <input id="zoomSlider" type="range" style="display: none;" />
<div id="header"> <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)"/> <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> <button onclick="jumptoroom();" role="button" aria-pressed="false" alt="Join room" title="Join room" >GO</button>
</div> </div>
<div id="head5" class="advanced"></div> <div id="head5" class="hidden"></div>
<div id="head3" style="display: inline-block;" class="advanced"> <div id="head3" style="display: inline-block;" class="hidden">
<font style="color: #888;" id="copythisurl"> &nbsp; <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; <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> </font>
</div> </div>
<div id="head3a" style="display: inline-block;" class="advanced"> <div id="head3a" style="display: inline-block;" class="hidden">
<a <a
id="reshare" id="reshare"
data-drag="1" data-drag="1"
@ -109,7 +109,7 @@
></a> ></a>
<i class="las la-paperclip" style="color: #DDD;" onclick="copyFunction(document.getElementById('reshare'), event);" onmouseover="this.style.cursor='pointer'"></i> <i class="las la-paperclip" style="color: #DDD;" onclick="copyFunction(document.getElementById('reshare'), event);" onmouseover="this.style.cursor='pointer'"></i>
</div> </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;"> <font style="font-size: 68%; color: white;">
<span data-translate="you-are-in-the-control-center">Control center for room:</span> <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> <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> </font>
</div> </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>: <span data-translate="joining-room">You are in room</span>:
<div id="roomid" style="display: inline-block;"></div> <div id="roomid" style="display: inline-block;"></div>
</div> </div>
<div id="head6" class="advanced" data-translate="only-director-can-hear-you">Only the director can hear you currently.</div> <div id="head6" class="hidden" 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="head7" class="hidden" data-translate="director-muted-you">The director has muted you.</div>
</div> </div>
<div id="controlButtons" > <div id="controlButtons" >
<div id="obsState" class="advanced" >ACTIVE</div> <div id="obsState" class="hidden" >ACTIVE</div>
<div id="subControlButtons"> <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> <i class="toggleSize las la-eye my-float"></i>
</div> </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> <i id="queuetoggle" class="toggleSize las la-stream my-float"></i>
<div id="queueNotification"></div> <div id="queueNotification"></div>
</div> </div>
@ -143,63 +143,63 @@
<div id="transferNotification"></div> <div id="transferNotification"></div>
</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> <i id="chattoggle" class="toggleSize las la-comment-alt my-float"></i>
<div id="chatNotification"></div> <div id="chatNotification"></div>
</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> <i id="mutespeakertoggle" class="toggleSize las la-volume-up my-float" style="position: relative; top: 0.5px;"></i>
</div> </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> <i id="mutetoggle" class="toggleSize las la-microphone my-float" style="position: relative; top: 0.5px;"></i>
</div> </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> <i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-video my-float"></i>
</div> </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> <i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-desktop my-float"></i>
</div> </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> <i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv my-float"></i>
</div> </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> <i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv my-float"></i>
</div> </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> <i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-maximize my-float"></i>
</div> </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> <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;"> <div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
Stop Sharing Website Stop Sharing Website
</div> </div>
</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> <i id="settingstoggle" class="toggleSize las la-sync-alt my-float"></i>
</div> </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> <i id="roomsettingstoggle" class="toggleSize las la-users-cog my-float"></i>
</div> </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> <i id="settingstoggle" class="toggleSize las la-cog my-float"></i>
</div> </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> <i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
</div> </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> <i class="toggleSize my-float las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div> </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> <i class="toggleSize my-float las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
</div> </div>
<span id="miniPerformer" style="pointer-events: auto;" class="advanced"></span> <span id="miniPerformer" style="pointer-events: auto;" class="hidden"></span>
<span id="rooms" class="advanced" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></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> <i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
</div> </div>
</div> </div>
@ -368,7 +368,7 @@
<span data-translate="waiting-for-camera">Waiting for Camera to Load</span> <span data-translate="waiting-for-camera">Waiting for Camera to Load</span>
</button> </button>
</span> </span>
<div id="consentWarning" class="startupWarning advanced"> <div id="consentWarning" class="startupWarning hidden">
<i class="las la-exclamation-circle"></i> <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> <p><span data-translate="privacy-disabled">Privacy warning: The director will be able to remotely change your camera and microphone.</span></p>
</div> </div>
@ -385,7 +385,7 @@
&nbsp;&nbsp; &nbsp;&nbsp;
<i class="las la-cog" style="font-size: 140%; vertical-align: middle;" aria-hidden="true"></i> <i class="las la-cog" style="font-size: 140%; vertical-align: middle;" aria-hidden="true"></i>
</span> </span>
<div id="cameraTip1" class="cameraTip advanced"> <div id="cameraTip1" class="cameraTip hidden">
<i class="las la-info-circle"></i> <i class="las la-info-circle"></i>
<p><span id="cameraTipContext1"></span></p> <p><span id="cameraTipContext1"></span></p>
</div> </div>
@ -435,13 +435,13 @@
<i class="las la-headphones"></i><span data-translate="select-output-source"> Audio Output Destination: <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> </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> <select id="outputSource" ></select>
<div id="headphoneTip1" class="cameraTip advanced"> <div id="headphoneTip1" class="cameraTip hidden">
<i class="las la-info-circle"></i> <i class="las la-info-circle"></i>
<p><span id="headphoneTipContext1"></span></p> <p><span id="headphoneTipContext1"></span></p>
</div> </div>
</span> </span>
<div id="avatarDiv" class="advanced"> <div id="avatarDiv" class="hidden">
<div style="text-align: left;display: inline-block;"> <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> <i class="las la-robot"></i><span data-translate="select-avatar-image"> Default Avatar / Placeholder Image: </span>
</div> </div>
@ -451,7 +451,7 @@
<i class="las la-minus-circle" style="font-size: 3em;"></i><br />No Image Selected <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> <button onclick="changeAvatarImage(event, this)" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;"></button>
</label> </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 <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;"> <input type="file" onchange="changeAvatarImage(event, this)" accept="image/*" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;">
</label> </label>
@ -479,12 +479,7 @@
</span> </span>
<div id="selectImageTFLITE" style="display:none;margin-top:10px;"> <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>
<div id="selectEffectAmount" style="display:none;margin-top:10px;"> <div id="selectEffectAmount" style="display:none;margin-top:10px;">
<label for="selectEffectAmountInput" style="width: 113px;display: inline-block;">Effect amount:</label> <label for="selectEffectAmountInput" style="width: 113px;display: inline-block;">Effect amount:</label>
@ -500,7 +495,7 @@
margin: 0 6px;"/> margin: 0 6px;"/>
</span> </span>
<div id="SafariWarning" class="startupWarning advanced"> <div id="SafariWarning" class="startupWarning hidden">
<i class="las la-exclamation-circle"></i> <i class="las la-exclamation-circle"></i>
<p><span data-translate="use-chrome-instead">Consider using a Chromium-based browser instead.<br /> <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> Safari is more prone to having audio issues</span></p>
@ -552,7 +547,7 @@
</form> </form>
</span> </span>
</center> </center>
<div id="consentWarning2" class="startupWarning advanced"> <div id="consentWarning2" class="startupWarning hidden">
<i class="las la-exclamation-circle"></i> <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> <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> </div>
@ -711,7 +706,7 @@
<div id="dropButton" onclick="dropDownButtonAction()" title="More Options"><i class="las la-chevron-down" ></i></div> <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> <h2><span data-translate="share-local-video-file">Stream Media File</span></h2>
<div class="container-inner"> <div class="container-inner">
@ -723,11 +718,11 @@
<h1>Warning</h1> <h1>Warning</h1>
<p>Media file streaming is still quite experimental. Please do not rely on it heavily for your productions. Feedback welcome.</p> <p>Media file streaming is still quite experimental. Please do not rely on it heavily for your productions. Feedback welcome.</p>
</div> </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> <h1>Chrome/Edge users</h1>
<p>Keep this tab visible, else the video playback will stop</p> <p>Keep this tab visible, else the video playback will stop</p>
</div> </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> <h1>Safari Users</h1>
<p>Safari does not support this feature. Consider Chrome or Firefox instead.</p> <p>Safari does not support this feature. Consider Chrome or Firefox instead.</p>
</div> </div>
@ -745,7 +740,7 @@
</div> </div>
</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> <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> <i style="margin-top:30px;font-size:560%;overflow:hidden;" class="las la-broadcast-tower"></i>
<div class="container-inner"> <div class="container-inner">
@ -777,32 +772,37 @@
</div> </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> <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> <i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-tachometer-alt"></i>
</div> </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> <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> <i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-blender"></i>
</div> </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> <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> <i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-book-open"></i>
</div> </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> <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> <i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-info"></i>
</div> </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> <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> <i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-code-branch"></i>
</div> </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> <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> <i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-heartbeat"></i>
</div> </div>
@ -829,7 +829,8 @@
</i> </i>
<br /> <br />
<li> <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>
<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. 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> <font style="color:#daad09;">Welcome to VDO Ninja! We've rebranded! Nothing else is changing and we're staying 100% free.</font>
</h4> </h4>
<br /> <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 />
<br /> <br />
<h3> <h3>
@ -1250,13 +1251,13 @@
</div></div> </div></div>
</div> </div>
<div id="hiddenElements"></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="overlayMsgs" onclick="this.innerHTML = '';" style="display:none"></div>
<div id="bigPlayButton" 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 id="controls_blank" style="display: none;">
<div class="controlsGrid"> <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> <i class="las la-paper-plane"></i>
<span data-translate="forward-to-room">Transfer</span> <span data-translate="forward-to-room">Transfer</span>
</button> </button>
@ -1270,22 +1271,23 @@
<span data-translate="disconnect-guest" >Hangup</span> <span data-translate="disconnect-guest" >Hangup</span>
</button> </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> <span data-translate="voice-chat"><i class="las la-microphone" style="color:#090"></i> Solo Talk</span>
</button> </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> <i class="las la-plus-square" style="color:#060"></i>
<span data-translate="add-to-scene">add to scene 1</span> <span data-translate="add-to-scene">add to scene 1</span>
</button> </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> <i class="las la-user"></i>
<span data-translate="solo-video">Highlight guest</span> <span data-translate="solo-video">Highlight guest</span>
</button> </button>
<font class="tooltip" style="height: 0; border: 0;"> <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> </font>
<button data-action-type="mute-guest" data-value="0" title="Mute this guest everywhere" onclick="remoteMute(this, event);"> <button data-action-type="mute-guest" data-value="0" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
@ -1294,10 +1296,13 @@
</button> </button>
<!---- /////// BREAK //////// --> <!---- /////// 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> <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> <i class="las la-plus-square" style="color:#060"></i>
<span data-translate="add-to-scene2">add to scene 2</span> <span data-translate="add-to-scene2">add to scene 2</span>
</button> </button>
@ -1307,7 +1312,7 @@
<span data-translate="mute-scene" >mute in scene</span> <span data-translate="mute-scene" >mute in scene</span>
</button> </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);"> <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> <span >S3</span>
</button> </button>
@ -1319,7 +1324,7 @@
</button> </button>
</span> </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);"> <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> <span >S6</span>
</button> </button>
@ -1331,7 +1336,7 @@
</button> </button>
</span> </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> <span data-translate="force-keyframe">Rainbow Puke Fix</span>
</button> </button>
@ -1340,24 +1345,25 @@
<span data-translate="stats-remote"> Scene Stats</span> <span data-translate="stats-remote"> Scene Stats</span>
</button> </button>
<span class="graphSection hidden" data-cluster="1" data-action-type="stats-graphs-bitrate" data-value="0"> <span class="graphSection hidden" data-action-type="stats-graphs-bitrate" data-value="0">
<span class="hidden" data-no-scenes="true">No scenes active</span> <span class="hidden" data-message="true" data-no-scenes="true">No scenes active</span>
</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 data-action-type="stats-graphs-details-container" class="hidden">
<span class="hidden" data-scene-name="true">scene</span> <span class="hidden" data-scene-name="true">scene</span>
<span class="hidden" data-bitrate="true">bitrate (kbps)</span> <span class="hidden" data-bitrate="true">bitrate (kbps)</span>
<span class="hidden" data-resolution="true">resolution</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>
</span> </span>
<!---- /////// BREAK //////// --> <!---- /////// 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" onclick="toggleByDataset('2');getById('chevarrow4').classList.toggle('bottom');getById('chevarrow4').classList.toggle('right');">
<span class="hideDropMenu" style="grid-column: 2;" ></span> <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);"> <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> <i class="las la-video-slash"></i>
@ -1385,7 +1391,7 @@
</button> </button>
</span> </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);"> <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> <span data-translate="order-down"><i class="las la-minus"></i></span>
</button> </button>
@ -1398,12 +1404,12 @@
</button> </button>
</span> </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> <i class="las la-sync"></i>
<span data-translate="change-url">Change URL</span> <span data-translate="change-url">Change URL</span>
</button> </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> <i class="las la-cog"></i>
<span data-translate="change-params">URL Params</span> <span data-translate="change-params">URL Params</span>
</button> </button>
@ -1417,7 +1423,7 @@
<span data-translate="record-remote"> Record Remote</span> <span data-translate="record-remote"> Record Remote</span>
</button> </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> <i class="las la-file-upload"></i>
<span data-translate="request-upload"> Request File</span> <span data-translate="request-upload"> Request File</span>
</button> </button>
@ -1428,7 +1434,7 @@
</button> </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);"> <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> <span >C1</span>
@ -1441,7 +1447,7 @@
</button> </button>
</span> </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);"> <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> <span >C4</span>
@ -1454,8 +1460,7 @@
</button> </button>
</span> </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);"> <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> <span >G1</span>
</button> </button>
@ -1467,7 +1472,7 @@
</button> </button>
</span> </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);"> <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> <span >G4</span>
@ -1636,7 +1641,7 @@
<select id="outputSource3" ></select> <select id="outputSource3" ></select>
</span> </span>
<div id="avatarDiv3" class="advanced"> <div id="avatarDiv3" class="hidden">
<div style="text-align: left;display: inline-block;"> <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> <i class="las la-robot"></i><span data-translate="select-avatar-image"> Default Avatar / Placeholder Image: </span>
</div> </div>
@ -1646,7 +1651,7 @@
<i class="las la-minus-circle" style="font-size: 3em;"></i><br />No Image Selected <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> <button onclick="changeAvatarImage(event, this)" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;"></button>
</label> </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 <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;"> <input type="file" onchange="changeAvatarImage(event, this)" accept="image/*" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;">
</label> </label>
@ -1671,12 +1676,7 @@
<i class="las la-info-circle"></i> <i class="las la-info-circle"></i>
</span> </span>
<div id="selectImageTFLITE3" style="display:none;margin-top:10px;"> <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>
<div id="selectEffectAmount3" style="display:none;margin-top:10px;"> <div id="selectEffectAmount3" style="display:none;margin-top:10px;">
<label for="selectEffectAmountInput" style="width: 113px;display: inline-block;">Effect amount:</label> <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> <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 /> <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> <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> <span data-translate="show-controls-video">Show control bar</span>
</a> </a>
</li> </li>
<li class="context-menu__item advanced"> <li class="context-menu__item hidden">
<a href="#" class="context-menu__link" data-action="HideControls"> <a href="#" class="context-menu__link" data-action="HideControls">
<i class="las la-external-link"></i> <i class="las la-external-link"></i>
<span data-translate="hide-controls-video">Hide control bar</span> <span data-translate="hide-controls-video">Hide control bar</span>
@ -1774,7 +1774,7 @@
<span data-translate="full-window">Full-window</span> <span data-translate="full-window">Full-window</span>
</a> </a>
</li> </li>
<li class="context-menu__item advanced"> <li class="context-menu__item hidden">
<a href="#" class="context-menu__link" data-action="ShrinkWindow"> <a href="#" class="context-menu__link" data-action="ShrinkWindow">
<i class="las la-external-link"></i> <i class="las la-external-link"></i>
<span data-translate="shrink-window">Shrink-window</span> <span data-translate="shrink-window">Shrink-window</span>
@ -1786,7 +1786,7 @@
<span data-translate="pause-stream">Pause stream</span> <span data-translate="pause-stream">Pause stream</span>
</a> </a>
</li> </li>
<li class="context-menu__item advanced"> <li class="context-menu__item hidden">
<a href="#" class="context-menu__link" data-action="UnPause"> <a href="#" class="context-menu__link" data-action="UnPause">
<i class="las la-external-link"></i> <i class="las la-external-link"></i>
<span data-translate="resume-stream">Resume stream</span> <span data-translate="resume-stream">Resume stream</span>
@ -1798,7 +1798,7 @@
<span data-translate="record-to-disk">Record to disk</span> <span data-translate="record-to-disk">Record to disk</span>
</a> </a>
</li> </li>
<li class="context-menu__item advanced"> <li class="context-menu__item hidden">
<a href="#" class="context-menu__link" data-action="StopRecording"> <a href="#" class="context-menu__link" data-action="StopRecording">
<i class="las la-external-link"></i> <i class="las la-external-link"></i>
<span data-translate="stop-record-to-disk">Stop Recording</span> <span data-translate="stop-record-to-disk">Stop Recording</span>
@ -1810,18 +1810,24 @@
<span data-translate="show-video-stats">Show Stats</span> <span data-translate="show-video-stats">Show Stats</span>
</a> </a>
</li> </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"> <a href="#" class="context-menu__link" data-action="RemoteHangup">
<i class="las la-external-link"></i> <i class="las la-external-link"></i>
<span data-translate="remote-hangup-connection">Remote Hang-up</span> <span data-translate="remote-hangup-connection">Remote Hang-up</span>
</a> </a>
</li> </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"> <a href="#" class="context-menu__link" data-action="RemoteReload">
<i class="las la-external-link"></i> <i class="las la-external-link"></i>
<span data-translate="remote-reload-connection">Remote Reload Page</span> <span data-translate="remote-reload-connection">Remote Reload Page</span>
</a> </a>
</li> </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> </ul>
</nav> </nav>
@ -1936,17 +1942,31 @@
</div> </div>
</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-signal"></i>
<i class="las la-fire-alt"></i> <i class="las la-fire-alt"></i>
</div> </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-level" style="height:100%;"></div>
<div class="battery-charging">+</div> <div class="battery-charging">+</div>
</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>
<div id="voiceMeterTemplate2" class="video-meter2 advanced"> <div id="voiceMeterTemplate" class="video-meter hidden">
</div>
<div id="voiceMeterTemplate2" class="video-meter2 hidden">
</div> </div>
<div id="muteStateTemplate" style="display:none;" class="video-mute-state"> <div id="muteStateTemplate" style="display:none;" class="video-mute-state">
<i class="las la-microphone-slash"></i> <i class="las la-microphone-slash"></i>
@ -1957,6 +1977,12 @@
<div id="raisedHandTemplate" style="display:none;" class="video-mute-state raisedHand"> <div id="raisedHandTemplate" style="display:none;" class="video-mute-state raisedHand">
<i class="las la-hand-paper"></i> <i class="las la-hand-paper"></i>
</div> </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"> <audio id="testtone" style="display:none;" preload="none">
<source src="./media/tone.mp3" type="audio/mpeg"> <source src="./media/tone.mp3" type="audio/mpeg">
<source src="./media/tone.ogg" type="audio/ogg"> <source src="./media/tone.ogg" type="audio/ogg">
@ -1972,7 +1998,6 @@
<div>See the <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. <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> </div>
<div id="messagePopup" class="popup-message"></div> <div id="messagePopup" class="popup-message"></div>
@ -2014,6 +2039,10 @@
<br /> <br />
</u> </u>
</div> </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> <script>
if (window.location.hostname.indexOf("www.obs.ninja") == 0) { if (window.location.hostname.indexOf("www.obs.ninja") == 0) {
@ -2065,7 +2094,7 @@
// session.audiobitrate // int in kbps // 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.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.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.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.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 // 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.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.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.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>
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></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. // 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" 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> </body>
</html> </html>

773
lib.js
View File

File diff suppressed because it is too large Load Diff

1345
main.css
View File

File diff suppressed because it is too large Load Diff

253
main.js
View File

@ -125,7 +125,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (!(session.cleanOutput)){ if (!(session.cleanOutput)){
window.focus(); 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) { if (!session.sticky) {
setStorage("settings", "", 0); setStorage("settings", "", 0);
log("deleting cookie as user said no"); 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) { if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) {
try { try {
getById("electronDragZone").style.cursor="grab"; getById("electronDragZone").style.cursor="grab";
const ipcRenderer = require('electron').ipcRenderer; if (!ipcRenderer){
ipcRenderer = require('electron').ipcRenderer;
}
window.prompt = function(title, val){ 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){} } catch(e){}
} }
@ -200,6 +202,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("mutebutton").style.setProperty("display", "none", "important"); 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 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; var avatarImg = urlParams.get('bgimage') || false;
if (avatarImg){ if (avatarImg){
@ -272,7 +278,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
log("MAKE DRAGGABLE"); log("MAKE DRAGGABLE");
delayedStartupFuncs.push([makeDraggableElement, document.getElementById("subControlButtons")]); delayedStartupFuncs.push([makeDraggableElement, document.getElementById("subControlButtons")]);
if (SafariVersion && !ChromeVersion){ // if desktop Safari, so macOS, give a note saying it sucks 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')) { 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) { session.rooms = urlParams.get('rooms').split(",").map(function(e) {
return sanitizeRoomName(e); return sanitizeRoomName(e);
}); });
getById("rooms").classList.remove('advanced'); getById("rooms").classList.remove('hidden');
} }
if (urlParams.has('showdirector') || urlParams.has('sd')) { 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'); session.screenshare = urlParams.get('screenshare') || urlParams.get('ss');
} }
} else if (urlParams.has('fileshare') || urlParams.has('fs')) { } 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.add("skip-animation");
getById("container-5").classList.remove('pointer'); getById("container-5").classList.remove('pointer');
if (SafariVersion){ if (SafariVersion){
getById("safari_warning_fileshare").classList.remove('advanced'); getById("safari_warning_fileshare").classList.remove('hidden');
} else if (!Firefox){ } else if (!Firefox){
getById("chrome_warning_fileshare").classList.remove('advanced'); getById("chrome_warning_fileshare").classList.remove('hidden');
} }
} else if (directorLanding) { } 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.add("skip-animation");
getById("container-1").classList.remove('pointer'); getById("container-1").classList.remove('pointer');
} else if (urlParams.has('website') || urlParams.has('iframe')) { } 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.add("skip-animation");
getById("container-6").classList.remove('pointer'); getById("container-6").classList.remove('pointer');
session.website = urlParams.get('website') || urlParams.get('iframe') || false; 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. session.directorBlindButton=true; // false == true in this case.
} }
if (session.directorBlindButton){ if (session.directorBlindButton){
getById("blindAllGuests").classList.remove("advanced"); getById("blindAllGuests").classList.remove("hidden");
} }
if (urlParams.has('dpi') || urlParams.has('dpr')) { 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){ if (session.speakerMuted){
getById("mutespeakertoggle").className = "las la-volume-mute my-float toggleSize"; 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("red");
getById("mutespeakerbutton").classList.add("float2"); getById("mutespeakerbutton").classList.add("float2");
getById("mutespeakerbutton").classList.remove("float"); getById("mutespeakerbutton").classList.remove("float");
@ -682,16 +688,16 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.chatbutton = false; session.chatbutton = false;
} else { } else {
session.chatbutton = true; session.chatbutton = true;
getById("chatbutton").classList.remove("advanced"); getById("chatbutton").classList.remove("hidden");
} }
} }
if (session.screenshare !== false) { if (session.screenshare !== false) {
if (session.introButton){ if (session.introButton){
getById("container-3").className = 'column columnfade advanced'; // Hide screen share getById("container-3").className = 'column columnfade hidden'; // Hide screen share
getById("head1").className = 'advanced'; getById("head1").className = 'hidden';
} else { } 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.add("skip-animation");
getById("container-2").classList.remove('pointer'); 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')) { if (urlParams.has('scene') || urlParams.has('scn')) {
session.scene = urlParams.get('scene') || urlParams.get('scn') || 0; session.scene = urlParams.get('scene') || urlParams.get('scn') || 0;
if (typeof session.scene === "string"){ if (typeof session.scene === "string"){
@ -827,6 +842,22 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.audioMeterGuest = false; 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. 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 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("defaultAvatar2").src = avatar;
} }
document.getElementById("avatarDiv3").classList.remove("advanced"); document.getElementById("avatarDiv3").classList.remove("hidden");
document.getElementById("avatarDiv").classList.remove("advanced"); document.getElementById("avatarDiv").classList.remove("hidden");
} }
if (urlParams.has('prompt') || urlParams.has('validate') || urlParams.has('approve')){ 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')){ if (urlParams.has('directorview') || urlParams.has('dv')){
session.directorView = true; session.directorView = true;
} }
if (urlParams.has('graphs')){
session.allowGraphs = true;
}
if (urlParams.has('ruler') || urlParams.has('grid') || urlParams.has('thirds')) { if (urlParams.has('ruler') || urlParams.has('grid') || urlParams.has('thirds')) {
session.ruleOfThirds=true; session.ruleOfThirds=true;
@ -1501,6 +1535,11 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.controlRoomBitrate = true; 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')) { if (urlParams.has('remote') || urlParams.has('rem')) {
log("remote ENABLED"); log("remote ENABLED");
session.remote = urlParams.get('remote') || urlParams.get('rem') || true; session.remote = urlParams.get('remote') || urlParams.get('rem') || true;
@ -1825,7 +1864,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("previewWebcam").classList.add("miconly"); getById("previewWebcam").classList.add("miconly");
if (session.audioDevice === 0) { if (session.audioDevice === 0) {
miniTranslate(getById("add_camera"), "click-start-to-join", "Click Start to Join"); 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.add("skip-animation");
getById("container-3").classList.remove('pointer'); getById("container-3").classList.remove('pointer');
delayedStartupFuncs.push([previewWebcam]); delayedStartupFuncs.push([previewWebcam]);
@ -1840,26 +1879,28 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (session.mobile){ if (session.mobile){
getById("shareScreenGear").style.display = "none"; getById("shareScreenGear").style.display = "none";
getById("dropButton").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; session.screensharebutton = false;
screensharesupport = false; screensharesupport = false;
if (session.audioDevice!==0){ if (session.audioDevice!==0){
getById("flipcamerabutton").classList.remove("advanced"); getById("flipcamerabutton").classList.remove("hidden");
} }
} }
if (urlParams.has('consent')){ if (urlParams.has('consent')){
session.consent = true; session.consent = true;
getById("consentWarning").classList.remove("advanced"); getById("consentWarning").classList.remove("hidden");
getById("consentWarning2").classList.remove("advanced"); getById("consentWarning2").classList.remove("hidden");
} }
if (urlParams.has('autojoin') || urlParams.has('autostart') || urlParams.has('aj') || urlParams.has('as')) { if (urlParams.has('autojoin') || urlParams.has('autostart') || urlParams.has('aj') || urlParams.has('as')) {
session.autostart = true; session.autostart = true;
} }
if (session.autostart){ if (session.dataMode){
delayedStartupFuncs.push([joinDataMode]);
} else if (session.autostart){
if (session.screenshare!==false) { if (session.screenshare!==false) {
delayedStartupFuncs.push([publishScreen]); delayedStartupFuncs.push([publishScreen]);
} }
@ -2084,9 +2125,15 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (urlParams.has('scale')) { 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 { 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"); log("Resolution scale requested");
session.scale = parseInt(urlParams.get('scale')) || 100; session.scale = parseFloat(urlParams.get('scale')) || 100;
} }
session.dynamicScale = false; // default true 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; 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')) { if (urlParams.has('cleandirector') || urlParams.has('cdv')) {
session.cleanDirector = true; session.cleanDirector = true;
} }
@ -2650,12 +2685,18 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.style = 4; session.style = 4;
} else if (parseInt(session.style) == 5) { // random colored background } else if (parseInt(session.style) == 5) { // random colored background
session.style = 5; 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 } else if (parseInt(session.style)) { // 6 is the first letter of the name, surrounded with a colored circle
session.style = parseInt(session.style); session.style = parseInt(session.style);
} else { } else {
session.style = 1; session.style = 1;
} }
} }
if (urlParams.has('showall')){ // just an alternative; might be compoundable
session.showall = true;
}
if (urlParams.has('samplerate') || urlParams.has('sr')) { if (urlParams.has('samplerate') || urlParams.has('sr')) {
@ -2676,6 +2717,17 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.audioMeterGuest = false; 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 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; session.forceTcpMode = true;
} }
@ -2891,9 +2943,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
//createRoom(director_room_input); //createRoom(director_room_input);
session.permaid = false; // used to avoid a trigger later on. session.permaid = false; // used to avoid a trigger later on.
} else { } else {
getById("container-1").className = 'column columnfade advanced'; getById("container-1").className = 'column columnfade hidden';
getById("container-4").className = 'column columnfade advanced'; getById("container-4").className = 'column columnfade hidden';
getById("dropButton").className = 'column columnfade advanced'; getById("dropButton").className = 'column columnfade hidden';
getById("info").innerHTML = ""; getById("info").innerHTML = "";
if (session.videoDevice === 0) { 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; 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!==false){
if (session.effects === null){ if (session.effects === null){
getById("effectsDiv").style.display = "block"; getById("effectsDiv").style.display = "block";
@ -2964,10 +3032,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
} }
if (session.effects === "5"){ if (session.effects === "5"){
getById("selectImageTFLITE").style.display = "block";
getById("selectImageTFLITE3").style.display = "block"; loadTFLITEImages();
getById("effectSelector").style.display = "none"; getById("effectSelector").style.display = "none";
getById("effectsDiv").style.display = "block"; getById("effectsDiv").style.display = "block";
} }
if (session.effect === "3a"){ // heavier blur if (session.effect === "3a"){ // heavier blur
session.effectValue = 5; session.effectValue = 5;
@ -2989,22 +3059,22 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (session.webcamonly == true) { if (session.webcamonly == true) {
if (session.introButton){ if (session.introButton){
getById("container-2").className = 'column columnfade advanced'; // Hide screen share getById("container-2").className = 'column columnfade hidden'; // Hide screen share
getById("head3").classList.add('advanced'); getById("head3").classList.add('hidden');
getById("head3a").classList.add('advanced'); getById("head3a").classList.add('hidden');
} else { } 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.add("skip-animation");
getById("container-3").classList.remove('pointer'); getById("container-3").classList.remove('pointer');
delayedStartupFuncs.push([previewWebcam]); delayedStartupFuncs.push([previewWebcam]);
} }
} }
if (session.introOnClean && (session.permaid===false) && (session.roomid===false)){ if (session.introOnClean && (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("head3").classList.add('advanced'); getById("head3").classList.add('hidden');
getById("head3a").classList.add('advanced'); getById("head3a").classList.add('hidden');
} else if (session.introOnClean && (session.scene===false) && ((session.permaid!==false || session.roomid!==false))){ } 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.add("skip-animation");
getById("container-3").classList.remove('pointer'); getById("container-3").classList.remove('pointer');
delayedStartupFuncs.push([previewWebcam]); delayedStartupFuncs.push([previewWebcam]);
@ -3100,8 +3170,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("videoname1").value = session.roomid; getById("videoname1").value = session.roomid;
getById("dirroomid").innerText = session.roomid; getById("dirroomid").innerText = session.roomid;
getById("roomid").innerText = session.roomid; getById("roomid").innerText = session.roomid;
getById("container-1").className = 'column columnfade advanced'; getById("container-1").className = 'column columnfade hidden';
getById("container-4").className = 'column columnfade advanced'; getById("container-4").className = 'column columnfade hidden';
// container 5 is share media file; 6 is share website // container 5 is share media file; 6 is share website
getById("container-7").style.display = 'none'; getById("container-7").style.display = 'none';
getById("container-8").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-10").style.display = 'none';
getById("container-11").style.display = 'none'; getById("container-11").style.display = 'none';
getById("container-12").style.display = 'none'; getById("container-12").style.display = 'none';
getById("container-13").style.display = 'none';
getById("mainmenu").style.alignSelf = "center"; getById("mainmenu").style.alignSelf = "center";
getById("mainmenu").classList.add("mainmenuclass"); getById("mainmenu").classList.add("mainmenuclass");
getById("header").style.alignSelf = "center"; 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"); miniTranslate(getById("add_screen"), "share-your-screen", "Share your Screen");
} }
getById("head3").classList.add('advanced'); getById("head3").classList.add('hidden');
getById("head3a").classList.add('advanced'); getById("head3a").classList.add('hidden');
getById("container-2").title = getById("add_screen").innerText; getById("container-2").title = getById("add_screen").innerText;
getById("container-3").title = getById("add_camera").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-3").className = 'column columnfade';
getById("container-2").className = 'column columnfade'; getById("container-2").className = 'column columnfade';
getById("container-1").className = 'column columnfade'; getById("container-1").className = 'column columnfade';
getById("header").className = 'advanced'; getById("header").className = 'hidden';
getById("info").className = 'advanced'; getById("info").className = 'hidden';
getById("head1").className = 'advanced'; getById("head1").className = 'hidden';
getById("head2").className = 'advanced'; getById("head2").className = 'hidden';
getById("mainmenu").style.display = "none"; getById("mainmenu").style.display = "none";
getById("translateButton").style.display = "none"; getById("translateButton").style.display = "none";
log("Update Mixer Event on REsize SET"); 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"; getById("main").style.overflow = "hidden";
if (session.chatbutton === true) { if (session.chatbutton === true) {
getById("chatbutton").classList.remove("advanced"); getById("chatbutton").classList.remove("hidden");
getById("controlButtons").style.display = "inherit"; getById("controlButtons").style.display = "inherit";
} else if (session.chatbutton === false) { } else if (session.chatbutton === false) {
getById("chatbutton").classList.add("advanced"); getById("chatbutton").classList.add("hidden");
} }
} else if ((session.permaid === null) && (session.roomid == "")) { } else if ((session.permaid === null) && (session.roomid == "")) {
if (!(session.cleanOutput)) { if (!(session.cleanOutput)) {
getById("head3").classList.remove('advanced'); getById("head3").classList.remove('hidden');
getById("head3a").classList.remove('advanced'); 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 } 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. 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); createRoom(director_room_input);
} }
if (session.chatbutton === true) { if (session.chatbutton === true) {
getById("chatbutton").classList.remove("advanced"); getById("chatbutton").classList.remove("hidden");
getById("controlButtons").style.display = "inherit"; getById("controlButtons").style.display = "inherit";
} else if (session.chatbutton === false) { } else if (session.chatbutton === false) {
getById("chatbutton").classList.add("advanced"); getById("chatbutton").classList.add("hidden");
} }
} else if ((session.view) && (session.permaid === false)) { } else if ((session.view) && (session.permaid === false)) {
//if (!session.activeSpeaker){ //if (!session.activeSpeaker){
@ -3230,10 +3301,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("main").style.overflow = "hidden"; getById("main").style.overflow = "hidden";
if (session.chatbutton === true) { if (session.chatbutton === true) {
getById("chatbutton").classList.remove("advanced"); getById("chatbutton").classList.remove("hidden");
getById("controlButtons").style.display = "inherit"; getById("controlButtons").style.display = "inherit";
} else if (session.chatbutton === false) { } 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.hostedFiles = false;
session.nodownloads = true; session.nodownloads = true;
getById('sharefilebutton').style.display = "none"; getById('sharefilebutton').style.display = "none";
getById('sharefilebutton').classList.add("advanced"); getById('sharefilebutton').classList.add("hidden");
} else if (session.mobile){ } else if (session.mobile){
getById('sharefilebutton').style.display = "none"; getById('sharefilebutton').style.display = "none";
getById('sharefilebutton').classList.add("advanced"); getById('sharefilebutton').classList.add("hidden");
} else if (session.roomid==false){ } else if (session.roomid==false){
getById('sharefilebutton').style.display = "none"; getById('sharefilebutton').style.display = "none";
getById('sharefilebutton').classList.add("advanced"); getById('sharefilebutton').classList.add("hidden");
} }
if (session.audioEffects === null) { 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-3").className = 'column columnfade';
getById("container-2").className = 'column columnfade'; getById("container-2").className = 'column columnfade';
getById("container-1").className = 'column columnfade'; getById("container-1").className = 'column columnfade';
//getById("header").className = 'advanced'; //getById("header").className = 'hidden';
getById("info").className = 'advanced'; getById("info").className = 'hidden';
getById("header").className = 'advanced'; getById("header").className = 'hidden';
getById("head1").className = 'advanced'; getById("head1").className = 'hidden';
getById("head2").className = 'advanced'; getById("head2").className = 'hidden';
getById("head3").classList.add('advanced'); getById("head3").classList.add('hidden');
getById("head3a").classList.add('advanced'); getById("head3a").classList.add('hidden');
getById("mainmenu").style.backgroundRepeat = "no-repeat"; getById("mainmenu").style.backgroundRepeat = "no-repeat";
@ -3432,7 +3503,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.autohide=true; session.autohide=true;
} }
if (session.autohide && !session.mobile && (session.scene===false)){// && (session.roomid!==false)){ 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 // Please contact steve on discord.vdo.ninja if you'd like this iFRAME tweaked, expanded, etc -- it's updated based on user request
@ -3492,6 +3563,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
// Chat out gets called via getChatMessage function // Chat out gets called via getChatMessage function
// Related code: parent.postMessage({"chat": {"msg":-----,"type":----,"time":---} }, "*"); // 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 ("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 if (e.data.mic === true) { // unmute
@ -3887,6 +3959,14 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
switchModes(e.data.previewMode); 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 ("requestStream" in e.data){
if (e.data.requestStream){ // load a specific stream ID if (e.data.requestStream){ // load a specific stream ID
log("requestStream iframe api"); log("requestStream iframe api");
@ -3902,6 +3982,21 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
updateMixer(); 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 if (("action" in e.data) && (e.data.action!="null")) { /////////////// reuse the Companion API
var resp = processMessage(e.data); // reuse the companion API var resp = processMessage(e.data); // reuse the companion API

539
mixer.html
View File

File diff suppressed because one or more lines are too long

312
stats.css
View File

@ -19,7 +19,7 @@ body{
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
background: #2e445c; 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; scrollbar-color:#666 #201c29;
} }
header{ header{
@ -34,22 +34,10 @@ iframe {
border: 0; border: 0;
padding: 0; padding: 0;
display: block; display: block;
height: 100%; height: 100%;
width: 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;
} }
.popup-message { .popup-message {
display: none; display: none;
align-text: center; align-text: center;
@ -252,11 +240,11 @@ label {
} }
.thing:hover{ .thing:hover{
animation: horizontalShake 2s; animation: horizontalShake 2s;
animation-iteration-count: once; animation-iteration-count: 1;
} }
#col1>.thing:hover{ #col1>.thing:hover{
animation: enlargeAnimation 2s; animation: enlargeAnimation 2s;
animation-iteration-count: once; animation-iteration-count: 1;
} }
#col1>.thing:active{ #col1>.thing:active{
transform: scale(1.05); transform: scale(1.05);
@ -273,33 +261,33 @@ label {
transform: none!important; transform: none!important;
} }
@keyframes enlargeAnimation { @keyframes enlargeAnimation {
0% { transform: scale(1.01); } 0% { transform: scale(1.01); }
20% { transform: scale(1.03); } 20% { transform: scale(1.03); }
80% { transform: scale(1.05); } 80% { transform: scale(1.05); }
100% { transform: scale(1.06); } 100% { transform: scale(1.06); }
} }
@keyframes horizontalShake { @keyframes horizontalShake {
0% { transform: translate(3px, 0px) rotate(0deg); } 0% { transform: translate(3px, 0px) rotate(0deg); }
20% { transform: translate(7px, 0px) rotate(0deg); } 20% { transform: translate(7px, 0px) rotate(0deg); }
80% { transform: translate(8px, 0px) rotate(0deg); } 80% { transform: translate(8px, 0px) rotate(0deg); }
100% { transform: translate(-1px, 0px) rotate(0deg); } 100% { transform: translate(-1px, 0px) rotate(0deg); }
} }
.shake { .shake {
animation: shake 0.5s; animation: shake 0.5s;
animation-iteration-count: once; animation-iteration-count: 1;
} }
@keyframes shake { @keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); } 0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); } 30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); } 40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); } 90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); }
} }
input{ input{
padding:5px; padding:5px;
@ -309,6 +297,96 @@ input{
.menuButton{ .menuButton{
width: 92%; 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{ button{
padding:5px; padding:5px;
margin:5px; margin:5px;
@ -316,12 +394,89 @@ button{
cursor:pointer; cursor:pointer;
background: linear-gradient(135deg, rgba(238,238,238,1) 60%,rgb(225, 225, 225, 1) 80%,rgb(210, 209, 209, 1) 100%); 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{ .video-meter-director {
padding:10px; width: 10px;
cursor:pointer; height: 10px;
border-radius: 10px; top: 8px;
box-shadow: 2px 2px 6px #273a4e, -2px -2px 6px #354e6a; 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 { h2 {
text-shadow: 0 0 2px #a7a7a7; text-shadow: 0 0 2px #a7a7a7;
@ -412,8 +567,9 @@ table {
} }
.fadeout { .fadeout {
visibility: hidden; visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s linear; transition: visibility 0s 0.5s, opacity 0.5s linear;
animation: fadeout 0.5s;
opacity: 0!important;
} }
.fade2black{ .fade2black{
background-color: 000F; background-color: 000F;
@ -487,7 +643,7 @@ button.pressed {
display:inline-block; display:inline-block;
} }
.canvasContainer>canvas{ .canvasContainer>canvas{
transform: scale(calc( var(--aspect-ratio) / (16 / 9)), 1); transform: scale(calc( var(--aspect-ratio) / (16 / 9)), 1);
} }
.pressed>button{ .pressed>button{
display:inline-block; display:inline-block;
@ -515,48 +671,48 @@ a {
} }
.modal { .modal {
display: none; display: none;
position: fixed; position: fixed;
padding-top: 50px; padding-top: 50px;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
z-Index: 20; z-Index: 20;
} }
.modal-content { .modal-content {
position: relative; position: relative;
padding: 20px; padding: 20px;
margin: auto; margin: auto;
width: 75%; width: 75%;
-webkit-animation-name: animatetop; -webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s; -webkit-animation-duration: 0.4s;
animation-name: animatetop; animation-name: animatetop;
animation-duration: 0.4s; animation-duration: 0.4s;
border-radius: 4px; border-radius: 4px;
background-color: #e2e2e2; 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"); 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 { .close-btn {
float: right; float: right;
color: lightgray; color: lightgray;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
} }
.close-btn:hover { .close-btn:hover {
color: darkgray; color: darkgray;
cursor:pointer; cursor:pointer;
} }
@-webkit-keyframes animatetop { @-webkit-keyframes animatetop {
from {top:-300px; opacity:0} from {top:-300px; opacity:0}
to {top:0; opacity:1} to {top:0; opacity:1}
} }
@keyframes animatetop { @keyframes animatetop {
from {top:-300px; opacity:0} from {top:-300px; opacity:0}
to {top:0; opacity:1} to {top:0; opacity:1}
} }
#welcomeWindow{ #welcomeWindow{
@ -568,12 +724,12 @@ a {
height:100vh; height:100vh;
z-index:5; z-index:5;
background: #2775dc; background: #2775dc;
box-shadow: 20px 20px 60px #51729d, box-shadow: 20px 20px 60px #51729d,
-20px -20px 60px #6d9ad5; -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: -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: -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,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{ .center-content{
align-content: center; align-content: center;

7
stats.html
View File

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

2
webrtc.js
View File

File diff suppressed because one or more lines are too long