Update index.html

branding fixes

.github/workflows/update-advanced-settings-toc.yml

@@ -2,7 +2,7 @@ name: Update Advanced Settings Markdown TOC
 on:
   workflow_dispatch:
   schedule:
-    - cron: '0 3 * * *'
+    - cron: '0 0 29 2 1'
   
 jobs:
   update-toc:

IFRAME.md

@@ -1,38 +1,38 @@
-## OBS.Ninja - iFrame API documentation
+## VDO.Ninja - iFrame API documentation
 
-OBS.Ninja (OBSN) is offers here a simple and free solution to quickly enable real-time video streaming in their websites. OBSN wishes to make live video streaming development accessible to any developer, even novices, yet still remain flexible and powerful.
+VDO.Ninja (VDON) is offers here a simple and free solution to quickly enable real-time video streaming in their websites. VDON wishes to make live video streaming development accessible to any developer, even novices, yet still remain flexible and powerful.
 
-While OBS.Ninja does offer source-code to customize the application and UI at a low level, this isn't for beginners and it is rather hard to maintain. As well, due to the complexity of video streaming in the web, typical approaches for offering API access isn't quite feasible either.
+While VDO.Ninja does offer source-code to customize the application and UI at a low level, this isn't for beginners and it is rather hard to maintain. As well, due to the complexity of video streaming in the web, typical approaches for offering API access isn't quite feasible either.
 
-The solution decided on isn't an SDK framework, but rather the use of embeddable _IFrames_ and a corresponding bi-directional iframe API. An [iframe](https://www.w3schools.com/tags/tag_iframe.ASP) allows us to embed a webpage inside a webpage, including OBS.Ninja into your own website.
+The solution decided on isn't an SDK framework, but rather the use of embeddable _IFrames_ and a corresponding bi-directional iframe API. An [iframe](https://www.w3schools.com/tags/tag_iframe.ASP) allows us to embed a webpage inside a webpage, including VDO.Ninja into your own website.
 
-Modern web browsers allow the parent website to communicate with the child webpage, giving a high-level of control to a developer, while also abstracting the complex code and hosting requirements. Functionality, we can make an OBSN video stream act much like an HTML video element tag, where you can issue commands like play, pause, or change video sources with ease.
+Modern web browsers allow the parent website to communicate with the child webpage, giving a high-level of control to a developer, while also abstracting the complex code and hosting requirements. Functionality, we can make an VDON video stream act much like an HTML video element tag, where you can issue commands like play, pause, or change video sources with ease.
 
-Creating an OBSN iframe can be done in HTML or programmatically with Javascript like so:
+Creating an VDON iframe can be done in HTML or programmatically with Javascript like so:
 
 ```
 const iframe = document.createElement("iframe");
 iframe.allow = "autoplay;camera;microphone";
 iframe.allowtransparency = "false";
-iframe.src = "https://obs.ninja/?webcam";
+iframe.src = "https://vdo.ninja/?webcam";
 ```
 
-You can also make an OBS.Ninja without Javascript, using just HTML, like
+You can also make an VDO.Ninja without Javascript, using just HTML, like
 
-`<iframe allow="autoplay;camera;microphone" src="https://obs.ninja/?view=vhX5PYg&cleanoutput&transparent"></iframe>`
+`<iframe allow="autoplay;camera;microphone" src="https://vdo.ninja/?view=vhX5PYg&cleanoutput&transparent"></iframe>`
 
 Adding that iframe to the DOM will reveal a simple page accessing for a user to select and share their webcam. For a developer wishing to access a remote guest's stream, this makes the ingestion of that stream into production software like OBS Studios very easy. The level of customization and control opens up opportunities, such as a pay-to-join audience option for a streaming interactive broadcast experience.
 
-An example of how this API is used by OBS.Ninja is with its Internet Speedtest, which has two OBS.Ninja IFrames on a single page. One iframe feeds video to the other iframe, and the speed at which it does this is a measure of the system's performance. Detailed stats of the connection are made available to the parent window, which displays the results.
-https://obs.ninja/speedtest
+An example of how this API is used by VDO.Ninja is with its Internet Speedtest, which has two VDO.Ninja IFrames on a single page. One iframe feeds video to the other iframe, and the speed at which it does this is a measure of the system's performance. Detailed stats of the connection are made available to the parent window, which displays the results.
+https://vdo.ninja/speedtest
 
-More community-contributed IFRAME examples can be found here: https://github.com/steveseguin/obsninja/tree/master/examples
+More community-contributed IFRAME examples can be found here: https://github.com/steveseguin/vdoninja/tree/master/examples
 
-A sandbox of options is available at this page, too: https://obs.ninja/iframe You can enter an OBS.Ninja URL in the input box to start using it. For developers, viewing the source of that page will reveal examples of how all the available functions work, along with a way to test and play with each of them. You can also see here for the source-code on GitHub: https://github.com/steveseguin/obsninja/blob/master/iframe.html
+A sandbox of options is available at this page, too: https://vdo.ninja/iframe You can enter an VDO.Ninja URL in the input box to start using it. For developers, viewing the source of that page will reveal examples of how all the available functions work, along with a way to test and play with each of them. You can also see here for the source-code on GitHub: https://github.com/steveseguin/vdoninja/blob/master/iframe.html
 
-One thing to note about this iframe API is that it is a mix of URL parameters given to the iframe _src_ URL, but also the postMessage and addEventListener methods of the browser. The later is used to dynamically control OBS.Ninja, while the former is used to initiate the instance to a desired state.
+One thing to note about this iframe API is that it is a mix of URL parameters given to the iframe _src_ URL, but also the postMessage and addEventListener methods of the browser. The later is used to dynamically control VDO.Ninja, while the former is used to initiate the instance to a desired state.
 
-For more information on the URL parameters thare are available, please see: https://github.com/steveseguin/obsninja/wiki/Advanced-Settings
+For more information on the URL parameters thare are available, please see: https://github.com/steveseguin/vdoninja/wiki/Advanced-Settings
 
 Some of the more interesting ones primarily for iframe users might include:
 
@@ -56,7 +56,7 @@ Some of the more interesting ones primarily for iframe users might include:
 - Send/Recieve a chat message to other connected guests
 - Get notified when there is a video connection
 
-As for the actually details for methods and options available to dynamically control child OBSN iframe, they are primarily kept up to via the iframe.html file that is mentioned previously. see: _iframe.html_. Below is a snippet from that file:
+As for the actually details for methods and options available to dynamically control child VDON iframe, they are primarily kept up to via the iframe.html file that is mentioned previously. see: _iframe.html_. Below is a snippet from that file:
 
 ```js
 let button = document.createElement("button");
@@ -228,7 +228,7 @@ button.onclick = () => {
 };
 iframeContainer.appendChild(button);
 
-// As for listening events, where the parent listens for responses or events from the OBSN child frame:
+// As for listening events, where the parent listens for responses or events from the VDON child frame:
 
 // //////////  LISTEN FOR EVENTS
 
@@ -298,10 +298,8 @@ eventer(messageEvent, function (e) {
 });
 ```
 
-This OBS.Ninja API is developed and expanded based on user feedback and requests. It is by no means complete.
+This VDO.Ninja API is developed and expanded based on user feedback and requests. It is by no means complete.
 
-Regarding versioning, I currently host past versions of OBS.Ninja, so using those past versions can ensure some level of consistency and expectation. https://obs.ninja/v12/ for example is the version 12 hosted version. The active and main production version of OBSN of course undergoes constant updates, and while I try to maintain backwards compatibility with changes to the API, it is still early days and changes might happen.
-
-Please feel free to follow me in the OBS.Ninja Discord channel, where I post news about updates and listen to requests. The upcoming version of OBS.Ninja is also often hosted at https://obs.ninja/beta, where you can explore new features and help crush any unexpected bugs.
+Please feel free to follow me in the VDO.Ninja Discord channel (discord.vdo.ninja) where I post news about updates and listen to requests. The upcoming version of VDO.Ninja is also often hosted at https://vdo.ninja/beta, where you can explore new features and help crush any unexpected bugs.
 
 -steve

README.md

@@ -1,75 +1,78 @@
 
+#### ⚠ Notice! We've started our rebranding from OBS.Ninja to VDO.Ninja 🎈 -- nothing else will be changing. ✨
+
+
 <img src="media/obsNinja_logo_full.png" alt="Logo by brimace" height="150" />
 
-## What is OBS NINJA
-OBS.Ninja uses peer-to-peer technology to bring remote cameras into OBS. In most cases, all video data is transferred directly from peer to peer, without needing to go through any video server. This results in high-quality video with super low latency. In a small number of cases, video data may go through an encrypted TURN server, which is used to facilitate peer connections when otherwise not possible.
+## What is ~~OBS NINJA~~ **VDO NINJA**
+VDO.Ninja uses peer-to-peer technology to bring remote cameras into OBS or other studio software. 
 
-OBS Ninja is not affiliated with OBS. OBS.Ninja is designed to allow content creators to produce real-time live shows with OBS Studio (or other compatible software) using remote media streams. It can also turn smartphones into wireless webcams, with additional Virtualcam software. 
+In most cases, all video data is transferred directly from peer to peer, without needing to go through any video server. This results in high-quality video with super low latency. In a small number of cases, video data may go through an encrypted TURN server, which is used to facilitate peer connections when otherwise not possible.
 
-Please see the sub-reddit added info: https://reddit.com/r/obsninja  
-Also check out the FAQ for more info: https://github.com/steveseguin/obsninja/wiki
+VDO.Ninja is designed to allow content creators to produce real-time live shows using remote media streams. It can also turn smartphones into wireless webcams, with additional Virtualcam software.
 
-<img src="https://user-images.githubusercontent.com/2575698/94018108-34b1de00-fd7e-11ea-8c7d-df001253b60d.png" height="300" />
+VDO.Ninja is freely available to use as a managed service over at https://vdo.ninja. 
+
+For live support, please join our discord at https://discord.obs.ninja
+Please see the sub-reddit added info: https://reddit.com/r/vdoninja  
+Also check out the FAQ for more info: https://github.com/steveseguin/vdoninja/wiki
+
+<img src="https://user-images.githubusercontent.com/2575698/120865595-56de3b80-c55c-11eb-8b98-60c59ae0f904.png" height="300" />
 
 ## How to use
-I demo the basic usage of OBS.Ninja on YouTube: https://www.youtube.com/watch?v=6R_sQKxFAhg
+I demo the basic usage of VDO.Ninja on YouTube: https://www.youtube.com/watch?v=6R_sQKxFAhg
 
-Here is a podcast series showing how to use different basic OBS.Ninja features, including macOS support: https://www.youtube.com/watch?v=XfSqufuoV74&list=PLWodc2tCfAH1l_LDvEyxEqFf42hOBKqQM
+Here is a podcast series showing how to use different basic VDO.Ninja features, including macOS support: https://www.youtube.com/watch?v=XfSqufuoV74&list=PLWodc2tCfAH1l_LDvEyxEqFf42hOBKqQM
 
 And Here is another video series touching on some more advanced settings: https://www.youtube.com/watch?v=mQ1Jdhf5aYg&list=PL8VJWj2-XLFpFu3G35Hdm1nKZ2xn9_0_8
 
 Check the subreddit for added use cases, advanced features, and support. Advanced features includes high-quality audio modes, custom video resolutions, and more.
 
