mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 13:48:38 +00:00
v19.2 beta
This commit is contained in:
Steve Seguin
GitHub
parent
842afb0465
commit
657c9eb232
1155
iframe.html
1155
iframe.html
File diff suppressed because it is too large
Load Diff
97
index.html
97
index.html
@ -54,7 +54,7 @@
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="./main.css?ver=125" />
|
||||
<link rel="stylesheet" href="./main.css?ver=136" />
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.min.js"></script>
|
||||
<style id="lightbox-animations" type="text/css"></style>
|
||||
</head>
|
||||
@ -67,7 +67,7 @@
|
||||
<link itemprop="url" href="./media/vdoNinja_logo_full.png" />
|
||||
</span>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/CodecsHandler.js?ver=34"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=291"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=294"></script>
|
||||
<input id="zoomSlider" type="range" style="display: none;" />
|
||||
<div id="header">
|
||||
|
||||
@ -683,11 +683,15 @@
|
||||
<input type="text" autocorrect="off" id="iframeURL" autocapitalize="none" style="margin:10px; border:2px solid; padding:10px; width:400px;" title="Enter an HTTPS URL" multiple/><br />
|
||||
<button onclick="previewIframe(getById('iframeURL').value);" >Preview</button>
|
||||
<button onclick="this.innerHTML = 'Update'; session.publishIFrame(getById('iframeURL').value);" >Share</button><br />
|
||||
<small class="iframeblob">
|
||||
<div class="message-card info">
|
||||
<h1>Usage information</h1>
|
||||
<p></p>
|
||||
<ul style="text-align: left;">
|
||||
<li>Not all websites will work with this feature as some sites disallow embedding.</li>
|
||||
<li>The site will try to auto-optimize standard Youtube or Twitch links.</li>
|
||||
<li>Remote websites must be CORS/IFrame compatible with full SSL-encryption enabled.</li>
|
||||
</small>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="iFramePreview" style=" width: 1280px; height: 720px; margin: auto; padding: 10px;"></div>
|
||||
</div>
|
||||
<div class="outer close">
|
||||
@ -1339,6 +1343,32 @@
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span id="mixGroup1" class="hidden" data-cluster="2">
|
||||
|
||||
<button style="width:35.2px;" data-action-type="toggle-group" data-value="1" title="Add/remove from group 1" onclick="changeGroup(this);">
|
||||
<span >G1</span>
|
||||
</button>
|
||||
<button style="width: 35.2px" data-action-type="toggle-group" data-value="2" title="Add/remove from group 2" onclick="changeGroup(this);">
|
||||
<span >G2</span>
|
||||
</button>
|
||||
<button style="width: 35.2px" data-action-type="toggle-group" data-value="3" title="Add/remove from group 3" onclick="changeGroup(this);">
|
||||
<span >G3</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span id="mixGroup2" class="hidden" data-cluster="2">
|
||||
|
||||
<button style="width:35.2px;" data-action-type="toggle-group" data-value="4" title="Add/remove from group 4" onclick="changeGroup(this);">
|
||||
<span >G4</span>
|
||||
</button>
|
||||
<button style="width: 35.2px" data-action-type="toggle-group" data-value="5" title="Add/remove from group 5" onclick="changeGroup(this);">
|
||||
<span >G5</span>
|
||||
</button>
|
||||
<button style="width: 35.2px" data-action-type="toggle-group" data-value="6" title="Add/remove from group 6" onclick="changeGroup(this);">
|
||||
<span >G6</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
|
||||
<button class="hidden" data-cluster="2" data-action-type="advanced-audio-settings" data-active="false" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
|
||||
<span data-translate="advanced-audio-settings"><i class="las la-sliders-h"></i> Audio Settings</span>
|
||||
@ -1417,39 +1447,36 @@
|
||||
</div>
|
||||
|
||||
<div id="popupSelector" style="display:none;">
|
||||
<span id="videoMenu3" class="videoMenu">
|
||||
<span id="videoMenu3">
|
||||
<i class="las la-video"></i><span data-translate="video-source"> Video Source </span>
|
||||
<select id="videoSource3" ></select>
|
||||
<span id="refreshVideoButton" title="Activate or Reload this video device."><i style="top: 3px; cursor: pointer; font-size: 120%; position: relative; left: 10px;" class="las la-sync-alt"></i></span>
|
||||
<span id="gear_webcam3" style="display: none; cursor:pointer;" onclick="toggle(document.getElementById('videoSettings3'));">
|
||||
<span id="gear_webcam3" style="display: none; cursor:pointer;" onclick="toggleQualityGear3();">
|
||||
|
||||
<i class="las la-cog" style="font-size: 135%; top:1px; vertical-align: middle;" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span id="videoSettings3" style="display: none;">
|
||||
<center>
|
||||
<form id="webcamquality3">
|
||||
<input type="radio" id="fullhd3" name="resolution" value="0" />
|
||||
<label for="fullhd3">
|
||||
<span data-translate="max-resolution">Max Resolution</span>
|
||||
</label> |
|
||||
|
||||
<input type="radio" checked id="halfhd3" name="resolution" value="1" />
|
||||
<label for="halfhd3">
|
||||
<span data-translate="balanced">Balanced</span>
|
||||
</label> |
|
||||
|
||||
<input type="radio" id="nothd3" name="resolution" value="2" />
|
||||
<label for="nothd3">
|
||||
<span data-translate="smooth-cool">Smooth and Cool</span>
|
||||
</label>
|
||||
<div id="webcamstats3" style="padding: 5px 0 0 0;"></div>
|
||||
</form>
|
||||
</center>
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
<span id="videoSettings3" style="display: none;">
|
||||
<center>
|
||||
<form id="webcamquality3">
|
||||
<input type="radio" id="fullhd3" name="resolution" value="0" />
|
||||
<label for="fullhd3">
|
||||
<span data-translate="max-resolution">Max Resolution</span>
|
||||
</label> |
|
||||
|
||||
<input type="radio" checked id="halfhd3" name="resolution" value="1" />
|
||||
<label for="halfhd3">
|
||||
<span data-translate="balanced">Balanced</span>
|
||||
</label> |
|
||||
|
||||
<input type="radio" id="nothd3" name="resolution" value="2" />
|
||||
<label for="nothd3">
|
||||
<span data-translate="smooth-cool">Smooth and Cool</span>
|
||||
</label>
|
||||
<div id="webcamstats3" style="padding: 5px 0 0 0;"></div>
|
||||
</form>
|
||||
</center>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
|
||||
<div class="form-group multiselect" alt="tip: Hold CTRL (command) to select Multiple" title="tip: Hold CTRL (command) to select Multiple" >
|
||||
<a id="multiselect-trigger3" class="form-control multiselect-trigger" >
|
||||
@ -1505,10 +1532,10 @@
|
||||
|
||||
<button onclick="toggleSettings()" style="width: 135px; background-color:#EFEFEF;padding:9px 12px 10px 2px;margin: 0px 0px 20px 0"><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 id='advancedOptionsCamera' onclick="this.classList.toggle('highlight');toggle(getById('popupSelector_constraints_video'),false,false); getById('popupSelector_constraints_loading').style.visibility='visible';" class="advancedToggle"><i class="las la-sliders-h" style="font-size:150%;top:3px;position:relative;"></i> <b><span class="mobileHide" data-translate="advanced">Advanced </span>Video</b></button>
|
||||
|
||||
<button id='advancedOptionsAudio' onclick="this.classList.toggle('highlight');toggle(getById('popupSelector_constraints_audio'),false,false); getById('popupSelector_constraints_loading').style.visibility='visible';" class="advancedToggle"><i class="las la-sliders-h" style="font-size:150%;top:3px;position:relative;"></i> <b><span class="mobileHide" data-translate="advanced">Advanced </span>Audio</b></button>
|
||||
|
||||
<button id='advancedOptionsCamera' onclick="this.classList.toggle('highlight');toggle(getById('popupSelector_constraints_video'),false,false); getById('popupSelector_constraints_loading').style.visibility='visible';" class="advancedToggle"><i class="las la-sliders-h" style="font-size:150%;top:3px;position:relative;"></i> <b><span class="mobileHide" data-translate="advanced">Advanced </span>Video</b></button>
|
||||
|
||||
|
||||
<span id="popupSelector_constraints_audio" class="popupSelector_constraints" style="display: none;">
|
||||
|
||||
@ -1744,7 +1771,7 @@
|
||||
|
||||
|
||||
var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
|
||||
session.version = "19.1";
|
||||
session.version = "19.2";
|
||||
session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
|
||||
|
||||
session.defaultPassword = "someEncryptionKey123"; // Change this password if self-deploying for added security/privacy
|
||||
@ -1821,11 +1848,11 @@
|
||||
// session.title // "zzzz"
|
||||
</script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=66"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=123"></script>
|
||||
<!--
|
||||
// If you wish to change branding, blank offers a good clean start.
|
||||
<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
|
||||
-->
|
||||
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=251"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=259"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
45
main.css
45
main.css
@ -13,6 +13,7 @@
|
||||
--video-margin: 0px;
|
||||
--video-rounded: 0px;
|
||||
--color-mode: light;
|
||||
--button-radius: 2px;
|
||||
}
|
||||
|
||||
* {
|
||||
@ -2032,19 +2033,19 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
|
||||
color: black !important;
|
||||
}
|
||||
#videoSettings3 {
|
||||
margin: 0 auto 15px auto;
|
||||
background-color: #f3f3f3;
|
||||
width: 450px;
|
||||
width: 100%;
|
||||
padding: 7px 10px 1px 10px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 90%;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
#videoSource3 {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 3px;
|
||||
font-size: 93%;
|
||||
max-width: 370px;
|
||||
max-width: 240px;
|
||||
}
|
||||
#outputSource {
|
||||
display: inline-block;
|
||||
@ -2085,6 +2086,17 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
}
|
||||
#videoMenu3{
|
||||
background-color: #f3f3f3;
|
||||
width: 450px;
|
||||
max-width:100%;
|
||||
display: block;
|
||||
padding: 10px 10px;
|
||||
border: 1px solid #ccc;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.audioMenu{
|
||||
text-align: left;
|
||||
@ -3351,7 +3363,9 @@ input:checked + .slider:before {
|
||||
content: "\f12a"; }
|
||||
.la-chevron-down:before {
|
||||
content: "\f078"; }
|
||||
|
||||
.la-music:before {
|
||||
content: "\f001"; }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-mode: dark;
|
||||
@ -3455,40 +3469,43 @@ body.darktheme #webcamstats2{
|
||||
background-color: #949494;
|
||||
}
|
||||
body.darktheme #audioSourceScreenshare{
|
||||
background-color: #AAA;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
body.darktheme #headphonesDiv2{
|
||||
background-color: #949494;
|
||||
}
|
||||
body.darktheme #outputSourceScreenshare{
|
||||
background-color: #AAA;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
body.darktheme #audioSource{
|
||||
background-color: #AAA;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
body.darktheme #outputSource{
|
||||
background-color: #AAA;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
body.darktheme #videoSourceSelect{
|
||||
background-color: #AAA;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
body.darktheme #videoSettings{
|
||||
background-color: #949494;
|
||||
}
|
||||
body.darktheme #effectSelector{
|
||||
background-color: #AAA;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
body.darktheme #effectSelector3{
|
||||
background-color: #AAA;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
body.darktheme #audioSource3{
|
||||
background-color: #AAA;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
body.darktheme #videoSource3{
|
||||
background-color: #AAA;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
body.darktheme #videoMenu3{
|
||||
background-color: #949494;
|
||||
}
|
||||
body.darktheme #outputSource3{
|
||||
background-color: #AAA;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
body.darktheme #videoSettings3{
|
||||
background-color: #949494;
|
||||
|
||||
59
main.js
59
main.js
@ -339,9 +339,23 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
|
||||
|
||||
if (urlParams.has('webcam') || urlParams.has('wc')) {
|
||||
if (urlParams.has('webcam') || urlParams.has('wc') || urlParams.has('miconly')) {
|
||||
session.webcamonly = true;
|
||||
screensharebutton = false;
|
||||
if (urlParams.has('miconly')){
|
||||
session.videoDevice=0;
|
||||
getById("add_camera").innerHTML = "Share your Microphone";
|
||||
miniTranslate(getById("add_camera"), "share-your-mic");
|
||||
getById("videoMenu").style.display = "none";
|
||||
//session.autostart = true;
|
||||
getById("mutevideobutton").style.setProperty("display", "none", "important");
|
||||
getById("videoMenu3").style.setProperty("display", "none", "important");
|
||||
//if (session.consent){
|
||||
// setTimeout(function(){
|
||||
// warnUser("⚠ Privacy warning: The director of this room can remotely switch your camera or microphone without permission.", 8000);
|
||||
// }, 1500);
|
||||
//}
|
||||
}
|
||||
} else if (urlParams.has('screenshare') || urlParams.has('ss')) {
|
||||
session.screenshare = true;
|
||||
if (urlParams.get('screenshare') || urlParams.get('ss')){
|
||||
@ -473,6 +487,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.aspectratio = 2; //1:1 ?
|
||||
}
|
||||
|
||||
if (urlParams.has('forceaspectratio') || urlParams.has('far')) {
|
||||
session.forceAspectRatio = true; // 9:16 (default of 0 is 16:9)
|
||||
}
|
||||
|
||||
if (urlParams.has('cover')) {
|
||||
session.cover = true;
|
||||
document.documentElement.style.setProperty('--fit-style', 'cover');
|
||||
@ -1372,8 +1390,22 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
|
||||
if (urlParams.has('order')) {
|
||||
session.order = parseInt(urlParams.get('order')) || 0;
|
||||
session.order = parseInt(urlParams.get('order')) || 1;
|
||||
}
|
||||
|
||||
if (urlParams.has('slot')) {
|
||||
session.slot = parseInt(urlParams.get('slot')) || 0;
|
||||
}
|
||||
|
||||
if (urlParams.has('group')) {
|
||||
session.group = urlParams.get('group') || "";
|
||||
session.group = session.group.split(",");
|
||||
}
|
||||
|
||||
if (urlParams.has('groupaudio') || urlParams.has('ga')) {
|
||||
session.groupAudio = true;
|
||||
}
|
||||
|
||||
if (urlParams.has('sensors') || urlParams.has('sensor') || urlParams.has('gyro') || urlParams.has('gyros') || urlParams.has('accelerometer')) {
|
||||
session.sensorData = urlParams.get('sensors') || urlParams.get('sensor') || urlParams.get('gyro') || urlParams.get('gyros') || urlParams.get('accelerometer') || 30;
|
||||
session.sensorData = parseInt(session.sensorData);
|
||||
@ -1700,6 +1732,15 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
log("framerate Changed");
|
||||
log(session.framerate);
|
||||
}
|
||||
|
||||
if (urlParams.has('tz')){
|
||||
session.tz = urlParams.get('tz');
|
||||
if ((session.tz === null) || (session.tz === "")){
|
||||
session.tz = false;
|
||||
} else {
|
||||
session.tz = parseInt(session.tz);
|
||||
}
|
||||
}
|
||||
|
||||
if (urlParams.has('maxframerate') || urlParams.has('mfr') || urlParams.has('mfps')) {
|
||||
session.maxframerate = urlParams.get('maxframerate') || urlParams.get('mfr') || urlParams.get('mfps');
|
||||
@ -1720,9 +1761,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
|
||||
if (urlParams.has('panning') || urlParams.has('pan')) {
|
||||
session.panning=true;
|
||||
if (urlParams.get('panning') || urlParams.get('pan')){
|
||||
session.panning = urlParams.get('panning') || urlParams.get('pan');
|
||||
session.panning = urlParams.get('panning') || urlParams.get('pan');
|
||||
if (session.panning===""){
|
||||
session.panning=true
|
||||
}
|
||||
session.audioEffects = true;
|
||||
}
|
||||
@ -1848,9 +1889,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
|
||||
if (urlParams.has('activespeaker') || urlParams.has('speakerview') || urlParams.has('sas')){
|
||||
session.activeSpeaker = true;
|
||||
session.activeSpeaker = urlParams.get('activespeaker') || urlParams.get('speakerview') || urlParams.get('sas') || 1;
|
||||
session.activeSpeaker = parseInt(session.activeSpeaker);
|
||||
|
||||
session.audioEffects = true;
|
||||
session.audioMeterGuest = true;
|
||||
session.minipreview = 2;
|
||||
//session.animatedMoves = false;
|
||||
|
||||
session.fadein=true;
|
||||
@ -1858,7 +1902,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
setInterval(function(){activeSpeaker(false);},100);
|
||||
|
||||
} else if (urlParams.has('noisegate')){
|
||||
session.quietOthers = true;
|
||||
session.quietOthers = urlParams.get('noisegate') || 1;
|
||||
session.quietOthers = parseInt(session.quietOthers);
|
||||
session.audioEffects = true;
|
||||
session.audioMeterGuest = true;
|
||||
setInterval(function(){activeSpeaker(false);},100);
|
||||
|
||||
@ -218,9 +218,9 @@ ol {
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#statsdiv {display: none;}
|
||||
#statsdiv {display: none;}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user