mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 21:58:35 +00:00
v20 release candidate 1
couple fixes; language tweak. near ready
This commit is contained in:
Steve Seguin
GitHub
parent
4fe4a9bcf7
commit
ced13efd5a
13
iframe.html
13
iframe.html
@ -134,19 +134,24 @@
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"close":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "0 Bitrate";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":0, "target": "*"}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Low Bitrate";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":30}, '*');};
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":30, "target": "*"}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "High Bitrate";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":5000}, '*');};
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":5000, "target": "*"}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Default Bitrate";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":-1}, '*');};
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":-1, "target": "*"}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
@ -250,7 +255,7 @@
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Add Target Video";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"target":"*", "add":true, "settings":{"style":{"width":"640px", "height":"360px", "float":"left", "border":"10px solid red", "display":"block"}}}, '*');}; // target can be a stream ID or * for all.
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"target":"*", "add":true, "settings": {"style": "width:640px;height:360px;float:left;border:10px solid red;display:block;"}}, '*');}; // target can be a stream ID or * for all.
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
|
||||
44
index.html
44
index.html
@ -147,9 +147,15 @@
|
||||
<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;">
|
||||
<i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv my-float"></i>
|
||||
</div>
|
||||
<div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a website as an embedded iFRAME" alt="Share a website as an embedded 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 advanced" style="cursor: pointer;">
|
||||
<i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-maximize my-float"></i>
|
||||
</div>
|
||||
<div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake advanced" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
|
||||
<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las my-float la-window-close" style="display: inline-block;"></i>
|
||||
<div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
|
||||
Stop Sharing Website
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cycle the Cameras" onclick="cycleCameras()" class="advanced float" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Cycle the Cameras">
|
||||
<i id="settingstoggle" class="toggleSize las la-sync-alt my-float"></i>
|
||||
@ -205,7 +211,7 @@
|
||||
<i style="float: right; bottom: 0px; cursor: pointer; position: fixed; right: 33px; color: #d9e4eb; padding: 2px; margin: 2px 2px 0 0; font-size: 140%;" class="las la-calendar" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div id="mainmenu" class="row" style="opacity: 0; align: center;">
|
||||
<div id="container-1" title="Add Group Chat to OBS" alt="Add Group Chat to OBS" tabindex="2" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="column columnfade pointer card" style=" overflow-y: auto;">
|
||||
<div id="container-1" title="Add Group Chat to OBS" alt="Add Group Chat to OBS" tabindex="2" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="column columnfade pointer rounded card" style=" overflow-y: auto;">
|
||||
|
||||
<h2>
|
||||
<span data-translate="add-group-chat">Create a Room</span>
|
||||
@ -326,7 +332,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="container-3" title="Add your Camera to OBS" onkeyup="enterPressedClick(event,this);" alt="Add your Camera to OBS" tabindex="3" role="button" aria-pressed="false" class="column columnfade pointer card" onclick="previewWebcam()" style=" overflow-y: auto;">
|
||||
<div id="container-3" title="Add your Camera to OBS" onkeyup="enterPressedClick(event,this);" alt="Add your Camera to OBS" tabindex="3" role="button" aria-pressed="false" class="column columnfade pointer rounded card" onclick="previewWebcam()" style=" overflow-y: auto;">
|
||||
<h2 id="add_camera">
|
||||
<span data-translate="add-your-camera">Add your Camera to OBS</span>
|
||||
</h2>
|
||||
@ -441,6 +447,10 @@
|
||||
<input type="file" onchange="changeTFLiteImage(event, this)" accept="image/*" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;">
|
||||
</label>
|
||||
</div>
|
||||
<div id="selectEffectAmount" style="display:none;margin-top:10px;">
|
||||
<label for="selectEffectAmountInput" style="width: 113px;display: inline-block;">Effect amount:</label>
|
||||
<input id="selectEffectAmountInput" style="display: inline-block;width: 350px; max-width: 60%;margin:6px 0;" name="selectEffectAmountInput" title="Adjust the amount of effect applied" type="range" oninput="changeEffectAmount(event, this)" onchange="changeEffectAmount(event, this)" min="0" step="1" max="20">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<span id="addPasswordBasic" >
|
||||
@ -468,7 +478,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="container-2" title="Remote Screenshare into OBS" onkeyup="enterPressedClick(event,this);" alt="Remote Screenshare into OBS" tabindex="4" role="button" aria-pressed="false" class="column columnfade pointer card" style=" overflow-y: auto;">
|
||||
<div id="container-2" title="Remote Screenshare into OBS" onkeyup="enterPressedClick(event,this);" alt="Remote Screenshare into OBS" tabindex="4" role="button" aria-pressed="false" class="column columnfade pointer rounded card" style=" overflow-y: auto;">
|
||||
<h2 id="add_screen">
|
||||
<span data-translate="remote-screenshare-obs">Remote Screenshare into OBS</span>
|
||||
</h2>
|
||||
@ -542,7 +552,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="container-4" tabindex="5" alt="Create Reusable Invite" onkeyup="enterPressedClick(event,this);" onclick="loadQR();" title="Create Reusable Invite" role="button" aria-pressed="false" class="column columnfade pointer card" style=" overflow-y: auto;">
|
||||
<div id="container-4" tabindex="5" alt="Create Reusable Invite" onkeyup="enterPressedClick(event,this);" onclick="loadQR();" title="Create Reusable Invite" role="button" aria-pressed="false" class="column columnfade pointer rounded card" style=" overflow-y: auto;">
|
||||
<h2>
|
||||
<span data-translate="create-reusable-invite">Create Reusable Invite</span>
|
||||
</h2>
|
||||
@ -664,7 +674,7 @@
|
||||
|
||||
<div id="dropButton" onclick="dropDownButtonAction()" title="More Options"><i class="las la-chevron-down" ></i></div>
|
||||
|
||||
<div id="container-5" class="column columnfade pointer card advanced" style=" overflow-y: auto;">
|
||||
<div id="container-5" class="column columnfade pointer rounded card advanced" style=" overflow-y: auto;">
|
||||
<h2><span data-translate="share-local-video-file">Stream Media File</span></h2>
|
||||
<div class="container-inner">
|
||||
|
||||
@ -698,7 +708,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="container-6" class="column columnfade pointer card advanced" style=" overflow-y: auto;">
|
||||
<div id="container-6" class="column columnfade pointer rounded card advanced" style=" overflow-y: auto;">
|
||||
<h2><span data-translate="share-website-iframe">Share Website</span></h2>
|
||||
<i style="margin-top:30px;font-size:560%;overflow:hidden;" class="las la-broadcast-tower"></i>
|
||||
<div class="container-inner">
|
||||
@ -730,12 +740,12 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div id="container-7" class="column columnfade pointer card advanced" style="overflow: hidden;" onclick="window.location = './speedtest.html';">
|
||||
<div id="container-7" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = './speedtest.html';">
|
||||
<h2><span data-translate="run-a-speed-test">Run a Speed Test</span></h2>
|
||||
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-tachometer-alt"></i>
|
||||
</div>
|
||||
|
||||
<div id="container-8" class="column columnfade pointer card advanced" style="overflow: hidden;" onclick="window.location = 'https://guides.vdo.ninja';">
|
||||
<div id="container-8" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = 'https://guides.vdo.ninja';">
|
||||
<h2><span data-translate="read-the-guides">Browse the Guides</span></h2>
|
||||
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-book-open"></i>
|
||||
</div>
|
||||
@ -775,7 +785,7 @@
|
||||
<font style="color:#daad09;">Welcome to VDO Ninja! We've rebranded! Nothing else is changing and we're staying 100% free.</font>
|
||||
</h4>
|
||||
<br />
|
||||
🎁 Welcome to the v20-beta release. It includes many new features and fixes, and is stable enough for non-critical streaming applications.
|
||||
🎁 Welcome to the v20-beta release. <a target="_blank" href="https://docs.vdo.ninja/release-notes/v20">Release notes are here</a>. It includes many new features and fixes, and is stable enough for non-critical streaming applications.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
@ -1532,7 +1542,7 @@
|
||||
<span data-translate="select-digital-effect"> Digital Video Effects: </span>
|
||||
</div>
|
||||
<select id="effectSelector3" onchange="effectsDynamicallyUpdate(event, this);">
|
||||
<option value="0" data-translate="no-effects-applied">No effects applied</option>
|
||||
<option value="0" data-translate="no-effects-applied">No effects applied</option>
|
||||
<option value="3" data-translate="blurred-background">Blurred background</option>
|
||||
<option value="4" data-translate="digital-greenscreen">Digital greenscreen</option>
|
||||
<option value="5" data-translate="virtual-background">Virtual background</option>
|
||||
@ -1551,6 +1561,10 @@
|
||||
<input type="file" accept="image/*" onchange="changeTFLiteImage(event, this)" style="position: fixed; top: -100em; margin-left:10px; border:1px solid #555;">
|
||||
</label>
|
||||
</div>
|
||||
<div id="selectEffectAmount3" style="display:none;margin-top:10px;">
|
||||
<label for="selectEffectAmountInput" style="width: 113px;display: inline-block;">Effect amount:</label>
|
||||
<input id="selectEffectAmountInput3" style="display: inline-block;width: 350px; max-width: 60%;margin:6px 0;" name="selectEffectAmountInput3" title="Adjust the amount of effect applied" type="range" oninput="changeEffectAmount(event, this)" onchange="changeEffectAmount(event, this)" min="0" step="1" max="20">
|
||||
</div>
|
||||
|
||||
</span>
|
||||
<button id="shareScreenGear" style="width: 135px; padding:20px;text-align:center;" onclick="grabScreen()"><b>Share Screen</b><br /><i style="padding:5px; font-size:300%;" class="las la-desktop"></i></button>
|
||||
@ -1744,7 +1758,7 @@
|
||||
<i class="las la-fire-alt"></i>
|
||||
</div>
|
||||
<div id="batteryMeterTemplate" class="battery advanced" data-plugged="1">
|
||||
<div class="battery-level" style="height:100%;"></div>
|
||||
<div class="battery-level" style="height:100%;">🔌</div>
|
||||
</div>
|
||||
<div id="voiceMeterTemplate" class="video-meter advanced">
|
||||
</div>
|
||||
@ -1859,12 +1873,6 @@
|
||||
// session.wss = "wss://wss.yourdomainhere.com:443"; // https://github.com/steveseguin/websocket_server
|
||||
// session.customWSS = true;
|
||||
//////
|
||||
|
||||
/////// Or you can use piesocket.com if you wish to have a basic free websocket server hosted for you by a third-party
|
||||
//session.customWSS = true; // Set to true to have Piesocket.com
|
||||
//var apiKey = "ZCu96UFf9ezeQeClK7BOCkq6Q0x0lxWAPJcgxjz5"; // GET YOUR OWN API KEY at piesocket.com
|
||||
//session.wss = "wss://us-nyc-1.websocket.me/v3/1?api_key="+apiKey;
|
||||
////////////
|
||||
|
||||
///// The following lets you set the defaults
|
||||
|
||||
|
||||
129
main.css
129
main.css
@ -127,23 +127,16 @@ a:link {
|
||||
color: #B9DFF9;
|
||||
}
|
||||
|
||||
/* visited link */
|
||||
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: #99BFD9;
|
||||
}
|
||||
|
||||
|
||||
/* mouse over link */
|
||||
|
||||
a:hover {
|
||||
color: #048AE8;
|
||||
}
|
||||
|
||||
|
||||
/* selected link */
|
||||
|
||||
a:active {
|
||||
color: #D9E4EB;
|
||||
}
|
||||
@ -249,6 +242,7 @@ button.white:active {
|
||||
padding: 1px;
|
||||
background-color: #0F131D;
|
||||
color: #FFF;
|
||||
min-height:18.8px;
|
||||
}
|
||||
#head5 {
|
||||
display: inline-block;
|
||||
@ -444,7 +438,6 @@ hr {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
/* Clear floats after the columns */
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
@ -490,9 +483,6 @@ hr {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Invite link generator */
|
||||
|
||||
.invite_setting_group {
|
||||
margin: 20px 0px;
|
||||
background-color: #d2d2d2;
|
||||
@ -560,11 +550,11 @@ hr {
|
||||
font-size: 1.5em;
|
||||
z-index: 2;
|
||||
cursor: help;
|
||||
display:none;
|
||||
}
|
||||
.battery[data-plugged="0"]{
|
||||
display:block;
|
||||
}
|
||||
.battery[data-plugged="1"]{
|
||||
font-size:0px;
|
||||
}
|
||||
.battery.warn {
|
||||
border: 3px solid #EFAF13;
|
||||
}
|
||||
@ -626,8 +616,39 @@ hr {
|
||||
color:#00FF00;
|
||||
}
|
||||
|
||||
.togglePreview{
|
||||
border-radius: 11px;
|
||||
background-color: #00000044;
|
||||
top: calc(19px + 2vh);
|
||||
right: 2vw;
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 22px;
|
||||
z-Index:35;
|
||||
height: 22px;
|
||||
}
|
||||
.togglePreview > .la-eye-slash{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.mirror {
|
||||
.togglePreview > .la-eye{
|
||||
display:none;
|
||||
}
|
||||
.togglePreview.blinded > .la-eye-slash{
|
||||
display:none!important;
|
||||
}
|
||||
.togglePreview.blinded > .la-eye{
|
||||
display:block!important;
|
||||
}
|
||||
.rounded{
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.mirror{
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
@ -751,6 +772,10 @@ button.glyphicon-button.active.focus {
|
||||
|
||||
}
|
||||
|
||||
.orange{
|
||||
background-color: #8d5e1a
|
||||
}
|
||||
|
||||
.shake {
|
||||
animation: shake 0.5s;
|
||||
animation-iteration-count: once;
|
||||
@ -819,7 +844,6 @@ button.glyphicon-button.active.focus {
|
||||
}
|
||||
}
|
||||
|
||||
/* Node selector to prioritise this selector above .float */
|
||||
button.btnArmTransferRoom{
|
||||
width:auto;
|
||||
margin-left: 2px;
|
||||
@ -887,6 +911,9 @@ button.btnArmTransferRoom.selected{
|
||||
#controlButtons {
|
||||
height:50px;
|
||||
}
|
||||
#header{
|
||||
min-height:0px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height: 300px){
|
||||
#gridlayout>#container.vidcon {
|
||||
@ -1123,6 +1150,22 @@ body {
|
||||
background-color:#474!important;
|
||||
}
|
||||
|
||||
#effectSelector{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 100%;
|
||||
max-width: 260px;
|
||||
}
|
||||
#effectSelector3{
|
||||
background-color: #FFF;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 3px;
|
||||
font-size: 93%;
|
||||
max-width: 100%;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
/*https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/*/
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
@ -1334,6 +1377,11 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
.mobileHide{
|
||||
display:none !important;
|
||||
}
|
||||
#effectSelector {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 355px) {
|
||||
@ -1367,7 +1415,6 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
background-color: #9d5050;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* padding: 5px 0; */
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
@ -1524,7 +1571,6 @@ label {
|
||||
margin: auto;
|
||||
background-color: #5555;
|
||||
width: 100px;
|
||||
/* padding: 30px; */
|
||||
border-radius: 30px;
|
||||
cursor:pointer;
|
||||
color: #636363
|
||||
@ -1535,7 +1581,6 @@ label {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
/* Add shadows to create the "card" effect */
|
||||
}
|
||||
|
||||
.card {
|
||||
@ -1543,8 +1588,6 @@ label {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
/* Create four equal columns that floats next to each other */
|
||||
|
||||
|
||||
.column {
|
||||
display: inline-block;
|
||||
@ -1553,17 +1596,12 @@ label {
|
||||
width: 20%;
|
||||
padding: 25px;
|
||||
height: 200px;
|
||||
/* Should be removed. Only for demonstration */
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
font-size: 100%;
|
||||
/* Add shadows to create the "card" effect */
|
||||
transition: box-shadow 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
/* On mouse-over, add a deeper shadow */
|
||||
|
||||
.column:hover {
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .3);
|
||||
}
|
||||
@ -1592,16 +1630,12 @@ img {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/* Empty container that will replace the original container */
|
||||
#empty-container {
|
||||
display: inline-block;
|
||||
/*float: left;*/
|
||||
width: 20%;
|
||||
min-width: 300px;
|
||||
padding: 28px;
|
||||
height: 200px;
|
||||
/* Should be removed. Only for demonstration */
|
||||
|
||||
margin: 1.8%;
|
||||
text-align: center;
|
||||
}
|
||||
@ -2126,15 +2160,7 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
#effectSelector3{
|
||||
background-color: #FFF;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 3px;
|
||||
font-size: 93%;
|
||||
max-width: 100%;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#effectsDiv {
|
||||
user-select: none;
|
||||
font-size:100%;
|
||||
@ -2180,12 +2206,7 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
|
||||
font-size: 100%;
|
||||
max-width: 260px;
|
||||
}
|
||||
#effectSelector{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 100%;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.gone {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
@ -2217,7 +2238,6 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
|
||||
height:0px;
|
||||
opacity: 0;
|
||||
}
|
||||
/* visited link */
|
||||
.grabLinks a:visited {
|
||||
color: black !important;
|
||||
}
|
||||
@ -2396,20 +2416,14 @@ label {
|
||||
font-weight: normal;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
/* Double-sized Checkboxes */
|
||||
|
||||
-ms-transform: scale(1.4);
|
||||
/* IE */
|
||||
|
||||
-moz-transform: scale(1.4);
|
||||
/* FF */
|
||||
|
||||
-webkit-transform: scale(1.4);
|
||||
/* Safari and Chrome */
|
||||
|
||||
-o-transform: scale(1.4);
|
||||
/* Opera */
|
||||
|
||||
transform: scale(1.4);
|
||||
padding: 5px;
|
||||
margin: 0 5px 0 1px;
|
||||
@ -2506,13 +2520,11 @@ input[type=checkbox] {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.debugStats::-webkit-scrollbar-thumb {
|
||||
background: rgb(119, 119, 119);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
.debugStats::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(158, 158, 158);
|
||||
;
|
||||
@ -2735,7 +2747,6 @@ i.las.la-circle {
|
||||
font-size: 0.7em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
/* left: 22px; */
|
||||
position: relative;
|
||||
width: 230px;
|
||||
display: inline-block;
|
||||
@ -2786,7 +2797,6 @@ div#guestFeeds:empty {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Top of the page share link */
|
||||
a#reshare {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
@ -2798,7 +2808,6 @@ a#reshare {
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
/* Top of the page Join room input*/
|
||||
#joinroomID {
|
||||
border-radius: 0;
|
||||
padding: 5px;
|
||||
@ -2807,7 +2816,6 @@ a#reshare {
|
||||
margin: 0px var(--regular-margin);
|
||||
}
|
||||
|
||||
/* Tips for guests */
|
||||
span#guestTips {
|
||||
margin: 0 auto 15px auto;
|
||||
width: 450px;
|
||||
@ -3305,17 +3313,14 @@ input:checked + .slider:before {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
/* visited link */
|
||||
#alertModal a:visited {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
/* mouse over link */
|
||||
#alertModal a:hover {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
/* selected link */
|
||||
#alertModal a:active {
|
||||
color: blue;
|
||||
}
|
||||
@ -3587,6 +3592,8 @@ input:checked + .slider:before {
|
||||
content: "\f026"; }
|
||||
.la-eye-slash:before {
|
||||
content: "\f070"; }
|
||||
.la-eye:before {
|
||||
content: "\f06e"; }
|
||||
.la-minus:before {
|
||||
content: "\f068"; }
|
||||
.la-plus:before {
|
||||
|
||||
193
main.js
193
main.js
@ -382,9 +382,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
|
||||
// session.facingMode }; // user or environment
|
||||
|
||||
if (urlParams.has('forcelandscape') || urlParams.has('fl')){
|
||||
if (urlParams.has('forcelandscape') || urlParams.has('forcedlandscape') || urlParams.has('fl')){
|
||||
session.orientation = "landscape";
|
||||
} else if (urlParams.has('forceportrait') || urlParams.has('fp')){
|
||||
} else if (urlParams.has('forceportrait') || urlParams.has('forcedportrait')|| urlParams.has('fp')){
|
||||
session.orientation = "portrait";
|
||||
}
|
||||
|
||||
@ -499,10 +499,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.screensharebutton = true;
|
||||
}
|
||||
|
||||
if (urlParams.has('ssb')) {
|
||||
session.screensharebutton = true;
|
||||
}
|
||||
|
||||
if (urlParams.has('mute') || urlParams.has('muted') || urlParams.has('m')) {
|
||||
session.muted = true;
|
||||
}
|
||||
@ -540,18 +536,36 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
//}
|
||||
|
||||
if (urlParams.has('speakermute') || urlParams.has('speakermuted') || urlParams.has('mutespeaker') || urlParams.has('sm') || urlParams.has('ms')) {
|
||||
session.speakerMuted = true;
|
||||
getById("mutespeakertoggle").className = "las la-volume-mute my-float toggleSize";
|
||||
//getById("mutespeakerbutton").className="advanced float2 red";
|
||||
getById("mutespeakerbutton").classList.add("red");
|
||||
getById("mutespeakerbutton").classList.add("float2");
|
||||
getById("mutespeakerbutton").classList.remove("float");
|
||||
|
||||
var sounds = document.getElementsByTagName("video");
|
||||
for (var i = 0; i < sounds.length; ++i) {
|
||||
sounds[i].muted = session.speakerMuted;
|
||||
|
||||
var checkState = urlParams.get('speakermute') || urlParams.get('speakermuted') || urlParams.get('mutespeaker') || urlParams.get('sm') || urlParams.get('ms') || true;
|
||||
|
||||
if ( checkState === "false") {
|
||||
session.speakerMuted = false;
|
||||
} else if (checkState === "0") {
|
||||
session.speakerMuted = false;
|
||||
} else if (checkState === "no") {
|
||||
session.speakerMuted = false;
|
||||
} else if (checkState === "off") {
|
||||
session.speakerMuted = false;
|
||||
} else {
|
||||
session.speakerMuted = true;
|
||||
}
|
||||
}
|
||||
|
||||
session.speakerMuted_default = session.speakerMuted;
|
||||
|
||||
if (session.speakerMuted){
|
||||
getById("mutespeakertoggle").className = "las la-volume-mute my-float toggleSize";
|
||||
//getById("mutespeakerbutton").className="advanced float2 red";
|
||||
getById("mutespeakerbutton").classList.add("red");
|
||||
getById("mutespeakerbutton").classList.add("float2");
|
||||
getById("mutespeakerbutton").classList.remove("float");
|
||||
|
||||
var sounds = document.getElementsByTagName("video");
|
||||
for (var i = 0; i < sounds.length; ++i) {
|
||||
sounds[i].muted = session.speakerMuted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (urlParams.has('chatbutton') || urlParams.has('chat') || urlParams.has('cb')) {
|
||||
session.chatbutton = urlParams.get('chatbutton') || urlParams.get('chat') || urlParams.get('cb') || null;
|
||||
@ -588,7 +602,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.raisehands = true;
|
||||
}
|
||||
|
||||
if (urlParams.has('portrait') || urlParams.has('916') || urlParams.has('vertical')) {
|
||||
if (urlParams.has('portrait') || urlParams.has('916') || urlParams.has('vertical')) { // playback aspect ratio
|
||||
session.aspectratio = 1; // 9:16 (default of 0 is 16:9)
|
||||
} else if (urlParams.has('square') || urlParams.has('11')) {
|
||||
session.aspectratio = 2; //1:1 ?
|
||||
@ -596,9 +610,26 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.aspectratio = 3; //1:1 ?
|
||||
}
|
||||
|
||||
if (urlParams.has('forceaspectratio') || urlParams.has('far')) {
|
||||
session.forceAspectRatio = true; // 9:16 (default of 0 is 16:9)
|
||||
|
||||
if (urlParams.has('aspectratio') || urlParams.has('ar')) { // capture aspect ratio
|
||||
session.forceAspectRatio = urlParams.get('aspectratio') || urlParams.get('ar') || false;
|
||||
if (session.forceAspectRatio){
|
||||
session.forceAspectRatio=parseFloat(session.forceAspectRatio);
|
||||
}
|
||||
}
|
||||
|
||||
if (urlParams.has('crop')){
|
||||
var crop = parseInt(urlParams.get('crop')) || 0;
|
||||
if (crop>0){
|
||||
session.forceAspectRatio = 1.7777777778 * (crop/100);
|
||||
} else if (crop<0){
|
||||
session.forceAspectRatio = 1.7777777778 / (crop/100);
|
||||
} else {
|
||||
session.forceAspectRatio = 1.3333333333;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (urlParams.has('cover')) {
|
||||
session.cover = true;
|
||||
@ -730,9 +761,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.sitePassword = session.defaultPassword;
|
||||
if (urlParams.has('password') || urlParams.has('pass') || urlParams.has('pw') || urlParams.has('p')) {
|
||||
session.password = urlParams.get('password') || urlParams.get('pass') || urlParams.get('pw') || urlParams.get('p');
|
||||
|
||||
if (!session.password) {
|
||||
window.focus();
|
||||
session.password = await promptAlt(miscTranslations["enter-password"], true, true);
|
||||
if (session.password){
|
||||
session.password = session.password.trim();
|
||||
}
|
||||
} else if (session.password === "false") {
|
||||
session.password = false;
|
||||
session.defaultPassword = false;
|
||||
@ -742,12 +777,14 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
} else if (session.password === "off") {
|
||||
session.password = false;
|
||||
session.defaultPassword = false;
|
||||
} else {
|
||||
session.password = decodeURIComponent(session.password); // will be re-encoded in a moment.
|
||||
}
|
||||
}
|
||||
|
||||
if (session.password) {
|
||||
session.password = sanitizePassword(session.password);
|
||||
getById("passwordRoom").value = session.password;
|
||||
session.password = sanitizePassword(session.password);
|
||||
session.defaultPassword = false;
|
||||
getById("addPasswordBasic").style.display = "none";
|
||||
}
|
||||
@ -847,6 +884,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
document.documentElement.style.setProperty('--regular-margin', '0');
|
||||
document.documentElement.style.setProperty('--director-margin', '0 25px 0 0');
|
||||
getById("directorLinksButton").style.color = "black";
|
||||
getById("main").style.overflow = "hidden";
|
||||
}
|
||||
|
||||
if (urlParams.has('stereo') || urlParams.has('s') || urlParams.has('proaudio')) { // both peers need this enabled for HD stereo to be on. If just pub, you get no echo/noise cancellation. if just viewer, you get high bitrate mono
|
||||
@ -937,8 +975,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (urlParams.has('pie')){
|
||||
// Deploy your own handshake server for free; see: https://github.com/steveseguin/websocket_server
|
||||
if (urlParams.has('pie')){ // piesocket.com support is to be deprecated after dec/19/21, since piesocket is no longer a free service.
|
||||
session.customWSS = urlParams.get('pie') || false; // If session.customWSS == true, then there is no need to set parameters via URL
|
||||
if (session.customWSS){
|
||||
session.wss = "wss://free3.piesocket.com/v3/1?api_key="+session.customWSS; // if URL param is set, it will use the API key.
|
||||
@ -1830,6 +1868,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
} else {
|
||||
session.totalRoomBitrate_default = session.totalRoomBitrate; // trb_default doesn't change dynamically, but trb can (per director I guess)
|
||||
}
|
||||
|
||||
if (urlParams.has('maxtotalscenebitrate') || urlParams.has('totalscenebitrate') || urlParams.has('mtsb') || urlParams.has('tsb')) {
|
||||
session.totalSceneBitrate = urlParams.get('maxtotalscenebitrate') || urlParams.get('totalscenebitrate') || urlParams.get('mtsb') || urlParams.get('tsb') || false;
|
||||
if (session.totalSceneBitrate){
|
||||
session.totalSceneBitrate = parseInt(session.totalSceneBitrate);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (urlParams.has('limittotalbitrate') || urlParams.has('ltb')){
|
||||
@ -2528,6 +2573,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.effects = urlParams.get('effects') || urlParams.get('effect') || null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (session.effects!==false){
|
||||
if (session.effects === null){
|
||||
getById("effectsDiv").style.display = "block";
|
||||
@ -2546,6 +2593,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
getById("effectSelector").style.display = "none";
|
||||
getById("effectsDiv").style.display = "block";
|
||||
}
|
||||
if (session.effect === "3a"){ // heavier blur
|
||||
session.effectValue = 5;
|
||||
session.effect = "3";
|
||||
} else if (session.effect === "3"){
|
||||
session.effectValue = 2;
|
||||
}
|
||||
// mirror == 2
|
||||
// face == 1
|
||||
// blur = 3
|
||||
@ -2553,6 +2606,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
// image = 5
|
||||
}
|
||||
|
||||
if (urlParams.has('effectvalue') || urlParams.has('ev')) {
|
||||
session.effectValue = parseInt(urlParams.get('effectvalue')) || parseInt(urlParams.get('ev')) || 0;
|
||||
session.effectValue_default = session.effectValue;
|
||||
}
|
||||
|
||||
|
||||
if (session.webcamonly == true) {
|
||||
if (session.introButton){
|
||||
getById("container-2").className = 'column columnfade advanced'; // Hide screen share
|
||||
@ -2614,10 +2673,14 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
if (urlParams.has('screensharequality') || urlParams.has('ssq')) {
|
||||
if (urlParams.get('screensharequality') || urlParams.get('ssq')) {
|
||||
session.screensharequality = urlParams.get('screensharequality') || urlParams.get('ssq');
|
||||
session.screensharequality = parseInt(session.screensharequality) || 1;
|
||||
session.screensharequality = parseInt(session.screensharequality) || 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (urlParams.has('screensharebitrate') || urlParams.has('ssbitrate')) {
|
||||
session.screenShareBitrate = urlParams.get('screensharebitrate') || urlParams.get('ssbitrate');
|
||||
session.screenShareBitrate = parseInt(session.screenShareBitrate) || 2500;
|
||||
}
|
||||
|
||||
if (session.roomid!==false){
|
||||
if (!(session.cleanOutput)) {
|
||||
@ -2772,7 +2835,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
} else if (session.chatbutton === false) {
|
||||
getById("chatbutton").classList.add("advanced");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (urlParams.has('nofileshare') || urlParams.has('nodownloads') || urlParams.has('nofiles')){
|
||||
session.hostedFiles = false;
|
||||
@ -2947,6 +3010,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
errorlog(e);
|
||||
}
|
||||
|
||||
|
||||
// Please contact steve on discord.vdo.ninja if you'd like this iFRAME tweaked, expanded, etc -- it's updated based on user request
|
||||
|
||||
if (isIFrame) { // reduce CPU load if not needed. //iframe API
|
||||
window.onmessage = function(e) { // iFRAME support
|
||||
log(e);
|
||||
@ -3061,17 +3127,28 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
|
||||
|
||||
if ("volume" in e.data) {
|
||||
if ("volume" in e.data) { // might not work with iframes or meshcast currently.
|
||||
for (var i in session.rpcs) {
|
||||
try {
|
||||
session.rpcs[i].videoElement.volume = parseFloat(e.data.volume);
|
||||
if (!session.rpcs[i].videoElement){continue;}
|
||||
if ("streamID" in session.rpcs[i]) {
|
||||
if ("target" in e.data) {
|
||||
if ((session.rpcs[i].streamID == e.data.target) || (e.data.target == "*")) { // specify a stream ID or let it apply to all videos
|
||||
session.rpcs[i].videoElement.volume = parseFloat(e.data.volume);
|
||||
}
|
||||
} else {
|
||||
session.rpcs[i].videoElement.volume = parseFloat(e.data.volume);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
errorlog(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ("panning" in e.data){
|
||||
|
||||
|
||||
if ("panning" in e.data){ // panning adjusts the stereo pan , although current its UUID based. can add stream ID based if requested.
|
||||
if ("UUID" in e.data){
|
||||
try {
|
||||
adjustPan(UUID, e.data.panning);
|
||||
@ -3090,20 +3167,36 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
|
||||
|
||||
if ("bitrate" in e.data) {
|
||||
if ("bitrate" in e.data) { /// set a video bitrate for a video; scene or view link; kbps
|
||||
for (var i in session.rpcs) {
|
||||
try {
|
||||
session.requestRateLimit(parseInt(e.data.bitrate), i);
|
||||
if ("streamID" in session.rpcs[i]) {
|
||||
if ("target" in e.data) {
|
||||
if ((session.rpcs[i].streamID == e.data.target) || (e.data.target == "*")) { // specify a stream ID or let it apply to all videos
|
||||
session.requestRateLimit(parseInt(e.data.bitrate), i);
|
||||
}
|
||||
} else {
|
||||
session.requestRateLimit(parseInt(e.data.bitrate), i); // bitrate = 0 pauses the video
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
errorlog(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ("audiobitrate" in e.data) {
|
||||
if ("audiobitrate" in e.data) { // changes the audio bitrate of a specific or all inbound media tracks. kbps
|
||||
for (var i in session.rpcs) {
|
||||
try {
|
||||
session.requestAudioRateLimit(parseInt(e.data.audiobitrate), i);
|
||||
if ("streamID" in session.rpcs[i]) {
|
||||
if ("target" in e.data) {
|
||||
if ((session.rpcs[i].streamID == e.data.target) || (e.data.target == "*")) { // specify a stream ID or let it apply to all videos
|
||||
session.requestAudioRateLimit(parseInt(e.data.audiobitrate), i);
|
||||
}
|
||||
} else {
|
||||
session.requestAudioRateLimit(parseInt(e.data.audiobitrate), i); // bitrate = 0 pauses the video
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
errorlog(e);
|
||||
}
|
||||
@ -3120,12 +3213,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
changeAudioDevice(e.data.changeAudioDevice);
|
||||
}
|
||||
|
||||
if ("changeAudioOutputDevice" in e.data) {
|
||||
if ("changeAudioOutputDevice" in e.data) {
|
||||
warnlog(e.data.changeAudioOutputDevice);
|
||||
changeAudioOutputDeviceById(e.data.changeAudioOutputDevice);
|
||||
}
|
||||
|
||||
if ("getDeviceList" in e.data) {
|
||||
if ("getDeviceList" in e.data) { // get a list of local camera / audio devices
|
||||
warnlog(e.data.getDeviceList);
|
||||
enumerateDevices().then(function(deviceInfos) {
|
||||
parent.postMessage({
|
||||
@ -3140,7 +3233,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if ("sendMessage" in e.data) { // webrtc send to viewers
|
||||
session.sendMessage(e.data);
|
||||
}
|
||||
@ -3153,7 +3245,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.sendPeers(e.data);
|
||||
}
|
||||
|
||||
if ("reload" in e.data) {
|
||||
if ("reload" in e.data) { // reload the page
|
||||
location.reload();
|
||||
}
|
||||
|
||||
@ -3272,7 +3364,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
}
|
||||
|
||||
if ("getStreamIDs" in e.data) {
|
||||
if ("getStreamIDs" in e.data) { // get a list of stream Ids, with a label if it is present. label = false if not there
|
||||
if (e.data.getStreamIDs == true) {
|
||||
var streamIDs = {};
|
||||
for (var i in session.rpcs) {
|
||||
@ -3285,7 +3377,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
}
|
||||
|
||||
if ("close" in e.data) {
|
||||
if ("close" in e.data) { // disconnect and hangup all inbound streams.
|
||||
for (var i in session.rpcs) {
|
||||
try {
|
||||
session.rpcs[i].close();
|
||||
@ -3295,7 +3387,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
}
|
||||
|
||||
if ("style" in e.data) {
|
||||
if ("style" in e.data) { // insert a custom style sheet
|
||||
try {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = e.data.style;
|
||||
@ -3344,7 +3436,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}, "*");
|
||||
}
|
||||
|
||||
if ("automixer" in e.data) {
|
||||
if ("automixer" in e.data) { // stop the auto mixer if you want to control the layout and bitrate yourself
|
||||
if (e.data.automixer == true) {
|
||||
session.manual = false;
|
||||
try {
|
||||
@ -3371,13 +3463,20 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
if ("streamID" in session.rpcs[i]) {
|
||||
if ((session.rpcs[i].streamID == e.data.target) || (e.data.target == "*")) {
|
||||
try {
|
||||
|
||||
if ("settings" in e.data) {
|
||||
for (const property in e.data.settings) {
|
||||
session.rpcs[i].videoElement[property] = e.data.settings[property];
|
||||
}
|
||||
try{
|
||||
for (const property in e.data.settings) {
|
||||
try {
|
||||
session.rpcs[i].videoElement[property] = e.data.settings[property];
|
||||
} catch(e){}
|
||||
}
|
||||
} catch(e){}
|
||||
}
|
||||
if ("add" in e.data) {
|
||||
getById("gridlayout").appendChild(session.rpcs[i].videoElement);
|
||||
try{
|
||||
getById("gridlayout").appendChild(session.rpcs[i].videoElement);
|
||||
} catch(e){warnlog(e);}
|
||||
|
||||
} else if ("remove" in e.data) {
|
||||
try {
|
||||
@ -3387,7 +3486,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.rpcs[i].videoElement.parentNode.parentNode.removeChild(session.rpcs[i].videoElement.parentNode);
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// video and audio bitrate handled else where
|
||||
} catch (e) {
|
||||
errorlog(e);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user