-MacOS users will face some challenges in using OBS 25/26, but there are workarounds. Please see the subreddit or [the Wiki](https://github.com/steveseguin/obsninja/wiki).
-
 ## What's in this repo
-This repo contains software for OBS.Ninja, including the HTML landing page for its Electron Capture app offering. A sample config file and instructions for setting up a TURN server (video relay server), is also provided. You may also find [the Wiki](https://github.com/steveseguin/obsninja/wiki) for the project in this repo, which contains added information on how to use the software.
+This repo contains software for VDO.Ninja, including the HTML landing page for its Electron Capture app offering. A sample config file and instructions for setting up a TURN server (video relay server), is also provided. You may also find [the Wiki](https://github.com/steveseguin/vdoninja/wiki) for the project in this repo, which contains added information on how to use the software.
 
 ## How to Deploy this Repo
-To use, just download and host the files on a HTTPS-enabled webserver. You may want to hide the .html extensions within your HTTP server as well, else the generated links will not work. See [here](https://github.com/steveseguin/obsninja/blob/master/install.md) for added details and alternative install options.
+To use, just download and host the files on a HTTPS-enabled webserver. You may want to hide the .html extensions within your HTTP server as well, else the generated links will not work. See [here](https://github.com/steveseguin/vdoninja/blob/master/install.md) for added details and alternative install options.
 
-Directions on how to deploy a TURN server are listed in the turnserver.md file. You may wish to do so, although not all use cases will not need one. Only about 10% of remote guests, those often connected via 4G LTE, will require a TURN server. While OBS.Ninja does host some TURN servers, they are quite expensive to operate and not really for private deployment use. If you are deploying your own version of OBS.Ninja, I'd ask you use your own TURN servers instead. 
+Directions on how to deploy a TURN server are listed in the turnserver.md file. You may wish to do so, although not all use cases will not need one. Only about 10% of remote guests, those often connected via 4G LTE, will require a TURN server. While VDO.Ninja does host some TURN servers, they are quite expensive to operate and not really for private deployment use. If you are deploying your own version of VDO.Ninja, I'd ask you use your own TURN servers instead. 
 
 ## Server side / API software
-Since OBS.Ninja uses peer-2-peer technology, video connections are made directly between viewer and publisher in 90% of cases. Hosting a TURN server yourself may help improve performance, but less than 1% of users will see any benefit of this. Details on how to deploy a TURN server are provided. For those capable of hosting their own TURN server, that would be appreciated if possible, as TURN servers are the only real cost incurred by OBS.Ninja at present. (other than time, of course)
+Since VDO.Ninja uses peer-2-peer technology, video connections are made directly between viewer and publisher in 90% of cases. Hosting a TURN server yourself may help improve performance, but less than 1% of users will see any benefit of this. Details on how to deploy a TURN server are provided. For those capable of hosting their own TURN server, that would be appreciated if possible, as TURN servers are the only real cost incurred by VDO.Ninja at present. (other than time, of course)
 
-Other than TURN servers, OBS.Ninja also uses public STUN servers and a hosted handshake server. These are used to facilitate the initial setup of peer connections and are generally not required after a peer connection is established. These servers are free to access and use, even for private deployments. The handshake server's code is currently not available, so basic access to the Internet is still required to use OBS.Ninja even with a private deployment.
+Other than TURN servers, VDO.Ninja also uses public STUN servers and a hosted handshake server. These are used to facilitate the initial setup of peer connections and are generally not required after a peer connection is established. These servers are free to access and use, even for private deployments. As of Version 17.3 of VDO.Ninja, you can host your own handshake server or use a third-party managed one (such as piesocket.com); please see details here: https://github.com/steveseguin/websocket_server
 
-Development builds of OBS.Ninja may include debugging software, but in-production releases have this removed. Double check to ensure "console.re" debugging is disabled before deployment, just to be safe.
+Development builds of VDO.Ninja may include debugging software, but in-production releases have this removed. Double check to ensure "console.re" debugging is disabled before deployment, just to be safe.
 
-A design goal of OBS.Ninja is to be serverless and we are 99% of the way there. This design objective ensures OBS.Ninja can be offered for free, along with providing increased levels of security and privacy. 
+A design goal of VDO.Ninja is to be serverless and we are 99% of the way there. This design objective ensures VDO.Ninja can be offered for free, along with providing increased levels of security and privacy. 
 
 ## Issues? problems? Not working?
 
-Please see the sub-reddit for more support: https://reddit.com/r/obsninja  
+Please see the sub-reddit for more support: https://reddit.com/r/vdoninja  
 
-Also check out the FAQ for common answers: https://github.com/steveseguin/obsninja/wiki
+Also check out the FAQ for common answers: https://github.com/steveseguin/vdoninja/wiki
 
 If urgent, join me on discord: https://discord.gg/EksyhGA or email me at steve@seguin.email
 
 ## Related Projects
-### OBS.Ninja's Electron Capture:
-A better way to perform "Window Capturing" on desktop if OBS Browser Sources fails you. A downloadable tool designed to enhance OBS.Ninja.
+### VDO.Ninja's Electron Capture:
+A better way to perform "Window Capturing" on desktop if OBS Browser Sources fails you. A downloadable tool designed to enhance VDO.Ninja.
 https://github.com/steveseguin/electroncapture
 
 ### CAPTION.Ninja
-A free AI-based closed-captioning tool to add speech-to-text overlays to OBS Studio. It's browser-based with an easy OBS integration. Developed by Steve as well! https://caption.ninja
+A free AI-based closed-captioning tool to add speech-to-text overlays to OBS Studio. It's browser-based with an easy OBS or VMix integration. Developed by Steve as well! https://caption.ninja
 
 ### Chat.Overlay.Ninja
 A free Chrome extension that lets you select Youtube Live Chat comments, with those comments then appearing directly in OBS or VMix as an overlay. No chroma-keying needed and the styling is pretty easy to customize without needing to modify the Chrome extension itself.
 http://chat.overlay.ninja/
 
 ### Steves.app:
-A website designed to also work with OBS.Ninja as a Broadcasting tool. Share your webcam, window, desktop, or video file with friends and family. Peer-2-peer, so privacy can be maintained, but you can also list your broadcasts for others to watch.
+A website designed to also work with VDO.Ninja as a Broadcasting tool. Share your webcam, window, desktop, or video file with friends and family. Peer-2-peer, so privacy can be maintained, but you can also list your broadcasts for others to watch.
 https://steves.app/
 
-### StageTEN.tv
-A browser-based studio solution and simplified alternative to OBS, with built-in OBS.Ninja functionality. It is a server-based approach to group interactions and live production. Steve Seguin is affiliated with StageTEn, yet StageTEN is not affiliated with OBS.Ninja.
-
 ## Privacy
-I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with OBS.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you. See: [turnserver.md](turnserver.md) 
+I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with VDO.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you. See: [turnserver.md](turnserver.md) 
 
-https://obs.ninja may unavoidably use cookies that are exempt from EU laws of requiring notice of their use; they are exempt as they are required and necessary for the technical functioning of the web service. Our webserver is cached by Cloudflare and it provides denial of server protection for the users of OBS.Ninja.
+https://vdo.ninja may unavoidably use cookies that are exempt from EU laws of requiring notice of their use; they are exempt as they are required and necessary for the technical functioning of the web service. Our webserver is cached by Cloudflare and it provides denial of server protection for the users of VDO.Ninja.
 
 Additional security features are being added weekly on request. Please ask about these options if added security and privacy are requirements for you.
 
@@ -77,4 +80,4 @@ Additional security features are being added weekly on request. Please ask about
 Ideas, feedback, bugs, etc -- all welcomed.  I'm dumping many of my ideas as issues into Github. Feedback is typically most welcomed via Email or Discord.
 
 ## Licence 
-OBS.Ninja is available as 'mostly' open-source; please see the LICENCE.md file for details.
+VDO.Ninja is available as 'mostly' open-source; please see the LICENCE.md file for details.

convert.html

@@ -1,157 +1,230 @@
 <head>
-<link rel="stylesheet" href="./main.css?ver=39" />
-<style>
-
-body {
-
-}
-
-input {padding:10px;}
-
-h3 { margin-top:10px; padding:5px;}
-
-hr {
-	margin: 20px 0;
-}
-video{
-	max-width:640px;
-	max-height:360px;
-	padding:20px;
-}
-audio{
-	max-width:640px;
-	max-height:360px;
-	padding:20px;
-}
-
-</style>
-</head>
-<body style='color:white'>
-
-<video id="player" controls style="display:none"></video>
-<audio id="player2" controls style="display:none"></audio>
-<div id="info">
-<h1>Web-based Media Conversion Tools</h1>
-<hr>
-	<h3>Transcodes WebM files to MP4 files with a fixed 1280x720 resolution. (very slow!)</h3><br />
-	<small><p>This tool performs the following action in your browser: <i> fmpeg -i input.webm -vf scale=1280:720 output.mp4</i></p></small>
-	<input type="file" id="uploader" title="Convert WebM to MP4">
-	
-	<hr>
-	<h3>Remuxes MKV files to MP4 files without transcoding.</h3> </p><br /><small><i> fmpeg -i INPUTFILE -vcodec copy -acodec copy output.mp4</i></small>
-	<br /><input type="file" id="uploader2" accept=".mkv" title="Convert MKV to MP4">
-	
-	<hr>
-	
-	<h3>Remuxes WebM files to MP4 files without transcoding (attempts to force high resolutions, also)</h3>
-	<input type="file" id="uploader3"  accept=".webm" title="Convert WebM to MP4">
-	
-	<hr>
-	<h3>Remuxes WebM to Audio-only files (opus or wav)</h3>
-	<input type="file" id="uploader4"  accept=".webm" title="Convert WebM to OPUS">
-	
-	<hr>
-	
-</div>
-  <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.6/dist/ffmpeg.min.js"></script>
-  <script>
-  
-	function download(data, filename) {
-        const blob = new Blob([data.buffer]);
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.style.display = 'none';
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        setTimeout(() => {
-            document.body.removeChild(a);
-            window.URL.revokeObjectURL(url);
-        }, 100);
-    }
-  
-    const { createFFmpeg, fetchFile } = FFmpeg;
-    const ffmpeg = createFFmpeg({ log: true });
-    const transcode = async ({ target: { files } }) => {
-      const { name } = files[0];
-	  document.getElementById('uploader').style.display="none";
-	  document.getElementById('uploader2').style.display="none";
-	  document.getElementById('uploader3').style.display="none";
-	  document.getElementById('info').innerText = "Transcoding file... this will take a while";
-      await ffmpeg.load();
-      ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
-      await ffmpeg.run('-i', name, '-vf', 'scale=1280:720', 'output.mp4');
-      const data = ffmpeg.FS('readFile', 'output.mp4');
-      const video = document.getElementById('player');
-      video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
-	  video.style.display="block";
-	  document.getElementById('info').innerText = "Operation Done. Play video or download it.";
-    }
-	 const transmux = async ({ target: { files } }) => {
-      const { name } = files[0];
-	  document.getElementById('uploader').style.display="none";
-	  document.getElementById('uploader2').style.display="none";
-	  document.getElementById('uploader3').style.display="none";
-	  document.getElementById('info').innerText = "Transcoding file... this will take a while";
-      await ffmpeg.load();
-      ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
-      await ffmpeg.run('-i', name, '-vcodec', 'copy',  '-acodec', 'copy', 'output.mp4');
-      const data = ffmpeg.FS('readFile', 'output.mp4');
-      const video = document.getElementById('player');
-      video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
-	  
-	  video.style.display="block";
-	  document.getElementById('info').innerText = "Operation Done. Play video or download it.";
-    }
-	
-	const force1080 = async ({ target: { files } }) => {
-      const { name } = files[0];
-	  const sourceBuffer = await fetch("./media/cap.webm").then(r => r.arrayBuffer());
-	  document.getElementById('uploader').style.display="none";
-	  document.getElementById('uploader2').style.display="none";
-	  document.getElementById('uploader3').style.display="none";
-	  document.getElementById('info').innerText = "Tweaking file... this will take a moment";
-      await ffmpeg.load();
-      ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
-	  ffmpeg.FS("writeFile","cap.webm", new Uint8Array(sourceBuffer, 0, sourceBuffer.byteLength));
-	  
-	  await ffmpeg.run("-i", "concat:cap.webm|"+name, "-safe", "0", "-c", "copy", "-avoid_negative_ts", "1", "-strict", "experimental", "output.mp4");
-      const data = ffmpeg.FS('readFile', 'output.mp4');
-      const video = document.getElementById('player');
-      video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
-	  video.style.display="block";
-	  document.getElementById('info').innerText = "Operation Done. Play video or download it.";
-    }
-	
-	const convertToAudioOnly = async ({ target: { files } }) => {
-    const { name } = files[0];
-	  document.getElementById('info').innerText = "Transcoding file... this will take a while";
-      await ffmpeg.load();
-	  ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
-	  const video = document.getElementById('player');
-		  
-	  await ffmpeg.run('-i', name, '-vn',  '-acodec', 'copy', 'output.opus');
-	  const data = ffmpeg.FS('readFile', 'output.opus');
-	  
-	  console.log(data.buffer.byteLength);
-		if (data.buffer.byteLength){
-			video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'audio/opus' }));
-			download(data, name.split(".")[0]+".opus");
-		} else {
-			await ffmpeg.run('-i', name, '-vn',  '-acodec', 'copy', 'output.wav');
-			const data2 = ffmpeg.FS('readFile', 'output.wav');
-			video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'audio/pcm' }));
-			download(data2, name.split(".")[0]+".wav");
+	<link rel="stylesheet" href="./main.css?ver=39" />
+	<style>
+		.container {
+			max-width: 80%;
+			width: fit-content;
+			margin: 0 auto;
 		}
-	  
-	  video.style.display="block";
-	  document.getElementById('info').innerText = "Operation Done. Play audio or download it.";
-    }
-	
-    document.getElementById('uploader').addEventListener('change', transcode);
-	document.getElementById('uploader2').addEventListener('change', transmux);
-	document.getElementById('uploader3').addEventListener('change', force1080);
-	document.getElementById('uploader4').addEventListener('change', convertToAudioOnly);
-  </script>
+
+		h1 {
+			margin-top: 1em;
+			margin-bottom: 1em;
+			padding: 10px;
+		}
+
+		.card {
+			margin: 10px;
+			box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
+			background-color: #ddd;
+			color: black;
+			margin-bottom: 1.5em;
+		}
+
+		.card>div {
+			padding: 10px;
+		}
+
+		.card h2 {
+			font-size: 1.5em;
+			padding: 10px;
+			background-color: #457b9d;
+			color: white;
+			border-bottom: 2px solid #3b6a87;
+		}
+
+		small {
+			font-style: italic;
+			display: block;
+			margin-left: 1em;
+		}
+
+		span.warning {
+			color: rgb(212, 191, 0);
+		}
+
+		input {
+			padding: 10px;
+		}
+
+		video {
+			max-width: 640px;
+			max-height: 360px;
+			padding: 20px;
+		}
+
+		audio {
+			max-width: 640px;
+			max-height: 360px;
+			padding: 20px;
+		}
+
+		div#processing {
+			display: none;
+			justify-content: center;
+			place-items: center;
+			position: absolute;
+			inset: 0;
+			font-size: 1.5em;
+			font-weight: bold;
+			background: #141926;
+			flex-direction: column;
+		}
+	</style>
+</head>
+
+<body style='color:white'>
+	<div id="header">
+		<a id="logoname" href="./" style="text-decoration: none; color: white; margin: 2px">
+			<span data-translate="logo-header">
+				<font id="qos">V</font>DO.Ninja
+			</span>
+		</a>
+	</div>
+	<div class="container">
+		<div id="info">
+			<h1>Web-based Media Conversion Tools</h1>
+
+			<div class="card">
+				<h2>WebM to MP4 (fixed 1280x720 resolution) <span class='warning'>(very slow!)</span></h2>
+				<div>
+					<small>The same as: fmpeg -i input.webm -vf scale=1280:720 output.mp4</small>
+					<input type="file" id="uploader" title="Convert WebM to MP4">
+				</div>
+			</div>
+			<div class="card">
+				<h2>MKV to MP4 (no transcoding)</h2>
+				<div>
+					<small>The same as: fmpeg -i INPUTFILE -vcodec copy -acodec copy output.mp4</small>
+					<input type="file" id="uploader2" accept=".mkv" title="Convert MKV to MP4">
+				</div>
+			</div>
+			<div class="card">
+				<h2>WebM MP4 files (no transcoding, attempts to force high resolutions)</h2>
+				<div>
+					<input type="file" id="uploader3" accept=".webm" title="Convert WebM to MP4">
+				</div>
+			</div>
+			<div class="card">
+				<h2>WebM to Audio-only files (opus or wav)</h2>
+				<div>
+					<input type="file" id="uploader4" accept=".webm" title="Convert WebM to OPUS">
+				</div>
+			</div>
+			<div id="processing">
+				<span id="message"></span>
+				<video id="player" controls style="display:none"></video>
+				<audio id="player2" controls style="display:none"></audio>
+			</div>
+		</div>
+
+		<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.6/dist/ffmpeg.min.js"></script>
+		<script>
+
+			function download(data, filename) {
+				const blob = new Blob([data.buffer]);
+				const url = window.URL.createObjectURL(blob);
+				const a = document.createElement('a');
+				a.style.display = 'none';
+				a.href = url;
+				a.download = filename;
+				document.body.appendChild(a);
+				a.click();
+				setTimeout(() => {
+					document.body.removeChild(a);
+					window.URL.revokeObjectURL(url);
+				}, 100);
+			}
+
+			const { createFFmpeg, fetchFile } = FFmpeg;
+			const ffmpeg = createFFmpeg({ log: true });
+
+			const transcode = async ({ target: { files } }) => {
+				const { name } = files[0];
+				document.getElementById('uploader').style.display = "none";
+				document.getElementById('uploader2').style.display = "none";
+				document.getElementById('uploader3').style.display = "none";
+				document.getElementById('message').innerText = "Transcoding file... this will take a while";
+				document.getElementById('processing').style.display = 'flex';
+				await ffmpeg.load();
+				ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
+				await ffmpeg.run('-i', name, '-vf', 'scale=1280:720', 'output.mp4');
+				const data = ffmpeg.FS('readFile', 'output.mp4');
+				const video = document.getElementById('player');
+				video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
+				video.style.display = "block";
+				document.getElementById('message').innerText = "Operation Done. Play video or download it.";
+			}
+			
+			const transmux = async ({ target: { files } }) => {
+				const { name } = files[0];
+				document.getElementById('uploader').style.display = "none";
+				document.getElementById('uploader2').style.display = "none";
+				document.getElementById('uploader3').style.display = "none";
+				document.getElementById('message').innerText = "Transcoding file... this will take a while";
+				document.getElementById('processing').style.display = 'flex';
+				await ffmpeg.load();
+				ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
+				await ffmpeg.run('-i', name, '-vcodec', 'copy', '-acodec', 'copy', 'output.mp4');
+				const data = ffmpeg.FS('readFile', 'output.mp4');
+				const video = document.getElementById('player');
+				video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
+
+				video.style.display = "block";
+				document.getElementById('message').innerText = "Operation Done. Play video or download it.";
+			}
+
+			const force1080 = async ({ target: { files } }) => {
+				const { name } = files[0];
+				const sourceBuffer = await fetch("./media/cap.webm").then(r => r.arrayBuffer());
+				document.getElementById('uploader').style.display = "none";
+				document.getElementById('uploader2').style.display = "none";
+				document.getElementById('uploader3').style.display = "none";
+				document.getElementById('message').innerText = "Tweaking file... this will take a moment";
+				document.getElementById('processing').style.display = 'flex';
+				await ffmpeg.load();
+				ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
+				ffmpeg.FS("writeFile", "cap.webm", new Uint8Array(sourceBuffer, 0, sourceBuffer.byteLength));
+
+				await ffmpeg.run("-i", "concat:cap.webm|" + name, "-safe", "0", "-c", "copy", "-avoid_negative_ts", "1", "-strict", "experimental", "output.mp4");
+				const data = ffmpeg.FS('readFile', 'output.mp4');
+				const video = document.getElementById('player');
+				video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
+				video.style.display = "block";
+				document.getElementById('message').innerText = "Operation Done. Play video or download it.";
+				document.getElementById('processing').style.display = 'flex';
+			}
+
+			const convertToAudioOnly = async ({ target: { files } }) => {
+				const { name } = files[0];
+				document.getElementById('message').innerText = "Transcoding file... this will take a while";
+				document.getElementById('processing').style.display = 'flex';
+				await ffmpeg.load();
+				ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
+				const video = document.getElementById('player');
+
+				await ffmpeg.run('-i', name, '-vn', '-acodec', 'copy', 'output.opus');
+				const data = ffmpeg.FS('readFile', 'output.opus');
+
+				console.log(data.buffer.byteLength);
+				if (data.buffer.byteLength) {
+					video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'audio/opus' }));
+					download(data, name.split(".")[0] + ".opus");
+				} else {
+					await ffmpeg.run('-i', name, '-vn', '-acodec', 'copy', 'output.wav');
+					const data2 = ffmpeg.FS('readFile', 'output.wav');
+					video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'audio/pcm' }));
+					download(data2, name.split(".")[0] + ".wav");
+				}
+
+				video.style.display = "block";
+				document.getElementById('message').innerText = "Operation Done. Play audio or download it.";
+				document.getElementById('processing').style.display = 'flex';
+			}
+
+			document.getElementById('uploader').addEventListener('change', transcode);
+			document.getElementById('uploader2').addEventListener('change', transmux);
+			document.getElementById('uploader3').addEventListener('change', force1080);
+			document.getElementById('uploader4').addEventListener('change', convertToAudioOnly);
+		</script>
 </body>

electron.html

@@ -1,393 +1,572 @@
-<html>
-<meta charset="UTF-8">
-<head><style>
-html {
-	border:0;
-	margin:0;
-	outline:0;
-	
-}
-
-video {
-
-	margin: 0;
-	padding: 0;
-	overflow: hidden;
-	cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=), none;
-	user-select: none;
-	
-}
-body {
-	padding: 0 0px;
-	height: 100%;
-	width: 100%;
-	background-color: #141926;
-	background-color: -webkit-linear-gradient(to top, #181925, #141826, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
-	background-color: linear-gradient(to top, #181825, #141926, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-
-	font-size: 2em;
-	font-family: Helvetica, Arial, sans-serif;
-	display: flex;
-	flex-flow: column;
-	border:0;
-	margin:0;
-	outline:0;
-}
-
-button.glyphicon-button:focus,
-button.glyphicon-button:active:focus,
-button.glyphicon-button.active:focus,
-button.glyphicon-button.focus,
-button.glyphicon-button:active.focus,
-button.glyphicon-button.active.focus {
-  outline: none !important;
-}
-
-button{
-	padding:10px;
-	font-size: 20px;
-	margin: auto auto;
-}
-#header{
-	height:80px;
-	width:100%;
-	background-color: #101520;
-}
-.inputfield{
-	font-size: 20px;
-	align-self:center;
-	height:30px;
-	width:780px;
-	margin: auto auto;
-	padding:20px
-}
-
-.formcss{
-	font-size: 20px;
-	align-self:center;
-	margin: auto auto;
-}
-label {
-	font: white;
-	font-size: 1em;
-	color: white;
-}
-input[type='checkbox'] {
-    -webkit-appearance:none;
-    width:30px;
-    height:30px;
-    background:white;
-    border-radius:5px;
-    border:2px solid #555;
-	cursor: pointer;
-}
-input[type='checkbox']:checked {
-    background: #1A1;
-}
-#audioOutput{
-	font-size: calc(16px + 0.3vw);
-	max-width:590px
-}
-	
-@media only screen and (max-width: 1030px) {
-	body{
-		zoom: 0.9; 
-		-moz-transform: scale(0.9); 
-		-moz-transform-origin: 0 0;
-	}
-}
-
-@media only screen and (max-width: 940px) {
-	body{
-		zoom: 0.64; 
-		-moz-transform: scale(0.64); 
-		-moz-transform-origin: 0 0;
-		
-	}
-	#audioOutput{
-		font-size: calc(14px + 1.4vw);
-		max-width:486px
-	}
-}
-
-#messageDiv {
-	font-size: .7em;
-	color: #DDD;
-	transition: all 0.5s linear;
-	font-style: italic;
-	opacity: 0;
-	text-align: center;
-	margin: 10px 0;
-}
-</style></head>
-<body >
-
-<div id="header" style="-webkit-app-region: drag;color:white;font-size:2em">OBS.Ninja</div>
-<div class="formcss" >
-	
-	<div id='warning4mac' style="border:2px dotted; display:none;max-width:800px; padding:10px; margin:0 90px 20px 90px;color:white;font-size:1.3em"> ✨ Great News! OBS v26.1.2 <a href="https://github.com/obsproject/obs-browser/issues/209#issuecomment-748683083">now supports</a> OBS.Ninja without needing the Electron Capture app! 🥳</div>
-
-	<input type="checkbox" class="check" id="prefervp9" name="prefervp9" value="false" onclick="modURL(this);">
-	<label for="prefervp9">Force VP9 Codec</label>
-	
-	<input type="checkbox" class="check" id="showcursor" name="showcursor" value="false" onclick="modURL(this);">
-	<label for="showcursor">Show Mouse Cursor</label>
-	
-	<input type="checkbox" class="check"  id="highbitrate" name="highbitrate" value="false" onclick="modURL(this);">
-	<label for="highbitrate">High Video Bitrate</label>
-	
-	<input type="checkbox" class="check" id="stereo" name="stereo" value="false" onclick="modURL(this);">
-	<label for="stereo">Pro Audio Mode</label>
-	
-	<input type="checkbox" class="check" id="buffer" name="buffer" value="false" onclick="modURL(this);">
-	<label for="buffer">Lip-sync Fix</label>
-	
-	<br>
-	<div id="messageDiv" style='display:block'><br /></div>
-	<div class="formcss"><center>
-		<input type="text" id="changeText" class="inputfield" value="http://obs.ninja/?view=" onchange="modURL"   onkeyup="enterPressed(event, gohere);" />
-		<button  onclick="gohere();" id="gobutton">GO</button>
-		<br><br>
-		<label for="audioOutput">Audio output destination: </label><select id="audioOutput"></select>
-		
-	</center></div>
-</div>
-
-
-<script>
-/*
-*  Copyright (c) 2020 Steve Seguin. All Rights Reserved.
-*
-*  Use of this source code is governed by the APGLv3 open-source license
-*  that can be found in the LICENSE file in the root of the source
-*  tree. Alternative licencing options can be made available on request.
-*
-*/
-
-if (navigator.userAgent.indexOf('Mac OS X') != -1){
-	document.getElementById("warning4mac").style.display="block";
-}
-
-var audioOutputSelect = document.querySelector('select#audioOutput');
-audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
-audioOutputSelect.onclick = getPermssions;
-audioOutputSelect.onchange = updateOutputTarget;
-var listed = false;
-
-function updateOutputTarget(e){
-	console.log("change audio: "+audioOutputSelect.value);
-	var url = document.getElementById('changeText').value;
-	url=updateURLParameter(url, "sink", audioOutputSelect.value);
-	document.getElementById('changeText').value = url;
-}
-
-function getPermssions(e=null){
-	if (listed==true){
-		return;
-	} 
-	if (e!==null){
-		e.currentTarget.blur();
-	}
-	navigator.mediaDevices.getUserMedia({audio: true,video: false}).then((stream)=>{
-		navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(console.error); // list all devices
-		stream.getTracks().forEach(track => {
-		    track.stop();
-		});
-		listed=true;
-		audioOutputSelect.focus();
-		
-	}).catch(function(){
-		document.getElementById("messageDiv").innerHTML = "Failed to list available output devices\n\nPlease ensure you allowed the microphone permissions.";
-		document.getElementById("messageDiv").style.display="block";
-		setTimeout(function(){document.getElementById("messageDiv").style.opacity="1.0";},0);
-		
-		});
-}
-
-function gotDevices(deviceInfos) {
-	for (let i = 0; i !== deviceInfos.length; ++i) {
-		const deviceInfo = deviceInfos[i];
-		const option = document.createElement('option');
-		option.value = deviceInfo.deviceId;
-		if (deviceInfo.kind === 'audiooutput'){
-			option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
-			audioOutputSelect.appendChild(option);
-		} else {
-			console.log('Some other kind of source/device: ', deviceInfo);
-		}
-	}
-	listed=true;
-}
-
-function enterPressed(event, callback){
-  if (event.keyCode === 13){ // Number 13 is the "Enter" key on the keyboard
-    event.preventDefault(); // Cancel the default action, if needed
-    callback();
-  }
-}
-
-(function (w) {
-    w.URLSearchParams = w.URLSearchParams || function (searchString) {
-        var self = this;
-        self.searchString = searchString;
-        self.get = function (name) {
-            var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
-            if (results == null) {
-                return null;
-            }
-            else {
-                return decodeURI(results[1]) || 0;
-            }
-        };
-    }
-
-})(window)
-
-var urlParams = new URLSearchParams(window.location.search);
-var isMobile = false;
-if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ // does not detect iPad Pros.
-	isMobile=true; // if iOS, default to H264?  meh.  let's not.
-}
-// Windows can show the cursor, since it captures in a different way.
-if (navigator.platform.indexOf("Win") != -1){
-	document.getElementById("showcursor").checked=true;
-}
-
-function updateURLParameter(url, param, paramVal){
-    var TheAnchor = null;
-    var newAdditionalURL = "";
-    var tempArray = url.split("?");
-    var baseURL = tempArray[0];
-    var additionalURL = tempArray[1];
-    var temp = "";
-
-    if (additionalURL){
-        var tmpAnchor = additionalURL.split("#");
-        var TheParams = tmpAnchor[0];
-            TheAnchor = tmpAnchor[1];
-        if (TheAnchor){additionalURL = TheParams;}
-
-        tempArray = additionalURL.split("&");
-
-        for (var i=0; i<tempArray.length; i++){
-            if(tempArray[i].split('=')[0] != param){
-                newAdditionalURL += temp + tempArray[i];
-                temp = "&";
-            }
-        }        
-    } else {
-        var tmpAnchor = baseURL.split("#");
-        var TheParams = tmpAnchor[0];
-            TheAnchor  = tmpAnchor[1];
-
-        if(TheParams){baseURL = TheParams;}
-    }
-
-	if (paramVal===false){
-		temp="";
-		if(TheAnchor){temp += "#" + TheAnchor;}
-		var rows_txt = temp
-	} else if  (paramVal===""){
-		if(TheAnchor){paramVal += "#" + TheAnchor;}
-		var rows_txt = temp + "" + param;
-	} else {
-		if(TheAnchor){paramVal += "#" + TheAnchor;}
-		var rows_txt = temp + "" + param + "=" + paramVal;
-	}
-    return baseURL + "?" + newAdditionalURL + rows_txt;
-}
-
-if (urlParams.has('name')){
-	var name  = urlParams.get('name');
-	if (name!="OBSNinja"){
-		document.getElementById('changeText').value = "https://obs.ninja/?view="+name;
-	}
-} 
-
-function modURL(ele=false){
-	var url = document.getElementById('changeText').value;
-	console.log(url);
-	if ((url.split("view").length>0) || (url.split("room").length>0)){
-			if (!document.getElementById("showcursor").checked){
-				url=updateURLParameter(url, "nocursor", "");
-			} else {
-				url=updateURLParameter(url, "nocursor", false);
-			}
-		  
-		if (ele!=false){
-			  if (ele.id =="prefervp9"){ 
-				  if (document.getElementById("prefervp9").checked){
-					url=updateURLParameter(url, "codec", "vp9");
-				  } else {
-					url=updateURLParameter(url, "codec", false);
-				  }
-			  }
-
-			  if (ele.id =="highbitrate"){
-				  if (document.getElementById("highbitrate").checked){
-					url=updateURLParameter(url, "bitrate", "10000");
-				  } else {
-					url=updateURLParameter(url, "bitrate", false);
-				  }
-			  }
-			  
-			  if (ele.id =="stereo"){
-				if (document.getElementById("stereo").checked){
-					url=updateURLParameter(url, "proaudio", "");
-					document.getElementById("messageDiv").innerHTML = "Audio bitrate increased to 256-kbps.\n\nPlease note that the Sender must also have the <b>&proaudio</b> flag added for full-effect";
-					document.getElementById("messageDiv").style.display="block";
-					setTimeout(function(){document.getElementById("messageDiv").style.opacity="1.0";},0);
-				} else {
-					url=updateURLParameter(url, "proaudio", false);
-					setTimeout(function(){document.getElementById("messageDiv").style.opacity="0";},0);
-				}
-			  }
-			  
-			  if (ele.id =="buffer"){
-				if (document.getElementById("buffer").checked){
-					url=updateURLParameter(url, "buffer", "");
-				} else {
-					url=updateURLParameter(url, "buffer", false);
-				}
-			  }
-		}
-		  
-	}
-	document.getElementById('changeText').value = url;
-	console.log(url);
-	return url;
-}
-function gohere(){
-	var url = modURL(true);
-	if (!(document.getElementById('changeText').value.includes("obs.ninja")) && (document.getElementById('changeText').value.includes("http"))  && (document.getElementById('changeText').value.includes("&sink"))){
-		alert("Notice: The &sink command is domain specific.\nVisit https://YOURDOMAIN.com/electron instead.");
-	}
-	window.location = url;
-};
-getPermssions();
-</script>
-</body>
-</html>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+	<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
+	<style>
+	html {
+		border:0;
+		margin:0;
+		outline:0;
+		overflow: hidden;
+	}
+
+	video {
+
+		margin: 0;
+		padding: 0;
+		overflow: hidden;
+		cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=), none;
+		user-select: none;
+		
+	}
+	body {
+		padding: 0 0px;
+		height: 100%;
+		width: 100%;
+		background-color: -webkit-linear-gradient(to top, #363644, 50%, #151b29);  /* Chrome 10-25, Safari 5.1-6 */
+		background: linear-gradient(to top, #363644, 50%, #151b29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+		font-size: 2em;
+		font-family: Helvetica, Arial, sans-serif;
+		display: flex;
+		flex-flow: column;
+		border:0;
+		margin:0;
+		outline:0;
+	}
+
+	button.glyphicon-button:focus,
+	button.glyphicon-button:active:focus,
+	button.glyphicon-button.active:focus,
+	button.glyphicon-button.focus,
+	button.glyphicon-button:active.focus,
+	button.glyphicon-button.active.focus {
+	  outline: none !important;
+	}
+
+	#gobutton {
+		font-size: 20px;
+		font-weight: bold;
+		border: none;
+		background: #6aab23;
+		display: flex;
+		border-radius: 0px;
+		border-top-right-radius: 10px;
+		border-bottom-right-radius: 10px;
+		box-shadow: 0 12px 15px -10px #5ca70b, 0 2px 0px #6aab23;
+		color: white;
+		cursor: pointer;
+		box-sizing: border-box;
+		align-items: center;
+		padding: 0 1em;
+	}
+	#header{
+		width:100%;
+		background-color: #101520;
+	}
+	input#changeText {
+		font-size: 1em;
+		align-self: center;
+		width: 100%;
+		padding: 1em;
+		font-weight: bold;
+		background: white;
+		border: 4px solid white;
+		box-shadow: 0px 30px 40px -32px #6aab23, 0 2px 0px #6aab23;
+		border-top-left-radius: 10px;
+		border-bottom-left-radius: 10px;
+		transition: all 0.2s linear;
+		box-sizing: border-box;
+		border-bottom-right-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	input#changeText:focus {
+		outline: none;
+	}
+
+	.container{
+		font-size: 20px;
+		align-self:center;
+		margin: auto auto;
+	}
+	label {
+		font: white;
+		font-size: 1em;
+		color: white;
+	}
+	input[type='checkbox'] {
+		-webkit-appearance:none;
+		width:30px;
+		height:30px;
+		background:white;
+		border-radius:5px;
+		border:2px solid #555;
+		cursor: pointer;
+	}
+	input[type='checkbox']:checked {
+		background: #1A1;
+	}
+	#audioOutput, #lastUrls {
+		font-size: calc(16px + 0.3vw);
+		width: 730px;
+		height: 100%;
+		flex: 20;
+		border-radius: 10px;
+		padding: 1em;
+		background: #eaeaea;
+		cursor:pointer;
+	}
+	label[for="audioOutput"] {
+		font-size: 3em;
+		color: #FE53BB;
+		text-shadow: 0px 0px 30px #fe53bb;
+		padding-right: 10px;
+	}
+	label[for="changeText"] {
+		font-size: 3em;
+		color: #00F6FF;
+		text-shadow: 0px 0px 30px #00f6ff;
+		padding-top: 5px;
+		padding-right: 10px;
+	}
+
+	label[for="lastUrls"] {
+	font-size: 3em;
+		color: #1a1;
+		text-shadow: 0px 0px 30px #1a1;
+		padding-right: 10px;
+		cursor: pointer;
+	}
+
+	div#audioOutputContainer, #history {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: center;
+		margin: 4em;
+	}
+		
+	@media only screen and (max-width: 1030px) {
+		body{
+			zoom: 0.9; 
+			-moz-transform: scale(0.9); 
+			-moz-transform-origin: 0 0;
+		}
+	}
+
+	
+	
+	
+	#messageDiv {
+		font-size: .7em;
+		color: #DDD;
+		transition: all 0.5s linear;
+		font-style: italic;
+		opacity: 0;
+		text-align: center;
+		margin: 10px 0;
+	}
+
+	div#urlInput {
+		margin: 4em;
+		display: flex;
+		flex-direction: row;
+	}
+	@media only screen and (max-width: 940px) {
+		body{
+			zoom: 0.74; 
+			-moz-transform: scale(0.74); 
+			-moz-transform-origin: 0 0;
+			
+		}
+		.container{
+			max-width:99%;
+		}
+		div#urlInput {
+			margin: 2em;
+		}
+		div#audioOutputContainer, #history {
+			margin: 2em;
+		}
+	}
+	@media only screen and (max-width: 840px) {
+		body{
+			zoom: 0.64; 
+			-moz-transform: scale(0.64); 
+			-moz-transform-origin: 0 0;
+			
+		}
+		
+	}
+	
+	@media only screen and (max-height: 639px) {
+		div#urlInput {
+			margin: 2em;
+		}
+		div#audioOutputContainer, #history {
+			margin: 2em;
+		}
+	}
+	
+	@media only screen and (max-width: 767px) {
+		
+		div#urlInput {
+			margin:  2em 1em;
+		}
+		div#audioOutputContainer, #history {
+			margin:  2em 1em;
+		}
+	}
+	
+	
+	@media only screen and (max-height: 380px) {
+		div#urlInput {
+			margin: 1em;
+		}
+		div#audioOutputContainer, #history {
+			margin: 1em;
+		}
+	}
+	
+	
+
+	label[for="audioOutput"], label[for="lastUrls"] {
+		font-size: 3em;
+	}
+
+	#warning4mac, #electronVersion {
+		background: #8500f7;
+		box-shadow: 0px 0px 50px 10px #8500f7ab, inset 0px 0px 10px 2px #8d08ffba;
+		border: 2px solid #8500f7;
+		border-radius: 10px;
+		width: 90%;
+		padding:1em;
+		margin:0 auto;
+		color:white;
+		font-size:1.3em;
+		margin-bottom: 20px;
+	}
+
+	#warning4mac a, #electronVersion a {
+		color:white;
+	 }
+
+	 ul#lastUrls {
+		list-style: none;
+		background: #101520;
+		color: white;
+		padding: 1em;
+	}
+
+	ul#lastUrls li {
+		padding: 5px 0px;
+	}
+	ul#lastUrls li:nth-child(even) {
+		background-color: #182031;
+	}
+
+	#inputCombo {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		flex-grow: 1;
+	}
+
+	</style>
+</head>
+<body >
+
+	<div id="header" style="-webkit-app-region: drag;color:#6f6f6f;font-size:40px; line-height: 40px; padding: 20px; letter-spacing: 3; font-weight: bold;">Electron Capture</div>
+	<div class="container" >
+		
+		<div id='warning4mac' style="display:none;"> ✨ Great News! OBS v26.1.2 <a href="https://github.com/obsproject/obs-browser/issues/209#issuecomment-748683083">now supports</a> VDO.Ninja without needing the Electron Capture app! 🥳</div>
+		<div id="electronVersion" style="display:none;">✨ Great News! <a href="https://github.com/steveseguin/electroncapture/releases/latest">Electron Capture <span id="currentElectronVersion"></span></a> is now available!<br>Update yours today to stay up-to-date with security patches.</div>
+		
+		<div id="messageDiv" style='display:block'><br /></div>
+		<div class="container">
+				<div id="urlInput" title="Put the link you want to load here">
+					<label for="changeText">
+						<i class="las la-play"></i>
+					</label>
+					<div id="inputCombo">
+						<input type="text" id="changeText" class="inputfield" value="http://vdo.ninja/?view=" onchange="modURL" onkeyup="enterPressed(event, gohere);" />
+						<button  onclick="gohere();" id="gobutton">GO</button>
+					</div>
+				</div>
+				<div id="audioOutputContainer" title="This option will only work with the official vdo.ninja domain">
+					<label for="audioOutput"><i class="las la-headphones"></i></label><select id="audioOutput"></select>
+				</div>
+				<div id="history" title="History of past links used. You can clear this history using the button to the left">
+					<label for="lastUrls" onclick="resetHistory()">
+						<i class="las la-history"></i>
+					</label>
+					<select id="lastUrls" onchange="setUrl()"></select>
+				</div>
+	
+		</div>
+	</div>
+
+
+<script>
+/*
+*  Copyright (c) 2020 Steve Seguin. All Rights Reserved.
+*
+*  Use of this source code is governed by the APGLv3 open-source license
+*  that can be found in the LICENSE file in the root of the source
+*  tree. Alternative licencing options can be made available on request.
+*
+*/
+var lastUrls = JSON.parse(localStorage.getItem('lastUrls'));
+if (lastUrls != undefined) {
+	document.querySelector("#changeText").value = lastUrls[0];
+	if (lastUrls.length>0){
+		lastUrls.forEach((url)=>{
+			var o = document.createElement('option');
+			o.value = url;
+			o.text = url;
+			document.querySelector("#lastUrls").appendChild(o);
+		})
+	} else {
+		document.querySelector("#history").style.display="none";
+	}
+} else {
+	document.querySelector("#history").style.display="none";
+}
+
+function setUrl(){
+	document.querySelector("#changeText").value = document.querySelector("#lastUrls").value;
+	gohere();
+}
+
+function resetHistory(){
+	localStorage.clear();
+	document.querySelector('#lastUrls').innerHTML = '';
+	lastUrls = [];
+}
+
+(function (w) {
+    w.URLSearchParams = w.URLSearchParams || function (searchString) {
+        var self = this;
+        self.searchString = searchString;
+        self.get = function (name) {
+            var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
+            if (results == null) {
+                return null;
+            }
+            else {
+                return decodeURI(results[1]) || 0;
+            }
+        };
+    }
+
+})(window)
+
+var urlParams = new URLSearchParams(window.location.search);
+
+if (navigator.userAgent.indexOf('Mac OS X') != -1){
+	document.getElementById("warning4mac").style.display="block";
+} else if (location.hostname.toLowerCase() == "obs.ninja"){
+	try {
+		if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) { // for now, just PC or Linux versions only.
+			function compareVersions(version){
+				version = version.split(".");
+				fetch('https://api.github.com/repos/steveseguin/electroncapture/releases/latest')
+				  .then(response => response.json())
+				  .then(data => {
+					console.log("recentVersion: "+data.tag_name);
+					var recentVersion = data.tag_name.split(".");
+					var ood = false;
+					if (recentVersion[0]>version[0]){
+						ood = true;
+					} else if (recentVersion[0]==version[0]) {
+						if (recentVersion[1]>version[1]){
+							ood = true;
+						} else if (recentVersion[1]==version[1]) {
+							if (recentVersion[2]>version[2]){
+								ood = true;
+							} 
+						}
+					}
+					if (ood){
+						document.getElementById("electronVersion").style.display = "block";
+						document.getElementById("currentElectronVersion").innerText = data.tag_name;
+					}
+				  }).catch(console.error);
+			}
+			if (urlParams.has('version')){
+				var ver = urlParams.get('version');
+				console.log("version: "+ver);
+				compareVersions(ver);
+			} else{
+				var checkVersion = setTimeout(function(){ // pre 1.5.2
+					compareVersions("0.0.0");
+				},500);
+			
+				const ipcRenderer = require('electron').ipcRenderer;
+				console.log("ELECTRON DETECTED");
+				ipcRenderer.on('appVersion', function(event, version) {
+					clearTimeout(checkVersion);
+					console.log("version: "+version);
+					compareVersions(version);
+				})
+				ipcRenderer.send('getAppVersion');
+			}
+		}
+	} catch(e){console.error(e);}
+}
+
+var audioOutputSelect = document.querySelector('select#audioOutput');
+audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
+audioOutputSelect.onclick = getPermssions;
+audioOutputSelect.onchange = updateOutputTarget;
+var listed = false;
+
+function updateOutputTarget(e){
+	console.log("change audio: "+audioOutputSelect.value);
+	var url = document.getElementById('changeText').value;
+	url=updateURLParameter(url, "sink", audioOutputSelect.value);
+	document.getElementById('changeText').value = url;
+}
+
+function getPermssions(e=null){
+	if (listed==true){
+		return;
+	} 
+	if (e!==null){
+		e.currentTarget.blur();
+	}
+	navigator.mediaDevices.getUserMedia({audio: true,video: false}).then((stream)=>{
+		navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(console.error); // list all devices
+		stream.getTracks().forEach(track => {
+		    track.stop();
+		});
+		listed=true;
+		audioOutputSelect.focus();
+		
+	}).catch(function(){
+		document.getElementById("messageDiv").innerHTML = "Failed to list available output devices\n\nPlease ensure you allowed the microphone permissions.";
+		document.getElementById("messageDiv").style.display="block";
+		setTimeout(function(){document.getElementById("messageDiv").style.opacity="1.0";},0);
+		
+		});
+}
+
+function gotDevices(deviceInfos) {
+	for (let i = 0; i !== deviceInfos.length; ++i) {
+		const deviceInfo = deviceInfos[i];
+		const option = document.createElement('option');
+		option.value = deviceInfo.deviceId;
+		if (deviceInfo.kind === 'audiooutput'){
+			option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
+			audioOutputSelect.appendChild(option);
+		} else {
+			console.log('Some other kind of source/device: ', deviceInfo);
+		}
+	}
+	listed=true;
+}
+
+function enterPressed(event, callback){
+  if (event.keyCode === 13){ // Number 13 is the "Enter" key on the keyboard
+    event.preventDefault(); // Cancel the default action, if needed
+    callback();
+  }
+}
+
+
+var isMobile = false;
+if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ // does not detect iPad Pros.
+	isMobile=true; // if iOS, default to H264?  meh.  let's not.
+}
+// Windows can show the cursor, since it captures in a different way.
+//if (navigator.platform.indexOf("Win") != -1){
+//	document.getElementById("showcursor").checked=true;
+//}
+
+function updateURLParameter(url, param, paramVal){
+    var TheAnchor = null;
+    var newAdditionalURL = "";
+    var tempArray = url.split("?");
+    var baseURL = tempArray[0];
+    var additionalURL = tempArray[1];
+    var temp = "";
+
+    if (additionalURL){
+        var tmpAnchor = additionalURL.split("#");
+        var TheParams = tmpAnchor[0];
+            TheAnchor = tmpAnchor[1];
+        if (TheAnchor){additionalURL = TheParams;}
+
+        tempArray = additionalURL.split("&");
+
+        for (var i=0; i<tempArray.length; i++){
+            if(tempArray[i].split('=')[0] != param){
+                newAdditionalURL += temp + tempArray[i];
+                temp = "&";
+            }
+        }        
+    } else {
+        var tmpAnchor = baseURL.split("#");
+        var TheParams = tmpAnchor[0];
+            TheAnchor  = tmpAnchor[1];
+
+        if(TheParams){baseURL = TheParams;}
+    }
+
+	if (paramVal===false){
+		temp="";
+		if(TheAnchor){temp += "#" + TheAnchor;}
+		var rows_txt = temp
+	} else if  (paramVal===""){
+		if(TheAnchor){paramVal += "#" + TheAnchor;}
+		var rows_txt = temp + "" + param;
+	} else {
+		if(TheAnchor){paramVal += "#" + TheAnchor;}
+		var rows_txt = temp + "" + param + "=" + paramVal;
+	}
+    return baseURL + "?" + newAdditionalURL + rows_txt;
+}
+
+if (urlParams.has('name')){
+	var name  = urlParams.get('name');
+	if (name!="OBSNinja" && name!="VDONinja"){
+		document.getElementById('changeText').value = "https://vdo.ninja/?view="+name;
+	}
+} 
+
+function addUrlToHistory(url){
+	if (lastUrls == undefined){
+		lastUrls = [];
+	}
+	if ( lastUrls[0] != url ) {
+		lastUrls.unshift(url);
+		if (lastUrls.length == 6) {
+			lastUrls.pop();
+		}
+	}
+}
+
+function modURL(){
+	var url = document.getElementById('changeText').value;
+	if (url.startsWith("obs.ninja")){
+		url = "https://"+url;
+	}
+	console.log(url);
+	return url;
+}
+function gohere(){
+	addUrlToHistory(document.getElementById('changeText').value);
+	localStorage.setItem('lastUrls', JSON.stringify(lastUrls));
+	var url = modURL();
+	if ((document.getElementById('changeText').value.includes("obs.ninja")) && (document.getElementById('changeText').value.includes("http"))  && (document.getElementById('changeText').value.includes("&sink"))){
+		alert("Notice: OBS.Ninja has been replaced by VDO.Ninja.\n\nPlease update your links accordingly for audio output to work correctly.");
+	} else if (!(document.getElementById('changeText').value.includes(window.location.hostname)) && (document.getElementById('changeText').value.includes("http"))  && (document.getElementById('changeText').value.includes("&sink"))){
+		alert("Notice: The &sink command is domain specific.\nVisit https://YOURDOMAIN.com/electron instead.");
+	}
+	window.location = url;
+};
+getPermssions();
+</script>
+</body>
+</html>

iframe.html

@@ -192,6 +192,11 @@ function loadIframe(){  // this is pretty important if you want to avoid camera
 		button.onclick = function(){iframe.contentWindow.postMessage({"sendChat":"Hello!"}, '*');};
 		iframeContainer.appendChild(button);
 		
+		var button = document.createElement("button");
+		button.innerHTML = "Send Keyframe";
+		button.onclick = function(){iframe.contentWindow.postMessage({"keyframe":true}, '*');};
+		iframeContainer.appendChild(button);
+		
 		var button = document.createElement("button");
 		button.innerHTML = "Insert Style Sheet";
 		var stylesheet = "#main { zoom: 0.5;} video {float: left; margin: 0; padding: 0; } #info {display:none;}";
@@ -238,6 +243,16 @@ function loadIframe(){  // this is pretty important if you want to avoid camera
 		button.onclick = function(){iframe.contentWindow.postMessage({"function":"previewWebcam"}, '*');};  // publishScreen
 		iframeContainer.appendChild(button);
 		
+		var button = document.createElement("button");
+		button.innerHTML = "Change to Camera #2";
+		button.onclick = function(){iframe.contentWindow.postMessage({"changeVideoDevice":2}, '*');};  // change text of add camera button
+		iframeContainer.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "Change to Microphone #4";
+		button.onclick = function(){iframe.contentWindow.postMessage({"changeAudioDevice":4}, '*');};  // change text of add camera button
+		iframeContainer.appendChild(button);
+		
 		var button = document.createElement("button");
 		button.innerHTML = "eval('alert(\"DANGERUS\")'";
 		button.onclick = function(){iframe.contentWindow.postMessage({"function":"eval", "value":'alert(\"DANGERUS\")'}, '*');};  // publishScreen

index.html

@@ -24,25 +24,25 @@
 		<link rel="icon" href="./media/favicon.ico" />
 		<link itemprop="thumbnailUrl" href="./media/obsNinja_logo_full.png" />
 		<!-- Primary Meta Tags -->
-		<title>OBS.Ninja</title>
-		<meta name="title" content="OBS.Ninja" />
-		<meta name="description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free." />
+		<title>VDO.Ninja</title>
+		<meta name="title" content="VDO.Ninja" />
+		<meta name="description" content="Bring live video from your smartphone, computer, or friends directly into your Studio. 100% free." />
 		<meta name="author" content="Steve Seguin" />
 		<!-- Open Graph / Facebook -->
-		<meta property="og:site_name" content="OBS.Ninja" />
+		<meta property="og:site_name" content="VDO.Ninja" />
 		<meta property="og:type" content="website" />
-		<meta property="og:url" content="https://obs.ninja/" />
-		<meta property="og:title" content="OBS.Ninja" />
-		<meta property="og:description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free." />
-		<meta property="og:image" itemprop="image" content="https://obs.ninja/media/obsNinja_logo_full.png" />
+		<meta property="og:url" content="https://vdo.ninja/" />
+		<meta property="og:title" content="VDO.Ninja" />
+		<meta property="og:description" content="Bring live video from your smartphone, computer, or friends directly into Studio. 100% free." />
+		<meta property="og:image" itemprop="image" content="https://vdo.ninja/media/obsNinja_logo_full.png" />
 		<meta name="msapplication-TileImage" content="./media/obsNinja_logo_full.png" />
 		<meta property="og:image:type" content="image/png" />
 		<meta property="og:image:width" content="1200" />
 		<meta property="og:image:height" content="630" />
 		<!-- Twitter -->
 		<meta property="twitter:card" content="summary_large_image" />
-		<meta property="twitter:url" content="https://obs.ninja/" />
-		<meta property="twitter:title" content="OBS.Ninja" />
+		<meta property="twitter:url" content="https://vdo.ninja/" />
+		<meta property="twitter:title" content="VDO.Ninja" />
 		<meta property="twitter:description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free." />
 		<meta property="twitter:image" content="./media/obsNinja_logo_full.png" />
 		<meta name="msapplication-TileColor" content="#da532c" />
@@ -55,7 +55,7 @@
 			}
 		</style>
 		<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
-		<link rel="stylesheet" href="./main.css?ver=56" />
+		<link rel="stylesheet" href="./main.css?ver=63" />
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.min.js"></script>
 	</head>
 	<body id="main" class="hidden">
@@ -66,17 +66,16 @@
 		<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
 			<link itemprop="url" href="./media/obsNinja_logo_full.png" />
 		</span>
-		<script  type="text/javascript" crossorigin="anonymous"  src="./thirdparty/CodecsHandler.js?ver=31"></script>
-		<script  type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=184"></script>
+		<script  type="text/javascript" crossorigin="anonymous"  src="./thirdparty/CodecsHandler.js?ver=33"></script>
+		<script  type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=203"></script>
 		<input id="zoomSlider" type="range" style="display: none;" />
 		<div id="header">
 			
 			<a id="logoname" href="./" style="text-decoration: none; color: white; margin: 2px;">
 				<span data-translate="logo-header">
-					<font id="qos">O</font>BS.Ninja 
+					<font id="qos">V</font>DO.Ninja 
 				</span>
 			</a>
-			
 			<div id="head1" style="display: inline-block; padding:1px; position: relative;">
 				<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>
@@ -87,20 +86,20 @@
 					<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>
 				<a
-                    id="reshare"
-                    data-drag="1"
-                    onclick="popupMessage(event);copyFunction(this)"
-                    class="task grabLinks"
-                    onmousedown="copyFunction(this)"
-                    style="font-weight: bold; color: #afa !important; cursor: grab; background-color: #0000;  font-size: 115%; min-width: 335px; max-width: 800px;"
-                ></a>
+					id="reshare"
+					data-drag="1"
+					onclick="popupMessage(event);copyFunction(this)"
+					class="task grabLinks"
+					onmousedown="copyFunction(this)"
+					style="font-weight: bold; color: #afa !important; cursor: grab; background-color: #0000;  font-size: 115%; min-width: 335px; max-width: 800px;"
+				></a>
 				<i class="las la-paperclip" style="color: #DDD;" onclick="popupMessage(event);copyFunction(document.getElementById('reshare'));" onmouseover="this.style.cursor='pointer'"></i>
 			</div>
 			<div id="head4" style="display: inline-block;" class="advanced">
 				<font style="font-size: 68%; color: white;">
-                    &nbsp; 
+					&nbsp; 
 					<span data-translate="you-are-in-the-control-center">Control center for room:</span>
-                    
+					
 					<div id="dirroomid" style="font-size: 140%; color: #99c; display: inline-block;"></div>
 				</font>
 			</div>
@@ -111,6 +110,8 @@
 			
 		</div>
 		<div id="controlButtons" >
+			<div id="obsState" class="advanced" style="border:green solid 2px;padding:10px;margin:10px;color: white; z-index:2; background-color: #222D;display: block;top: 0;position: fixed;">ACTIVE</div>
+			
 			<div id="subControlButtons">
 				<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="session.nextQueue()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="advanced float" style="cursor: pointer;" >
 					<i id="queuetoggle" class="toggleSize las la-stream my-float"></i>
@@ -135,42 +136,51 @@
 				<div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Create a Secondary Stream" alt="Create a Secondary Stream" onclick="createIframePopup()" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float advanced" style="cursor: pointer;">
 					<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv my-float"></i>
 				</div>
-				<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Settings"  onclick="toggleSettings()" class="advanced float"  tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Settings Menu">
+				<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()" 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="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">
+					<i id="roomsettingstoggle" class="toggleSize las la-users-cog my-float"></i>
+				</div>
+				
+				<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Your audio and video Settings"  onclick="toggleSettings()" class="advanced float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu">
 					<i id="settingstoggle" class="toggleSize las la-cog my-float"></i>
 				</div>
-				<div id="hangupbutton"  onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call"  alt="Hangup the Call" onclick="hangup()" class="advanced float"  tabindex="22" 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="advanced float"  tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
 					<i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
 				</div>
-				<div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-raised="0" title="Alert the host you want to speak"  alt="Alert the host you want to speak" tabindex="23" 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="advanced float" style="cursor: pointer;">
 					<i class="toggleSize my-float las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
 				</div>
-				<div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Record your stream to disk" alt="Record your stream to disk" tabindex="24" 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="advanced float" style="cursor: pointer;">
 					<i class="toggleSize my-float las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
 				</div>
 				<span id="miniPerformer" style="pointer-events: auto;" class="advanced"></span>
 				<span id="rooms" class="advanced" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
 				
-				<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cancel the Director's Video/Audio"  onclick="hangup2()" class="advanced float"  tabindex="25" 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="advanced float"  tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Disconnect Direcotor's cam">
 					<i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
 				</div>
 			</div>
 		</div>
 		
 		<span
-                id="reportbutton"
+				id="reportbutton"
 				title="Submit any error logs" 
-                onclick="submitDebugLog();"
-                style="cursor: pointer; visibility: hidden; display:none;z-index:7;"
-            >
+				onclick="submitDebugLog();"
+				style="cursor: pointer; visibility: hidden; display:none;z-index:7;"
+			>
 			<i style="float: right; bottom: 0px; cursor: pointer; position: fixed; right: 55px; color: #d9e4eb; padding: 2px; margin: 2px 2px 0 0; font-size: 140%;" class="las la-bug" aria-hidden="true"></i>
 		</span>
 		<span
-                id="helpbutton"
+				id="helpbutton"
 				title="Show Help Info" 
-                onclick="warnUser('For support, please browse https://reddit.com/r/obsninja or join the live chat on Discord at https://discord.obs.ninja.\n\nThe Wiki also contains many help guides and advanced settings, located at https://wiki.obs.ninja.\n\nTo access the video stats menu, hold CTRL (command) and Left-Click on a video. Most video issues can be fixed by using Wired Internet instead of Wi-Fi.')"
-                style="cursor: pointer; display:none;"
-                alt="How to Use This with OBS"
-            >
+				onclick="warnUser('For support, please browse https://reddit.com/r/obsninja or join the live chat on Discord at https://discord.obs.ninja.\n\nThe Docs also contains many help guides and advanced settings, located at https://docs.vdo.ninja.\n\nTo access the video stats menu, hold CTRL (command) and Left-Click on a video. Most video issues can be fixed by using Wired Internet instead of Wi-Fi.')"
+				style="cursor: pointer; display:none;"
+				alt="How to Use This with OBS"
+			>
 			<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-question-circle" aria-hidden="true"></i>
 		</span>
 		<span title="Language Options" onclick="toggle(document.getElementById('languages'));" id="translateButton">
@@ -310,7 +320,7 @@
 						<i class="las la-video"></i><span data-translate="video-source"> Video Source </span>
 						<select id="videoSourceSelect" ></select>
 						<span id="gear_webcam" style="display: inline-block; cursor:pointer;" onclick="toggle(document.getElementById('videoSettings'));">
-                            &nbsp;&nbsp;
+							&nbsp;&nbsp;
 							<i class="las la-cog" style="font-size: 140%; vertical-align: middle;" aria-hidden="true"></i>
 						</span>
 					</span>
@@ -322,12 +332,12 @@
 								<label for="fullhd">
 									<span data-translate="max-resolution">Max Resolution</span>
 								</label> |
-                                
+								
 								<input type="radio" checked id="halfhd" name="resolution" value="1" />
 								<label for="halfhd">
 									<span data-translate="balanced">Balanced</span>
 								</label> |
-                                
+								
 								<input type="radio" id="nothd" name="resolution" value="2" />
 								<label for="nothd">
 									<span data-translate="smooth-cool">Smooth and Cool</span>
@@ -394,7 +404,7 @@
 							border-bottom: 0;
 							display: block;
 							text-align: left;
-							margin: 17px auto;
+							margin: 17px auto 0  auto;
 							max-width: 450px;
 							min-width: 420px;
 							background-color: #f3f3f3;
@@ -436,7 +446,7 @@
 						<span data-translate="select-screen-to-share">SELECT SCREEN TO SHARE</span>
 					</button>
 					<span id="gear_screen" style="display: inline-block; cursor: pointer;" onclick="toggle(document.getElementById('videoSettings2'));">
-                        &nbsp;&nbsp;
+						&nbsp;&nbsp;
 						<i class="las la-cog" style="font-size: 170%; vertical-align: middle;" aria-hidden="true"></i>
 					</span>
 					<center>
@@ -446,12 +456,12 @@
 								<label for="fullhd">
 									<span data-translate="max-resolution">1080p (hi-def)</span>
 								</label> &nbsp;&nbsp;|&nbsp;&nbsp;
-                                
+								
 								<input type="radio" checked id="halfhd2" name="resolution2" value="1" />
 								<label for="halfhd">
 									<span data-translate="balanced">720p (balanced)</span>
 								</label> &nbsp;&nbsp;|&nbsp;&nbsp;
-                                
+								
 								<input type="radio" id="nothd2" name="resolution2" value="2" />
 								<label for="nothd">
 									<span data-translate="smooth-cool">360p (smooth)</span>
@@ -594,7 +604,8 @@
 							</div>
 						</div>
 						<div>See the 
-							<a style="text-decoration: none; color: blue;" target="_blank" href="https://docs.obs.ninja/advanced">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.<br /><br />
+							Try out the advanced <a style="text-decoration: none; color: blue;" target="_blank" href="https://invite.obs.ninja/">invite generator</a> here also.
 						</div>
 					</div>
 				</div>
@@ -686,7 +697,7 @@
 				<center>
 					<div class="infoblob" align="left">
 						<span data-translate="info-blob">
-							<h2>What is OBS.Ninja</h2>
+							<h2>What is VDO.Ninja</h2>
 							<br />
 							<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>
 							<li>Bring live video from your smartphone, remote computer, or friends directly into OBS or other studio software.</li>
@@ -694,7 +705,7 @@
 							<br />
 							<li>Youtube video 
 								<i class="lab la-youtube"></i>
-								<a href="https://www.youtube.com/watch?v=vLpRzMjUDaE&list=PLWodc2tCfAH1WHjl4WAOOoRSscJ8CHACe&index=2" alt="Youtube video demoing OBS.Ninja">Demoing it here</a>
+								<a href="https://www.youtube.com/watch?v=vLpRzMjUDaE&list=PLWodc2tCfAH1WHjl4WAOOoRSscJ8CHACe&index=2" alt="Youtube video demoing VDO.Ninja">Demoing it here</a>
 							</li>
 							
 							<br />
@@ -703,21 +714,24 @@
 							</i>
 							<br />
 							<li>
-								If you have	<a href="https://github.com/steveseguin/obsninja/wiki/FAQ#video-is-pixelated">"pixel smearing"</a> or corrupted video, try adding <i>&codec=h264</i> or <i>&codec=vp9</i> to the OBS view link. Using Wi-Fi will make the issue worse.
+								If you have	<a href="https://docs.vdo.ninja/common-errors-and-known-issues/video-is-pixelated">"pixel smearing"</a> or corrupted video, try adding <i>&codec=h264</i> or <i>&codec=vp9</i> to the OBS view link. Using Wi-Fi will make the issue worse.
 							</li>
 							<li>
-								A list of less common issues can <a href="https://github.com/steveseguin/obsninja/wiki/Known-Issues-(browser-bugs-and-more)">be found here</a>.
+								A list of less common issues can <a href="https://docs.vdo.ninja/common-errors-and-known-issues/known-issues-browser-bugs-and-more">be found here</a>.
 							</li>
-							
 							<br />
-                            👓🔆 Site Updated on April 20th: <a href="https://github.com/steveseguin/obsninja/wiki/v17-Release-Notes">v17 Release Notes</a>.  The previous version can be found at <a href="https://obs.ninja/v164/">https://obs.ninja/v164/</a> if you are having issues with this minor update.
+							<h4 style="color:#daad09;">
+								👋 👀  Welcome to our new domain! We've started to rebrand to VDO.Ninja. 📼  Nothing else is changing and we're staying 100% free.
+							</h4>
+							<br />
+							🌻 Site Updated on June 6th. The new <a href="https://docs.vdo.ninja/release-notes/v18">v18 release notes are here</a>. If new issues occur, the previous version can also be <a href="https://obs.ninja/v17/">found here</a>.
 
 							<br />
 							<br />
 							<h3>
-                               🛠 For support, see the <a href="https://www.reddit.com/r/OBSNinja/">sub-reddit <i class="lab la-reddit-alien"></i></a> or join the <a href="https://discord.gg/T4xpQVv">Discord <i class="lab la-discord"></i></a>. The <a href="https://github.com/steveseguin/obsninja/wiki/">Wiki is here</a> and my personal email is <i>steve@seguin.email</i>
+							   🛠 For support, see the <a href="https://www.reddit.com/r/OBSNinja/">sub-reddit <i class="lab la-reddit-alien"></i></a> or join the <a href="https://discord.gg/T4xpQVv">Discord <i class="lab la-discord"></i></a>. The <a href="https://docs.vdo.ninja/">documentation is here</a> and my personal email is <i>steve@seguin.email</i>
 							</h3> 
-                                
+								
 						</span>
 					</div>
 				</center>
@@ -726,12 +740,12 @@
 				<input type="submit" />
 			</form>
 			<div id="credits" class="credits">
-                Icons made by 
+				Icons made by 
 				<a href="https://www.flaticon.com/authors/lucy-g" >Lucy G</a> from 
 				<a href="https://www.flaticon.com/" >www.flaticon.com</a> is licensed by
-                
+				
 				<a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a> and by
-                
+				
 				<a href="https://www.flaticon.com/authors/gregor-cresnar">Gregor Cresnar</a> from 
 				<a href="https://www.flaticon.com/" >www.flaticon.com</a>
 			</div>
@@ -771,7 +785,7 @@
 						<li>Adding &showonly=SOME_OBS_VIRTUALCAM to the guest invite links allows for only a single video to be seen by the guests; this can be output of the OBS Virtual Camera for example</li>
 						<br />
 						
-						For advanced URL options and parameters, <a href="https://github.com/steveseguin/obsninja/wiki/Advanced-Settings">see the Wiki.</a>
+						For advanced URL options and parameters, <a href="https://docs.vdo.ninja/advanced-settings">see the Wiki.</a>
 					</font>
 				</div>
 			</div>
@@ -785,7 +799,7 @@
 					<span style="display:block;">
 						<span style="bottom: 0; margin: 0 0 0 10px; top: 22px; position: relative;">
 							<label class="switch" title="If disabled, the invited guest will not be able to see or hear anyone in the room.">
-							<input type="checkbox" checked data-param="&view=" onchange="updateLinkInverse(1,this);">
+							<input type="checkbox" checked data-param="&view=" onchange="updateLinkInverse(1,this);saveDirectorSettings();">
 							<span class="slider"></span>
 						</label>
 							<span data-translate="guests-hear-others">Guests hear others</span>
@@ -804,7 +818,7 @@
 					<span style="display:block;">
 						<span style="bottom: 0; margin: 0 0 0 10px; top: 22px; position: relative;">
 							<label class="switch" title="If disabled, you must manually add a video to a scene for it to appear.">
-							<input type="checkbox" checked data-param="&scene" onchange="updateLinkScene(3,this);">
+							<input type="checkbox" checked data-param="&scene" onchange="updateLinkScene(3,this);saveDirectorSettings();">
 							<span class="slider"></span>
 						</label>
 							<span data-translate="auto-add-guests">Auto-add guests</span>
@@ -818,7 +832,7 @@
 			</div>
 			<div class='directorContainer' id="customizeLinks" style='display:none;margin-top:0;padding-top:15px'>
 				<div class='directorBlock' id="customizeLinks1" style='display:none;margin-top:0;padding-bottom:0;'>
-					<div style="display:inline-block;top: 12px;   position: relative;">
+					<div style="display:inline-block;margin-top: 12px;   position: relative;  margin-right:10px;">
 						<label class="switch" title="Disables Echo Cancellation and improves audio quality">
 						<input type="checkbox" data-param="&s" onchange="updateLink(1,this);">
 						<span class="slider"></span>
@@ -838,6 +852,13 @@
 						<span data-translate="remote-monitoring">Remote Monitoring</span>
 						<Br />
 						
+						<label class="switch" title="The guest will be asked if they want to reload the previous link when revisiting">
+						  <input type="checkbox" data-param="&sticky" onchange="updateLink(1,this);">
+						  <span class="slider"></span>
+						</label>
+						<span data-translate="remote-monitoring">Invite saved to cookie</span>
+						<Br />
+						
 						<label class="switch" title="Guest will be prompted to enter a Display Name">
 						  <input type="checkbox" data-param="&l" onchange="updateLink(1,this);">
 						  <span class="slider"></span>
@@ -857,7 +878,7 @@
 						<span data-translate="show-active-speaker">Show active speakers</span>
 						
 					</div>
-					<div  style="display:inline-block;top: 12px; position: relative; margin-left:10px;">
+					<div  style="display:inline-block;margin-top: 12px; position: relative; margin-right:10px;">
 						<label class="switch" title="Request 1080p60 from the Guest instead of 720p60, if possible">
 						  <input type="checkbox" data-param="&q" onchange="updateLink(1,this);">
 						  <span class="slider"></span>
@@ -881,12 +902,14 @@
 						  <span class="slider"></span>
 						</label>
 						<span data-translate="hide-setting-buttons">Hide settings button</span>
+						
 						<Br />
-						<label class="switch" title="The guest won't have access to changing camera settings or screenshare">
+						<label class="switch" title="The guest's self-video preview will appear tiny in the top right">
 						  <input type="checkbox" data-param="&mini" onchange="updateLink(1,this);">
 						  <span class="slider"></span>
 						</label>
 						<span data-translate="mini-self-preview">Mini self-preview</span>
+						
 						<Br />
 						<label class="switch" title="Allow the guests to pick a virtual backscreen effect">
 						  <input type="checkbox" data-param="&effects" onchange="updateLink(1,this);">
@@ -895,7 +918,7 @@
 						<font class="tooltip" style='cursor: help;position:relative;bottom:2px;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;'>⚠<span class="tooltiptext">Uses more CPU and freezes the video if the guest doesn't keep the tab visible.</span></font> <span data-translate="virtual-backgrounds">Virtual backgrounds</span>
 						
 					</div>
-					<div  style="display:inline-block;top: 12px; position: relative; margin-left:10px;">
+					<div  style="display:inline-block;margin-top: 12px; position: relative; margin-right:10px;">
 						<label class="switch" title="Increase video quality that guests in room see.">
 						  <input type="checkbox" data-param="&trb=2000" onchange="updateLink(1,this);">
 						  <span class="slider"></span>
@@ -925,8 +948,15 @@
 						  <span class="slider"></span>
 						</label>
 						<span data-translate="enable-equalizer">Enable equalizer as option</span>
+						<br />
+						<label class="switch">
+						  <input type="checkbox" data-param="&tips" onchange="updateLink(1,this);">
+						  <span class="slider"></span>
+						</label>
+						<span data-translate="show-guest-tips" title="Show some prep suggestions to the guests on connect">Show guest setup tips</span>
+							
 					</div>
-					<div  style="display:inline-block;top: 12px; position: relative; margin-left:10px; height: 20px;">
+					<div  style="display:inline-block;margin-top: 12px; position: relative; height: 20px;">
 						<label class="switch" title="This low-fi video codec uses very little CPU, even with dozens of active viewers.">
 						  <input type="checkbox" data-param="&webp" onchange="updateLinkWebP(1,this);">
 						  <span class="slider"></span>
@@ -944,7 +974,13 @@
 						  <input type="checkbox" data-param="&m" onchange="updateLink(1,this);">
 						  <span class="slider"></span>
 						</label>
-						<span data-translate="mute-microphone-by-default">Mute microphone by default</span>
+						<span data-translate="mute-microphone-by-default">Muted; guest can unmute</span>
+						<Br />
+						<label class="switch" title="Have the guest join muted, so only the director can Unmute the guest.">
+						  <input type="checkbox" data-param="&g=0" onchange="updateLink(1,this);">
+						  <span class="slider"></span>
+						</label>
+						<span data-translate="unmute-by-director-only">Muted; director can unmute</span>
 						<Br />
 						<label class="switch" title="The guest will not be asked for a video device on connection">
 						  <input type="checkbox" id="vd0toggle" data-param="&vd=0" onchange="if(getById('vd1toggle').checked){getById('vd1toggle').checked=false;updateLink(1,getById('vd1toggle'));} updateLink(1,this);">
@@ -952,12 +988,6 @@
 						</label>
 						<span data-translate="guest-joins-with-no-camera">Guest joins with no camera</span>
 						<Br />
-						<label class="switch" title="Have the guest join muted, so only the director can Unmute the guest.">
-						  <input type="checkbox" data-param="&g=0" onchange="updateLink(1,this);">
-						  <span class="slider"></span>
-						</label>
-						<span data-translate="unmute-by-director-only">Unmute by director only</span>
-						<Br />
 						<label class="switch" title="Make the invite URL encoded, so parameters are harder to tinker with by guests">
 						  <input type="checkbox" data-param="" id="obfuscate_director_1" onchange="updateLink(1,this);">
 						  <span class="slider"></span>
@@ -967,8 +997,16 @@
 				</div>
 			
 				<div class='directorBlock' id="customizeLinks3" style='display:none;margin-top:5px;padding-bottom:0;'>
-					<div  style="display:inline-block; position: relative; margin-left:10px; ">
-						<div style="display:inline-block;top: 12px; position: relative;">
+					<div  style="display:inline-block; position: relative; margin-right:10px; ">
+						<div style="display:inline-block;margin-top: 12px;   position: relative;">
+						
+						<label class="switch">
+							  <input type="checkbox" data-param="&st" onchange="updateLink(3,this);">
+							  <span class="slider"></span>
+							</label>
+							<span data-translate="hide-audio-only-sources">Hide audio-only sources</span>
+							<br />
+							
 							<label class="switch">
 								<input type="checkbox" data-param="&s" onchange="updateLink(3,this);">
 								<span class="slider"></span>
@@ -984,29 +1022,46 @@
 							
 						</div>
 						
-						<div  style="display:inline-block;top: 12px; position: relative; margin-left:10px; height: 20px;">
-							<label class="switch">
-							  <input type="checkbox" data-param="&st" onchange="updateLink(3,this);">
-							  <span class="slider"></span>
-							</label>
-							<span data-translate="hide-audio-only-sources">Hide audio-only sources</span>
-							<br />
-							
+						<div  style="display:inline-block;margin-top: 12px; position: relative; margin-right:10px; height: 20px;">
 							
 							<label class="switch" title="The active speakers are made visible automatically">
 							  <input type="checkbox" data-param="&sas" onchange="updateLink(3,this);">
 							  <span class="slider"></span>
 							</label>
 							<span data-translate="show-active-speakers">Show active speakers</span>
+							<br />
+							
+							<label class="switch" title="Set the background color to bright green">
+							  <input type="checkbox" data-param="&chroma" onchange="updateLink(3,this);">
+							  <span class="slider"></span>
+							</label>
+							<span data-translate="green-background">Green background</span>
+							
+							<br />
+							
+							<label class="switch" title="Fade videos in over 500ms">
+							  <input type="checkbox" data-param="&fadein" onchange="updateLink(3,this);">
+							  <span class="slider"></span>
+							</label>
+							<span data-translate="fade-videos-in">Fade-in videos</span>
+							
+							
 						</div>
 						
-						<div  style="display:inline-block;top: 12px; position: relative; margin-left:10px;">
+						<div  style="display:inline-block;margin-top: 12px; position: relative; margin-right:10px; height: 20px;">
 							<label class="switch">
 							  <input type="checkbox" data-param="&sl" onchange="updateLink(3,this);">
 							  <span class="slider"></span>
 							</label>
 							<span data-translate="show-display-names">Show display names</span>
 							<br />
+							
+							<label class="switch" title="Add a 10px margin around all video elements">
+							  <input type="checkbox" data-param="&margin" onchange="updateLink(3,this);">
+							  <span class="slider"></span>
+							</label>
+							<span data-translate="add-margin">Add margin to videos</span>
+							<br />
 							<label class="switch">
 							  <input type="checkbox" data-param="&vb=20000" onchange="updateLink(3,this);">
 							  <span class="slider"></span>
@@ -1014,12 +1069,24 @@
 							<font class="tooltip" style='cursor: help;position:relative;bottom:2px;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;'>⚠<span class="tooltiptext">This can cause video playback to lag</span></font> Unlock Video Bitrate
 						</div>
 						
-						<div  style="display:inline-block;top: 12px; height: 20px;position: relative; margin-left:10px;">
-							<label class="switch">
+						<div  style="display:inline-block;margin-top: 12px; position: relative; height: 20px;">
+							<label class="switch" title="Playback the video with mono-channel audio">
 							  <input type="checkbox" data-param="&mono" onchange="updateLink(3,this);">
 							  <span class="slider"></span>
 							</label>
 							<span data-translate="force-mono-audio">Force mono audio</span>
+							<br />
+							<label class="switch" title="Have the videos fit their respective areas, even if it means cropping a bit">
+							  <input type="checkbox" data-param="&cover" onchange="updateLink(3,this);">
+							  <span class="slider"></span>
+							</label>
+							<span data-translate="fill-video-space">Crop video to fit</span>
+							<br />
+							<label class="switch" title="Have videos be aligned with sizing designed for vertical video">
+							  <input type="checkbox" data-param="&916" onchange="updateLink(3,this);">
+							  <span class="slider"></span>
+							</label>
+							<span data-translate="vertical-aspect-ratio">Vertical video mode</span>
 						</div>
 					</div>
 				</div>
@@ -1071,7 +1138,7 @@
 					<span data-translate="mute-guest" >mute guest</span>
 				</button>
 				
-				<!----      /////// BREAK ////////            -->
+				<!----	  /////// BREAK ////////			-->
 				<hr /><span style="user-select: none;grid-column: 1;width:100%;margin:5px 0 ;font-size:80%; cursor: pointer;" 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>
 				
 				<button data-action-type="addToScene"  class="hidden" data-cluster="1" style="grid-column: 1;" data-scene="2" title="Add this Video to any remote '&scene=2'" onclick="directEnable(this, event, 2);">
@@ -1084,28 +1151,26 @@
 					<span data-translate="mute-scene" >mute in scene</span>
 				</button>
 				
-				<span id="sceneGroup1" class="hidden" data-cluster="1" >
-					<button style="width: 35.2px" data-scene="3" data-action-type="add-scene-3" title="Add to Scene 3" onclick="directEnable(this, event, 3);">
+				<span class="hidden" data-cluster="1" >
+					<button style="width: 35.2px" data-action-type="addToScene" data-scene="3" data-action-type="add-scene-3" title="Add to Scene 3" onclick="directEnable(this, event, 3);">
 						<span >S3</span>
 					</button>
-					<button style="width:35.2px;" data-scene="4" data-action-type="add-scene-4" title="Add to Scene 4" onclick="directEnable(this, event, 4);">
+					<button style="width:35.2px;" data-action-type="addToScene" data-scene="4" data-action-type="add-scene-4" title="Add to Scene 4" onclick="directEnable(this, event, 4);">
 						<span >S4</span>
 					</button>
-					<button style="width: 35.2px" data-scene="5" data-action-type="add-scene-5" title="Add to Scene 5" onclick="directEnable(this, event, 5);">
+					<button style="width: 35.2px" data-action-type="addToScene" data-scene="5" data-action-type="add-scene-5" title="Add to Scene 5" onclick="directEnable(this, event, 5);">
 						<span >S5</span>
 					</button>
 				</span>
 				
-				
-				
-				<span id="sceneGroup2" class="hidden" data-cluster="1">
-					<button style="width: 35.2px" data-scene="6" data-action-type="add-scene-6" title="Add to Scene 6" onclick="directEnable(this, event, 6);">
+				<span class="hidden" data-cluster="1">
+					<button style="width: 35.2px" data-action-type="addToScene" data-scene="6" data-action-type="add-scene-6" title="Add to Scene 6" onclick="directEnable(this, event, 6);">
 						<span >S6</span>
 					</button>
-					<button style="width: 35.2px" data-scene="7" data-action-type="add-scene-7" title="Add to Scene 7" onclick="directEnable(this, event, 7);">
+					<button style="width: 35.2px" data-action-type="addToScene" data-scene="7" data-action-type="add-scene-7" title="Add to Scene 7" onclick="directEnable(this, event, 7);">
 						<span >S7</span>
 					</button>
-					<button style="width: 35.2px" data-scene="8" data-action-type="add-scene-8" title="Add to Scene 8" onclick="directEnable(this, event, 8);">
+					<button style="width: 35.2px" data-action-type="addToScene" data-scene="8" data-action-type="add-scene-8" title="Add to Scene 8" onclick="directEnable(this, event, 8);">
 						<span >S8</span>
 					</button>
 				</span>
@@ -1119,7 +1184,7 @@
 					<span data-translate="stats-remote"> Scene Stats</span>
 				</button>
 				
-				<!----      /////// BREAK ////////            -->
+				<!----	  /////// BREAK ////////			-->
 				<hr /><span style="user-select: none;grid-column: 1;width:100%;margin:5px 0 ;font-size:80%;cursor: pointer;" 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>
 				
 				
@@ -1128,12 +1193,12 @@
 					<span data-translate="solo-video">Highlight guest</span>
 				</button>
 				
-				<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>
 					<span data-translate="hide-guest" >hide guest</span>
 				</button>
 				
-				<button class="hidden" data-cluster="2" data-action-type="toggle-remote-speaker"    title="Toggle the remote guest's speaker output" onclick="remoteSpeakerMute(this, event);">
+				<button class="hidden" data-cluster="2" data-action-type="toggle-remote-speaker"	title="Toggle the remote guest's speaker output" onclick="remoteSpeakerMute(this, event);">
 					<i class="las la-volume-off"></i> <span data-translate="toggle-remote-speaker">Deafen Guest</span>
 				</button>
 				
@@ -1175,7 +1240,7 @@
 				
 				
 				<font class="tooltip hidden" data-cluster="2" 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)" onclick="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: 2.5em;  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: 2.5em;  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>
 				
 				<span class="hidden" data-cluster="2">
@@ -1235,31 +1300,31 @@
 					<i class="las la-plus-square"></i>
 					<span data-translate="add-to-scene">add to scene 1</span>
 				</button>
-				<button data-action-type="mute-scene"   title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
+				<button data-action-type="mute-scene" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
 					<i class="las la-microphone-slash"></i>
 					<span data-translate="mute-scene" >mute in scene</span>
 				</button>
 				
-				<span id="sceneGroup1">
-					<button style="width: 35.2px" data-scene="2" data-action-type="add-scene-2" title="Add to Scene 2" onclick="directEnable(this, event, 2);">
+				<span>
+					<button style="width: 35.2px" data-scene="2" data-action-type="addToScene" data-action-type="add-scene-2" title="Add to Scene 2" onclick="directEnable(this, event, 2, true);">
 						<span >S2</span>
 					</button>
-					<button style="width:35.2px;" data-scene="3" data-action-type="add-scene-3" title="Add to Scene 3" onclick="directEnable(this, event, 3);">
+					<button style="width:35.2px;" data-scene="3" data-action-type="addToScene" data-action-type="add-scene-3" title="Add to Scene 3" onclick="directEnable(this, event, 3, true);">
 						<span >S3</span>
 					</button>
-					<button style="width: 35.2px" data-scene="4" data-action-type="add-scene-4" title="Add to Scene 4" onclick="directEnable(this, event, 4);">
+					<button style="width: 35.2px" data-scene="4" data-action-type="addToScene" data-action-type="add-scene-4" title="Add to Scene 4" onclick="directEnable(this, event, 4, true);">
 						<span >S4</span>
 					</button>
 				</span>
 				
-				<span id="sceneGroup2">
-					<button style="width: 35.2px" data-scene="5" data-action-type="add-scene-5" title="Add to Scene 5" onclick="directEnable(this, event, 5);">
+				<span >
+					<button style="width: 35.2px" data-scene="5" data-action-type="addToScene" data-action-type="add-scene-5" title="Add to Scene 5" onclick="directEnable(this, event, 5, true);">
 						<span >S5</span>
 					</button>
-					<button style="width: 35.2px" data-scene="6" data-action-type="add-scene-6" title="Add to Scene 6" onclick="directEnable(this, event, 6);">
+					<button style="width: 35.2px" data-scene="6" data-action-type="addToScene" data-action-type="add-scene-6" title="Add to Scene 6" onclick="directEnable(this, event, 6, true);">
 						<span >S6</span>
 					</button>
-					<button style="width: 35.2px" data-scene="7" data-action-type="add-scene-7" title="Add to Scene 7" onclick="directEnable(this, event, 7);">
+					<button style="width: 35.2px" data-scene="7" data-action-type="addToScene" data-action-type="add-scene-7" title="Add to Scene 7" onclick="directEnable(this, event, 7, true);">
 						<span >S7</span>
 					</button>
 				</span>
@@ -1416,13 +1481,25 @@
 			<a target="popup" id="popOutChat" style="cursor:pointer;text-align:right;color:#B3C7F9;" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
 			<div id="chatBody"> 
 				<div class="inMessage" data-translate='welcome-to-obs-ninja-chat'>
-					Welcome to OBS.Ninja! You can send text messages directly to connected peers from here.
+					Welcome to VDO.Ninja! You can send text messages directly to connected peers from here.
 				</div>
 			</div>
 			<input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
 			<button style="width:60px;background-color:#EEE;top: -1px;position: relative;" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
 		</div>
 		
+		
+		<div id="roomSettings" style="display:none">
+			<div class="promptModalInner">
+				<span class='modalClose' onclick="toggleRoomSettings();">×</span>
+				<span></span>
+				<h3>Change room settings</h3><br />
+				<label title="Increase this at your peril. Changes the total inbound video bitrate per guest; mobile devices excluded. Webp-mode also excluded." for="trbSettingInput">Change room video quality:</label><span style="margin-left: 6px;" id="trbSettingInputFeedback"></span>-kbps
+				<input id="trbSettingInput" type="range" min="0" max="2000" value="500" onchange="changeTRB(this);" oninput="getById('trbSettingInputFeedback').innerHTML = this.value;" style="width:400px;display:block;" />
+				
+			</div>
+		</div>
+		
 		<div id="transferSettingsTemplate" style="display:none">
 			<h3>Change guest settings</h3><br />
 			<label class="switch" title="Cannot see videos">
@@ -1489,13 +1566,20 @@
 	
 		<div id="voiceMeterTemplate" class="video-meter">
 		</div>
+		<div id="voiceMeterTemplate2" class="video-meter2">
+		</div>
 		<div id="muteStateTemplate" style="display:none;" class="video-mute-state">
 			<i class="las la-microphone-slash"></i>
 		</div>
-		
+		<div id="videoMuteStateTemplate" style="display:none;" class="video-mute-state">
+			<i class="las la-video-slash"></i>
+		</div>
+		<div id="raisedHandTemplate" style="display:none;" class="video-mute-state raisedHand">
+			<i class="las la-hand-paper"></i>
+		</div>
 		<audio id="testtone" style="display:none;" preload="none">
-			<source src="tone.mp3" type="audio/mpeg"> 
-			<source src="tone.ogg" type="audio/ogg"> 
+			<source src="./media/tone.mp3" type="audio/mpeg"> 
+			<source src="./media/tone.ogg" type="audio/ogg"> 
 		</audio>
 		<div class="gone" >
 			<!-- This image is used when dragging elements -->
@@ -1506,7 +1590,7 @@
 		<div id="screenPopup" class="popup-screen">
 			<button onclick="getById('screenPopup').style.display='none';margin:0;padding:0;">Close Window</button>
 			<div>See the 
-				<a style="text-decoration: none; color: blue;" target="_blank" href="https://docs.obs.ninja/advanced">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>
@@ -1551,80 +1635,93 @@
 		
 			if (window.location.hostname.indexOf("www.obs.ninja") == 0) {
 				window.location = window.location.href.replace("www.obs.ninja","obs.ninja"); // the session.salt is domain specific; let's consolidate www as a result.
+			} else if (window.location.hostname.indexOf("www.vdo.ninja") == 0) {
+				window.location = window.location.href.replace("www.vdo.ninja","vdo.ninja"); // the session.salt is domain specific; let's consolidate www as a result.
 			}
 		
-            var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
-			session.version = "17.1";
-            session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
+			var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
+			session.version = "18.2";
+			session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
 			
-			session.defaultPassword = "someEncryptionKey123"; // Disabling improves compatibility and is helpful for debugging.
-			session.salt = location.hostname; // used only if password is not == False.
+			session.defaultPassword = "someEncryptionKey123"; // Change this password if self-deploying for added security/privacy
+			session.salt = location.hostname; // used only if password is not == False. You can change to "session.salt = location.hostname+location.pathname;" for greater deployment isolation
 			
-            // session.configuration = {
-            //    iceServers: [
-            //         { urls: ["stun:stun.l.google.com:19302", "stun:stun4.l.google.com:19302"] }, // more than 4 stun+turn servers may cause issues
-            //    ],
-			//    sdpSemantics: 'unified-plan'
-            // };
-            // var turn = {};
-            // turn.username = "steve";
-            // turn.credential = "justtesting";
-            // turn.urls = ["turn:turn.obs.ninja:443"]; // US CENTRAL
-            // session.configuration.iceServers.push(turn);
-            // turn = {};
-            // turn.username = "steve";
-            // turn.credential = "justtesting";
-            // turn.urls = ["turn:turn2.obs.ninja:443"]; // US WEST
-            // session.configuration.iceServers.push(turn);
+			// session.configuration = {
+			//	iceServers: [
+			//		 { urls: ["stun:stun.l.google.com:19302", "stun:stun4.l.google.com:19302"] }, // more than 4 stun+turn servers may cause issues
+			//	],
+			//	sdpSemantics: 'unified-plan'
+			// };
+			// var turn = {};
+			// turn.username = "steve";
+			// turn.credential = "justtesting";
+			// turn.urls = ["turn:turn.obs.ninja:443"]; // US CENTRAL
+			// session.configuration.iceServers.push(turn);
+			// turn = {};
+			// turn.username = "steve";
+			// turn.credential = "justtesting";
+			// turn.urls = ["turn:turn2.obs.ninja:443"]; // US WEST
+			// session.configuration.iceServers.push(turn);
 
-            // session.configuration.iceTransportPolicy = "relay";  // uncomment to enable "&privacy" and force the TURN server
+			// session.configuration.iceTransportPolicy = "relay";  // uncomment to enable "&privacy" and force the TURN server
 
-			///// Different endpoints are available; each isolated from each other.
-			// session.wss = "wss://wss13.obs.ninja:443"; // US-East (Default)
-			// session.wss = "wss://apibackup.obs.ninja:443"; // US-West
-			// session.wss = "wss://jp1wss.obs.ninja:443";  // Japan
-			// session.wss = "wss://au1wss.obs.ninja:443"; // Australia
-			// session.wss = "wss://de1wss.obs.ninja:443"; // Germany
-			// session.wss = "wss://insecure.cam:444"; // China
-			  
-				
-            ///// The following lets you set the defaults
+				///// Different officially hosted handshake endpoints are available; each isolated from each other.
+				// session.wss = "wss://wss13.obs.ninja:443"; // US-East (Default)
+				// session.wss = "wss://apibackup.obs.ninja:443"; // US-West
+				// session.wss = "wss://jp1wss.obs.ninja:443";  // Japan
+				// session.wss = "wss://au1wss.obs.ninja:443"; // Australia
+				// session.wss = "wss://de1wss.obs.ninja:443"; // Germany
+				// session.wss = "wss://insecure.cam:444"; // China
+				//////
 
-            // session.webcamonly // true,false
-            // session.stereo // 0,1,2,3
-            // session.audiobitrate // int in kbps
-            // session.view // "xxxx"
-            // session.remote
-            // session.optimize
-            // session.disableOBS
-            // session.audio
-            // session.video
-            // session.forceios
-            // session.nocursor
-            // session.codec
-            // session.scale
-            // session.bitrate  // int in kbps
-			// session.totalRoomBitrate = 500; // int, kbps
-            // session.height // int
-            // session.width // int
-            // session.quality // int
-            // session.sink
-            // session.offsetChannel // int
-            // session.audioChannels // int
-            // session.security
-            // session.framerate // int
-            // session.sync
-            // session.buffer // int in milliseconds
-            // session.roomid // "yyyy"
-            // session.scene
-            // session.title // "zzzz"
-        </script>
+				///  If wanting to fully-self-host, uncomment the following and deploy your own websocket server; good for air-gapped deployments
+				// session.wss = "wss://wss.contribute.cam:443"; // https://github.com/steveseguin/websocket_server 
+				// session.pie=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.pie = true; // Set to true to have Piesocket.com
+				//var apiKey = "ZCu96UFf9ezeQeClK7BOCkq6Q0x0lxWAPJcgxjz5";  // GET YOUR OWN API KEY at piesocket.com, as using this one is a privacy hazard.
+				//session.wss = "wss://us-nyc-1.websocket.me/v3/1?api_key="+apiKey;
+				////////////
+			
+			///// The following lets you set the defaults
+
+			// session.webcamonly // true,false
+			// session.stereo // 0,1,2,3
+			// session.audiobitrate // int in kbps
+			// session.view // "xxxx"
+			// session.remote 
+			// session.optimize  
+			// session.disableOBS
+			// session.audio
+			// session.video
+			// session.forceios
+			// session.nocursor
+			// session.codec // default codec; maybe h264 is useful? the default is up to the browser normally
+			// session.scale
+			// session.bitrate  // int in kbps -- you can set the default max target bitrate here
+			// session.totalRoomBitrate = 500; // int, kbps -- you can set the default quality of the group room here
+			// session.height // int
+			// session.width // int
+			// session.quality // int  -- if setting == 0, then than the default resolution will be 1080p, instead of 720p
+			// session.sink
+			// session.offsetChannel // int
+			// session.audioChannels // int
+			// session.security
+			// session.framerate // int
+			// session.sync
+			// session.buffer // int in milliseconds
+			// session.roomid // "yyyy"
+			// session.scene
+			// session.title // "zzzz"
+		</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="mixer-js" src="./mixer.js?ver=2"></script>
 	-->
-		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=192"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=226"></script>
 		<script type="text/javascript">
 			setTimeout(function(){ // lazy load
 				var script = document.createElement('script');

install.md

@@ -13,25 +13,24 @@ For those looking for a brand-free experience already with a different domain na
 - https://chromicam.com
 - https://invite.cam (via URL obfuscation option)
 - https://ltt.ninja
-- https://obsn.me
 - https://rtc.ninja
 - https://vmix.ninja
 - https://webrtc.party
 - https://callin.ninja
 - https://auxiliary.live (backup hosted)
-- https://backup.obs.ninja (fully backup hosted)
+- https://backup.vdo.ninja (fully backup hosted)
 
 There is also an isolated version specificly designed for use in mainland China, hosted at https://insecure.cam in Hong Kong AWS.
 
-You can also point your domain to the OBS.Ninja IP address (provided on request), which will also rebrand the site automatically to match your domain name. (Requires Cloudflare as DNS server and proxy, Flexible SSL cert on, and HTTPs always on - all free.) 
+You can also point your domain to the VDO.Ninja IP address (provided on request), which will also rebrand the site automatically to match your domain name. (Requires Cloudflare as DNS server and proxy, Flexible SSL cert on, and HTTPs always on - all free.) 
 
-For those wanting a private TURN server setup, you can load the settings for those via the URL parameters. If infrequently needing a private TURN, this is a great solution.  You can also use URL forwarding services to load up a customized link to OBS.Ninja, with URL parameters already included, such as https://invite.mypersonaldomain.com , which might secretly resolve to https://obs.ninja/?room=myRoom&hash=3423&label or such.
+For those wanting a private TURN server setup, you can load the settings for those via the URL parameters. If infrequently needing a private TURN, this is a great solution.  You can also use URL forwarding services to load up a customized link to VDO.Ninja, with URL parameters already included, such as https://invite.mypersonaldomain.com , which might secretly resolve to https://vdo.ninja/?room=myRoom&hash=3423&label or such.
 
-OBS.Ninja also supports IFRAMES, so you can embed OBS.Ninja into your website and customize it via both URL parameters, but also via the IFRAME API.  You can insert custom CSS styles with this method, giving OBS.Ninja quite a bit of flare.
+VDO.Ninja also supports IFRAMES, so you can embed VDO.Ninja into your website and customize it via both URL parameters, but also via the IFRAME API.  You can insert custom CSS styles with this method, giving VDO.Ninja quite a bit of flare.
 
-See more on IFRAMES here: https://github.com/steveseguin/obsninja/blob/master/IFRAME.md
+See more on IFRAMES here: https://github.com/steveseguin/vdo.ninja/blob/master/IFRAME.md
 
-Understanding clearly why you need to deploy any code or server is important. Maintaining updated deployed code can be quite hard, as OBS.Ninja updates frequently, so there are good reasons to consider an IFRAME approach instead. Feature requests there are welcomed.
+Understanding clearly why you need to deploy any code or server is important. Maintaining updated deployed code can be quite hard, as VDO.Ninja updates frequently, so there are good reasons to consider an IFRAME approach instead. Feature requests there are welcomed.
 
 That all aside, please continue:
 
@@ -39,7 +38,7 @@ That all aside, please continue:
 
 There's a community-created video tutorial on setting up here; https://youtu.be/8sDMwBIlgwE  Otherwise, read on.
 
-I use Cloudflare with Flexible SSL enabled and HTTP Rewrites. If you do not use Cloudflare, you will need to deploy SSL certificates onto your website.  You will also have to have Cloudflare or whatever DNS provider you have, point your domain name to the IP address of your webserver. OBS.Ninja REQUIRES a domain name and SSL.
+I use Cloudflare with Flexible SSL enabled and HTTP Rewrites. If you do not use Cloudflare, you will need to deploy SSL certificates onto your website.  You will also have to have Cloudflare or whatever DNS provider you have, point your domain name to the IP address of your webserver. VDO.Ninja REQUIRES a domain name and SSL.
 
 For webservers, I use NGINX on a Ubuntu server; smaller the better. I rely on Cloudflare to provide caching and SSL, so my installation of NGINX is pretty simple. 
 ```
@@ -55,46 +54,52 @@ An example NGINX config file that "hides" the file extensions is as follows.  Up
         listen 80;
         listen [::]:80;
 
-        server_name obs.ninja;
+        server_name vdo.ninja;
 
-        root /var/www/html/obs.ninja;
+        root /var/www/html/vdo.ninja;
         index index.html;
 
 
         location ~ ^/([^/]+)/([^/?]+)$ {
-                root /var/www/html/obs.ninja;
+                root /var/www/html/vdo.ninja;
                 try_files /$1/$2 /$1/$2.html /$1/$2/ /$2 /$2/ /$1/index.html;
                 add_header Access-Control-Allow-Origin *;
+                add_header 'cross-origin-resource-policy' '*';
+                add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
+                add_header 'Cross-Origin-Opener-Policy' 'same-origin';
         }
 
         location / {
-            if ($request_uri ~ ^/(.*)\.html$) {
-                return 302 /$1;
-            }
-            try_files $uri $uri.html $uri/ /index.html;
-            add_header Access-Control-Allow-Origin *;
+                if ($request_uri ~ ^/(.*)\.html$) {
+                        return 302 /$1;
+                }
+                add_header 'cross-origin-resource-policy' '*';
+                add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
+                add_header 'Cross-Origin-Opener-Policy' 'same-origin';
+                try_files $uri $uri.html $uri/ /index.html;
+                add_header Access-Control-Allow-Origin *;
         }
 }
 ```
-You'll want to deploy (copy/clone) the GitHub OBS.Ninja files into your NGINX web folder, that is specified in your NGINX config file. Update the NGINX config file to match your domain and and folder, etc. Restart NGINX after.
+You'll want to deploy (copy/clone) the GitHub VDO.Ninja files into your NGINX web folder, that is specified in your NGINX config file. Update the NGINX config file to match your domain and and folder, etc. Restart NGINX after.
 
 
-As for the TURN server, it can run on a single or dual-core computer. It doesn't take much to host many users -- it mainly just needs a good internet connection.  Most users will not need a TURN server, but since OBS.Ninja handles many different types of users, the TURN server is there as a failsafe for those occasional problem users. I'm assuming you know why you need and want a TURN server -- if not, you may not actually need one.
+As for the TURN server, it can run on a single or dual-core computer. It doesn't take much to host many users -- it mainly just needs a good internet connection.  Most users will not need a TURN server, but since VDO.Ninja handles many different types of users, the TURN server is there as a failsafe for those occasional problem users. I'm assuming you know why you need and want a TURN server -- if not, you may not actually need one.
 
 A guide and sample config file for the turn server is here:
-https://github.com/steveseguin/obsninja/blob/master/turnserver.md
+https://github.com/steveseguin/vdo.ninja/blob/master/turnserver.md
 
 If deploying to GCP or AWS, you might need to make some tweaks to the IP address values to include the internet local IP as well as the external. Please see online guides no setting up a TURN server for your particular setup. Setups will vary.
 
-Once you have your TURN server setup, you can update the index.html of the OBS.Ninja code. Nightly or official releases should be fine to pull. You probably will want to uncomment the lines linked below once deployed, adjusting the default values to your liking and updating the server location address and credentials of your TURN server (if you deployed one that is).  Unless your TURN server also provides STUN capabilities, you may want to also use the Google STUN servers, so uncomment that stuff too.  
+Once you have your TURN server setup, you can update the index.html of the VDO.Ninja code. Nightly or official releases should be fine to pull. You probably will want to uncomment the lines linked below once deployed, adjusting the default values to your liking and updating the server location address and credentials of your TURN server (if you deployed one that is).  Unless your TURN server also provides STUN capabilities, you may want to also use the Google STUN servers, so uncomment that stuff too.  
 
-https://github.com/steveseguin/obsninja/blob/df6c147311b9e7d19659ddbb1799d6598f59aa0d/index.html#L644
+https://github.com/steveseguin/vdo.ninja/blob/df6c147311b9e7d19659ddbb1799d6598f59aa0d/index.html#L644
 
-A newly deployed code deployment should work without any changes to the index.html file. The code needs to be constantly kept up to date though, as after a few months it may become deprecated and stop working. This is the reality of deploying OBS.Ninja -- you will need to update it every few months for it to continue to function well. Keep this in mind when making changes to the OBS.Ninja source code, as heavy custom changes will make updating harder to do. The fewer the changes the better.
+A newly deployed code deployment should work without any changes to the index.html file. The code needs to be constantly kept up to date though, as after a few months it may become deprecated and stop working. This is the reality of deploying VDO.Ninja -- you will need to update it every few months for it to continue to function well. Keep this in mind when making changes to the VDO.Ninja source code, as heavy custom changes will make updating harder to do. The fewer the changes the better.
 
 My suggestion? Limit changes to images and perhaps the translation files (maybe add a new one); these are good starting points. If making changes to the main.css style sheet or index.html file, you should be mostly okay too, since these files are designed to be changed; I try to keep that in mind when updating the code at least. Making changes to other files though is strongly not recommend and in some cases discouraged. If you find a bug or need to make a change to other files, it might be best to make a Pull Request with the desired changes and hope it gets adopted into the main codebase.
 
-Final note: I haven't provided here instructions on deploying STUN services or a private handshake server; the OBS.Ninja handshake server code is currently not provided, but access to it as a service is freely accessible for private deployments.
+Final note: I haven't provided here instructions on deploying STUN services or a private handshake server; the VDO.Ninja handshake server code is currently not provided, but access to it as a service is freely accessible for private deployments.
 
 Regards,
 Steve

midi.html

@@ -0,0 +1,84 @@
+<html>
+<head>
+<script src="https://cdn.jsdelivr.net/npm/webmidi"></script>
+</head>
+<body><br />
+check the console debug logs for output;
+<br /><br />virtual midi controller here:<br />
+http://www.tobias-erichsen.de/software/loopmidi.html
+<br /><br /> code referenced from here:<br />
+https://github.com/djipco/webmidi
+<script>
+// Enable WebMidi.js
+WebMidi.enable(function (err) {
+
+  if (err) {
+    console.log("WebMidi could not be enabled.", err);
+  }
+
+  // Viewing available inputs and outputs
+  console.log(WebMidi.inputs);
+  console.log(WebMidi.outputs);
+  
+  // Reacting when a new device becomes available
+  WebMidi.addListener("connected", function(e) {
+    console.log(e);
+  });
+  
+  // Reacting when a device becomes unavailable
+  WebMidi.addListener("disconnected", function(e) {
+    console.log(e);
+  });
+
+  // Display the current time
+  console.log(WebMidi.time);
+
+
+  // Retrieve an input by name, id or index
+ // var input = WebMidi.getInputByName("StreamDeck2Daw");
+ // input = WebMidi.getInputById("1809568182");
+  var input = WebMidi.inputs[0];
+
+  // Listen for a 'note on' message on all channels
+  input.addListener('noteon', "all",
+    function (e) {
+      console.log("Received 'noteon' message (" + e.note.name + e.note.octave + ").");
+    }
+  );
+
+  // Listen to pitch bend message on channel 3
+  input.addListener('pitchbend', 3,
+    function (e) {
+      console.log("Received 'pitchbend' message.", e);
+    }
+  );
+
+  // Listen to control change message on all channels
+  input.addListener('controlchange', "all",
+    function (e) {
+      console.log("Received 'controlchange' message.", e);
+    }
+  );
+  
+  // Listen to NRPN message on all channels
+  input.addListener('nrpn', "all",
+    function (e) {
+      if(e.controller.type === 'entry') {
+        console.log("Received 'nrpn' 'entry' message.", e);
+      }
+      if(e.controller.type === 'decrement') {
+        console.log("Received 'nrpn' 'decrement' message.", e);
+      }
+      if(e.controller.type === 'increment') {
+        console.log("Received 'nrpn' 'increment' message.", e);
+      }
+      console.log("message value: " + e.controller.value + ".", e);
+    }
+  );
+
+  
+
+});
+</script>
+</body>
+</html>

monitor.html

@@ -354,7 +354,7 @@
 							}
 							
 							if (e.data.remoteStats[UUID].retransmitted_kbps){
-								var retransmitted_kbps = e.data.remoteStats[UUID].retransmitted_kbps;
+								var retransmitted_kbps = parseInt(10000*e.data.remoteStats[UUID].retransmitted_kbps/ (e.data.remoteStats[UUID].video_bitrate_kbps-e.data.remoteStats[UUID].retransmitted_kbps))/100;
 								updateData("retransmit", retransmitted_kbps, UUID);
 							} else if (document.getElementById(UUID)){
 								updateData("retransmit", 0, UUID);
@@ -433,7 +433,7 @@
 			</div>
 
 			<div class="graph">
-				<h2>Retransmitted (kbps)</h2>
+				<h2>Retransmitted bytes (%)</h2>
 				<span>0</span>
 				<canvas data-retransmit-graph="true"></canvas>
 			</div>
@@ -463,8 +463,8 @@
 			var retransmit = {
 				element: "retransmit-graph",
 				data: 0,
-				max: 100,
-				target: 100,
+				max: 3,
+				target: 2,
 			};
 
 			function updateData(type, data, UUID) {
@@ -524,6 +524,11 @@
 					grd.addColorStop(0, "#33C433");
 					grd.addColorStop(0.7, "#F3F304");
 					grd.addColorStop(0.9, "#F30404");
+				} else if (type == "retransmit") {
+					// Higher values are red
+					grd.addColorStop(0, "#F30404");
+					grd.addColorStop(0.75, "#F3F304");
+					grd.addColorStop(1.0, "#33C433");
 				} else {
 					// Higher values are red
 					grd.addColorStop(0, "#F30404");
@@ -543,7 +548,7 @@
 				}
 
 				if (type == "retransmit" && stat.data == 0.0) {
-					stat.data = 0.5;
+					stat.data = 0.1;
 				}
 				if (type == "nackrate" && stat.data == 0.0) {
 					stat.data = 0.1;

speedtest.css

@@ -13,6 +13,10 @@ body {
     background-color: #141926;
 }
 
+#add_screen{
+	display:none;
+}
+
 h1 {
     color: white;
     margin: 20px 0px;
@@ -24,6 +28,9 @@ h1 small {
     font-size: 0.5em;
 }
 
+video {
+	transform: translate(0px, 0%) !important;
+}
 #explanation {
     color: white;
     font-family: sans-serif;

speedtest.html

@@ -54,6 +54,8 @@
 				}
 				
 			}
+			
+			
 
 			function loadIframe() {
 				// this is pretty important if you want to avoid camera permission popup problems. YOu need to load the iFRAME after  you load the parent body. A quick solution is like: <body onload=>loadIframe();"> !!!
@@ -70,6 +72,8 @@
 					streamID = urlParams.get("sid");
 				}
 				
+				
+				
 				document.getElementById("remote").innerHTML = "<a style='color:#CCC' href='./monitor?sid="+streamID+"'>Remote Monitoring Link</a><br /><br /><br /><br />";
 
 				var iframe = document.createElement("iframe");
@@ -80,7 +84,7 @@
 				iframe.allowfullscreen ="true";
 
 				//iframe.allow = "autoplay";
-				var srcString =	"./?push=" + streamID + "&cleanoutput&privacy&speedtest&webcam&audiodevice=0&fullscreen&transparent&remote";
+				var srcString =	"./?push=" + streamID + "&cleanoutput&privacy&speedtest&"+testType+"&audiodevice=0&fullscreen&transparent&remote";
 				
 				if (urlParams.has("turn")) {
 					srcString = srcString + "&turn=" + urlParams.get("turn");
@@ -363,10 +367,20 @@
 				</li>
 				
 			</ol>
+			<div id="screen" style="color: #CCC; margin:10px 0;"><a href="./speedtest?screen" style="color: #CCC;">Test screen-sharing performance here</a></div>
 			<div id="remote"></div>
+			
 		</div>
 
 		<script>
+		
+			var testType= "webcam";
+			if (urlParams.has("screen") || urlParams.has("ss") || urlParams.has("screenshare") || urlParams.has("screentest")) {
+				document.getElementById("screen").innerHTML = '<a href="./speedtest" style="color: #CCC;">Test webcam-streaming performance here</a>';
+				testType = "quality=0&screenshare&css=speedtest.css"
+			}
+			
+			
 			var bitrate = {
 				element: "bitrate-graph",
 				data: 0,

translations/blank.json

@@ -272,4 +272,4 @@
     "enter-the-room-name-here": "Enter the room name here",
     "enter-the-room-password-here": "Enter the room password here"
   }
-}
+}

translations/es.json

@@ -1,152 +1,140 @@
 {
   "titles": {
-    "toggle-the-chat": "Toggle the Chat",
-    "mute-the-speaker": "Mute the Speaker",
-    "mute-the-mic": "Mute the Mic",
-    "disable-the-camera": "Disable the Camera",
-    "settings": "Settings",
-    "hangup-the-call": "Hangup the Call",
-    "show-help-info": "Show Help Info",
-    "language-options": "Language Options",
-    "tip-hold-ctrl-command-to-select-multiple": "tip: Hold CTRL (command) to select Multiple",
-    "ideal-for-1080p60-gaming-if-your-computer-and-upload-are-up-for-it": "Ideal for 1080p60 gaming, if your computer and upload are up for it",
-    "better-video-compression-and-quality-at-the-cost-of-increased-cpu-encoding-load": "Better video compression and quality at the cost of increased CPU encoding load",
-    "disable-digital-audio-effects-and-increase-audio-bitrate": "Disable digital audio-effects and increase audio bitrate",
-    "the-guest-will-not-have-a-choice-over-audio-options": "The guest will not have a choice over audio-options",
-    "the-guest-will-only-be-able-to-select-their-webcam-as-an-option": "The guest will only be able to select their webcam as an option",
-    "hold-ctrl-and-the-mouse-wheel-to-zoom-in-and-out-remotely-of-compatible-video-streams": "Hold CTRL and the mouse wheel to zoom in and out remotely of compatible video streams",
-    "add-a-password-to-make-the-stream-inaccessible-to-those-without-the-password": "Add a password to make the stream inaccessible to those without the password",
-    "add-the-guest-to-a-group-chat-room-it-will-be-created-automatically-if-needed-": "Add the guest to a group-chat room; it will be created automatically if needed.",
-    "customize-the-room-settings-for-this-guest": "Customize the room settings for this guest",
-    "hold-ctrl-or-cmd-to-select-multiple-files": "Hold CTRL (or CMD) to select multiple files",
-    "enter-an-https-url": "Enter an HTTPS URL",
-    "lucy-g": "Lucy G",
-    "flaticon": "Flaticon",
-    "creative-commons-by-3-0": "Creative Commons BY 3.0",
-    "gregor-cresnar": "Gregor Cresnar",
-    "add-this-video-to-any-remote-scene-1-": "Add this Video to any remote '&scene=1'",
-    "forward-user-to-another-room-they-can-always-return-": "Forward user to another room. They can always return.",
-    "start-recording-this-stream-experimental-views": "Start Recording this stream. *experimental*' views",
-    "force-the-user-to-disconnect-they-can-always-reconnect-": "Force the user to Disconnect. They can always reconnect.",
-    "change-this-audio-s-volume-in-all-remote-scene-views": "Change this Audio's volume in all remote '&scene' views",
-    "remotely-mute-this-audio-in-all-remote-scene-views": "Remotely Mute this Audio in all remote '&scene' views",
-    "disable-video-preview": "Disable Video Preview",
-    "low-quality-preview": "Low-Quality Preview",
-    "high-quality-preview": "High-Quality Preview",
-    "send-direct-message": "Send Direct Message",
-    "advanced-settings-and-remote-control": "Advanced Settings and Remote Control",
-    "toggle-voice-chat-with-this-guest": "Toggle Voice Chat with this Guest",
-    "join-by-room-name-here": "Enter a room name to quick join",
-    "join-room": "Join room",
-    "share-a-screen-with-others": "Share a Screen with others",
-    "alert-the-host-you-want-to-speak": "Alert the host you want to speak",
-    "record-your-stream-to-disk": "Record your stream to disk",
-    "cancel-the-director-s-video-audio": "Cancel the Director's Video/Audio",
-    "submit-any-error-logs": "Submit any error logs",
-    "add-group-chat-to-obs": "Add Group Chat to OBS",
-    "for-large-group-rooms-this-option-can-reduce-the-load-on-remote-guests-substantially": "For large group rooms, this option can reduce the load on remote guests substantially",
-    "which-video-codec-would-you-want-used-by-default-": "Which video codec would you want used by default?",
-    "you-ll-enter-as-the-room-s-director": "You'll enter as the room's director",
-    "add-your-camera-to-obs": "Add your Camera to OBS",
-    "remote-screenshare-into-obs": "Remote Screenshare into OBS",
+    "join-by-room-name-here": "Introduce un nombre de sala para entrar",
+    "join-room": "Unirse sala",
+    "load-the-next-guest-in-queue": "Cargar el siguiente invitado en la cola",
+    "toggle-the-chat": "Conmutar Chat",
+    "mute-the-speaker": "Mute Orador",
+    "mute-the-mic": "Mute Micro",
+    "disable-the-camera": "Desactivar Cámara",
+    "share-a-screen-with-others": "Compartir Pantalla con otros",
+    "create-a-secondary-stream": "Crear un Stream Secundario",
+    "settings": "Configuración",
+    "hangup-the-call": "Colgar",
+    "alert-the-host-you-want-to-speak": "Avisar Anfitrión que quieres hablar",
+    "record-your-stream-to-disk": "Grabar tu stream a disco",
+    "cancel-the-director-s-video-audio": "Cancelar el Video/Audio del Director",
+    "submit-any-error-logs": "Enviar cualquier registro de error",
+    "show-help-info": "Mostrar Ayuda",
+    "language-options": "Opciones Idioma",
+    "add-to-calendar": "Añadir al Calendario",
+    "add-group-chat-to-obs": "Añadir Chat Grupal",
+    "for-large-group-rooms-this-option-can-reduce-the-load-on-remote-guests-substantially": "Para salas de grupos grandes, esta opción reduce la carga en los clientes remotos de manera substancial",
+    "the-director-will-be-visible-in-scenes-as-if-a-performer-themselves-": "El director será visible en las escenas, como si fuese a actuar.",
+    "useful-if-you-want-to-perform-and-direct-at-the-same-time": "Útil si quieres actuar y dirigir al mismo tiempo",
+    "which-video-codec-would-you-want-used-by-default-": "¿Qué codec de video quieres se utilice por defecto?",
+    "you-ll-enter-as-the-room-s-director": "Nunca entrarás como director de sala",
+    "add-your-camera-to-obs": "Añadir Cámara",
+    "start-streaming": "iniciar streaming",
+    "tip-hold-ctrl-command-to-select-multiple": "truco: Mantén pulsado CTRL (o CMD) para selección Múltiple",
+    "improve-performance-and-quality-with-this-tip": "Improve performance and quality with this tip",
+    "remote-screenshare-into-obs": "Remote Screenshare",
     "create-reusable-invite": "Create Reusable Invite",
+    "ideal-for-1080p60-gaming-if-your-computer-and-upload-are-up-for-it": "Ideal para juegos 1080p60, si tu PC y conexión lo permiten",
+    "better-video-compression-and-quality-at-the-cost-of-increased-cpu-encoding-load": "Mejor compresión y calidad del video pese al incremento de carga en la CPU",
+    "disable-digital-audio-effects-and-increase-audio-bitrate": "Deshabilitar los efectos de sonido digital e incrementar el bitrate audio",
+    "the-guest-will-not-have-a-choice-over-audio-options": "El invitado no tendrá opciones de audio a escoger",
+    "the-guest-will-only-be-able-to-select-their-webcam-as-an-option": "El invitado sólo podrá seleccionar su opción de cámara",
+    "hold-ctrl-and-the-mouse-wheel-to-zoom-in-and-out-remotely-of-compatible-video-streams": "Mantén CTRL y la rueda del ratón para hacer zoom en los videos",
     "encode-the-url-so-that-it-s-harder-for-a-guest-to-modify-the-settings-": "Encode the URL so that it's harder for a guest to modify the settings.",
-    "more-options": "More Options",
+    "add-a-password-to-make-the-stream-inaccessible-to-those-without-the-password": "Añade un password para evitar el acceso al video sin la clave",
+    "add-the-guest-to-a-group-chat-room-it-will-be-created-automatically-if-needed-": "Añade al invitado a una sala de chat grupal; se creará automáticamente en caso necesario.",
+    "customize-the-room-settings-for-this-guest": "Customizar la configuración de sala para este invitado",
+    "more-options": "Más Opciones",
+    "hold-ctrl-or-cmd-to-select-multiple-files": "Mantener CTRL (o CMD) para seleccionar varios ficheros",
+    "enter-an-https-url": "Introduce una URL HTTPS",
+    "creative-commons-by-3-0": "Creative Commons BY 3.0",
     "youtube-video-demoing-how-to-do-this": "Youtube Video demoing how to do this",
     "invite-a-guest-or-camera-source-to-publish-into-the-group-room": "Invite a guest or camera source to publish into the group room",
-    "if-enabled-the-invited-guest-will-not-be-able-to-see-or-hear-anyone-in-the-room-": "If enabled, the invited guest will not be able to see or hear anyone in the room.",
-    "use-this-link-in-the-obs-browser-source-to-capture-the-video-or-audio": "Use this link in the OBS Browser Source to capture the video or audio",
-    "if-enabled-you-must-manually-add-a-video-to-a-scene-for-it-to-appear-": "If enabled, you must manually add a video to a scene for it to appear.",
+    "if-disabled-the-invited-guest-will-not-be-able-to-see-or-hear-anyone-in-the-room-": "If disabled, the invited guest will not be able to see or hear anyone in the room.",
+    "use-this-link-in-the-obs-browser-source-to-capture-the-video-or-audio": "Use this link as a browser source in your Studio software to capture the video or audio",
+    "if-disabled-you-must-manually-add-a-video-to-a-scene-for-it-to-appear-": "If disabled, you must manually add a video to a scene for it to appear.",
     "disables-echo-cancellation-and-improves-audio-quality": "Disables Echo Cancellation and improves audio quality",
     "audio-only-sources-are-visually-hidden-from-scenes": "Audio-only sources are visually hidden from scenes",
     "guest-will-be-prompted-to-enter-a-display-name": "Guest will be prompted to enter a Display Name",
     "display-names-will-be-shown-in-the-bottom-left-corner-of-videos": "Display Names will be shown in the bottom-left corner of videos",
+    "guests-not-actively-speaking-will-be-hidden": "Guests not actively speaking will be hidden",
     "request-1080p60-from-the-guest-instead-of-720p60-if-possible": "Request 1080p60 from the Guest instead of 720p60, if possible",
     "the-default-microphone-will-be-pre-selected-for-the-guest": "The default microphone will be pre-selected for the guest",
     "the-default-camera-device-will-selected-automatically": "The default camera device will selected automatically",
     "the-guest-won-t-have-access-to-changing-camera-settings-or-screenshare": "The guest won't have access to changing camera settings or screenshare",
+    "allow-the-guests-to-pick-a-virtual-backscreen-effect": "Allow the guests to pick a virtual backscreen effect",
+    "increase-video-quality-that-guests-in-room-see-": "Increase video quality that guests in room see.",
     "the-guest-will-not-see-their-own-self-preview-after-joining": "The guest will not see their own self-preview after joining",
     "guests-will-have-an-option-to-poke-the-director-by-pressing-a-button": "Guests will have an option to poke the Director by pressing a button",
     "add-an-audio-compressor-to-the-guest-s-microphone": "Add an audio compressor to the guest's microphone",
     "add-an-equalizer-to-the-guest-s-microphone-that-the-director-can-control": "Add an Equalizer to the guest's microphone that the director can control",
+    "this-low-fi-video-codec-uses-very-little-cpu-even-with-dozens-of-active-viewers-": "This low-fi video codec uses very little CPU, even with dozens of active viewers.",
     "the-guest-can-only-see-the-director-s-video-if-provided": "The guest can only see the Director's video, if provided",
     "the-guest-s-microphone-will-be-muted-on-joining-they-can-unmute-themselves-": "The guest's microphone will be muted on joining. They can unmute themselves.",
+    "the-guest-will-not-be-asked-for-a-video-device-on-connection": "The guest will not be asked for a video device on connection",
     "have-the-guest-join-muted-so-only-the-director-can-unmute-the-guest-": "Have the guest join muted, so only the director can Unmute the guest.",
     "make-the-invite-url-encoded-so-parameters-are-harder-to-tinker-with-by-guests": "Make the invite URL encoded, so parameters are harder to tinker with by guests",
+    "the-active-speakers-are-made-visible-automatically": "The active speakers are made visible automatically",
     "move-the-user-to-another-room-controlled-by-another-director": "Move the user to another room, controlled by another director",
     "send-a-direct-message-to-this-user-": "Send a Direct Message to this user.",
-    "remotely-change-the-volume-of-this-guest": "Remotely change the volume of this guest",
-    "mute-this-guest-everywhere": "Mute this guest everywhere",
-    "start-recording-this-remote-stream-to-this-local-drive-experimental-": "Start Recording this remote stream to this local drive. *experimental*'",
-    "the-remote-guest-will-record-their-local-stream-to-their-local-drive-experimental-": "The Remote Guest will record their local stream to their local drive. *experimental*",
-    "shift-this-video-down-in-order": "Shift this Video Down in Order",
-    "current-index-order-of-this-video": "Current Index Order of this Video",
-    "shift-this-video-up-in-order": "Shift this Video Up in Order",
-    "remote-audio-settings": "Remote Audio Settings",
-    "advanced-video-settings": "Advanced Video Settings",
-    "activate-or-reload-this-video-device-": "Activate or Reload this video device.",
-    "load-the-next-guest-in-queue": "Load the next guest in queue",
-    "create-a-secondary-stream": "Create a Secondary Stream",
-    "add-to-calendar": "Add to Calendar",
-    "the-director-will-be-visible-in-scenes-as-if-a-performer-themselves-": "The director will be visible in scenes, as if a performer themselves.",
-    "useful-if-you-want-to-perform-and-direct-at-the-same-time": "Useful if you want to perform and direct at the same time",
-    "start-streaming": "start streaming",
-    "if-disabled-the-invited-guest-will-not-be-able-to-see-or-hear-anyone-in-the-room-": "If disabled, the invited guest will not be able to see or hear anyone in the room.",
-    "if-disabled-you-must-manually-add-a-video-to-a-scene-for-it-to-appear-": "If disabled, you must manually add a video to a scene for it to appear.",
-    "guests-not-actively-speaking-will-be-hidden": "Guests not actively speaking will be hidden",
-    "increase-video-quality-that-guests-in-room-see-": "Increase video quality that guests in room see.",
-    "the-guest-will-not-be-asked-for-a-video-device-on-connection": "The guest will not be asked for a video device on connection",
+    "force-the-user-to-disconnect-they-can-always-reconnect-": "Force the user to Disconnect. They can always reconnect.",
     "toggle-solo-voice-chat": "Toggle Solo Voice Chat",
-    "add-to-scene-2": "Add to Scene 2",
+    "add-this-video-to-any-remote-scene-1-": "Añadir este Video a '&scene=1' remoto",
+    "mute-this-guest-everywhere": "Mute this guest everywhere",
+    "add-this-video-to-any-remote-scene-2-": "Añadir este Video a '&scene=2' remoto",
+    "remotely-mute-this-audio-in-all-remote-scene-views": "Remotely Mute this Audio in all remote '&scene' views",
     "add-to-scene-3": "Add to Scene 3",
     "add-to-scene-4": "Add to Scene 4",
     "add-to-scene-5": "Add to Scene 5",
     "add-to-scene-6": "Add to Scene 6",
     "add-to-scene-7": "Add to Scene 7",
+    "add-to-scene-8": "Add to Scene 8",
+    "force-the-remote-sender-to-issue-a-keyframe-to-all-scenes-fixing-pixel-smearing-issues-": "Force the remote sender to issue a keyframe to all scenes, fixing Pixel Smearing issues.",
+    "request-the-statistics-of-this-video-in-any-active-scene": "Request the statistics of this video in any active scene",
+    "solo-this-video-everywhere": "Solo this video everywhere",
     "hide-this-guest-everywhere": "Hide this guest everywhere",
-    "set-to-default-audio-channel": "Set to Default Audio Channel",
-    "set-to-audio-channel-1": "Set to Audio Channel 1",
-    "set-to-audio-channel-2": "Set to Audio Channel 2",
-    "set-to-audio-channel-3": "Set to Audio Channel 3",
-    "set-to-audio-channel-4": "Set to Audio Channel 4",
-    "set-to-audio-channel-5": "Set to Audio Channel 5",
     "toggle-the-remote-guest-s-speaker-output": "Toggle the remote guest's speaker output",
     "toggle-the-remote-guest-s-display-output": "Toggle the remote guest's display output",
-    "set-to-audio-channel-6": "Set to Audio Channel 6",
-    "set-to-audio-channel-7": "Set to Audio Channel 7",
-    "set-to-audio-channel-8": "Set to Audio Channel 8",
-    "force-the-remote-sender-to-issue-a-keyframe-to-all-scenes-fixing-pixel-smearing-issues-": "Force the remote sender to issue a keyframe to all scenes, fixing Pixel Smearing issues.",
+    "shift-this-video-down-in-order": "Shift this Video Down in Order",
+    "current-index-order-of-this-video": "Current Index Order of this Video",
+    "shift-this-video-up-in-order": "Shift this Video Up in Order",
     "remotely-reload-the-guest-s-page-with-a-new-url": "Remotely reload the guest's page with a new URL",
     "change-user-parameters": "Change user parameters",
-    "solo-this-video-everywhere": "Solo this video everywhere",
-    "request-the-statistics-of-this-video-in-any-active-scene": "Request the statistics of this video in any active scene",
+    "start-recording-this-remote-stream-to-this-local-drive-experimental-": "Comenzar Grabación de este stream remoto en local. *experimental*'",
+    "the-remote-guest-will-record-their-local-stream-to-their-local-drive-experimental-": "The Remote Guest will record their local stream to their local drive. *experimental*",
+    "remotely-change-the-volume-of-this-guest": "Remotely change the volume of this guest",
+    "disable-video-preview": "Deshabilitar Previsualización",
+    "low-quality-preview": "Previo Baja Calidad",
+    "high-quality-preview": "Previo Alta Calidad",
+    "set-to-audio-channel-1": "Activar Canal Audio 1",
+    "set-to-audio-channel-2": "Activar Canal Audio 2",
+    "set-to-audio-channel-3": "Activar Canal Audio 3",
+    "set-to-audio-channel-4": "Activar Canal Audio 4",
+    "set-to-audio-channel-5": "Activar Canal Audio 5",
+    "set-to-audio-channel-6": "Activar Canal Audio 6",
+    "remote-audio-settings": "Configuración Audio Remoto",
+    "advanced-video-settings": "Configuración Video Avanzada",
+    "add-to-scene-2": "Añadir a Escena 2",
+    "activate-or-reload-this-video-device-": "Activate or Reload this video device.",
     "cannot-see-videos": "Cannot see videos",
     "cannot-hear-others": "Cannot hear others",
     "see-director-only": "See director only",
     "show-mini-preview": "Show Mini preview",
     "raise-hand-button": "Raise hand button",
-    "show-labels": "Show labels",
-    "transfer-to-a-new-room": "Transfer to a new Room",
-    "enable-custom-password": "Enable custom password",
-    "improve-performance-and-quality-with-this-tip": "Improve performance and quality with this tip",
-    "allow-the-guests-to-pick-a-virtual-backscreen-effect": "Allow the guests to pick a virtual backscreen effect",
-    "this-low-fi-video-codec-uses-very-little-cpu-even-with-dozens-of-active-viewers-": "This low-fi video codec uses very little CPU, even with dozens of active viewers.",
-    "the-active-speakers-are-made-visible-automatically": "The active speakers are made visible automatically",
-    "add-this-video-to-any-remote-scene-2-": "Add this Video to any remote '&scene=2'",
-    "add-to-scene-8": "Add to Scene 8"
+    "show-labels": "Mostrar Rótulos",
+    "transfer-to-a-new-room": "Transferir a nueva Sala",
+    "enable-custom-password": "Activar password personalizado"
   },
   "innerHTML": {
-    "logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
-    "copy-this-url": "Copia esta URL a una fuente \"Navegador\" de OBS",
-    "you-are-in-the-control-center": "Estás en la sala de centro de control",
+    "copy-this-url": "Copia esta URL como fuente \"Navegador\" de OBS",
+    "you-are-in-the-control-center": "Estás en la sala del panel de control",
     "joining-room": "Estás entrado en la sala",
     "add-group-chat": "Agregar grupo de chat a OBS",
     "rooms-allow-for": "Las salas permiten un chat grupal simplificado y la administración avanzada de múltiples transmisiones a la vez.",
     "room-name": "Nombre de sala",
     "password-input-field": "Password",
-    "enter-the-rooms-control": "Entrar a la sala de centro de control",
-    "show-tips": "Muéstrame algunos consejos..",
-    "added-notes": "\n\t\t\t\t<u><i>Notas adicionales:</i></u>\n\t\t\t\t<li>Cualquiera puede entrar en una sala si conoce el nombre, así que mantenlo único</li>\n\t\t\t\t<li>Tener más de cuatro (4) personas en una sala no es recomendable debido a razones de rendimiento, pero depende de tu hardware.</li>\n\t\t\t\t<li>Los dispositivos iOS están limitados a tamaños de grupo de no más de dos (2) personas. Esto es una limitación de hardware.</li>\n\t\t\t\t<li>La opción de \"Grabación\" es nueva y se considera experimental.</li>\n\t\t\t\t<li>Tienes que \"Añadir\" una señal de video a la \"Escena de grupo\" para que aparezca allí.</li>\n\t\t\t\t<li>Hay un botón nuevo añadido \"Pantalla completa mejorada\" a la vista de invitados.</li>\n\t\t\t\t",
+    "guests-only-see-director": "Guests can only see the Director's Video",
+    "scenes-can-see-director": "Director will also be a performer",
+    "default-codec-select": "Preferred Video Codec:  ",
+    "enter-the-rooms-control": "Entrar al panel de control",
+    "show-tips": "Muéstrame algunos consejos.",
+    "added-notes": "\n\t\t\t\t\t\t\t\t<u>\n\t\t\t\t\t\t\t\t\t<i>Consejos Importantes:</i><br><br>\n\t\t\t\t\t\t\t\t</u>\n\t\t\t\t\t\t\t\t<li>Deshabilitar el video compartido entre invitados mejora el rendimiento</li>\n\t\t\t\t\t\t\t\t<li>Invite only guests to the room that you trust.</li>\n\t\t\t\t\t\t\t\t<li>La opción \"Recording\" se considera experimental.</li>",
     "back": "Atrás",
     "add-your-camera": "Agregar tu camara a OBS",
     "ask-for-permissions": "Allow Access to Camera/Microphone",
@@ -157,149 +145,131 @@
     "smooth-cool": "Fluido",
     "select-audio-source": "Seleccionar fuentes de audio",
     "no-audio": "Sin Audio",
-    "select-output-source": " Destino de la salida de audio: \n\t\t\t\t\t",
-    "remote-screenshare-obs": "Compartir pantalla remota en OBS",
-    "note-share-audio": "\n\t\t\t\t\t<b>Nota</b>: No te olvides de hacer clic \"Compartir audio\" en Chrome.<br>(Firefox no soporta compartir audio.)",
+    "select-output-source": " Destino de la salida de audio: ",
+    "select-digital-effect": " Efectos Video Digital: ",
+    "no-effects-applied": "Sin efectos aplicados",
+    "blurred-background": "Fondo Difuminado",
+    "digital-greenscreen": "Pantalla Verde Digital",
+    "virtual-background": "Fondo Virtual",
+    "add-a-password": " Añadir un Password:",
+    "use-chrome-instead": "Recomendamos utilizar un navegador basado en Chromium.<br>\n \t\t\t\t\t\tSafari puede sufrir problemas de audio",
+    "remote-screenshare-obs": "Compartir pantalla",
     "select-screen-to-share": "SELECCIONAR PANTALLA PARA COMPARTIR",
     "audio-sources": "Fuentes de Audio",
     "create-reusable-invite": "Crear una invitación reutilizable",
-    "here-you-can-pre-generate": "Aquí puedes pregenerar un enlace reutilizable para la fuente de navegador y un enlace para invitados.",
+    "here-you-can-pre-generate": "Aquí puedes generar un enlace reutilizable como fuente del navegador e invitados.",
     "generate-invite-link": "GENERAR EL LINK DE INVITACIÓN",
     "advanced-paramaters": "Parámetros Avanzados",
     "unlock-video-bitrate": "Desbloquear Video Bitrate (20mbps)",
     "force-vp9-video-codec": "Forzar VP9 Video Codec (menos artefactos)",
-    "enable-stereo-and-pro": "Habilitar Estéreo y Pro HD Audio",
+    "enable-stereo-and-pro": "Habilitar Estéreo y Pro Audio HD",
     "video-resolution": "Resolución de vídeo: ",
     "hide-mic-selection": "Force Default Microphone",
     "hide-screen-share": "Ocultar opción compartir pantalla",
     "allow-remote-control": "Control remoto del zoom de la cámara (android)",
-    "add-a-password-to-stream": " Añadir un password:",
-    "add-the-guest-to-a-room": " Añadir al invitado a una sala:",
-    "invite-group-chat-type": "Este invitado a la sala puede:",
+    "obfuscate_url": "Obfuscar la URL Invitación",
+    "add-a-password-to-stream": " Añadir password:",
+    "add-the-guest-to-a-room": " Añadir invitado a una sala:",
+    "invite-group-chat-type": "Este invitado de la sala puede:",
     "can-see-and-hear": "Puede ver y oir el chat de grupo",
     "can-hear-only": "Sólo puede oir el chat de grupo",
-    "cant-see-or-hear": "No puede ni oir ni ver el chat de grupo",
-    "share-local-video-file": "Stream Media File",
-    "share-website-iframe": "Share Website",
+    "cant-see-or-hear": "No puede oir ni ver el chat de grupo",
+    "share-local-video-file": "Stream Fichero Multimedia",
+    "select-the-video-files-to-share": "SELECCIONA EL FICHERO DE VIDEO A COMPARTIR",
+    "share-website-iframe": "Comparte Sitio Web",
+    "enter-the-website-URL-you-wish-to-share": "Enter the URL website you wish to share.",
     "run-a-speed-test": "Run a Speed Test",
     "read-the-guides": "Browse the Guides",
-    "info-blob": "\n\t\t\t\t\t\t<h2>Qué es OBS.Ninja</h2><br>\n\t\t\t\t\t\t<li>100% <b>gratis</b>; sin descargas; sin recopilación de datos personales; sin registros</li>\n\t\t\t\t\t\t<li>Lleva video desde tu móbil, portátil, ordenador de sobremesa, o de tus amigos directamente a tu stream en OBS</li>\n\t\t\t\t\t\t<li>Utilizamos tecnología innovadora Peer-to-Peer que ofrece privacidad y ultra baja latencia</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demo aquí</a> </li>\n\t\t\t\t\t\t",
-    "add-to-scene": "Add to Scene",
-    "forward-to-room": "Transfer",
-    "record": "Grabar",
-    "disconnect-guest": "Hangup",
-    "mute": "Silenciar",
+    "info-blob": "",
+    "hide-the-links": " ENLACES (INVITACIONES &amp; ESCENAS)",
+    "click-for-quick-room-overview": "\n\t\t\t\t\t\t<i class=\"las la-question-circle\"></i> <span data-translate=\"click-here-for-help\">Pulsar aquí para un resumen rápido y ayuda</span>\n\t\t\t\t\t",
+    "click-here-for-help": "Pulsar aquí para un resumen rápido y ayuda",
+    "welcome-to-control-room": "\n\t\t\t\t\t\t<b>Bienvenido. Esta es la sala de control del director para el grupo de chat.</b><br><br>\n\t\t\t\t\t\tPuedes organizar un grupo de chat con amigos utilizando una sala. Comparte el enlace azul con los invitados para que puedan entrar directamente al chat.\n\t\t\t\t\t\t<br><br>\n\t\t\t\t\t\t<font style=\"color:red\">Limitaciones conocidas de las Salas:</font><br>\n\t\t\t\t\t\t<li>Una sala grupal puede gestionar hasta unos 30 invitados, dependiendo de varios factores, incluyendo CPU y ancho de banda disponible en todos los invitados en la sala.</li>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<li>El Video aparece en baja calidad a propósito en los invitados y director; esto es para reducir los recursos de ancho de banda y CPU.",
+    "invite-users-to-join": "Los Invitados pueden utilizar el enlace para unirse sala grupal",
+    "guests-hear-others": "Invitados escuchan a otros",
+    "capture-a-group-scene": "CAPTURA UNA ESCENA DE GRUPO",
+    "this-is-obs-browser-source-link": "Utilizar en OBS u otro software para capturar la mezcla de video grupal",
+    "auto-add-guests": "Auto añadir invitados",
+    "pro-audio-mode": "Modo Pro-audio",
+    "hide-audio-only-sources": "Ocultar fuentes de sólo audio",
+    "ask-for-display-name": "Preguntar nombre a mostrar",
+    "show-display-names": "Mostrar nombres",
+    "show-active-speaker": "Mostrar orador activo",
+    "auto-select-microphone": "Auto-selección micro por defecto",
+    "auto-select-camera": "Auto-selección cámara por defecto",
+    "hide-setting-buttons": "Ocultar botón configuración",
+    "mini-self-preview": "Mini visor propio",
+    "virtual-backgrounds": "Fondo virtual",
+    "powerful-computers-only": "¡Sólo utilizar con PC potente y grupo pequeño!",
+    "guests-see-HD-video": "Invitados ven video HD",
+    "no-self-preview": "Desactivar visualización propia",
+    "raise-hand-button": "Mostrar botón de 'Levantar-mano'",
+    "enable-compressor": "Activar compresor de audio",
+    "enable-equalizer": "Activar ecualizador como opción",
+    "low-cpu=broadcast-codec": "Codec emisión de bajo consumo CPU",
+    "only-see-director-feed": "Sólo ver la fuente del director",
+    "mute-microphone-by-default": "Mute del micro por defecto",
+    "guest-joins-with-no-camera": "Invitados entran sin cámara",
+    "unmute-by-director-only": "Quitar mute sólo director",
+    "obfuscate-link": "Ofuscar enlace y parámetros",
+    "this-can-reduce-packet-loss": "Esto puede reducir la corrupción de video causada por pérdida de paquetes",
+    "use-h264-codec": "Usar codec H264",
+    "show-active-speakers": "Mostar orador activo",
+    "force-mono-audio": "Forzar audio mono",
+    "learn-more-about-params": "Aprende sobre los parámetros URL en ",
+    "more-than-four-can-join": "Estos espacios para invitados son sólo un ejemplo. Pueden unirse más de cuatro invitados.",
+    "forward-to-room": "Enviar",
+    "send-direct-chat": "<i class=\"las la-envelope\"></i> Mensaje",
+    "disconnect-guest": "Colgar",
+    "voice-chat": "<i class=\"las la-microphone\" style=\"color:#090\"></i> Hablar Solo",
+    "add-to-scene": "añadir a escena 1",
+    "mute-guest": "mute invitado",
+    "More-scene-options": "Más opciones de escena",
+    "mute-scene": "mute en escena",
+    "force-keyframe": "Reparar Arcoiris",
+    "stats-remote": " Valores Escena",
+    "additional-controls": "Controles Adicionales",
+    "solo-video": "Resaltar invitado",
+    "hide-guest": "ocultar invitado",
+    "toggle-remote-speaker": "Mutear Invitado",
+    "toggle-remote-display": "Cegar Invitado",
+    "order-down": "<i class=\"las la-minus\"></i>",
+    "order-up": "<i class=\"las la-plus\"></i>",
+    "change-url": "Cambiar URL",
+    "change-params": "Param. URL",
+    "record-local": " Grabación Local",
+    "record-remote": " Grabación Remota",
     "change-to-low-quality": "&nbsp;&nbsp;<i class=\"las la-video-slash\"></i>",
     "change-to-medium-quality": "&nbsp;&nbsp;<i class=\"las la-video\"></i>",
     "change-to-high-quality": "&nbsp;&nbsp;<i class=\"las la-binoculars\"></i>",
-    "send-direct-chat": "<i class=\"las la-envelope\"></i> Message",
-    "advanced-camera-settings": "<i class=\"las la-cog\"></i> Advanced",
-    "voice-chat": "<i class=\"las la-microphone\"></i> Voice Chat",
+    "advanced-audio-settings": "<i class=\"las la-sliders-h\"></i> Configuración Audio",
+    "advanced-camera-settings": "<i class=\"las la-sliders-h\"></i> Configuración Video",
+    "select-local-image": "Selecciona una Imagen local",
+    "close-settings": "Cerrar Configuración",
+    "advanced": "Avanzado ",
     "open-in-new-tab": "Abrir en una pestaña nueva",
     "copy-to-clipboard": "Copia al portapapeles",
-    "click-for-quick-room-overview": "❔ Haz clic aquí para obtener información general rápida y ayuda",
-    "push-to-talk-enable": "🔊 Habilitar pulsar para hablar en el modo director",
-    "welcome-to-control-room": "Bienvenidos. Esta es la sala de control para el chat grupal. Hay diferentes cosas para las que puedes usar esta habitación:<br><br>\t<li>Puedes organizar un chat grupal con amigos usando una sala. Comparte el enlace azul para invitar a los que se unirán al chat automáticamente.</li>\t<li>Una sala de grupo puede manejar de 4 a 30 invitados, dependiendo de numerosos factores, incluida la CPU y el ancho de banda disponible de todos los invitados en la sala.</li>\t<li>Las vistas individuales de cada vídeo se ofrecen según los videos se van cargando. Estos se pueden usar dentro de una fuente de navegador de OBS.</li>\t<li>Puedes usar la escena de grupo de mezcla automática, el enlace verde, para organizar automáticamente varios videos en OBS.</li>\t<li>Puedes usar esta sala de control para grabar transmisiones de vídeo o audio aisladas, pero es una característica experimental.</li>\t<li>Los videos en la sala del Director serán de baja calidad; para ahorrar ancho de banda/CPU</li>\t<li>Los invitados en la sala verán los videos de los demás con una calidad muy limitada para ahorrar ancho de banda/CPU.</li>\t<li>OBS verá el video de un invitado en alta calidad; la bitrate predeterminado es 2500 kbps.</li>\t<br>\tA medida que los invitados se unen, sus videos aparecerán a continuación. Puedes llevar sus transmisiones de vídeo a OBS como escenas individuales o puedes agregarlas a la escena de grupo.\t<br>La escena de grupo mezcla automáticamente los videos que se han agregado a la escena. Ten en cuenta que el Auto-Mixer requiere que los invitados se agreguen manualmente para que aparezcan en él; no se agregan automáticamente.<br><br>Los dispositivos móviles de Apple, como iPhones y iPads, no son totalmente compatibles con el videochat de grupo. Esta es una restricción de hardware.<br><br>\tPara opciones y parámetros avanzados, <a href=\"https://github.com/steveseguin/obsninja/wiki/Guides-and-How-to's#urlparameters\">ver la Wiki.</a>",
-    "more-than-four-can-join": "These four guest slots are just for demonstration. More than four guests can actually join a room.",
-    "welcome-to-obs-ninja-chat": "\n\t\t\t\t\tBienvenido a OBS.Ninja! Puedes enviar mensajes de texto directamente a compañeros conectados desde aquí.\n\t\t\t\t",
-    "names-and-labels-coming-soon": "\n\t\t\t\t\tNombres identificando a los compañeros conectados serán una nueva característica en una próxima versión.\n\t\t\t\t",
     "send-chat": "Enviar",
-    "available-languages": "Idiomas disponibles:",
-    "add-more-here": "¡Añade más aquí!",
-    "waiting-for-camera-to-load": "waiting-for-camera-to-load",
-    "start": "START",
-    "share-your-mic": "Share your microphone",
-    "share-your-camera": "Share your Camera",
-    "share-your-screen": "Share your Screen",
-    "join-room-with-mic": "Join room with Microphone",
-    "share-screen-with-room": "Share-screen with Room",
-    "join-room-with-camera": "Join room with Camera",
-    "click-start-to-join": "Click Start to Join",
-    "guests-only-see-director": "Guests can only see the Director's Video",
-    "default-codec-select": "Preferred Video Codec:  ",
-    "obfuscate_url": "Obfuscate the Invite URL",
-    "hide-the-links": " LINKS (GUEST INVITES &amp; SCENES)",
-    "invite-users-to-join": "Guests can use the link to join the group room",
-    "this-is-obs-browser-source-link": "Use in OBS or other studio software to capture the group video mix",
-    "mute-scene": "mute in scene",
-    "mute-guest": "mute guest",
-    "record-local": " Record Local",
-    "record-remote": " Record Remote",
-    "order-down": "<i class=\"las la-minus\"></i>",
-    "order-up": "<i class=\"las la-plus\"></i>",
-    "advanced-audio-settings": "<i class=\"las la-sliders-h\"></i> Audio Settings",
-    "scenes-can-see-director": "Director will also be a performer",
-    "select-digital-effect": " Digital Video Effects: ",
-    "add-a-password": " Add a Password:",
-    "hide-guest": "hide guest",
-    "toggle-remote-speaker": "Deafen Guest",
-    "toggle-remote-display": "Blind Guest",
-    "force-keyframe": "Rainbow Puke",
-    "change-url": "Change URL",
-    "change-params": "URL Params",
-    "solo-video": "Highlight guest",
-    "stats-remote": " Scene Stats",
-    "apply-new-guest-settings": "Apply settings",
-    "cancel": "Cancel",
-    "add-to-calendar": "Add details to your Calendar:",
-    "no-effects-applied": "No effects applied",
-    "blurred-background": "Blurred background",
-    "digital-greenscreen": "Digital greenscreen",
-    "virtual-background": "Virtual background",
-    "use-chrome-instead": "Consider using a Chromium-based browser instead.<br>\n \t\t\t\t\t\tSafari is more prone to having audio issues",
-    "select-the-video-files-to-share": "SELECT THE VIDEO FILES TO SHARE",
-    "enter-the-website-URL-you-wish-to-share": "Enter the URL website you wish to share.",
-    "click-here-for-help": "Click Here for a quick overview and help",
-    "guests-hear-others": "Guests hear others",
-    "capture-a-group-scene": "CAPTURE A GROUP SCENE",
-    "auto-add-guests": "Auto-add guests",
-    "pro-audio-mode": "Pro-audio mode",
-    "hide-audio-only-sources": "Hide audio-only sources",
-    "ask-for-display-name": "Ask for display name",
-    "show-display-names": "Show display names",
-    "show-active-speaker": "Show active speakers",
-    "auto-select-microphone": "Auto-select default microphone",
-    "auto-select-camera": "Auto-select default camera",
-    "hide-setting-buttons": "Hide settings button",
-    "mini-self-preview": "Mini self-preview",
-    "virtual-backgrounds": "Virtual backgrounds",
-    "powerful-computers-only": "Only use with powerful computers and small groups!!",
-    "guests-see-HD-video": "Guests see HD video",
-    "no-self-preview": "Disable self-preview",
-    "raise-hand-button": "Display 'raise-hand' button",
-    "enable-compressor": "Enable audio compressor",
-    "enable-equalizer": "Enable equalizer as option",
-    "low-cpu=broadcast-codec": "Low-CPU broadcast codec",
-    "only-see-director-feed": "Only see the director's feed",
-    "mute-microphone-by-default": "Mute microphone by default",
-    "guest-joins-with-no-camera": "Guest joins with no camera",
-    "unmute-by-director-only": "Unmute by director only",
-    "obfuscate-link": "Obfuscate link and parameters",
-    "this-can-reduce-packet-loss": "This can reduce video corruption caused by packet loss",
-    "use-h264-codec": "Use H264 codec",
-    "show-active-speakers": "Show active speakers",
-    "force-mono-audio": "Force mono audio",
-    "learn-more-about-params": "Learn more about URL parameters at ",
-    "More-scene-options": "More scene options",
-    "additional-controls": "Additional controls",
-    "select-local-image": "Select Local Image",
-    "close-settings": "Close Settings",
-    "advanced": "Advanced ",
-    "invisible-guests": "Not Visible",
-    "add-to-google-calendar": "Add to Google Calendar",
-    "add-to-outlook-calendar": "Add to Outlook Calendar",
-    "add-to-yahoo-calendar": "Add to Yahoo Calendar"
+    "apply-new-guest-settings": "Aplicar configuración",
+    "cancel": "Cancelar",
+    "invisible-guests": "No Visible",
+    "available-languages": "Idiomas Disponibles:",
+    "add-more-here": "¡Añade más Aquí!",
+    "add-to-calendar": "Añadir detalles a tu Calendario:",
+    "add-to-google-calendar": "Añadir a Calendario Google",
+    "add-to-outlook-calendar": "Añadir a Calendario Outlook",
+    "add-to-yahoo-calendar": "Añadir a Calendario Yahoo"
   },
   "placeholders": {
-    "join-by-room-name-here": "Join by Room Name here",
-    "enter-a-room-name-here": "Enter a Room Name here",
-    "optional-room-password-here": "Optional room password here",
-    "give-this-media-source-a-name-optional-": "Give this media source a name (optional)",
-    "add-an-optional-password": "Add an optional password",
-    "enter-room-name-here": "Enter Room name here",
-    "enter-chat-message-to-send-here": "Enter chat message to send here",
-    "optional": "optional",
-    "enter-the-room-name-here": "Enter the room name here",
-    "enter-the-room-password-here": "Enter the room password here"
+    "join-by-room-name-here": "Unirse por Nombre de Sala aquí",
+    "enter-a-room-name-here": "Introduce un Nombre de Sala aquí",
+    "optional-room-password-here": "Password de sala opcional aquí",
+    "give-this-media-source-a-name-optional-": "Dar a la fuente de nedios un nombre (opcional)",
+    "add-an-optional-password": "Añadir una password opcional",
+    "enter-room-name-here": "Introduce el nombre de Sala aquí",
+    "enter-chat-message-to-send-here": "Introduce el mensaje de chat a enviar aquí",
+    "optional": "opcional",
+    "enter-the-room-name-here": "Introduce el nombre de Sala aquí",
+    "enter-the-room-password-here": "Introduce el password de la Sala aquí"
   }
 }

translations/translate.js

@@ -75,7 +75,6 @@ const updateList = [
     "es",
     "fr",
     "it",
-    "uk",
     "ja",
     "nl",
     "pig",

turnserver.md

@@ -1,4 +1,4 @@
-## Install and setup gudie for a TURN Relay Server
+## Install and setup guide for a TURN Relay Server
 
 #### why? You may want to deploy one to ensure high compatiblity with remote guests. If you try to use the official OBS.Ninja TURN servers for a private deployment, you may find yourself getting kicked off.