Merge pull request #894 from steveseguin/19.1

Version 19.1

.github/FUNDING.yml

@@ -3,4 +3,4 @@
 # Thank you <3 
 
 github: [steveseguin]
-
+custom: ["https://www.paypal.me/steveseguin", "buymeacoffee.com/steveseguin"]

.github/ci-generateTranslations.js

@@ -0,0 +1,168 @@
+var https = require("https");
+const jsdom = require("jsdom");
+const { JSDOM } = jsdom;
+const axios = require("axios").default;
+const fs = require("fs");
+
+const dom = new JSDOM(``, {
+  url: "https://obs.ninja",
+  contentType: "text/html",
+  includeNodeLocations: true,
+  storageQuota: 10000000,
+  pretendToBeVisual: true,
+});
+
+global.document = new JSDOM(``, {
+  url: "https://obs.ninja",
+  contentType: "text/html",
+  includeNodeLocations: true,
+  storageQuota: 10000000,
+  pretendToBeVisual: false,
+}).window.document;
+
+function downloadTranslation(filename, trans = {}) {
+  // downloads the current translation to a file
+  console.log("Downloading translation: " + filename);
+  const textDoc = JSON.stringify(trans, null, 2);
+
+  fs.writeFile(`translations/${filename}.json`, textDoc, (err) => {
+    if (err) {
+      return console.log(err);
+    }
+  });
+
+  return trans;
+}
+
+async function updateTranslation(filename) {
+  // updates the website with a specific translation
+  let data = await axios({
+    method: "get",
+    url: `https://raw.githubusercontent.com/steveseguin/obsninja/master/translations/${filename}.json?${(
+      Math.random() * 100
+    ).toString()}`,
+  })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+
+  const oldTransItems = data["innerHTML"];
+
+  // const allItems1 = document.querySelectorAll('[data-translate]');
+
+  allItems.forEach((ele) => {
+    const key = ele.dataset.translate; //.replace(/[\W]+/g, "-").toLowerCase();
+    if (key in oldTransItems) {
+      ele.innerHTML = oldTransItems[key];
+    }
+  });
+
+  const oldTransTitles = data["titles"];
+  //const allTitles1 = document.querySelectorAll('[title]');
+  allTitles.forEach((ele) => {
+    const key = ele.dataset.key;
+    //const key = ele.title.replace(/[\W]+/g, "-").toLowerCase();
+    if (key in oldTransTitles) {
+      ele.title = oldTransTitles[key];
+    }
+  });
+
+  const oldTransPlaceholders = data.placeholders;
+  //const allPlaceholders1 = document.querySelectorAll('[placeholder]');
+  allPlaceholders.forEach((ele) => {
+    const key = ele.dataset.key;
+    //const key = ele.placeholder.replace(/[\W]+/g, "-").toLowerCase();
+    if (key in oldTransPlaceholders) {
+      ele.placeholder = oldTransPlaceholders[key];
+    }
+  });
+
+  return [true, data];
+}
+
+const updateList = [
+  "cs",
+  "de",
+  "en",
+  "es",
+  "fr",
+  "it",
+  "ja",
+  "nl",
+  "pig",
+  "pt",
+  "ru",
+  "tr",
+  "blank",
+]; // list of languages to update. Update this if you add a new language.
+
+const allItems = document.querySelectorAll("[data-translate]");
+const defaultTrans = {};
+allItems.forEach((ele) => {
+  const key = ele.dataset.translate; //.replace(/[\W]+/g, "-").toLowerCase();
+  defaultTrans[key] = ele.innerHTML;
+});
+
+const defaultTransTitles = {};
+const allTitles = document.querySelectorAll("[title]");
+allTitles.forEach((ele) => {
+  const key = ele.title.replace(/[\W]+/g, "-").toLowerCase();
+  ele.dataset.key = key;
+  defaultTransTitles[key] = ele.title;
+});
+
+const defaultTransPlaceholders = {};
+const allPlaceholders = document.querySelectorAll("[placeholder]");
+allPlaceholders.forEach((ele) => {
+  const key = ele.placeholder.replace(/[\W]+/g, "-").toLowerCase();
+  ele.dataset.key = key;
+  defaultTransPlaceholders[key] = ele.placeholder;
+});
+
+const combinedTrans = {};
+combinedTrans.titles = defaultTransTitles;
+combinedTrans.innerHTML = defaultTrans;
+combinedTrans.placeholders = defaultTransPlaceholders;
+
+var counter = 0;
+for (var i = 0; i < updateList.length; i++) {
+  const lang = updateList[i];
+
+  var translation = updateTranslation(lang); // we don't need to worry about DATA.
+  updateTranslation(lang)
+    .then((translation) => {
+      const newTrans = translation[1]["innerHTML"];
+      //const allItems = document.querySelectorAll('[data-translate]');
+      allItems.forEach((ele) => {
+        const key = ele.dataset.translate; //.replace(/[\W]+/g, "-").toLowerCase();
+        newTrans[key] = ele.innerHTML;
+      });
+
+      const newTransTitles = translation[1]["titles"];
+      //const allTitles = document.querySelectorAll('[title]');
+      allTitles.forEach((ele) => {
+        const key = ele.dataset.key;
+        newTransTitles[key] = ele.title;
+      });
+
+      const newPlaceholders = translation[1]["placeholders"];
+      // const allPlaceholders = document.querySelectorAll('[placeholder]');
+      allPlaceholders.forEach((ele) => {
+        const key = ele.dataset.key;
+        newPlaceholders[key] = ele.placeholder;
+      });
+
+      // //// DOWNLOAD UPDATED TRANSLATION
+      const outputTrans = {};
+      outputTrans["titles"] = newTransTitles;
+      outputTrans["innerHTML"] = newTrans;
+      outputTrans["placeholders"] = newPlaceholders;
+      downloadTranslation(lang, outputTrans);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+}

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

@@ -0,0 +1,21 @@
+name: Update Advanced Settings Markdown TOC
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 29 2 1'
+  
+jobs:
+  update-toc:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          repository: ${{github.repository}}.wiki
+      - name: Run github-markdown-toc
+        run: |
+          curl https://raw.githubusercontent.com/ekalinin/github-markdown-toc/master/gh-md-toc -o gh-md-toc
+          chmod a+x gh-md-toc
+          ./gh-md-toc --insert --no-backup Advanced-Settings.md
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: "Auto update markdown TOC"

.github/workflows/update_translations.yml

@@ -0,0 +1,39 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Update translations
+
+# Controls when the action will run. 
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    paths:
+      - 'index.html'
+      - 'main.js'
+    branches:
+      - master
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+        - uses: actions/checkout@v2
+        - uses: actions/setup-node@v2
+          with:
+            node-version: '14'
+        - run: npm install jsdom && npm install axios
+        - run: node .github/ci-generateTranslations.js
+        - name: Create Pull Request
+          uses: peter-evans/create-pull-request@v3
+          with:
+            commit-message: Generated updated translations
+            branch: generated_translations
+            title: "[VDONinja Bot] Updated translations"
+            labels: i18n

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

CONTRIBUTING.md

@@ -1,15 +1,19 @@
-OBS.Ninja Contributor License Agreement (CLA)
+# Contributor License Agreement (CLA)
 
-To ensure the long-term viability of the open-source OBS.Ninja project, and for the protection of its creator and its users, we request that contributors to the project first agree to some basic terms. The terms when accepted applies to all of your past, present and future contributions.
+To ensure the long-term viability of this project, and for the protection of its creator and its users, we request that contributors to the project first agree to some basic terms. The terms when accepted applies to all of your past, present and future contributions.
 
-Contribution Policy
+# Contribution Policy
 
-Contributions that only take 20 lines of code or less will have its Intellectual Property implicitly transferred to Stephen Seguin, the creator of OBS.Ninja. You agree with this rule by pushing your code or works to github, by sending the code or works to one of OBS.Ninja's core developers, or by distributing your code or works in any other way.
-
-For all code contributions that take more than 20 lines, you are invited to digitally sign the CLA with the provided CLA Assissant service. You may also print, sign, scan, and then email the CLA to steve@seguin.email.
+You are invited to digitally sign the CLA with the provided CLA Assissant service. You may also print, sign, scan, and then email the CLA to steve@seguin.email.
 
 It is not required that you sign the CLA for every contribution. Once you execute a CLA, it is valid until the CLA agreement is meaningfully changed and requires updating.
 
-Important notice: if you are contributing on behalf of your company, an officer of your company (usually a VP or higher title) must sign the CLA on behalf of the company, indicating his or her title. The company can choose to list the specific individuals authorized to make contributions on the "Full Name" line, or may cover all employees with a blanket CLA by not limiting contributors to an authorized list. If necessary, the company may provide a list of authorized contributors in an attachment. The executive signing the CLA must be the first name on such an attached list, and this executive must sign the attachment as well. It may well be the case that your company already has signed a company-wide CLA with Stephen Seguin. Please check this first.
+If you are contributing on behalf of your company, an officer of your company (usually a VP or higher title) must sign the CLA on behalf of the company, indicating his or her title. The company can choose to list the specific individuals authorized to make contributions on the "Full Name" line, or may cover all employees with a blanket CLA by not limiting contributors to an authorized list. If necessary, the company may provide a list of authorized contributors in an attachment. The executive signing the CLA must be the first name on such an attached list, and this executive must sign the attachment as well. It may well be the case that your company already has signed a company-wide CLA with Stephen Seguin. Please check this first.
 
-You can stop your participation in a project at any time, but you cannot rescind your assignments or grants with respect to prior contributions. This protects the whole community, allowing Stephen Seguin and downstream users of the code base to rely on it.
+You can stop your participation in a project at any time, but you cannot rescind your assignments or grants with respect to prior contributions.
+
+You hereby grant Steve Seguin (Steve) a perpetual, worldwide, royalty-free, irrevocable, non-exclusive, and transferable license to use, reproduce, prepare derivative works of, publicly display, publicly perform, distribute the submissions, and to sublicense such rights to others. The rights granted may be exercised in any form or format, and Steve may distribute and sublicense to others on any licensing terms, including without limitation: (a) open source licenses like the GNU General Public License (GPL), or the Berkeley Software Distribution license (BSD); or (b) binary, proprietary, or commercial licenses.
+
+You hereby represent that you are the sole and original author of all Submissions and that, to the best of your knowledge, the submissions do not infringe upon the rights of any third party.
+
+You agree to these terms with your continued submission.

IFRAME.md

@@ -0,0 +1,314 @@
+***
+This documentation has formally moved to: https://docs.vdo.ninja/guides/iframe-api-documentation
+***
+The documentation below is now considered depreciated and out-of-date.
+
+
+
+
+
+## VDO.Ninja - iFrame API documentation (depreciated; see above)
+
+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 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 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 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 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://vdo.ninja/?webcam";
+```
+
+You can also make an VDO.Ninja without Javascript, using just HTML, like
+
+`<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 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/vdoninja/tree/master/examples
+
+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 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/vdoninja/wiki/Advanced-Settings
+
+Some of the more interesting ones primarily for iframe users might include:
+
+- &webcam
+- &screenshare
+- &videodevice=1 or 0
+- &audiodevice=1 or 0
+- &autostart
+- &chroma
+- &transparency
+- As for API, allow for dynamic messaging, below are examples of the options available:
+
+- Mute Speaker
+- Mute Mic
+- Disconnect
+- Change Video Bitrate
+- Reload the page
+- Change the volume
+- Request detailed connection stats
+- Access the loudness level of the audio
+- 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 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");
+button.innerHTML = "Mute Speaker";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "mute": true
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Un-Mute Speaker";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "mute": false
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Toggle Speaker";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "mute": "toggle"
+    }, '*');
+}
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Mute Mic";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "mic": false
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Un-Mute Mic";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "mic": true
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Toggle Mic";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "mic": "toggle"
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Disconnect";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "close": true
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Low Bitrate";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "bitrate": 30
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "High Bitrate";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "bitrate": 5000
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Default Bitrate";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "bitrate": -1
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Reload";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "reload": true
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "50% Volume";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "volume": 0.5
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "100% Volume";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "volume": 1.0
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Request Stats";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "getStats": true
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Request Loudness Levels";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "getLoudness": true
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Stop Sending Loudness Levels";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "getLoudness": false
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "Say Hello";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "sendChat": "Hello!"
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "previewWebcam()";
+button.onclick = () => {
+    iframe.contentWindow.postMessage({
+        "function": "previewWebcam"
+    }, '*');
+};
+iframeContainer.appendChild(button);
+
+button = document.createElement("button");
+button.innerHTML = "CLOSE IFRAME";
+button.onclick = () => {
+    iframeContainer.parentNode.removeChild(iframeContainer);
+};
+iframeContainer.appendChild(button);
+
+// As for listening events, where the parent listens for responses or events from the VDON child frame:
+
+// //////////  LISTEN FOR EVENTS
+
+const eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+const eventer = window[eventMethod];
+const messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+eventer(messageEvent, function (e) {
+    if (e.source !== iframe.contentWindow) {
+        return
+    } // reject messages send from other iframes
+
+    if ("stats" in e.data) {
+        const outputWindow = document.createElement("div");
+
+        let out = `<br />total_inbound_connections:${
+            e.data.stats.total_inbound_connections
+        }`;
+        out += `<br />total_outbound_connections:${
+            e.data.stats.total_outbound_connections
+        }`;
+
+        for (const streamID in e.data.stats.inbound_stats) {
+            out += `<br /><br /><b>streamID:</b> ${streamID}<br />`;
+            out += printValues(e.data.stats.inbound_stats[streamID]);
+        }
+
+        outputWindow.innerHTML = out;
+        iframeContainer.appendChild(outputWindow);
+    }
+
+    if ("gotChat" in e.data) {
+        const outputWindow = document.createElement("div");
+        outputWindow.innerHTML = e.data.gotChat.msg;
+        outputWindow.style.border = "1px dotted black";
+        iframeContainer.appendChild(outputWindow);
+    }
+
+    if ("action" in e.data) {
+        const outputWindow = document.createElement("div");
+        outputWindow.innerHTML = `child-page-action: ${
+            e.data.action
+        }<br />`;
+        outputWindow.style.border = "1px dotted black";
+        iframeContainer.appendChild(outputWindow);
+    }
+
+    if ("loudness" in e.data) {
+        console.log(e.data);
+        if (document.getElementById("loudness")) {
+            outputWindow = document.getElementById("loudness");
+        } else {
+            const outputWindow = document.createElement("div");
+            outputWindow.style.border = "1px dotted black";
+            iframeContainer.appendChild(outputWindow);
+            outputWindow.id = "loudness";
+        }
+        outputWindow.innerHTML = "child-page-action: loudness<br />";
+        for (const key in e.data.loudness) {
+            outputWindow.innerHTML += `${key} Loudness: ${
+                e.data.loudness[key]
+            }\n`;
+        }
+        outputWindow.style.border = "1px black";
+
+    }
+});
+```
+
+This VDO.Ninja API is developed and expanded based on user feedback and requests. It is by no means complete.
+
+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

LICENCE.md

@@ -1,7 +1,7 @@
 The OBS.Ninja source repository is governed by the GNU AFFERO GENERAL PUBLIC LICENSE. (AGPL-3.0)
-That AGPL-3.0 licence can be found here: https://raw.githubusercontent.com/steveseguin/obsninja/master/AGPLv3.md
+That AGPL-3.0 licence can be found here: [AGPLv3.md](https://github.com/steveseguin/obsninja/blob/master/AGPLv3.md)
 
-In essence, OBS.Ninja is open-source and free to use, both for commericial and non-commericial use.
+In essence, OBS.Ninja is open-source and free to use, both for commercial and non-commercial use.
 Modifications of AGPL-3.0 licenced code must be made publicly accessible. Please refer to that licence.
 
 Some individual source files may contain different licencing term and perhaps different copyright holders.

README.md

@@ -1,65 +1,85 @@
-![ILogo by brimace](images/obsNinja_logo_full.png)
 
-## 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.
+#### ⚠ Notice! We've started our rebranding from OBS.Ninja to VDO.Ninja 🎈 -- nothing else will be changing. ✨
 
-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. 
+<img src="https://user-images.githubusercontent.com/2575698/124821455-bbfec580-df3c-11eb-9641-3d036cdd6c41.png" data-canonical-src="https://user-images.githubusercontent.com/2575698/124821455-bbfec580-df3c-11eb-9641-3d036cdd6c41.png" width="200"  />
 
-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
+## What is **VDO NINJA**
+VDO.Ninja uses peer-to-peer technology to bring remote cameras into OBS or other studio software. 
 
-## How to use:
-I demo the basic usage of OBS.Ninja on YouTube: https://www.youtube.com/watch?v=6R_sQKxFAhg
+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.
+
+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.
+
+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 VDO.Ninja on YouTube: https://www.youtube.com/watch?v=6R_sQKxFAhg
+
+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 currently, but there are workarounds. Please see the subreddit or the Wiki.
+## What's in this repo
+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.
 
-## 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 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/vdoninja/blob/master/install.md) for added details and alternative install options.
 
-## How to Deploy this Repo:
-To use, just download and host 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. 
+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. 
 
-Directions on how to deploy a TURN server are listed in the turnserver.conf file. You may wish to do so if you are having problems with my existing TURN server, although most users will not need one. About 10% of users, those often connected via 4G LTE, will require a TURN server. 
+## Server side / API software
+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)
 
-## 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)
+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
 
-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. Development builds of OBS.Ninja may include debugging software, but in-production releases have this removed. 
+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
 
-#### 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.
+### 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 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.conf 
+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.
 
 ## Feedback
-Ideas, feedback, bugs, etc -- all welcomed.  I'm dumping many of my ideas as issues into Github. Feedback is typcially most welcomed via Email or Discord.
+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 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.
 
+## Credit
+Thank you to everyone who has helped support this project so far. From the moderators, volunteers helping with support, those contributing media assets, the project sponsors, those reporting issues, those offering feedback, and any code submissions. 

animations.js

@@ -1,115 +0,0 @@
-
-/* We need to create dynamic keyframes to show the animation from full-screen to normal. So we create a stylesheet in which we can insert CSS keyframe rules */
-$("body").append('<style id="lightbox-animations" type="text/css"></style>');
-
-/* Click on the container */
-$(".column").on('click', function() {
-	/* The position of the container will be set to fixed, so set the top & left properties of the container */
-
-	var bounding_box = $(this).get(0).getBoundingClientRect();
-	$(this).css({ top: bounding_box.top + 'px', left: bounding_box.left -20+ 'px' });
-
-	/* Set container to fixed position. Add animation */
-	$(this).addClass('in-animation');
-
-	/* An empty container has to be added in place of the lightbox container so that the elements below don't come up
-	Dimensions of this empty container is the same as the original container */
-	$("#empty-container").remove();
-	$('<div id="empty-container" class="column"></div>').insertAfter(this);
-
-	/* To animate the container from full-screen to normal, we need dynamic keyframes */
-	var styles = '';
-	styles = '@keyframes outlightbox {';
-	styles += '0% {';
-	styles += 'height: 100%;';
-	styles += 'width: 100%;';
-	styles += 'top: 0px;';
-	styles += 'left: 0px;';
-	styles += '}';
-	styles += '50% {';
-	styles += 'height: 220px;';
-	styles += 'top: ' + bounding_box.y + 'px;';
-	styles += '}';
-	styles += '100% {';
-	styles += 'height: 220px;';
-	styles += 'width: '+bounding_box.width+'px;';
-	styles += 'top: ' + bounding_box.y + 'px;';
-	styles += 'left: ' + bounding_box.x + 'px;';
-	styles += '}';
-	styles += '}';
-
-	/* Add keyframe to CSS */
-	$("#lightbox-animations").get(0).sheet.insertRule(styles, 0);
-
-	/* Hide the window scrollbar */
-	$("body").css('overflow', 'hidden');
-});
-
-/* Click on close button when full-screen */
-$(".close").on('click', function(e) {
-$(this).hide();
-$(".container-inner").hide();
-/* Window scrollbar normal */
-$("body").css('overflow', 'auto');
-
-var bounding_box = $(this).parent().get(0).getBoundingClientRect();
-$(this).parent().css({ top: bounding_box.top + 'px', left: bounding_box.left + 'px' });
-
-/* Show animation */
-$(this).parent().addClass('out-animation');
-
-e.stopPropagation();
-});
-
-/* On animationend : from normal to full screen & full screen to normal */
-$(".column").on('animationend', function(e) {
-/* On animation end from normal to full-screen */
-if(e.originalEvent.animationName == 'inlightbox') {
-	$(this).children(".close").show();
-	$(this).children(".container-inner").show();
-}
-/* On animation end from full-screen to normal */
-else if(e.originalEvent.animationName == 'outlightbox') {
-/* Remove fixed positioning, remove animation rules */
-$(this).removeClass('in-animation').removeClass('out-animation').removeClass('columnfade');
-
-/* Remove the empty container that was earlier added */
-$("#empty-container").remove();
-
-/* Delete the dynamic keyframe rule that was earlier created */
-$("#lightbox-animations").get(0).sheet.deleteRule(0);
-}
-});
-
- 
-// multiselect dropdowns
-$('.multiselect-trigger').on('mousedown touchend focusin focusout', function(e) {
-    var state = $(this).data('state') || 0;
-    if( state == 0 ) {
-        // open the dropdown
-        $(this).data('state', '1').addClass('open').removeClass('closed');
-        $(this).find('.fa').removeClass('fa-chevron-down').addClass('fa-chevron-up');
-        $(this).parent().find('.multiselect-contents').show();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();;
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();;
-    } else {
-        // close the dropdown
-        $(this).data('state', '0').addClass('closed').removeClass('open');
-        $(this).find('.fa').removeClass('fa-chevron-up').addClass('fa-chevron-down');
-        //$(this).parent().find('.multiselect-contents').hide();
-		//$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();;
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();;
-    } 
-    e.preventDefault();
-});
-
-
-// when no preference is checked, uncheck the others
-$('#multiselect1').on('change', function(e) {
-    if( $(this).is(':checked') ) {
-        $(this).parent().parent().find('input[type="checkbox"]').not('#multiselect1').prop('checked', false);
-    }
-    e.preventDefault();
-});
- 

blank.json

@@ -0,0 +1,404 @@
+{
+  "titles": {
+    "join-by-room-name-here": "Enter a room name to quick join",
+    "join-room": "Join room",
+    "load-the-next-guest-in-queue": "Load the next guest in queue",
+    "toggle-the-chat": "Toggle the Chat",
+    "mute-the-speaker": "Mute the Speaker",
+    "mute-the-mic": "Mute the Mic",
+    "disable-the-camera": "Disable the Camera",
+    "share-a-screen-with-others": "Share a Screen with others",
+    "create-a-secondary-stream": "Create a Secondary Stream",
+    "share-a-website-as-an-embedded-iframe": "Share a website as an embedded iFRAME",
+    "room-settings": "Room Settings",
+    "your-audio-and-video-settings": "Your audio and video Settings",
+    "hangup-the-call": "Hangup the Call",
+    "alert-the-host-you-want-to-speak": "Alert the host you want to speak",
+    "record-your-stream-to-disk": "Record your stream to disk",
+    "you-can-also-enable-the-director-s-video-output-afterwards-by-clicking-the-setting-s-button": "You can also enable the director`s Video Output afterwards by clicking the Setting`s button",
+    "cancel-the-director-s-video-audio": "Cancel the Director's Video/Audio",
+    "submit-any-error-logs": "Submit any error logs",
+    "show-help-info": "Show Help Info",
+    "language-options": "Language Options",
+    "add-to-calendar": "Add to Calendar",
+    "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-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 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",
+    "allow-for-remote-stat-monitoring-via-the-monitoring-tool": "Allow for remote stat monitoring via the monitoring tool",
+    "the-guest-will-be-asked-if-they-want-to-reload-the-previous-link-when-revisiting": "The guest will be asked if they want to reload the previous link when revisiting",
+    "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",
+    "the-guest-s-self-video-preview-will-appear-tiny-in-the-top-right": "The guest's self-video preview will appear tiny in the top right",
+    "allow-the-guests-to-pick-a-virtual-backscreen-effect": "Allow the guests to pick a virtual backscreen effect",
+    "videos-use-an-animated-transition-when-being-remixed": "Videos use an animated transition when being remixed",
+    "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",
+    "show-some-prep-suggestions-to-the-guests-on-connect": "Show some prep suggestions to the guests on connect",
+    "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.",
+    "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.",
+    "the-guest-will-not-be-asked-for-a-video-device-on-connection": "The guest will not be asked for a video device on connection",
+    "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",
+    "set-the-background-color-to-bright-green": "Set the background color to bright green",
+    "fade-videos-in-over-500ms": "Fade videos in over 500ms",
+    "add-a-10px-margin-around-all-video-elements": "Add a 10px margin around all video elements",
+    "playback-the-video-with-mono-channel-audio": "Playback the video with mono-channel audio",
+    "have-the-videos-fit-their-respective-areas-even-if-it-means-cropping-a-bit": "Have the videos fit their respective areas, even if it means cropping a bit",
+    "have-videos-be-aligned-with-sizing-designed-for-vertical-video": "Have videos be aligned with sizing designed for vertical video",
+    "copy-this-stream-id-to-the-clipboard": "Copy this Stream ID to the clipboard",
+    "click-here-to-edit-the-label-for-this-stream-changes-will-propagate-to-all-viewers-of-this-stream": "Click here to edit the label for this stream. Changes will propagate to all viewers of this stream",
+    "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.",
+    "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-this-video-to-any-remote-scene-1-": "Add this Video to any remote '&scene=1'",
+    "mute-this-guest-everywhere": "Mute this guest everywhere",
+    "add-this-video-to-any-remote-scene-2-": "Add this Video to any remote '&scene=2'",
+    "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",
+    "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",
+    "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",
+    "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*",
+    "remotely-change-the-volume-of-this-guest": "Remotely change the volume of this guest",
+    "disable-video-preview": "Disable Video Preview",
+    "low-quality-preview": "Low-Quality Preview",
+    "high-quality-preview": "High-Quality Preview",
+    "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",
+    "set-to-audio-channel-6": "Set to Audio Channel 6",
+    "remote-audio-settings": "Remote Audio Settings",
+    "advanced-video-settings": "Advanced Video Settings",
+    "this-will-ask-the-remote-guest-for-permission-to-change": "This will ask the remote guest for permission to change",
+    "a-direct-solo-view-of-the-video-audio-stream-with-nothing-else-its-audio-can-be-remotely-controlled-from-here": "A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here",
+    "this-guest-raised-their-hand-click-this-to-clear-notification-": "This guest raised their hand. Click this to clear notification.",
+    "add-to-scene-2": "Add to Scene 2",
+    "activate-or-reload-this-video-device-": "Activate or Reload this video device.",
+    "tip-hold-ctrl-command-to-select-multiple": "tip: Hold CTRL (command) to select Multiple",
+    "improve-performance-and-quality-with-this-tip": "Improve performance and quality with this tip",
+    "increase-this-at-your-peril-changes-the-total-inbound-video-bitrate-per-guest-mobile-devices-excluded-webp-mode-also-excluded-": "Increase this at your peril. Changes the total inbound video bitrate per guest; mobile devices excluded. Webp-mode also excluded.",
+    "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",
+    "hide-this-window": "Hide this window",
+    "cycle-the-cameras": "Cycle the Cameras",
+    "add-group-chat-to-obs": "Add Group Chat",
+    "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",
+    "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",
+    "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",
+    "start-streaming": "start streaming",
+    "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 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",
+    "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.",
+    "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",
+    "more-options": "More Options",
+    "hold-ctrl-or-cmd-to-select-multiple-files": "Hold CTRL (or CMD) to select multiple files",
+    "enter-an-https-url": "Enter an HTTPS URL",
+    "creative-commons-by-3-0": "Creative Commons BY 3.0",
+    "have-screen-shares-stream-id-s-use-a-predictable-prefixed-value-instead-of-a-random-one-": "Have screen-shares stream ID's use a predictable prefixed value instead of a random one.",
+    "toggle-solo-voice-chat-or-hold-ctrl-cmd-when-selecting-to-make-it-two-way-private-": "Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private.",
+    "transfer-any-file-to-the-group": "Transfer any file to the group",
+    "transfer-any-file": "Transfer any file",
+    "the-camera-will-load-in-a-default-safe-mode-that-may-work-if-other-modes-fail-": "The camera will load in a default safe-mode that may work if other modes fail.",
+    "disable-animated-transitions-during-video-mixing": "Disable animated transitions during video mixing",
+    "allow-the-guest-to-select-a-file-to-upload-to-the-director-once-shared-it-will-show-in-the-chat-as-a-download-link-": "Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link.",
+    "set-a-countdown-timer-that-this-guest-sees": "Set a countdown timer that this guest sees"
+  },
+  "innerHTML": {
+    "join-room": "Join room",
+    "join-room-with-mic": "Join room with Microphone",
+    "join-room-with-camera": "Join Room with Camera",
+    "copy-this-url": "Copy this URL into your \"browser source\"",
+    "share-screen-with-room": "Screenshare with Room",
+    "share-your-mic": "Share your Microphone",
+    "share-your-camera": "Share your Camera",
+    "share-your-screen": "Share your Screen",
+    "click-start-to-join": "Click Start to Join",
+    "waiting-for-mic-to-load": "Waiting for mic to load",
+    "waiting-for-camera-to-load": "Waiting for Camera to load",
+    "you-are-in-the-control-center": "Control center for room:",
+    "joining-room": "You are in room",
+    "push-to-talk-enable": " enable director`s microphone or video<br>(only guests can see this feed)",
+    "hide-the-links": " LINKS (GUEST INVITES &amp; SCENES)",
+    "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\">Click Here for a quick overview and help</span>\n\t\t\t\t\t",
+    "click-here-for-help": "Click Here for a quick overview and help",
+    "welcome-to-control-room": "\n\t\t\t\t\t\t<b>Welcome. This is the director's control-room for the group-chat.</b><br><br>\n\t\t\t\t\t\tYou can host a group chat with friends using a room. Share the blue link to invite guests who will join the chat automatically.\n\t\t\t\t\t\t<br><br>\n\t\t\t\t\t\tA group room can handle normally around 6 to 20 guests, depending on numerous factors, including CPU and available bandwidth of all guests in the room\n\t\t\t\t\t",
+    "invite-users-to-join": "Guests can use the link to join the group room",
+    "guests-hear-others": "Guests hear others",
+    "capture-a-group-scene": "CAPTURE A GROUP SCENE",
+    "this-is-obs-browser-source-link": "Use studio software to capture the group video mix",
+    "auto-add-guests": "Auto-add guests",
+    "pro-audio-mode": "Pro-audio mode",
+    "hide-audio-only-sources": "Hide audio-only sources",
+    "remote-monitoring": "Remote Monitoring",
+    "invite-saved-to-cookie": "Invite saved to cookie",
+    "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",
+    "fade-videos-in": "Fade videos in",
+    "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",
+    "show-guest-tips": "Show guest setup tips",
+    "low-cpu=broadcast-codec": "Low-CPU broadcast codec",
+    "only-see-director-feed": "Only see the director's feed",
+    "mute-microphone-by-default": "Muted; guest can unmute",
+    "unmute-by-director-only": "Muted; director can unmute",
+    "guest-joins-with-no-camera": "Guest joins with no camera",
+    "obfuscate-link": "Obfuscate link and parameters",
+    "this-can-reduce-packet-loss": "Can reduce packet loss video corruption",
+    "use-h264-codec": "Use H264 codec",
+    "show-active-speakers": "Show active speakers",
+    "green-background": "Green background",
+    "add-margin": "Add margin to videos",
+    "force-mono-audio": "Force mono audio",
+    "fill-video-space": "Crop video to fit",
+    "vertical-aspect-ratio": "Vertical video mode",
+    "learn-more-about-params": "Learn more about URL parameters at ",
+    "forward-to-room": "Transfer",
+    "send-direct-chat": "<i class=\"las la-envelope\"></i> Message",
+    "disconnect-guest": "Hangup",
+    "voice-chat": "<i class=\"las la-microphone\" style=\"color:#090\"></i> Solo Talk",
+    "add-to-scene": "add to scene 1",
+    "mute-guest": "mute guest",
+    "More-scene-options": "More scene options",
+    "add-to-scene2": "add to scene 2",
+    "mute-scene": "mute in scene",
+    "force-keyframe": "Rainbow Puke Fix",
+    "stats-remote": " Scene Stats",
+    "additional-controls": "Additional controls",
+    "solo-video": "Highlight guest",
+    "hide-guest": "hide guest",
+    "toggle-remote-speaker": "Deafen Guest",
+    "toggle-remote-display": "Blind Guest",
+    "order-down": "<i class=\"las la-minus\"></i>",
+    "order-up": "<i class=\"las la-plus\"></i>",
+    "change-url": "Change URL",
+    "change-params": "URL Params",
+    "record-local": " Record Local",
+    "record-remote": " Record Remote",
+    "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>",
+    "advanced-audio-settings": "<i class=\"las la-sliders-h\"></i> Audio Settings",
+    "advanced-camera-settings": "<i class=\"las la-sliders-h\"></i> Video Settings",
+    "user-raised-hand": "Lower Raised Hand",
+    "unmute": "un-mute",
+    "unhide-guest": "un-hide",
+    "undeafen": "un-deafen",
+    "unblind": "un-blind",
+    "close": "close",
+    "send-message": "send message<s pan=\"\"> </s>",
+    "record-director-local": " Record",
+    "video-source": " Video Source ",
+    "max-resolution": "Max Resolution",
+    "balanced": "Balanced",
+    "smooth-cool": "Smooth and Cool",
+    "select-audio-source": " Audio Source(s) ",
+    "select-output-source": " Audio Output Destination: ",
+    "select-digital-effect": " Digital Video Effects: ",
+    "no-effects-applied": "No effects applied",
+    "blurred-background": "Blurred background",
+    "digital-greenscreen": "Digital greenscreen",
+    "virtual-background": "Virtual background",
+    "select-local-image": "Select Local Image",
+    "close-settings": "Close Settings",
+    "advanced": "Advanced ",
+    "open-in-new-tab": "Open in new Tab",
+    "copy-to-clipboard": "Copy to Clipboard",
+    "send-chat": "Send",
+    "apply-new-guest-settings": "Apply settings",
+    "cancel": "Cancel",
+    "invisible-guests": "Not Visible",
+    "available-languages": "Available Languages:",
+    "add-more-here": "Add More Here!",
+    "add-to-calendar": "Add details to your Calendar:",
+    "add-to-google-calendar": "Add to Google Calendar",
+    "add-to-outlook-calendar": "Add to Outlook Calendar",
+    "add-to-yahoo-calendar": "Add to Yahoo Calendar",
+    "logo-header": "\n\t\t\t\t\t<font id=\"qos\">V</font>DO.Ninja \n\t\t\t\t",
+    "only-director-can-hear-you": "Only the director can hear you currently.",
+    "director-muted-you": "The director has muted you.",
+    "add-group-chat": "Create a Room",
+    "rooms-allow-for": "Rooms allow for group-chat and the tools to manage multiple guests.",
+    "room-name": "Room Name",
+    "password-input-field": "Password",
+    "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": "Enter the Room's Control Center",
+    "show-tips": "Show me some tips..",
+    "added-notes": "\n\t\t\t\t\t\t\t\t<u>\n\t\t\t\t\t\t\t\t\t<i>Important Tips:</i><br><br>\n\t\t\t\t\t\t\t\t</u>\n\t\t\t\t\t\t\t\t<li>Disabling video sharing between guests will improve performance</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>The \"Recording\" option is considered experimental.</li>\n\t\t\t\t\t\t\t\t<li><a href=\"https://params.vdo.ninja\" style=\"color:black;\"><u>Advanced URL parameters</u></a> are available to customize rooms.</li>\n\t\t\t\t\t\t\t",
+    "back": "Back",
+    "add-your-camera": "Add your Camera",
+    "ask-for-permissions": "Allow Access to Camera/Microphone",
+    "waiting-for-camera": "Waiting for Camera to Load",
+    "no-audio": "No Audio",
+    "add-a-password": " Add a Password:",
+    "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",
+    "remote-screenshare-obs": "Remote Screenshare",
+    "select-screen-to-share": "SELECT SCREEN TO SHARE",
+    "audio-sources": "Audio Sources",
+    "application-audio-capture": "For application-specific audio capture, <a href=\"https://docs.vdo.ninja/audio\" style=\"color: #007AC8;\">see here</a>",
+    "create-reusable-invite": "Create Reusable Invite",
+    "here-you-can-pre-generate": "Here you can pre-generate a reusable Browser Source link and a related guest invite link.",
+    "generate-invite-link": "GENERATE THE INVITE LINK",
+    "advanced-paramaters": "Advanced Options",
+    "unlock-video-bitrate": "Unlock Video Bitrate (20mbps)",
+    "force-vp9-video-codec": "Force VP9 Video Codec",
+    "enable-stereo-and-pro": "Enable Stereo and Pro HD Audio",
+    "video-resolution": "Video Resolution: ",
+    "hide-mic-selection": "Force Default Microphone",
+    "hide-screen-share": "Hide Screenshare Option",
+    "allow-remote-control": "Remote Control Camera Zoom (android)",
+    "obfuscate_url": "Obfuscate the Invite URL",
+    "add-a-password-to-stream": " Add a password:",
+    "add-the-guest-to-a-room": " Add the guest to a room:",
+    "invite-group-chat-type": "This room guest can:",
+    "can-see-and-hear": "Can see and hear the group chat",
+    "can-hear-only": "Can only hear the group chat",
+    "cant-see-or-hear": "Cannot hear or see the group chat",
+    "share-local-video-file": "Stream Media File",
+    "select-the-video-files-to-share": "SELECT THE VIDEO FILES TO SHARE",
+    "share-website-iframe": "Share Website",
+    "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": "",
+    "animate-mixing": "Animate mixing",
+    "prefix-screenshare": "Prefix screenshare IDs",
+    "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\tWelcome! You can send text messages directly to connected peers from here.\n\t\t\t\t",
+    "privacy-disabled": "Privacy warning: The director will be able to remotely access your camera and microphone if you continue.",
+    "face-mesh": "Face mesh (slow load)",
+    "anonymous-mask": "Anonymous mask",
+    "dog-face": "Dog ears and nose",
+    "compatibility-mode": "Compatibility mode",
+    "disable-animated-mixing": "Disable animations",
+    "request-upload": " Request File",
+    "create-timer": "Create Timer",
+    "edit-url": "Edit URL manually",
+    "mirror-video": "Mirror",
+    "toggle-control-video": "Toggle control bar",
+    "picture-in-picture": "Picture-in-picture",
+    "chrome-cast": "Cast.."
+  },
+  "placeholders": {
+    "join-by-room-name-here": "Join by Room Name here",
+    "enter-your-message-here": "Enter your message here",
+    "enter-chat-message-to-send-here": "Enter chat message to send here",
+    "enter-the-room-name-here": "Enter the room name here",
+    "enter-the-room-password-here": "Enter the room password here",
+    "enter-a-room-name-here": "Enter a Room Name here",
+    "optional-room-password-here": "Optional room password here",
+    "optional": "optional",
+    "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"
+  },
+  "miscellaneous": {
+    "start": "START",
+    "new-display-name": "Enter a new Display Name for this stream",
+    "submit-error-report": "Press OK to submit any error logs. Error logs may contain private information.",
+    "director-redirect-1": "The director wishes to redirect you to the URL: ",
+    "director-redirect-2": "\n\nPress OK to be redirected.",
+    "add-a-label": "Add a label",
+    "audio-processing-disabled": "Audio processing is disabled with this guest. Can't mute or change volume",
+    "not-the-director": "<font color='red'>You are not the director of this room. You will have limited to no control. See <a target='_blank' href='https://docs.vdo.ninja/director-settings/codirector'>&codirector</a> on how to become a co-director.</font>",
+    "room-is-claimed": "The room is already claimed by someone else.\n\nOnly the first person to join a room is the assigned director.\n\nRefresh after the first director leaves to claim.",
+    "room-is-claimed-codirector": "The room is already claimed by someone else.\n\nTrying to join as a co-director...",
+    "streamid-already-published": "The stream ID you are publishing to is already in use.\n\nPlease try with a different invite link or refresh to retry again.\n\nYou will now be disconnected.",
+    "director": "Director",
+    "unknown-user": "Unknown User",
+    "room-test-not-good": "The room name 'test' is very commonly used and may not be secure.\n\nAre you sure you wish to proceed?",
+    "load-previous-session": "Would you like to load your previous session's settings?",
+    "enter-password": "Please enter the password below: \n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "enter-password-2": "Please enter the password below: \n\n(Note: Passwords are case-sensitive.)",
+    "enter-director-password": "Please enter the director's password:\n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "password-incorrect": "The password was incorrect.\n\nRefresh and try again.",
+    "enter-display-name": "Please enter your display name:",
+    "enter-new-display-name": "Enter a new Display Name for this stream",
+    "what-bitrate": "What bitrate would you like to record at? (kbps)\n(note: This feature is experimental, so have backup recordings going)",
+    "enter-website": "Enter a website URL to share",
+    "press-ok-to-record": "Press OK to start recording. Press again to stop and download.\n\nWarning: Keep this browser tab active to continue recording.\n\nYou can change the default video bitrate if desired below (kbps)",
+    "no-streamID-provided": "No streamID was provided; one will be generated randomily.\n\nStream ID: ",
+    "alphanumeric-only": "Info: Only AlphaNumeric characters should be used for the stream ID.\n\nThe offending characters have been replaced by an underscore",
+    "stream-id-too-long": "The Stream ID should be less than 45 alPhaNuMeric characters long.\n\nWe will trim it to length.",
+    "share-with-trusted": "Share only with those you trust",
+    "pass-recommended": "A password is recommended",
+    "insecure-room-name": "Insecure room name.",
+    "allowed-chars": "Allowed chars",
+    "transfer": "transfer",
+    "armed": "armed",
+    "transfer-guest-to-room": "Transfer guests to room:\n\n(Please note rooms must share the same password)",
+    "transfer-guest-to-url": "Transfer guests to new website URL.\n\n(Guests will be prompted to accept)",
+    "change-url": "change URL",
+    "mute-in-scene": "mute in scene",
+    "unmute-guest": "un-mute guest",
+    "undeafen": "un-deafen",
+    "deafen": "deafen guest",
+    "unblind": "un-blind",
+    "blind": "blind guest",
+    "unmute": "un-mute",
+    "mute-guest": "mute guest",
+    "unhide": "unhide guest",
+    "hide-guest": "hide guest",
+    "confirm-disconnect-users": "Are you sure you wish to disconnect these users?",
+    "confirm-disconnect-user": "Are you sure you wish to disconnect this user?"
+  }
+}

chat.html

@@ -0,0 +1,159 @@
+<html>
+	<head>
+		<meta charset="utf8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>OBSN Chat Overlay</title>
+		<style>
+		
+			@font-face {
+			  font-family: 'Cousine';
+			  src: url('fonts/Cousine-Bold.ttf') format('truetype');
+			}
+		
+			body {
+				margin:0;
+				padding:0 10px;
+				height:100%;
+				border: 0;
+				display: flex;
+				flex-direction: column-reverse;
+				position:absolute;
+				bottom:0;
+				overflow:hidden;
+				max-width:100%;
+			}
+
+			div {
+				margin:0;
+				background-color: black; 
+				padding: 8px 8px 0px 8px;
+				color: white;
+				font-family: Cousine, monospace;
+				font-size: 3.2em;
+				line-height: 1.1em;
+				letter-spacing: 0.0em;
+				text-transform: uppercase;
+				text-shadow: 0.05em 0.05em 0px rgba(0,0,0,1);
+				max-width:100%;
+				word-wrap: break-word;
+				overflow-wrap: break-word;
+				word-break: break-all;
+				hyphens: auto;
+				display:inline-block;
+			}
+			
+			
+			
+			a {
+				color:white;
+				font-size:1.2em;
+				text-transform: none;
+				word-wrap: break-word;
+				overflow-wrap: break-word;
+				word-wrap: break-word;
+				word-break: break-all;
+				hyphens: auto;
+			}
+			</style>
+		<script>
+		
+		
+			(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);
+			
+
+			function loadIframe() {
+				
+				var iframe = document.createElement("iframe");
+
+				var view= "";
+				if (urlParams.has("view")) {
+					view = "&view="+(urlParams.get("view") || "");
+				} 
+				var room="";
+				if (urlParams.has("room")) {
+					room = "&room="+urlParams.get("room");
+				}
+				
+				var password="";
+				if (urlParams.has("password")) {
+					password = "&password="+urlParams.get("password");
+				}
+				
+				iframe.allow = "autoplay";
+				var srcString = "./?novideo&noaudio&label=chatOverlay&scene"+room+view+password;
+				
+				iframe.src = srcString;
+				iframe.style.width="0";
+				iframe.style.height="0";
+				iframe.style.border="0";
+				
+				document.body.appendChild(iframe);
+
+				////////////  LISTEN FOR EVENTS
+	
+				var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+				var eventer = window[eventMethod];
+				var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+
+				/// If you have a routing system setup, you could have just one global listener for all iframes instead.
+				
+				eventer(messageEvent, function (e) {
+					if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+
+					console.log(e);
+					if ("gotChat" in e.data){
+						logData(e.data.gotChat.label,e.data.gotChat.msg);
+					}
+				});
+			}
+
+			function printValues(obj) {
+				var out = "";
+				for (var key in obj) {
+					if (typeof obj[key] === "object") {
+						out += "<br />";
+						out += printValues(obj[key]);
+					} else {
+						if (key.startsWith("_")) {
+						} else {
+							out += "<b>" + key + "</b>: " + obj[key] + "<br />";
+						}
+					}
+				}
+				return out;
+			}
+
+			function logData(type, data) {
+				var span = document.createElement('span');
+				var entry = document.createElement('div');
+				if (type){
+					type = "<i>"+type.replace(/_/g, ' ')+"</i>";
+				}
+				entry.innerHTML = type + data;
+				span.appendChild(entry);
+				document.body.prepend(span);
+			}
+		</script>
+	</head>
+	<body onload="loadIframe();">
+	</body>
+</html>

cn.json

@@ -0,0 +1,405 @@
+{
+  "titles": {
+    "join-by-room-name-here": "输入房间名称",
+    "join-room": "加入房间",
+    "load-the-next-guest-in-queue": "加载队列中的下一个客人",
+    "toggle-the-chat": "切换聊天",
+    "mute-the-speaker": "使扬声器静音",
+    "mute-the-mic": "使麦克风静音",
+    "disable-the-camera": "禁用摄像头",
+    "share-a-screen-with-others": "与他人共享屏幕",
+    "create-a-secondary-stream": "创建次要流",
+    "share-a-website-as-an-embedded-iframe": "将网站共享为嵌入式 iFRAME",
+    "room-settings": "房间设置",
+    "your-audio-and-video-settings": "您的音频和视频设置",
+    "hangup-the-call": "挂断电话",
+    "alert-the-host-you-want-to-speak": "提醒您要发言的主持人",
+    "record-your-stream-to-disk": "将您的流记录到磁盘",
+    "you-can-also-enable-the-director-s-video-output-afterwards-by-clicking-the-setting-s-button": "您还可以在之后通过单击设置按钮启用导演的视频输出",
+    "cancel-the-director-s-video-audio": "取消导演的视频/音频",
+    "submit-any-error-logs": "提交任何错误日志",
+    "show-help-info": "显示帮助信息",
+    "language-options": "语言选项",
+    "add-to-calendar": "添加到日历",
+    "youtube-video-demoing-how-to-do-this": "Youtube 视频演示如何做到这一点",
+    "invite-a-guest-or-camera-source-to-publish-into-the-group-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": "使用 OBS 浏览器源中的此链接捕获视频或音频",
+    "if-disabled-you-must-manually-add-a-video-to-a-scene-for-it-to-appear-": "如果禁用，您必须手动将视频添加到场景中才能显示。",
+    "disables-echo-cancellation-and-improves-audio-quality": "禁用回声消除并提高音频质量",
+    "audio-only-sources-are-visually-hidden-from-scenes": "纯音频源在视觉上隐藏在场景中",
+    "allow-for-remote-stat-monitoring-via-the-monitoring-tool": "允许通过监控工具进行远程统计监控",
+    "the-guest-will-be-asked-if-they-want-to-reload-the-previous-link-when-revisiting": "重新访问时将询问客人是否要重新加载上一个链接",
+    "guest-will-be-prompted-to-enter-a-display-name": "将提示客人输入显示名称",
+    "display-names-will-be-shown-in-the-bottom-left-corner-of-videos": "显示名称将显示在视频的左下角",
+    "guests-not-actively-speaking-will-be-hidden": "不主动发言的客人将被隐藏",
+    "request-1080p60-from-the-guest-instead-of-720p60-if-possible": "如果可能，请从访客请求 1080p60 而不是 720p60",
+    "the-default-microphone-will-be-pre-selected-for-the-guest": "将为客人预先选择默认麦克风",
+    "the-default-camera-device-will-selected-automatically": "将自动选择默认相机设备",
+    "the-guest-won-t-have-access-to-changing-camera-settings-or-screenshare": "客人将无权更改相机设置或屏幕共享",
+    "the-guest-s-self-video-preview-will-appear-tiny-in-the-top-right": "客人的自拍视频预览将在右上角显示很小",
+    "allow-the-guests-to-pick-a-virtual-backscreen-effect": "允许客人选择虚拟背景幕效果",
+    "videos-use-an-animated-transition-when-being-remixed": "视频在重新混合时使用动画过渡",
+    "increase-video-quality-that-guests-in-room-see-": "提高客房客人看到的视频质量。",
+    "the-guest-will-not-see-their-own-self-preview-after-joining": "客人加入后将看不到自己的自我预览",
+    "guests-will-have-an-option-to-poke-the-director-by-pressing-a-button": "客人可以选择按一个按钮来戳导演",
+    "add-an-audio-compressor-to-the-guest-s-microphone": "为客人的麦克风添加音频压缩器",
+    "add-an-equalizer-to-the-guest-s-microphone-that-the-director-can-control": "为客人的麦克风添加一个导演可以控制的均衡器",
+    "show-some-prep-suggestions-to-the-guests-on-connect": "在 connect 上向客人显示一些准备建议",
+    "this-low-fi-video-codec-uses-very-little-cpu-even-with-dozens-of-active-viewers-": "这种低保真视频编解码器使用很少的 CPU，即使有几十个活跃的观众。",
+    "the-guest-can-only-see-the-director-s-video-if-provided": "客人只能看到导演的视频（如果提供）",
+    "the-guest-s-microphone-will-be-muted-on-joining-they-can-unmute-themselves-": "客人的麦克风将在加入时静音。他们可以自己取消静音。",
+    "have-the-guest-join-muted-so-only-the-director-can-unmute-the-guest-": "将客人加入静音，这样只有导演才能取消客人静音。",
+    "the-guest-will-not-be-asked-for-a-video-device-on-connection": "连接时不会要求客人提供视频设备",
+    "make-the-invite-url-encoded-so-parameters-are-harder-to-tinker-with-by-guests": "对邀请 URL 进行编码，这样来宾更难修改参数",
+    "the-active-speakers-are-made-visible-automatically": "活动扬声器自动可见",
+    "set-the-background-color-to-bright-green": "将背景颜色设置为亮绿色",
+    "fade-videos-in-over-500ms": "淡入淡出超过 500 毫秒的视频",
+    "add-a-10px-margin-around-all-video-elements": "在所有视频元素周围添加 10 像素的边距",
+    "playback-the-video-with-mono-channel-audio": "使用单声道音频播放视频",
+    "have-the-videos-fit-their-respective-areas-even-if-it-means-cropping-a-bit": "让视频适合各自的区域，即使这意味着裁剪一点",
+    "have-videos-be-aligned-with-sizing-designed-for-vertical-video": "让视频与专为垂直视频设计的尺寸对齐",
+    "copy-this-stream-id-to-the-clipboard": "将此流 ID 复制到剪贴板",
+    "click-here-to-edit-the-label-for-this-stream-changes-will-propagate-to-all-viewers-of-this-stream": "单击此处编辑此流的标签。更改将传播到此流的所有查看者",
+    "move-the-user-to-another-room-controlled-by-another-director": "将用户移动到另一个房间，由另一个导演控制",
+    "send-a-direct-message-to-this-user-": "向该用户发送私信。",
+    "force-the-user-to-disconnect-they-can-always-reconnect-": "强制用户断开连接。他们总是可以重新连接。",
+    "toggle-solo-voice-chat": "Toggle 单独语音聊天",
+    "add-this-video-to-any-remote-scene-1-": "将此视频添加到任何远程 '&场景=1'",
+    "mute-this-guest-everywhere": "到处都让这位客人静音",
+    "add-this-video-to-any-remote-scene-2-": "将此视频添加到任何远程“&场景=2”",
+    "remotely-mute-this-audio-in-all-remote-scene-views": "在所有远程“&场景”视图中远程静音此音频",
+    "add-to-scene-3": "添加到场景 3",
+    "add-to-scene-4": "添加到场景 4",
+    "add-to-scene-5": "添加到场景 5",
+    "add-to-scene-6": "添加到场景 6",
+    "add-to-scene-7": "添加到场景 7",
+    "add-to-scene-8": "添加到场景 8",
+    "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": "在任何活动场景中请求此视频的统计信息",
+    "solo-this-video-everywhere": "随处播放此视频",
+    "hide-this-guest-everywhere": "到处隐藏这位客人",
+    "toggle-the-remote-guest-s-speaker-output": "切换远程客人的扬声器输出",
+    "toggle-the-remote-guest-s-display-output": "切换远程访客的显示输出",
+    "shift-this-video-down-in-order": "按顺序向下移动此视频",
+    "current-index-order-of-this-video": "此视频的当前索引顺序",
+    "shift-this-video-up-in-order": "按顺序上移此视频",
+    "remotely-reload-the-guest-s-page-with-a-new-url": "使用新 URL 远程重新加载访客页面",
+    "change-user-parameters": "更改用户参数",
+    "start-recording-this-remote-stream-to-this-local-drive-experimental-": "开始将此远程流录制到此本地驱动器。 *实验性的*'",
+    "the-remote-guest-will-record-their-local-stream-to-their-local-drive-experimental-": "远程访客将他们的本地流记录到他们的本地驱动器。 *实验性*",
+    "remotely-change-the-volume-of-this-guest": "远程更改此客人的音量",
+    "disable-video-preview": "禁用视频预览",
+    "low-quality-preview": "低质量预览",
+    "high-quality-preview": "高质量预览",
+    "set-to-audio-channel-1": "设置为音频通道 1",
+    "set-to-audio-channel-2": "设置为音频通道 2",
+    "set-to-audio-channel-3": "设置为音频通道 3",
+    "set-to-audio-channel-4": "设置为音频通道 4",
+    "set-to-audio-channel-5": "设置为音频通道 5",
+    "set-to-audio-channel-6": "设置为音频通道 6",
+    "remote-audio-settings": "远程音频设置",
+    "advanced-video-settings": "高级视频设置",
+    "this-will-ask-the-remote-guest-for-permission-to-change": "这将要求远程来宾允许更改",
+    "a-direct-solo-view-of-the-video-audio-stream-with-nothing-else-its-audio-can-be-remotely-controlled-from-here": "视频/音频流的直接独奏视图，没有别的。它的音频可以从这里远程控制",
+    "this-guest-raised-their-hand-click-this-to-clear-notification-": "这位客人举手了。单击此按钮可清除通知。",
+    "add-to-scene-2": "添加到场景 2",
+    "activate-or-reload-this-video-device-": "激活或重新加载此视频设备。",
+    "tip-hold-ctrl-command-to-select-multiple": "提示：按住 CTRL（命令）选择多个",
+    "improve-performance-and-quality-with-this-tip": "使用此技巧提高性能和质量",
+    "increase-this-at-your-peril-changes-the-total-inbound-video-bitrate-per-guest-mobile-devices-excluded-webp-mode-also-excluded-": "增加这一点会带来危险。更改每位访客的总入站视频比特率；移动设备除外。 Webp 模式也排除在外。",
+    "cannot-see-videos": "看不到视频",
+    "cannot-hear-others": "听不见别人",
+    "see-director-only": "只见导演",
+    "show-mini-preview": "显示迷你预览",
+    "raise-hand-button": "举手按钮",
+    "show-labels": "显示标签",
+    "transfer-to-a-new-room": "转移到新房间",
+    "enable-custom-password": "启用自定义密码",
+    "hide-this-window": "隐藏此窗口",
+    "cycle-the-cameras": "这将要求远程客人允许更改7",
+    "add-group-chat-to-obs": "这将要求远程客人允许更改8",
+    "for-large-group-rooms-this-option-can-reduce-the-load-on-remote-guests-substantially": "对于大型团体房间，此选项可以大大减轻远程客人的负担】【导演将在场景中可见，就像表演者本人一样。】【如果你想同时表演和导演很有用】【哪个视频默认情况下，您希望使用编解码器吗？",
+    "the-director-will-be-visible-in-scenes-as-if-a-performer-themselves-": "您将作为房间的主管进入",
+    "useful-if-you-want-to-perform-and-direct-at-the-same-time": "添加您的相机",
+    "which-video-codec-would-you-want-used-by-default-": "开始流式传输",
+    "you-ll-enter-as-the-room-s-director": "远程屏幕共享",
+    "add-your-camera-to-obs": "创建可重复使用的邀请",
+    "start-streaming": "非常适合 1080p60 游戏，如果您的计算机和上传都已启动为此",
+    "remote-screenshare-into-obs": "以增加 CPU 编码负载为代价获得更好的视频压缩和质量",
+    "create-reusable-invite": "禁用数字音频效果并提高音频比特率",
+    "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": "您将作为房间的主管进入0",
+    "disable-digital-audio-effects-and-increase-audio-bitrate": "您将作为房间的主管进入1",
+    "the-guest-will-not-have-a-choice-over-audio-options": "您将作为房间的主管进入2",
+    "the-guest-will-only-be-able-to-select-their-webcam-as-an-option": "您将作为房间的主管进入3",
+    "hold-ctrl-and-the-mouse-wheel-to-zoom-in-and-out-remotely-of-compatible-video-streams": "您将作为房间的主管进入4",
+    "encode-the-url-so-that-it-s-harder-for-a-guest-to-modify-the-settings-": "您将作为房间的主管进入5",
+    "add-a-password-to-make-the-stream-inaccessible-to-those-without-the-password": "您将作为房间的主管进入6",
+    "add-the-guest-to-a-group-chat-room-it-will-be-created-automatically-if-needed-": "您将作为房间的主管进入7",
+    "customize-the-room-settings-for-this-guest": "您将作为房间的主管进入8",
+    "more-options": "更多选项",
+    "hold-ctrl-or-cmd-to-select-multiple-files": "按住 CTRL（或 CMD）选择多个文件",
+    "enter-an-https-url": "输入 HTTPS URL",
+    "creative-commons-by-3-0": "知识共享 3.0",
+    "have-screen-shares-stream-id-s-use-a-predictable-prefixed-value-instead-of-a-random-one-": "屏幕共享流 ID 使用可预测的前缀值而不是随机值。",
+    "toggle-solo-voice-chat-or-hold-ctrl-cmd-when-selecting-to-make-it-two-way-private-": "切换独奏语音聊天或在选择将其设为双向私密时按住 CTRL/CMD。",
+    "transfer-any-file-to-the-group": "Transfer any file to the group",
+    "transfer-any-file": "Transfer any file",
+    "the-camera-will-load-in-a-default-safe-mode-that-may-work-if-other-modes-fail-": "相机将以默认安全模式加载，如果其他模式失败，该模式可能会工作.",
+    "disable-animated-transitions-during-video-mixing": "在视频混合期间禁用动画过渡",
+    "allow-the-guest-to-select-a-file-to-upload-to-the-director-once-shared-it-will-show-in-the-chat-as-a-download-link-": "允许来宾选择要上传给导演的文件。分享后，它将在聊天中显示为下载链接.",
+    "set-a-countdown-timer-that-this-guest-sees": "设置此客人看到的倒数计时器",
+    "enter-a-room-name-to-quick-join": "Enter a room name to quick join"
+  },
+  "innerHTML": {
+    "copy-this-url": "将此 URL 复制到 OBS“浏览器源”中",
+    "you-are-in-the-control-center": "房间控制中心：",
+    "joining-room": "你在房间",
+    "push-to-talk-enable": " 启用导演的麦克风或视频<br>（只有客人才能看到此提要）",
+    "hide-the-links": " 链接（参会者邀请和场景）",
+    "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\">单击此处获取快速概览和帮助</span>\n\t\t\t\t\t",
+    "click-here-for-help": "单击此处获取快速概览和帮助",
+    "welcome-to-control-room": "\n\t\t\t\t\t\t<b>欢迎。这是群聊的主管控制室。</b><br><br>\n\t\t\t\t\t\t您可以使用房间与朋友进行群聊。分享蓝色链接以邀请将自动加入聊天的客人。\n\t\t\t\t\t\t<br><br>\n\t\t\t\t\t\t<font style=\"color:red\">群组聊天室的已知限制：</font><br>\n\t\t\t\t\t\t<li>一个团体房间最多可容纳约 30 位客人，具体取决于多种因素，包括房间内所有客人的 CPU 和可用带宽。不过，要达到超过 7 位客人的人数，您可能需要 <a href=\"https://www.youtube.com/watch?v=bpRa8-UYCGc\" title=\"\nYoutube 视频演示如何做到这一点\">禁用客人之间的视频共享</a>使用 &amp;broadcast、&amp;roombitrate=0 或 &amp;novideo 是那里的选项。</li>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<li>视频会故意为客人和导演呈现低质量的视频；这是为了节省带宽和CPU资源。尽管如此，它在 OBS 中仍然是高质量的。</li>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<li>当导演重置控制室或场景时，场景状态（例如场景中哪些视频处于活动状态）将丢失。</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t补充说明：<br><br>\n\t\t\t\t\t\t<li>每个访客视频的单独观看链接在视频加载时提供。这些可以在 OBS 浏览器源中使用。</li>\n\t\t\t\t\t\t<li>您可以使用自动混合组场景（绿色链接）在 OBS 中为您自动排列多个视频。</li>\n\t\t\t\t\t\t<li>您可以使用此控制室来录制隔离的视频或音频流，但它仍然是一项实验性功能。</li>\n\t\t\t\t\t\t<li>如果您将客人从一个房间转移到另一个房间，他们将不知道他们被转移到哪个房间。</li>\n\t\t\t\t\t\t<li>OBS 将看到客人的高质量视频；默认视频比特率为 2500kbps。设置更高的比特率将改善运动。</li>\n\t\t\t\t\t\t<li>VP8 通常是默认的视频编解码器，但在 OBS 中使用 &amp;codec=vp9 或 &amp;codec=h264 作为 URL 可以帮助减少损坏的视频呕吐问题</li>\n\t\t\t\t\t\t<li>&amp;stereo=2 可以添加到guests 以关闭音频效果，例如回声消除和降噪。</li>\n\t\t\t\t\t\t<li>https://invite.cam 是一项免费服务，可以帮助混淆提供给客人的邀请链接的 URL 参数。</li>\n\t\t\t\t\t\t<li>S Virtual Camera for exampl</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\n\t\t\t\t\t\t对于高级 URL 选项和参数，<a href=\"https://docs.vdo.ninja/advanced-settings\">查看WIKI</a>\n\t\t\t\t\t",
+    "invite-users-to-join": "客人可以使用链接加入团体房间",
+    "guests-hear-others": "客人听到别人的声音",
+    "capture-a-group-scene": "拍摄集体场景",
+    "this-is-obs-browser-source-link": "在 OBS 或其他演播室软件中使用以捕捉群组视频混音",
+    "auto-add-guests": "自动添加客人",
+    "pro-audio-mode": "专业音频模式",
+    "hide-audio-only-sources": "隐藏纯音频源",
+    "remote-monitoring": "邀请已保存到 cookie",
+    "invite-saved-to-cookie": "邀请保存到 cookie",
+    "ask-for-display-name": "要求显示名称",
+    "show-display-names": "显示显示名称",
+    "show-active-speaker": "显示当前发言者",
+    "auto-select-microphone": "自动选择默认麦克风",
+    "auto-select-camera": "自动选择默认相机",
+    "hide-setting-buttons": "隐藏设置按钮",
+    "mini-self-preview": "迷你自我预览",
+    "virtual-backgrounds": "虚拟背景",
+    "fade-videos-in": "淡入淡出视频",
+    "guests-see-HD-video": "参会者观看高清视频",
+    "no-self-preview": "禁用个人预览",
+    "raise-hand-button": "举手按钮",
+    "enable-compressor": "启用压缩机",
+    "enable-equalizer": "启用均衡器",
+    "show-guest-tips": "显示客人提示",
+    "low-cpu=broadcast-codec": "低CPU编码",
+    "only-see-director-feed": "只看导演提要",
+    "fill-video-space": "裁剪视频以适合",
+    "vertical-aspect-ratio": "竖屏视频模式",
+    "learn-more-about-params": "了解更多参数 ",
+    "forward-to-room": "转移",
+    "send-direct-chat": "<i class=\"las la-envelope\"></i> 信息",
+    "disconnect-guest": "挂断",
+    "voice-chat": "<i class=\"las la-microphone\" style=\"color:#090\"></i> 独奏",
+    "add-to-scene": "添加到场景1",
+    "mute-guest": "静音客人",
+    "More-scene-options": "更多场景选择",
+    "add-to-scene2": "添加到场景2",
+    "mute-scene": "现场静音",
+    "force-keyframe": "像素拖尾修复",
+    "stats-remote": " 场景统计",
+    "additional-controls": "附加控件",
+    "solo-video": "突出客人",
+    "hide-guest": "隐藏客人",
+    "toggle-remote-speaker": "静音客人",
+    "toggle-remote-display": "切换摄像头显示",
+    "order-down": "<i class=\"las la-minus\"></i>",
+    "order-up": "<i class=\"las la-plus\"></i>",
+    "change-url": "更改链接地址",
+    "change-params": "网址参数",
+    "record-local": "本地录制",
+    "record-remote": "访客录制",
+    "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>",
+    "advanced-audio-settings": "<i class=\"las la-sliders-h\"></i> 音频设置",
+    "advanced-camera-settings": "<i class=\"las la-sliders-h\"></i> 视频设置",
+    "user-raised-hand": "手放下",
+    "unmute": "取消静音",
+    "unhide-guest": "取消隐藏",
+    "undeafen": "开启声音",
+    "unblind": "开启视频",
+    "close": "关闭",
+    "send-message": "发送信息<s pan=\"\"> </s>",
+    "record-director-local": " 记录",
+    "video-source": " 视频源 ",
+    "max-resolution": "最大分辨率",
+    "balanced": "均衡",
+    "smooth-cool": "流畅顺滑",
+    "select-audio-source": " 音频源(s) ",
+    "select-output-source": " 音频输出目的地: ",
+    "select-digital-effect": " 数字视频效果: ",
+    "no-effects-applied": "没有应用效果",
+    "blurred-background": "模糊背景",
+    "digital-greenscreen": "数字绿幕",
+    "virtual-background": "虚拟背景",
+    "select-local-image": "选择本地图片",
+    "close-settings": "关闭设置",
+    "advanced": "先进的 ",
+    "open-in-new-tab": "在新标签页中打开",
+    "copy-to-clipboard": "复制到剪贴板",
+    "send-chat": "发送",
+    "apply-new-guest-settings": "应用设置",
+    "cancel": "取消",
+    "invisible-guests": "不可见",
+    "available-languages": "可用语言:",
+    "add-more-here": "添加更多!",
+    "add-to-calendar": "添加到日历:",
+    "add-to-google-calendar": "添加到谷歌日历",
+    "add-to-outlook-calendar": "添加到outlook日历",
+    "add-to-yahoo-calendar": "添加到雅虎日历",
+    "logo-header": "\n\t\t\t\t\t<font id=\"qos\">V</font>DO.Ninja \n\t\t\t\t",
+    "only-director-can-hear-you": "目前只有导演能听到你的声音.",
+    "director-muted-you": "导演把你静音了.",
+    "add-group-chat": "创建房间",
+    "rooms-allow-for": "房间允许群聊和管理多个客人的工具。",
+    "room-name": "房间名称",
+    "password-input-field": "密码",
+    "guests-only-see-director": "客人只能看到导演的视频",
+    "scenes-can-see-director": "导演也将是表演者",
+    "default-codec-select": "首选视频编解码器:  ",
+    "enter-the-rooms-control": "进入房间的控制中心",
+    "show-tips": "告诉我一些提示..",
+    "added-notes": "\n\t\t\t\t\t\t\t\t<u>\n\t\t\t\t\t\t\t\t\t<i>Important Tips:</i><br><br>\n\t\t\t\t\t\t\t\t</u>\n\t\t\t\t\t\t\t\t<li>Disabling video sharing between guests will improve performance</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>The \"Recording\" option is considered experimental.</li>\n\t\t\t\t\t\t\t\t<li><a href=\"https://params.vdo.ninja\" style=\"color:black;\"><u>Advanced URL parameters</u></a> are available to customize rooms.</li>\n\t\t\t\t\t\t\t",
+    "back": "后退",
+    "add-your-camera": "添加您的相机",
+    "ask-for-permissions": "允许访问相机和麦克风",
+    "waiting-for-camera": "等待相机加载",
+    "no-audio": "无音频",
+    "add-a-password": " 添加密码:",
+    "use-chrome-instead": "考虑改用基于 Chromium 的浏览器.<br>\n \t\t\t\t\t\tSafari 更容易出现音频问题",
+    "remote-screenshare-obs": "远程屏幕共享",
+    "select-screen-to-share": "选择要分享的屏幕",
+    "audio-sources": "音频源",
+    "application-audio-capture": "有关特定于应用程序的音频捕获, <a href=\"https://docs.vdo.ninja/audio\" style=\"color: #007AC8;\">请参见此处</a>",
+    "create-reusable-invite": "创建可重复使用的邀请",
+    "here-you-can-pre-generate": "在这里你可以预先生成一个可重用的浏览器源链接和相关的访客邀请链接.",
+    "generate-invite-link": "生成邀请链接",
+    "advanced-paramaters": "高级选项",
+    "unlock-video-bitrate": "解锁视频比特率  (20mbps)",
+    "force-vp9-video-codec": "强制 VP9 视频编解码器",
+    "enable-stereo-and-pro": "启用立体声和专业高清音频",
+    "video-resolution": "视频分辨率: ",
+    "hide-mic-selection": "强制默认麦克风",
+    "hide-screen-share": "隐藏屏幕共享选项",
+    "allow-remote-control": "遥控相机变焦 (android)",
+    "obfuscate_url": "混淆邀请 URL",
+    "add-a-password-to-stream": " 添加密码:",
+    "add-the-guest-to-a-room": " 将客人添加到房间:",
+    "invite-group-chat-type": "这个房间的客人可以:",
+    "can-see-and-hear": "可以看到和听到群聊",
+    "can-hear-only": "只能听到群聊",
+    "cant-see-or-hear": "无法听到或看到群聊",
+    "share-local-video-file": "流媒体文件",
+    "select-the-video-files-to-share": "选择要共享的视频文件",
+    "share-website-iframe": "分享网站",
+    "enter-the-website-URL-you-wish-to-share": "输入您要分享的网址.",
+    "run-a-speed-test": "运行速度测试",
+    "read-the-guides": "浏览指南",
+    "info-blob": "",
+    "animate-mixing": "动画混合",
+    "prefix-screenshare": "前缀屏幕共享 ID",
+    "more-than-four-can-join": "这四个来宾插槽仅用于演示。超过四位客人实际上可以加入一个房间。",
+    "welcome-to-obs-ninja-chat": "\n\t\t\t\t\t欢迎！您可以从这里直接向连接的对等方发送短信.\n\t\t\t\t",
+    "privacy-disabled": "隐私警告：如果您继续，导演将能够远程访问您的摄像头和麦克风.",
+    "face-mesh": "面网 (slow load)",
+    "anonymous-mask": "匿名面具",
+    "dog-face": "狗耳朵和鼻子",
+    "compatibility-mode": "兼容模式",
+    "disable-animated-mixing": "禁用动画",
+    "powerful-computers-only": "仅用于功能强大的计算机和小组！！",
+    "mute-microphone-by-default": "默认麦克风静音",
+    "unmute-by-director-only": "只允许导演取消静音",
+    "guest-joins-with-no-camera": "客人无需摄像头即可加入",
+    "obfuscate-link": "加密链接和参数",
+    "this-can-reduce-packet-loss": "减少视频丢包",
+    "use-h264-codec": "使用H264编码",
+    "show-active-speakers": "显示当前发言者",
+    "green-background": "绿色背景",
+    "add-margin": "添加视频边框",
+    "force-mono-audio": "强制单声道音频",
+    "request-upload": " 请求文件",
+    "create-timer": "创建计时器",
+    "edit-url": "手动编辑网址",
+    "mirror-video": "镜子",
+    "toggle-control-video": "切换控制栏",
+    "picture-in-picture": "画中画",
+    "chrome-cast": "Cast..",
+    "join-room": "Join room",
+    "join-room-with-mic": "Join room with Microphone",
+    "join-room-with-camera": "Join Room with Camera",
+    "share-screen-with-room": "Screenshare with Room",
+    "share-your-mic": "Share your Microphone",
+    "share-your-camera": "Share your Camera",
+    "share-your-screen": "Share your Screen",
+    "click-start-to-join": "Click Start to Join",
+    "waiting-for-mic-to-load": "Waiting for mic to load",
+    "waiting-for-camera-to-load": "Waiting for Camera to load"
+  },
+  "placeholders": {
+    "join-by-room-name-here": "用房间名称加入",
+    "enter-your-message-here": "在此输入你的消息",
+    "enter-chat-message-to-send-here": "在此处输入要发送的聊天消息",
+    "enter-the-room-name-here": "在此输入房间名称",
+    "enter-the-room-password-here": "在此输入房间密码",
+    "enter-a-room-name-here": "在此处输入房间名称",
+    "optional-room-password-here": "可选房间密码在这里",
+    "optional": "可选的",
+    "give-this-media-source-a-name-optional-": "为该媒体源命名 (optional)",
+    "add-an-optional-password": "添加可选密码",
+    "enter-room-name-here": "在此处输入房间名称"
+  },
+  "miscellaneous": {
+    "start": "开始",
+    "new-display-name": "为流输入新的显示名称",
+    "submit-error-report": "按 OK 将错误日志提交到 VDO.Ninja。错误日志可能包含私人信息.",
+    "director-redirect-1": "主管希望将您重定向到以下链接: ",
+    "director-redirect-2": "\n\n按确定重定向.",
+    "add-a-label": "添加标签",
+    "audio-processing-disabled": "此访客禁用音频处理。无法静音或更改音量",
+    "not-the-director": "<font color='red'>你不是这个房间的管理员。无法控制房间。你可以在第一个管理员离开后尝试认领房间.</font>",
+    "room-is-claimed": "房间管理权限已移交他人.\n\n只有第一个加入房间的人是指定的管理员.\n\n第一个管理员离开后刷新.",
+    "room-is-claimed-codirector": "The room is already claimed by someone else.\n\nTrying to join as a co-director...",
+    "streamid-already-published": "您要发布的流地址已经被使用.\n\n请尝试使用其他邀请链接或刷新以重试.\n\n您现在将被断开连接.",
+    "director": "导向器",
+    "unknown-user": "未知用户",
+    "room-test-not-good": "房间命名为test非常常用可能不安全.\n\n您确定要继续吗?",
+    "load-previous-session": "您想加载上一个对话的设置吗?",
+    "enter-password": "请在下方输入密码: \n\n(注意：密码区分大小写，如果不正确，您将不会收到警告.)",
+    "enter-password-2": "请在下方输入密码: \n\n(注意：密码区分大小写.)",
+    "enter-director-password": "Please enter the director's password:\n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "password-incorrect": "密码不正确.\n\n请刷新并重试.",
+    "enter-display-name": "请输入您的显示名称:",
+    "enter-new-display-name": "为此流创建一个新名称",
+    "what-bitrate": "您想以什么码率录制? (kbps)",
+    "enter-website": "输入要共享的网站链接",
+    "press-ok-to-record": "按确定键开始录制. 再次按下会停止并下载.\n\n警告：保持此浏览器选项卡处于活动状态以继续录制.\n\n如果需要，您可以在下面更改默认视频比特率 (kbps)",
+    "no-streamID-provided": "未提供流地址; 一个将随机生成.\n\n流地址: ",
+    "alphanumeric-only": "提示：流地址只能使用字母数字字符.\n\n违规字符已替换为下划线",
+    "stream-id-too-long": "流 ID 的长度应少于45个数字或字母符号.\n\n我们将它修剪到一定长度.",
+    "share-with-trusted": "只与您信任的人分享",
+    "pass-recommended": "建议设置密码",
+    "insecure-room-name": "不安全的房间名称.",
+    "allowed-chars": "允许的字符",
+    "transfer": "转移",
+    "armed": "武装",
+    "transfer-guest-to-room": "转移客人到房间：\n\n（请注意房间必须共享相同的密码）",
+    "transfer-guest-to-url": "将客人转移到新的网站 URL。\n\n（会提示客人接受）",
+    "change-url": "更改网址",
+    "mute-in-scene": "现场静音",
+    "unmute-guest": "取消静音客人",
+    "undeafen": "非聋哑人",
+    "deafen": "聋哑人",
+    "unblind": "非盲人",
+    "blind": "盲人",
+    "unmute": "取消静音",
+    "mute-guest": "静音客人",
+    "unhide": "取消隐藏客人",
+    "hide-guest": "隐藏客人",
+    "confirm-disconnect-users": "您确定要断开这些用户的连接吗？",
+    "confirm-disconnect-user": "您确定要断开此用户的连接吗？"
+  }
+}

convert.html

@@ -0,0 +1,235 @@
+<head>
+	<link rel="stylesheet" href="./main.css?ver=40" />
+	<style>
+		.container {
+			max-width: 80%;
+			width: fit-content;
+			margin: 0 auto;
+		}
+
+		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>WebM to 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 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 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>
+      if (window.location.hostname.indexOf("vdo.ninja") == 0) {
+        window.location = window.location.href.replace("vdo.ninja","isolated.vdo.ninja"); // FFMPEG requires an isolated domain.
+      }
+    </script>
+
+		<script src="./thirdparty/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>

cs.json

@@ -0,0 +1,425 @@
+{
+  "titles": {
+    "toggle-the-chat": "Vypnout/zapnout chat",
+    "mute-the-speaker": "Vypnout mikrofon mluvčího",
+    "mute-the-mic": "Vypnout mikrofon",
+    "disable-the-camera": "Vypnout kameru",
+    "settings": "Nastavení",
+    "hangup-the-call": "Zavěsit hovor",
+    "show-help-info": "Zobrazit menu pomoci",
+    "language-options": "Jazyková nastavení",
+    "tip-hold-ctrl-command-to-select-multiple": "tip: Podržte Ctrl (command), abyste vybrali více najednou",
+    "ideal-for-1080p60-gaming-if-your-computer-and-upload-are-up-for-it": "Ideální pro 1080p60 gaming, pokud vám na to vystačí prostředky počítače",
+    "better-video-compression-and-quality-at-the-cost-of-increased-cpu-encoding-load": "Lepší komprese videa a kvalita za cenu vyšší zátěže procesoru",
+    "disable-digital-audio-effects-and-increase-audio-bitrate": "Zakázat digitální zvukové efekty a zvýšit přenosovou rychlost zvuku",
+    "the-guest-will-not-have-a-choice-over-audio-options": "Host nebude mít na výběr z možností zvuku",
+    "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": "Podržte CTRL a kolečko myši pro vzdálené přiblížení a oddálení kompatibilních video streamů",
+    "add-a-password-to-make-the-stream-inaccessible-to-those-without-the-password": "Přidejte heslo, aby nebyl stream přístupný pro ty, kteří nemají heslo",
+    "add-the-guest-to-a-group-chat-room-it-will-be-created-automatically-if-needed-": "Přidejte hosta do skupinové chatovací místnosti; v případě potřeby se vytvoří automaticky.",
+    "customize-the-room-settings-for-this-guest": "Upravte nastavení místnosti pro tohoto hosta",
+    "hold-ctrl-or-cmd-to-select-multiple-files": "Podržením klávesy CTRL (nebo CMD) vyberte více souborů",
+    "enter-an-https-url": "Zadejte URL s HTTPS",
+    "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-": "Přidejte toto video k jakémukoliv cílovému rozhraní '&scene=1'",
+    "forward-user-to-another-room-they-can-always-return-": "Přesměrujte uživatele na jiný room. Uživatel se může kdykoliv vrátit.",
+    "start-recording-this-stream-experimental-views": "Začít nahrávat tento stream. *experimentální*'",
+    "force-the-user-to-disconnect-they-can-always-reconnect-": "Odpojit tohoto uživatele. Uživatel se může kdykoliv připojit zpět.",
+    "change-this-audio-s-volume-in-all-remote-scene-views": "Změnit toto audio ve všech cílových '&scene' pohledech.",
+    "remotely-mute-this-audio-in-all-remote-scene-views": "Vzdáleně zlumit toto audio ve všech cílových '&scene' pohledech.",
+    "disable-video-preview": "Vypnout náhled videa",
+    "low-quality-preview": "Náhled videa v nízké kvalitě",
+    "high-quality-preview": "Náhled videa ve vysoké kvalitě",
+    "send-direct-message": "Poslat přímou zprávu",
+    "advanced-settings-and-remote-control": "Pokročilá nastavení a vzálené ovládání",
+    "toggle-voice-chat-with-this-guest": "Vypnout/zapnout voice chat tohoto hosta ",
+    "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",
+    "create-reusable-invite": "Create Reusable Invite",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "toggle-solo-voice-chat": "Toggle Solo Voice Chat",
+    "add-to-scene-2": "Add to Scene 2",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "share-a-website-as-an-embedded-iframe": "Share a website as an embedded iFRAME",
+    "room-settings": "Room Settings",
+    "your-audio-and-video-settings": "Your audio and video Settings",
+    "you-can-also-enable-the-director-s-video-output-afterwards-by-clicking-the-setting-s-button": "You can also enable the director`s Video Output afterwards by clicking the Setting`s button",
+    "allow-for-remote-stat-monitoring-via-the-monitoring-tool": "Allow for remote stat monitoring via the monitoring tool",
+    "the-guest-will-be-asked-if-they-want-to-reload-the-previous-link-when-revisiting": "The guest will be asked if they want to reload the previous link when revisiting",
+    "the-guest-s-self-video-preview-will-appear-tiny-in-the-top-right": "The guest's self-video preview will appear tiny in the top right",
+    "videos-use-an-animated-transition-when-being-remixed": "Videos use an animated transition when being remixed",
+    "show-some-prep-suggestions-to-the-guests-on-connect": "Show some prep suggestions to the guests on connect",
+    "set-the-background-color-to-bright-green": "Set the background color to bright green",
+    "fade-videos-in-over-500ms": "Fade videos in over 500ms",
+    "add-a-10px-margin-around-all-video-elements": "Add a 10px margin around all video elements",
+    "playback-the-video-with-mono-channel-audio": "Playback the video with mono-channel audio",
+    "have-the-videos-fit-their-respective-areas-even-if-it-means-cropping-a-bit": "Have the videos fit their respective areas, even if it means cropping a bit",
+    "have-videos-be-aligned-with-sizing-designed-for-vertical-video": "Have videos be aligned with sizing designed for vertical video",
+    "copy-this-stream-id-to-the-clipboard": "Copy this Stream ID to the clipboard",
+    "click-here-to-edit-the-label-for-this-stream-changes-will-propagate-to-all-viewers-of-this-stream": "Click here to edit the label for this stream. Changes will propagate to all viewers of this stream",
+    "this-will-ask-the-remote-guest-for-permission-to-change": "This will ask the remote guest for permission to change",
+    "a-direct-solo-view-of-the-video-audio-stream-with-nothing-else-its-audio-can-be-remotely-controlled-from-here": "A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here",
+    "this-guest-raised-their-hand-click-this-to-clear-notification-": "This guest raised their hand. Click this to clear notification.",
+    "increase-this-at-your-peril-changes-the-total-inbound-video-bitrate-per-guest-mobile-devices-excluded-webp-mode-also-excluded-": "Increase this at your peril. Changes the total inbound video bitrate per guest; mobile devices excluded. Webp-mode also excluded.",
+    "hide-this-window": "Hide this window",
+    "cycle-the-cameras": "Cycle the Cameras",
+    "have-screen-shares-stream-id-s-use-a-predictable-prefixed-value-instead-of-a-random-one-": "Have screen-shares stream ID's use a predictable prefixed value instead of a random one.",
+    "toggle-solo-voice-chat-or-hold-ctrl-cmd-when-selecting-to-make-it-two-way-private-": "Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private.",
+    "transfer-any-file-to-the-group": "Transfer any file to the group",
+    "transfer-any-file": "Transfer any file",
+    "the-camera-will-load-in-a-default-safe-mode-that-may-work-if-other-modes-fail-": "The camera will load in a default safe-mode that may work if other modes fail.",
+    "disable-animated-transitions-during-video-mixing": "Disable animated transitions during video mixing",
+    "allow-the-guest-to-select-a-file-to-upload-to-the-director-once-shared-it-will-show-in-the-chat-as-a-download-link-": "Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link.",
+    "set-a-countdown-timer-that-this-guest-sees": "Set a countdown timer that this guest sees",
+    "enter-a-room-name-to-quick-join": "Enter a room name to quick join"
+  },
+  "innerHTML": {
+    "logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
+    "copy-this-url": "Zkopírujte tuhle URL do OBS \"Browser Source\"",
+    "you-are-in-the-control-center": "Jsi v administraci místnosti",
+    "joining-room": "Připojujete se",
+    "add-group-chat": "Přidat skupinový chat OBS",
+    "rooms-allow-for": "Místnosti umožnůjí jednoduchý skupinový chat a pokročilou správu více streamů zároveň.",
+    "room-name": "Jméno místnost",
+    "password-input-field": "Heslo",
+    "enter-the-rooms-control": "Vstoupit do administrace místnosti",
+    "show-tips": "Zobrazit tipy..",
+    "added-notes": "\n\t\t\t\t<u><i>Poznámka:</i></u>\n\t\t\t\t<li>Kdokoliv se může připojit, když zná jméno místnosti</li>\n\t\t\t\t<li>Není doporučeno mít v místnosti víc než 4 lidi kvůli náročnosti na Váš počítač, ale za zkoušku nic nedáte.</li>\n\t\t\t\t<li>iOS zařízení jsou omezena pouze na dva účastníky. Toto omezení je způsobeno Applem.</li>\n\t\t\t\t<li> \"Nahrávat\" je nová a EXPERIMENTÁLNÍ funkce.</li>\n\t\t\t\t<li>Musíte \"Přidat\" zdroj video do \"Skupinová scéna\" aby se tu zobrazil.</li>\n\t\t\t\t<li>Tady je nové \"vylepšený fullscreen\" tlačítko přidané pro hostitele.</li>\n\t\t\t\t",
+    "back": "Zpět",
+    "add-your-camera": "Přidat kameru do OBS",
+    "ask-for-permissions": "Allow Access to Camera/Microphone",
+    "waiting-for-camera": "Čekám na načtení kamery",
+    "video-source": "Video zdroj",
+    "max-resolution": "MAX rozlišení",
+    "balanced": "Vyrovnaný",
+    "smooth-cool": "Super a Cool",
+    "select-audio-source": "Zvolit zdroj Audia",
+    "no-audio": "Žádné Audio",
+    "select-output-source": " Audio výstup: \n\t\t\t\t\t",
+    "remote-screenshare-obs": "Vzdálené sdílení obrazovky do OBS",
+    "note-share-audio": "\n\t\t\t\t\t<b>poznámka</b>: Nezapomeňte zakliknout \"Sdílet audio\" v Chromu.<br>(Firefox nepodporuje sdílení zvuku.)",
+    "select-screen-to-share": "VYBRAT OBRAZOVKU KE SDÍLENÍ",
+    "audio-sources": "Audio zdroje",
+    "create-reusable-invite": "Vytvořit pozvánku na více použití",
+    "here-you-can-pre-generate": "Zde můžete generovat linky do OBS i pozvánky na více použití.",
+    "generate-invite-link": "GENEROVAT POZVÁNKU",
+    "advanced-paramaters": "Pokročilé nastavení",
+    "unlock-video-bitrate": "Rozvolnit limit Video Bitrate (20mbps)",
+    "force-vp9-video-codec": "Vynutit VP9 Video Codec (méně artefaktů)",
+    "enable-stereo-and-pro": "Povolit Stereo a Pro HD Audio",
+    "video-resolution": "Rozlišení videa: ",
+    "hide-mic-selection": "Vynutit výchozí mikrofon",
+    "hide-screen-share": "Nezobrazovat možnost sdílet obrazovku",
+    "allow-remote-control": "Vzdálené ovládání přiblížení (android)",
+    "add-a-password-to-stream": " Přidat heslo:",
+    "add-the-guest-to-a-room": " Přidat hosta do místosti:",
+    "invite-group-chat-type": "Člen této místnosti může:",
+    "can-see-and-hear": "Slyšet a vidět ostatní členy",
+    "can-hear-only": "Pouze slyšet ostatní členy",
+    "cant-see-or-hear": "Neslyšet ani nevidět ostatní členy",
+    "share-local-video-file": "Streamovat mediální soubor",
+    "share-website-iframe": "Sdílet webovou stránku",
+    "run-a-speed-test": "Zapnout speed test",
+    "read-the-guides": "Procházejte průvodce",
+    "info-blob": "\n\t\t\t\t\t\t<h2>Co je OBS.Ninja</h2><br>\n\t\t\t\t\t\t<li>100% <b>zdarma</b>; bez stahování; žádné osobní data; bez přihlašování</li>\n\t\t\t\t\t\t<li>Sdílejte video ze smartphonu, laptopu, počítače či svých kamarádů přímo do OBSka</li>\n\t\t\t\t\t\t<li>Používáme nejmodernější Peer-to-Peer forwarding technologii, která zaručuje bezpečnost a minimální lag</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</a> </li>",
+    "add-to-scene": "Add to Scene",
+    "forward-to-room": "Transfer",
+    "record": "Nahrávat",
+    "disconnect-guest": "Hangup",
+    "mute": "Ztišit",
+    "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> Chatovat",
+    "advanced-camera-settings": "<i class=\"las la-cog\"></i> Pokročilé",
+    "voice-chat": "<i class=\"las la-microphone\"></i> Voice Chat",
+    "open-in-new-tab": "Otevřít v nové záložce",
+    "copy-to-clipboard": "Kopírovat do schránky",
+    "click-for-quick-room-overview": "❔ Klidni zde pro krátký přehled o funkcích",
+    "push-to-talk-enable": "🔊 Povolit administrátorovi Push-to-Talk mód",
+    "welcome-to-control-room": "Welcome. This is the control-room for the group-chat. There are different things you can use this room for:<br><br>\t<li>You can host a group chat with friends using a room. Share the blue link to invite guests who will join the chat automatically.</li>\t<li>A group room can handle around 4 to 30 guests, depending on numerous factors, including CPU and available bandwidth of all guests in the room.</li>\t<li>Solo-views of each video are offered under videos as they load. These can be used within an OBS Browser Source.</li>\t<li>You can use the auto-mixing Group Scene, the green link, to auto arrange multiple videos for you in OBS.</li>\t<li>You can use this control room to record isolated video or audio streams, but it is an experimental feature still.</li>\t<li>Videos in the Director's room will be of low quality on purpose; to save bandwidth/CPU</li>\t<li>Guest's in the room will see each other's videos at a very limited quality to conserve bandwidth/CPU.</li>\t<li>OBS will see a guest's video in high-quality; the default video bitrate is 2500kbps.</li>\t<br>\tAs guests join, their videos will appear below. You can bring their video streams into OBS as solo-scenes or you can add them to the Group Scene.\t<br>The Group Scene auto-mixes videos that have been added to the group scene. Please note that the Auto-Mixer requires guests be manually added to it for them to appear in it; they are not added automatically.<br><br>Apple mobile devices, such as iPhones and iPads, do not fully support Video Group Chat. This is a hardware constraint.<br><br>\tFor advanced options and parameters, <a href=\"https://github.com/steveseguin/obsninja/wiki/Guides-and-How-to's#urlparameters\">see the Wiki.</a>",
+    "more-than-four-can-join": "Tyto čtyři sloty pro hosty slouží pouze k předvedení. K místnosti se mohou skutečně připojit více než čtyři hosté.",
+    "welcome-to-obs-ninja-chat": "\n\t\t\t\t\tVítejte na OBS.Ninja! můžete ihned poslat zprávy ostatním členům této místnosti\n\t\t\t\t",
+    "names-and-labels-coming-soon": "\n\t\t\t\t\tJména členů bude jedna z budoucích funkcí OBS.ninja.\n\t\t\t\t",
+    "send-chat": "Poslat",
+    "available-languages": "Dostupné jazyky:",
+    "add-more-here": "Přidat další!",
+    "waiting-for-camera-to-load": "Čekám na načtení kamery",
+    "start": "START",
+    "share-your-mic": "Sdílet mikrofon",
+    "share-your-camera": "Sdílet kameru",
+    "share-your-screen": "Sdílet obrazovku",
+    "join-room-with-mic": "Připojit se s mikrofonem",
+    "share-screen-with-room": "Sdílet obrazovku s místností",
+    "join-room-with-camera": "Připojit se s kamerou",
+    "click-start-to-join": "Kliknutím na start se připojíte",
+    "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",
+    "remote-monitoring": "Remote Monitoring",
+    "invite-saved-to-cookie": "Invite saved to cookie",
+    "fade-videos-in": "Fade videos in",
+    "show-guest-tips": "Show guest setup tips",
+    "green-background": "Green background",
+    "add-margin": "Add margin to videos",
+    "fill-video-space": "Crop video to fit",
+    "vertical-aspect-ratio": "Vertical video mode",
+    "add-to-scene2": "add to scene 2",
+    "user-raised-hand": "Lower Raised Hand",
+    "unmute": "un-mute",
+    "unhide-guest": "un-hide",
+    "undeafen": "un-deafen",
+    "unblind": "un-blind",
+    "close": "close",
+    "send-message": "send message<s pan=\"\"> </s>",
+    "record-director-local": " Record",
+    "only-director-can-hear-you": "Only the director can hear you currently.",
+    "director-muted-you": "The director has muted you.",
+    "application-audio-capture": "For application-specific audio capture, <a href=\"https://docs.vdo.ninja/audio\" style=\"color: #007AC8;\">see here</a>",
+    "animate-mixing": "Animate mixing",
+    "prefix-screenshare": "Prefix screenshare IDs",
+    "privacy-disabled": "Privacy warning: The director will be able to remotely access your camera and microphone if you continue.",
+    "face-mesh": "Face mesh (slow load)",
+    "anonymous-mask": "Anonymous mask",
+    "dog-face": "Dog ears and nose",
+    "compatibility-mode": "Compatibility mode",
+    "disable-animated-mixing": "Disable animations",
+    "request-upload": " Request File",
+    "create-timer": "Create Timer",
+    "edit-url": "Edit URL manually",
+    "mirror-video": "Mirror",
+    "toggle-control-video": "Toggle control bar",
+    "picture-in-picture": "Picture-in-picture",
+    "chrome-cast": "Cast..",
+    "join-room": "Join room",
+    "waiting-for-mic-to-load": "Waiting for mic to load"
+  },
+  "placeholders": {
+    "join-by-room-name-here": "Připojit se s názvem místnosti zde",
+    "enter-a-room-name-here": "Sem zadejte název místnosti",
+    "optional-room-password-here": "Volitelné heslo místnosti zde",
+    "give-this-media-source-a-name-optional-": "Pojmenujte tento zdroj médií (volitelné)",
+    "add-an-optional-password": "Přidat volitelné heslo",
+    "enter-room-name-here": "Sem zadejte název místnosti",
+    "enter-chat-message-to-send-here": "Sem zadejte vaši zprávu",
+    "optional": "optional",
+    "enter-the-room-name-here": "Enter the room name here",
+    "enter-the-room-password-here": "Enter the room password here",
+    "enter-your-message-here": "Enter your message here"
+  },
+  "miscellaneous": {
+    "start": "START",
+    "new-display-name": "Enter a new Display Name for this stream",
+    "submit-error-report": "Press OK to submit any error logs to VDO.Ninja. Error logs may contain private information.",
+    "director-redirect-1": "The director wishes to redirect you to the URL: ",
+    "director-redirect-2": "\n\nPress OK to be redirected.",
+    "add-a-label": "Add a label",
+    "audio-processing-disabled": "Audio processing is disabled with this guest. Can't mute or change volume",
+    "not-the-director": "<font color='red'>You are not the director of this room.  You will have limited to no control.  You can try claiming the room after the first director leaves.</font>",
+    "room-is-claimed": "The room is already claimed by someone else.\n\nOnly the first person to join a room is the assigned director.\n\nRefresh after the first director leaves to claim.",
+    "room-is-claimed-codirector": "The room is already claimed by someone else.\n\nTrying to join as a co-director...",
+    "streamid-already-published": "The stream ID you are publishing to is already in use.\n\nPlease try with a different invite link or refresh to retry again.\n\nYou will now be disconnected.",
+    "director": "Director",
+    "unknown-user": "Unknown User",
+    "room-test-not-good": "The room name 'test' is very commonly used and may not be secure.\n\nAre you sure you wish to proceed?",
+    "load-previous-session": "Would you like to load your previous session's settings?",
+    "enter-password": "Please enter the password below: \n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "enter-password-2": "Please enter the password below: \n\n(Note: Passwords are case-sensitive.)",
+    "enter-director-password": "Please enter the director's password:\n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "password-incorrect": "The password was incorrect.\n\nRefresh and try again.",
+    "enter-display-name": "Please enter your display name:",
+    "enter-new-display-name": "Enter a new Display Name for this stream",
+    "what-bitrate": "What bitrate would you like to record at? (kbps)",
+    "enter-website": "Enter a website URL to share",
+    "press-ok-to-record": "Press OK to start recording. Press again to stop and download.\n\nWarning: Keep this browser tab active to continue recording.\n\nYou can change the default video bitrate if desired below (kbps)",
+    "no-streamID-provided": "No streamID was provided; one will be generated randomily.\n\nStream ID: ",
+    "alphanumeric-only": "Info: Only AlphaNumeric characters should be used for the stream ID.\n\nThe offending characters have been replaced by an underscore",
+    "stream-id-too-long": "The Stream ID should be less than 45 alPhaNuMeric characters long.\n\nWe will trim it to length.",
+    "share-with-trusted": "Share only with those you trust",
+    "pass-recommended": "A password is recommended",
+    "insecure-room-name": "Insecure room name.",
+    "allowed-chars": "Allowed chars",
+    "transfer": "transfer",
+    "armed": "armed",
+    "transfer-guest-to-room": "Transfer guests to room:\n\n(Please note rooms must share the same password)",
+    "transfer-guest-to-url": "Transfer guests to new website URL.\n\n(Guests will be prompted to accept)",
+    "change-url": "change URL",
+    "mute-in-scene": "mute in scene",
+    "unmute-guest": "un-mute guest",
+    "undeafen": "un-deafen",
+    "deafen": "deafen guest",
+    "unblind": "un-blind",
+    "blind": "blind guest",
+    "unmute": "un-mute",
+    "mute-guest": "mute guest",
+    "unhide": "unhide guest",
+    "hide-guest": "hide guest",
+    "confirm-disconnect-users": "Are you sure you wish to disconnect these users?",
+    "confirm-disconnect-user": "Are you sure you wish to disconnect this user?"
+  }
+}

de.json

@@ -0,0 +1,425 @@
+{
+  "titles": {
+    "toggle-the-chat": "Chat an/aus",
+    "mute-the-speaker": "Audio stumm",
+    "mute-the-mic": "Mikrofon stumm",
+    "disable-the-camera": "Kamera aus",
+    "settings": "Einstellungen",
+    "hangup-the-call": "Beenden",
+    "show-help-info": "Hilfe anzeigen",
+    "language-options": "Sprachoptionen",
+    "tip-hold-ctrl-command-to-select-multiple": "Tipp: Für Mehrfachauswahl halten Sie CTRL (Mac: command) gedrückt",
+    "ideal-for-1080p60-gaming-if-your-computer-and-upload-are-up-for-it": "Ideal für Gaming mit 1080p60, falls Ihr Computer und Anschluss ausreichen",
+    "better-video-compression-and-quality-at-the-cost-of-increased-cpu-encoding-load": "Höhere Videokompression und bessere Bildqualität, benötigt mehr CPU",
+    "disable-digital-audio-effects-and-increase-audio-bitrate": "Audiofilter aus, höhere Audiobitrate",
+    "the-guest-will-not-have-a-choice-over-audio-options": "Gäste können Audio-Optionen nicht ändern",
+    "the-guest-will-only-be-able-to-select-their-webcam-as-an-option": "Gäste können nur ihre Webcam auswählen",
+    "hold-ctrl-and-the-mouse-wheel-to-zoom-in-and-out-remotely-of-compatible-video-streams": "Drücken Sie CTRL (Mac: command) während sie das Mausrad drehen, um kompatible Kameras ein/auszuzoomen",
+    "add-a-password-to-make-the-stream-inaccessible-to-those-without-the-password": "Passwort hinzufügen. Dem Stream kann ohne Passwort nicht beigetreten werden",
+    "add-the-guest-to-a-group-chat-room-it-will-be-created-automatically-if-needed-": "Gast zu Gruppenraum hinzufügen. Falls nötig, wird der Raum automatisch erzeugt.",
+    "customize-the-room-settings-for-this-guest": "Raum-Einstellungen für diesen Gast anpassen",
+    "hold-ctrl-or-cmd-to-select-multiple-files": "Drücken Sie CTRL (Mac: command), um mehrere Dateien auszuwählen",
+    "enter-an-https-url": "Geben Sie eine URL mit HTTPS ein",
+    "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-": "Fügen Sie dieses Video zu einer Remote-Szene '&scene=1' hinzu",
+    "forward-user-to-another-room-they-can-always-return-": "Transferieren Sie den Gast in einen anderen Raum. Gäste können immer hierher zurückkehren.",
+    "start-recording-this-stream-experimental-views": "Diesen Stream aufnehmen. *experimentell*",
+    "force-the-user-to-disconnect-they-can-always-reconnect-": "Verbindung des Gastes abbrechen. Gäste können jederzeit wieder beitreten.",
+    "change-this-audio-s-volume-in-all-remote-scene-views": "Laustärke in allen '&scene'-Szenen ändern",
+    "remotely-mute-this-audio-in-all-remote-scene-views": "Audio mute in allen remote '&scene'-Szenen",
+    "disable-video-preview": "Videovorschau aus",
+    "low-quality-preview": "Videovorschau (niedrige Qualität)",
+    "high-quality-preview": "Videovorschau (hohe Qualität)",
+    "send-direct-message": "Private Message schicken",
+    "advanced-settings-and-remote-control": "Erweiterte Einstellungen / Remote-Einstellungen",
+    "toggle-voice-chat-with-this-guest": "Sprach-Chat mit Gast ein/aus",
+    "join-by-room-name-here": "Geben Sie einen Raumnamen ein",
+    "join-room": "Raum betreten",
+    "share-a-screen-with-others": "Bildschirm teilen",
+    "alert-the-host-you-want-to-speak": "Teilen Sie dem Gastgeber mit, dass Sie sprechen möchten",
+    "record-your-stream-to-disk": "Eigenen Stream lokal aufnehmen",
+    "cancel-the-director-s-video-audio": "Gastgeber-Audio/Video aus",
+    "submit-any-error-logs": "Fehlerprotokoll schicken",
+    "add-group-chat-to-obs": "Video-Gruppenchat zu OBS hinzufügen",
+    "for-large-group-rooms-this-option-can-reduce-the-load-on-remote-guests-substantially": "Bei größeren Gruppen kann diese Option die Systemlast bei den Gästen deutlich reduzieren",
+    "which-video-codec-would-you-want-used-by-default-": "Welchen Codec soll standardmäßig verwendet werden?",
+    "you-ll-enter-as-the-room-s-director": "Sie werden dem Gruppenchat als Gastgeber beitreten",
+    "add-your-camera-to-obs": "Kamera zu OBS hinzufügen",
+    "remote-screenshare-into-obs": "Bildschirm zu OBS hinzufügen",
+    "create-reusable-invite": "Wiederverwendbare Einladung erzeugen",
+    "encode-the-url-so-that-it-s-harder-for-a-guest-to-modify-the-settings-": "URL verschleiern. Das macht es für Gäste schwieriger, Einstellungen zu ändern.",
+    "more-options": "Weitere Einstelllungen",
+    "youtube-video-demoing-how-to-do-this": "Erklär-Video",
+    "invite-a-guest-or-camera-source-to-publish-into-the-group-room": "Gast oder Kamera zum Video-Gruppenchat einladen",
+    "if-enabled-the-invited-guest-will-not-be-able-to-see-or-hear-anyone-in-the-room-": "Gast kann andere Gäste im Gruppenchat weder sehen noch hören.",
+    "use-this-link-in-the-obs-browser-source-to-capture-the-video-or-audio": "Verwenden Sie diesen Link in OBS (Quelle: Browser), um das Video und/oder Audio hinzuzufügen.",
+    "if-enabled-you-must-manually-add-a-video-to-a-scene-for-it-to-appear-": "Video muss manuell zu Szenen hinzugefügt werden.",
+    "disables-echo-cancellation-and-improves-audio-quality": "Echo-Unterdrückung aus. Verbessert die Audioqualität",
+    "audio-only-sources-are-visually-hidden-from-scenes": "Audioquellen ohne Video werden in der Szene nicht angezeigt",
+    "guest-will-be-prompted-to-enter-a-display-name": "Gäste werden beim Betreten des Videochat gebeten, einen Namen einzugeben",
+    "display-names-will-be-shown-in-the-bottom-left-corner-of-videos": "Namen werden in der linken unteren Ecke des Videos angezeigt",
+    "request-1080p60-from-the-guest-instead-of-720p60-if-possible": "1080p60 anfordern, falls das Gast-System dies unterstützt (Standard ist 720p60)",
+    "the-default-microphone-will-be-pre-selected-for-the-guest": "Standard-Mikrofon wird ausgewählt",
+    "the-default-camera-device-will-selected-automatically": "Standard-Kamera wird ausgewählt",
+    "the-guest-won-t-have-access-to-changing-camera-settings-or-screenshare": "Gast kann weder Kamera-Einsstellungen ändern, noch den Bildschirm teilen",
+    "the-guest-will-not-see-their-own-self-preview-after-joining": "Eigene Gast-Videovorschau nach Betreten des Videochat aus",
+    "guests-will-have-an-option-to-poke-the-director-by-pressing-a-button": "Gäste können sich über einen Button beim Gastgeber bemerkbar machen",
+    "add-an-audio-compressor-to-the-guest-s-microphone": "Audiokompression",
+    "add-an-equalizer-to-the-guest-s-microphone-that-the-director-can-control": "Equalizer an/aus (wird vom Gastgeber eingestellt)",
+    "the-guest-can-only-see-the-director-s-video-if-provided": "Gast kann nur Video vom Gastgeber sehen, falls dieser Video zurückschickt",
+    "the-guest-s-microphone-will-be-muted-on-joining-they-can-unmute-themselves-": "Gast-Mikrofon wird beim Betreten des Videochat stummgeschaltet. Gäste können die Stummschaltung aufheben.",
+    "have-the-guest-join-muted-so-only-the-director-can-unmute-the-guest-": "Gast-Mikrofon wird beim Betreten des Videochat stummgeschaltet. Nur der Gastgeber kann die Stummschaltung aufheben.",
+    "make-the-invite-url-encoded-so-parameters-are-harder-to-tinker-with-by-guests": "Einladungs-Link verschleiern, um dem Spieltrieb der Gäste etwas Einhalt zu gebieten.",
+    "move-the-user-to-another-room-controlled-by-another-director": "Gast in einen anderen Videochat transferieren, der von einem anderen Gastgeber kontrolliert wird",
+    "send-a-direct-message-to-this-user-": "Private Nachricht schicken.",
+    "remotely-change-the-volume-of-this-guest": "Gast-Lautstärke remote ändern",
+    "mute-this-guest-everywhere": "Gast überall stummschalten",
+    "start-recording-this-remote-stream-to-this-local-drive-experimental-": "Remote-Stream lokal (auf diesem Rechner) aufnehmen *experimentell*'",
+    "the-remote-guest-will-record-their-local-stream-to-their-local-drive-experimental-": "Remote-Stream remote (beim Gast) aufnehmen *experimentell*",
+    "shift-this-video-down-in-order": "Anzeigpriorität/-reihenfolge für dieses Video nach unten verschieben",
+    "current-index-order-of-this-video": "Aktuelle Anzeigepriorität",
+    "shift-this-video-up-in-order": "Anzeigepriorität/-reihenfolge für dieses Video nach oben verschieben",
+    "remote-audio-settings": "Remote Audio-Einstellungen",
+    "advanced-video-settings": "Erweiterte Video-Einstellungen",
+    "activate-or-reload-this-video-device-": "Kamera aktivieren oder neu laden.",
+    "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",
+    "toggle-solo-voice-chat": "Toggle Solo Voice Chat",
+    "add-to-scene-2": "Add to Scene 2",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "share-a-website-as-an-embedded-iframe": "Share a website as an embedded iFRAME",
+    "room-settings": "Room Settings",
+    "your-audio-and-video-settings": "Your audio and video Settings",
+    "you-can-also-enable-the-director-s-video-output-afterwards-by-clicking-the-setting-s-button": "You can also enable the director`s Video Output afterwards by clicking the Setting`s button",
+    "allow-for-remote-stat-monitoring-via-the-monitoring-tool": "Allow for remote stat monitoring via the monitoring tool",
+    "the-guest-will-be-asked-if-they-want-to-reload-the-previous-link-when-revisiting": "The guest will be asked if they want to reload the previous link when revisiting",
+    "the-guest-s-self-video-preview-will-appear-tiny-in-the-top-right": "The guest's self-video preview will appear tiny in the top right",
+    "videos-use-an-animated-transition-when-being-remixed": "Videos use an animated transition when being remixed",
+    "show-some-prep-suggestions-to-the-guests-on-connect": "Show some prep suggestions to the guests on connect",
+    "set-the-background-color-to-bright-green": "Set the background color to bright green",
+    "fade-videos-in-over-500ms": "Fade videos in over 500ms",
+    "add-a-10px-margin-around-all-video-elements": "Add a 10px margin around all video elements",
+    "playback-the-video-with-mono-channel-audio": "Playback the video with mono-channel audio",
+    "have-the-videos-fit-their-respective-areas-even-if-it-means-cropping-a-bit": "Have the videos fit their respective areas, even if it means cropping a bit",
+    "have-videos-be-aligned-with-sizing-designed-for-vertical-video": "Have videos be aligned with sizing designed for vertical video",
+    "copy-this-stream-id-to-the-clipboard": "Copy this Stream ID to the clipboard",
+    "click-here-to-edit-the-label-for-this-stream-changes-will-propagate-to-all-viewers-of-this-stream": "Click here to edit the label for this stream. Changes will propagate to all viewers of this stream",
+    "this-will-ask-the-remote-guest-for-permission-to-change": "This will ask the remote guest for permission to change",
+    "a-direct-solo-view-of-the-video-audio-stream-with-nothing-else-its-audio-can-be-remotely-controlled-from-here": "A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here",
+    "this-guest-raised-their-hand-click-this-to-clear-notification-": "This guest raised their hand. Click this to clear notification.",
+    "increase-this-at-your-peril-changes-the-total-inbound-video-bitrate-per-guest-mobile-devices-excluded-webp-mode-also-excluded-": "Increase this at your peril. Changes the total inbound video bitrate per guest; mobile devices excluded. Webp-mode also excluded.",
+    "hide-this-window": "Hide this window",
+    "cycle-the-cameras": "Cycle the Cameras",
+    "have-screen-shares-stream-id-s-use-a-predictable-prefixed-value-instead-of-a-random-one-": "Have screen-shares stream ID's use a predictable prefixed value instead of a random one.",
+    "toggle-solo-voice-chat-or-hold-ctrl-cmd-when-selecting-to-make-it-two-way-private-": "Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private.",
+    "transfer-any-file-to-the-group": "Transfer any file to the group",
+    "transfer-any-file": "Transfer any file",
+    "the-camera-will-load-in-a-default-safe-mode-that-may-work-if-other-modes-fail-": "The camera will load in a default safe-mode that may work if other modes fail.",
+    "disable-animated-transitions-during-video-mixing": "Disable animated transitions during video mixing",
+    "allow-the-guest-to-select-a-file-to-upload-to-the-director-once-shared-it-will-show-in-the-chat-as-a-download-link-": "Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link.",
+    "set-a-countdown-timer-that-this-guest-sees": "Set a countdown timer that this guest sees",
+    "enter-a-room-name-to-quick-join": "Enter a room name to quick join"
+  },
+  "innerHTML": {
+    "logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS Ninja",
+    "copy-this-url": "Link für dieses Video teilen",
+    "you-are-in-the-control-center": "Control-Center für Video-Gruppenchat",
+    "joining-room": "Sie betreten Raum",
+    "add-group-chat": "Gruppenchat hinzufügen",
+    "rooms-allow-for": "Videochat-Räume erlauben einfachen Gruppen-Chat und die Verwaltung verschiedener Streams.",
+    "room-name": "Raum",
+    "password-input-field": "Passwort",
+    "enter-the-rooms-control": "Control Center für diesen Raum betreten",
+    "show-tips": "Ich möchte Tipps..",
+    "added-notes": "\n\t\t\t\t<u><i>Weitere Infos:</i></u>\n\t\t\t\t<li>Räume können von allen betreten werden, die den Raumnamen wissen. Vermeiden Sie daher zu einfache Namen.</li>\n\t\t\t\t<li>Je nach Hardwareausstattung können mehr als vier Teilnehmende in einem Raum zu Performance-Problemen führen.</li>\n\t\t\t\t<li>Aufgrund einer Hardware-Einschränkung können iOS-Devices Video nur mit dem Regisseur/Director teilen.</li>\n\t\t\t\t<li>Bitte betrachten Sie die \"Aufnehmen\"-Funktion als neu und experimentell. Sie sollten sie vermutlich nicht in Produktivumgebungen einsetzen.</li>\n\t\t\t\t<li>Damit ein Video-Feed in einer Gruppen-Szene erscheint, müssen Sie ihn zunächst dort hinzufügen.</li>\n\t\t\t\t<li>Der Gäste-View enthält einen neuen \"fortgeschrittenen Fullscreen\"-Button.</li>\n\t\t\t\t",
+    "back": "Zurück",
+    "add-your-camera": "Kamera hinzufügen",
+    "ask-for-permissions": "Zugriff für Kamera/Mikrofon erlauben",
+    "waiting-for-camera": "Kamera lädt. Bitte warten.",
+    "video-source": "Videoquelle",
+    "max-resolution": "Höchste Auflösung",
+    "balanced": "Ausgeglichen",
+    "smooth-cool": "Smooth und Cool",
+    "select-audio-source": "Audio-Quellen auswählen",
+    "no-audio": "Kein Audio",
+    "select-output-source": " Ausgang für Audio: \n\t\t\t\t\t",
+    "remote-screenshare-obs": "Bildschirm teilen",
+    "note-share-audio": "\n\t\t\t\t\t<b>note</b>: Vergessen Sie nicht, in Chrome \"Audio teilen\" zu klicken.<br>(Firefox unterstütz das Teilen von Audio nicht.)",
+    "select-screen-to-share": "ZU TEILENDEN BILDSCHIRM AUSWÄHLEN",
+    "audio-sources": "Audioquellen",
+    "create-reusable-invite": "Wiederverwendbare Einladung erstellen",
+    "here-you-can-pre-generate": "Erzeugen Sie einen wiederwendbaren Empfangs-Link und die zugehörigen Einladungslinks für Gäste.",
+    "generate-invite-link": "EINLADUNGS-LINK ERSTELLEN",
+    "advanced-paramaters": "Weitere Einstellungen",
+    "unlock-video-bitrate": "Video-Bitrate auf Maximum (20mbps)",
+    "force-vp9-video-codec": "VP9 Video- Codec verwenden (weniger Störungen)",
+    "enable-stereo-and-pro": "Stereo und Pro HD Audio einschalten",
+    "video-resolution": "Video-Auflösung: ",
+    "hide-mic-selection": "Force Default Microphone",
+    "hide-screen-share": "Option zum Bildschirm teilen nicht anzeigen",
+    "allow-remote-control": "Gast-Kamera zoomen (Android)",
+    "add-a-password-to-stream": " Passwort hinzufügen:",
+    "add-the-guest-to-a-room": " Gast zu diesem Raum hinzufügen:",
+    "invite-group-chat-type": "Dieser Gast..",
+    "can-see-and-hear": "..kann den Gruppen-Chat sehen und hören",
+    "can-hear-only": "..kann den Gruppen-Chat nur hören",
+    "cant-see-or-hear": "..kann den Gruppen-chat weder hören noch sehen",
+    "share-local-video-file": "Mediendatei streamen",
+    "share-website-iframe": "Website teilen",
+    "run-a-speed-test": "Speed-Test",
+    "read-the-guides": "Guides",
+    "info-blob": "",
+    "add-to-scene": "Zur Szene hinzufügen",
+    "forward-to-room": "Transferieren",
+    "record": "Aufnehmen",
+    "disconnect-guest": "Auflegen",
+    "mute": "Stummschalten",
+    "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> Erweitert",
+    "voice-chat": "<i class=\"las la-microphone\"></i> Voice Chat",
+    "open-in-new-tab": "In neuem Tab öffnen.",
+    "copy-to-clipboard": "In die Zwischenablage kopieren",
+    "click-for-quick-room-overview": "❔ Erste Schritte und Hilfe",
+    "push-to-talk-enable": "🔊 Audio und Video mit Gästen teilen (Push-to-Talk Mode)",
+    "welcome-to-control-room": "Welcome. This is the control-room for the group-chat. There are different things you can use this room for:<br><br>\t<li>You can host a group chat with friends using a room. Share the blue link to invite guests who will join the chat automatically.</li>\t<li>A group room can handle around 4 to 30 guests, depending on numerous factors, including CPU and available bandwidth of all guests in the room.</li>\t<li>Solo-views of each video are offered under videos as they load. These can be used within an OBS Browser Source.</li>\t<li>You can use the auto-mixing Group Scene, the green link, to auto arrange multiple videos for you in OBS.</li>\t<li>You can use this control room to record isolated video or audio streams, but it is an experimental feature still.</li>\t<li>Videos in the Director's room will be of low quality on purpose; to save bandwidth/CPU</li>\t<li>Guest's in the room will see each other's videos at a very limited quality to conserve bandwidth/CPU.</li>\t<li>OBS will see a guest's video in high-quality; the default video bitrate is 2500kbps.</li>\t<br>\tAs guests join, their videos will appear below. You can bring their video streams into OBS as solo-scenes or you can add them to the Group Scene.\t<br>The Group Scene auto-mixes videos that have been added to the group scene. Please note that the Auto-Mixer requires guests be manually added to it for them to appear in it; they are not added automatically.<br><br>Apple mobile devices, such as iPhones and iPads, do not fully support Video Group Chat. This is a hardware constraint.<br><br>\tFor advanced options and parameters, <a href=\"https://github.com/steveseguin/obsninja/wiki/Guides-and-How-to's#urlparameters\">see the 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\tWillkommen zu OBS.Ninja! Schicken Sie anderen Gästen eine Message.\n\t\t\t\t",
+    "names-and-labels-coming-soon": "\n\t\t\t\t\tNames identifying connected peers will be a feature in an upcoming release.\n\t\t\t\t",
+    "send-chat": "Abschicken",
+    "available-languages": "Verfügbare Sprachen:",
+    "add-more-here": "Weitere hinzufügen",
+    "waiting-for-camera-to-load": "waiting-for-camera-to-load",
+    "start": "START",
+    "share-your-mic": "Mikrofon teilen",
+    "share-your-camera": "Kamera teilen",
+    "share-your-screen": "Bildschirm teilen",
+    "join-room-with-mic": "Raum ohne Video betreten (nur mit Mikrofon)",
+    "share-screen-with-room": "Bildschirm mit Raum teilen",
+    "join-room-with-camera": "Raum mit Video betreten",
+    "click-start-to-join": "Start klicken",
+    "guests-only-see-director": "Gäste können nur das Gastgeber-Video sehen",
+    "default-codec-select": "Bevorzugter Video-Codec:  ",
+    "obfuscate_url": "Einladungs-Link verschleiern",
+    "hide-the-links": " LINKS (Einladungslinks &amp; Szenen-Links)",
+    "invite-users-to-join": "Gäste können über diesen Link dem Raum beitreten",
+    "this-is-obs-browser-source-link": "In OBS verwenden, um den Gruppen-Videochat hinzuzufügen",
+    "mute-scene": "in Szene stummschalten",
+    "mute-guest": "Gast stummschalten",
+    "record-local": " lokal aufnehmen",
+    "record-remote": " remote aufnehmen",
+    "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-Einstellungen",
+    "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",
+    "remote-monitoring": "Remote Monitoring",
+    "invite-saved-to-cookie": "Invite saved to cookie",
+    "fade-videos-in": "Fade videos in",
+    "show-guest-tips": "Show guest setup tips",
+    "green-background": "Green background",
+    "add-margin": "Add margin to videos",
+    "fill-video-space": "Crop video to fit",
+    "vertical-aspect-ratio": "Vertical video mode",
+    "add-to-scene2": "add to scene 2",
+    "user-raised-hand": "Lower Raised Hand",
+    "unmute": "un-mute",
+    "unhide-guest": "un-hide",
+    "undeafen": "un-deafen",
+    "unblind": "un-blind",
+    "close": "close",
+    "send-message": "send message<s pan=\"\"> </s>",
+    "record-director-local": " Record",
+    "only-director-can-hear-you": "Only the director can hear you currently.",
+    "director-muted-you": "The director has muted you.",
+    "application-audio-capture": "For application-specific audio capture, <a href=\"https://docs.vdo.ninja/audio\" style=\"color: #007AC8;\">see here</a>",
+    "animate-mixing": "Animate mixing",
+    "prefix-screenshare": "Prefix screenshare IDs",
+    "privacy-disabled": "Privacy warning: The director will be able to remotely access your camera and microphone if you continue.",
+    "face-mesh": "Face mesh (slow load)",
+    "anonymous-mask": "Anonymous mask",
+    "dog-face": "Dog ears and nose",
+    "compatibility-mode": "Compatibility mode",
+    "disable-animated-mixing": "Disable animations",
+    "request-upload": " Request File",
+    "create-timer": "Create Timer",
+    "edit-url": "Edit URL manually",
+    "mirror-video": "Mirror",
+    "toggle-control-video": "Toggle control bar",
+    "picture-in-picture": "Picture-in-picture",
+    "chrome-cast": "Cast..",
+    "join-room": "Join room",
+    "waiting-for-mic-to-load": "Waiting for mic to load"
+  },
+  "placeholders": {
+    "join-by-room-name-here": "Raum über Namen betreten",
+    "enter-a-room-name-here": "Raumname eingeben",
+    "optional-room-password-here": "Raum-Passwort (optional)",
+    "give-this-media-source-a-name-optional-": "Namen für Quelle angeben (optional)",
+    "add-an-optional-password": "Passwort hinzufügen (optional)",
+    "enter-room-name-here": "Raumnamen eingeben",
+    "enter-chat-message-to-send-here": "Message",
+    "optional": "optional",
+    "enter-the-room-name-here": "Enter the room name here",
+    "enter-the-room-password-here": "Enter the room password here",
+    "enter-your-message-here": "Enter your message here"
+  },
+  "miscellaneous": {
+    "start": "START",
+    "new-display-name": "Enter a new Display Name for this stream",
+    "submit-error-report": "Press OK to submit any error logs to VDO.Ninja. Error logs may contain private information.",
+    "director-redirect-1": "The director wishes to redirect you to the URL: ",
+    "director-redirect-2": "\n\nPress OK to be redirected.",
+    "add-a-label": "Add a label",
+    "audio-processing-disabled": "Audio processing is disabled with this guest. Can't mute or change volume",
+    "not-the-director": "<font color='red'>You are not the director of this room.  You will have limited to no control.  You can try claiming the room after the first director leaves.</font>",
+    "room-is-claimed": "The room is already claimed by someone else.\n\nOnly the first person to join a room is the assigned director.\n\nRefresh after the first director leaves to claim.",
+    "room-is-claimed-codirector": "The room is already claimed by someone else.\n\nTrying to join as a co-director...",
+    "streamid-already-published": "The stream ID you are publishing to is already in use.\n\nPlease try with a different invite link or refresh to retry again.\n\nYou will now be disconnected.",
+    "director": "Director",
+    "unknown-user": "Unknown User",
+    "room-test-not-good": "The room name 'test' is very commonly used and may not be secure.\n\nAre you sure you wish to proceed?",
+    "load-previous-session": "Would you like to load your previous session's settings?",
+    "enter-password": "Please enter the password below: \n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "enter-password-2": "Please enter the password below: \n\n(Note: Passwords are case-sensitive.)",
+    "enter-director-password": "Please enter the director's password:\n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "password-incorrect": "The password was incorrect.\n\nRefresh and try again.",
+    "enter-display-name": "Please enter your display name:",
+    "enter-new-display-name": "Enter a new Display Name for this stream",
+    "what-bitrate": "What bitrate would you like to record at? (kbps)",
+    "enter-website": "Enter a website URL to share",
+    "press-ok-to-record": "Press OK to start recording. Press again to stop and download.\n\nWarning: Keep this browser tab active to continue recording.\n\nYou can change the default video bitrate if desired below (kbps)",
+    "no-streamID-provided": "No streamID was provided; one will be generated randomily.\n\nStream ID: ",
+    "alphanumeric-only": "Info: Only AlphaNumeric characters should be used for the stream ID.\n\nThe offending characters have been replaced by an underscore",
+    "stream-id-too-long": "The Stream ID should be less than 45 alPhaNuMeric characters long.\n\nWe will trim it to length.",
+    "share-with-trusted": "Share only with those you trust",
+    "pass-recommended": "A password is recommended",
+    "insecure-room-name": "Insecure room name.",
+    "allowed-chars": "Allowed chars",
+    "transfer": "transfer",
+    "armed": "armed",
+    "transfer-guest-to-room": "Transfer guests to room:\n\n(Please note rooms must share the same password)",
+    "transfer-guest-to-url": "Transfer guests to new website URL.\n\n(Guests will be prompted to accept)",
+    "change-url": "change URL",
+    "mute-in-scene": "mute in scene",
+    "unmute-guest": "un-mute guest",
+    "undeafen": "un-deafen",
+    "deafen": "deafen guest",
+    "unblind": "un-blind",
+    "blind": "blind guest",
+    "unmute": "un-mute",
+    "mute-guest": "mute guest",
+    "unhide": "unhide guest",
+    "hide-guest": "hide guest",
+    "confirm-disconnect-users": "Are you sure you wish to disconnect these users?",
+    "confirm-disconnect-user": "Are you sure you wish to disconnect this user?"
+  }
+}

devices.css

@@ -0,0 +1,127 @@
+#devices {
+    max-width: 80%;
+    width: fit-content;
+    margin: 0 auto;
+}
+
+h1 {
+    font-size: 1.5em;
+    padding:10px;
+    background-color:#457b9d;
+    color:white;
+    border-bottom: 2px solid #3b6a87;
+}
+
+.device {
+    display: flex;
+    flex-direction: column;
+    margin: 10px 0px;
+    font-size: 1rem;
+    padding: 10px;
+    position: relative;
+    user-select: none;
+    background: #d0d0d0;
+    border-radius: 4px;
+}
+
+.device.selected {
+    background-color: #3ea03c;
+}
+
+.device.selected::before {
+    content: "\f00c";
+    font-family: "Line Awesome Free";
+    font-weight: 900;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+.device:hover {
+    cursor: pointer;
+}
+
+.device-name{
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.device-id {
+
+}
+
+.card {
+    margin: 10px;
+}
+
+.card > div {
+    padding: 10px;
+}
+
+.notice {
+    background-color: #fff18c;
+    margin: 10px;
+    padding: 20px 20px;
+    font-weight: bold;
+    font-size: 1.2em;
+    text-align: center;
+    line-height: 1.4em;
+}
+
+.notice a {
+    color: #457b9d;
+}
+
+@media only screen
+  and (min-device-width: 375px)
+  and (max-device-width: 812px)
+  and (orientation: portrait) {
+    #devices {
+        width: 100%;
+        max-width: 100%;
+    }
+    .device-id {
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
+
+#sharedDevices {
+    position: fixed;
+    bottom: 20px;
+    width: 80%;
+    left: 10%;
+    color: white;
+    overflow-wrap: anywhere;
+    background: #2c3754;
+    padding: 20px;
+    box-shadow: 0px 0px 10px 5px #00000047;
+    border: 1px solid #333c52;
+}
+
+#sharedDevices span {
+    display: block;
+    margin-bottom: 10px;
+}
+
+#sharedDevices input {
+    width: 100%;
+    padding: 5px;
+
+}
+
+span#close {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    display: block;
+    width: 20px;
+    height: 20px;
+    background: #457b9d;
+    text-align: center;
+    border-radius: 20px;
+    line-height: 20px;
+    font-size: 20px;
+    cursor: pointer;
+}

devices.html

@@ -0,0 +1,227 @@
+<html>
+	<head>
+		<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
+		<link rel="stylesheet" href="./main.css?ver=11" />
+		<link rel="stylesheet" href="./devices.css?ver=1" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta charset="utf8" />
+	</head>
+	<body>
+		<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
+				</span>
+			</a>
+		</div>
+		<div id="devices">
+			<div class="notice">
+				Device IDs are bound to a combination of domain and browser. <br />If
+				you want to use electron-capture, open this URL on the electron-capture
+				app. <br/>
+				Click device names to preset them. Select multiple audio inputs by clicking multiple devices.
+			</div>
+			<div class="notice">
+				Check for browser and camera capabilities <a href="/supports">here</a>.
+			</div>
+			<div class="card">
+				<h1>🎤 Audio Inputs</h1>
+				<div id="audioInputs"></div>
+			</div>
+			<div class="card">
+				<h1>📹 Video Inputs</h1>
+				<div id="videoInputs"></div>
+			</div>
+			<div class="card">
+				<h1>🔉 Audio Outputs</h1>
+				<div id="audioOutputs"></div>
+			</div>
+		</div>
+		<div id="sharedDevices" style="display: none">
+			<span>Click to copy. Use this URL to preset audio/video devices.</span>
+			<span id="close" onclick="this.parentNode.style.display='none'">×</span>
+			<input id="devicesUrl" value="" />
+		</div>
+
+		<script>
+			const list = [];
+			const url = new URL(document.location.origin);
+			const audioInputDevices = [];
+
+			function isAudioInput(value) {
+				return value.kind === "audioinput";
+			}
+
+			function isAudioOutput(value) {
+				return value.kind === "audiooutput";
+			}
+
+			function isVideoInput(value) {
+				return value.kind === "videoinput";
+			}
+
+			function sanitizeDeviceName(deviceName) {
+				return String(deviceName).toLowerCase().replace(/[\W]+/g, "_");
+			}
+
+			function addDevice(element) {
+				const type = element.dataset.deviceType;
+				const device = sanitizeDeviceName(element.querySelector('span').innerText);
+
+				if (type === "audioinput") {
+					setAudioSearchParams(element);
+				}
+				if (type === "videoinput") {
+					setVideoSearchParams(element);
+				}
+				if (type === "audiooutput") {
+					setAudioOutputSearchParams(element);
+				}
+
+				/*
+					Allows for multiple audio devices to be selected
+					Will be output as a comma separated string to &ad
+				*/
+
+				function setAudioSearchParams(info) {
+					// Device was already selected
+					if (info.className === "device selected") {
+						// Remove device from list of selected devices
+						const index = audioInputDevices.indexOf(device);
+						if (index !== -1) {
+							audioInputDevices.splice(index, 1);
+						}
+
+						// Set the url param to the devices that are left
+						url.searchParams.set("ad", audioInputDevices.join(","));
+						element.className = "device";
+
+						// If no audio devices remained, just remove the param completely
+						if (audioInputDevices.length === 0) {
+							url.searchParams.delete("ad");
+						}
+					} else {
+						// Device is unselected
+						
+						audioInputDevices.push(device);
+						url.searchParams.set("ad", audioInputDevices.join(","));
+						element.className = "device selected";
+					}
+				}
+
+				/*
+				Only allows for a single video device to be selected
+				*/
+				function setVideoSearchParams(info) {
+					// Device was already selected
+					if (info.className === "device selected") {
+						element.className = "device";
+
+
+						// Set the url param to the devices that are left
+						url.searchParams.set("vd", device);
+						element.className = "device";
+
+						// If no devices remained, just remove the param completely
+						if (audioInputDevices.length === 0) {
+							url.searchParams.delete("vd");
+						}
+					} else {
+						// Device is unselected
+						try {
+							element.parentElement.querySelector('.device.selected').className = "device";
+						} catch (error) {
+							console.log("There was no video device already selected.");
+						}
+						
+						url.searchParams.set("vd", device);
+						element.className = "device selected";
+					}
+				}
+				
+				/*
+				Only allows for a single audio output device to be selected
+				*/
+				function setAudioOutputSearchParams(info) {
+					// Device was already selected
+					if (info.className === "device selected") {
+						element.className = "device";
+
+
+						// Set the url param to the devices that are left
+						url.searchParams.set("od", device);
+						element.className = "device";
+
+						// If no devices remained, just remove the param completely
+						if (audioInputDevices.length === 0) {
+							url.searchParams.delete("od");
+						}
+					} else {
+						// Device is unselected
+						try {
+							element.parentElement.querySelector('.device.selected').className = "device";
+						} catch (error) {
+							console.log("There was no video device already selected.");
+						}
+						
+						url.searchParams.set("od", device);
+						element.className = "device selected";
+					}
+				}
+
+				// Update UI
+				showDeviceIdsPopup();
+			}
+
+			function showDeviceIdsPopup() {
+				document.getElementById("devicesUrl").value = decodeURIComponent(url);
+				document.getElementById("sharedDevices").style.display = "block";
+			}
+
+			function prettyPrint(json, element) {
+				let output = "<div class='prettyJson two-col'>";
+				let nestedObjs;
+
+				Object.entries(json)
+					.sort()
+					.forEach(([key, value]) => {
+						output += `
+						<div class='device' onclick='addDevice(this)' data-device-type='${value.kind}'>
+							<span class='device-name'>${value.label}</span>
+							<span class='device-id'>
+								${value.deviceId}
+							</span>
+						</div>`;
+					});
+				output += "</div>";
+				document.getElementById(element).innerHTML = output;
+			}
+
+			document.getElementById("devicesUrl").onclick = (e) => {
+				e.target.select();
+				document.execCommand("copy");
+			};
+
+			navigator.mediaDevices
+				.enumerateDevices()
+				.then((devices) => {
+					devices.forEach((device) => {
+						console.log(
+							`${device.kind}: ${device.label} id = ${device.deviceId}`
+						);
+						list.push(device);
+					});
+					prettyPrint(devices.filter(isAudioInput), "audioInputs");
+					prettyPrint(devices.filter(isAudioOutput), "audioOutputs");
+					prettyPrint(devices.filter(isVideoInput), "videoInputs");
+				})
+				.catch((err) => {
+					console.log(`${err.name}: ${err.message}`);
+				});
+		</script>
+	</body>
+</html>

devices.json.html

@@ -0,0 +1,24 @@
+<html>
+<head><meta charset="UTF-8"></head>
+	<body>
+	<script>
+	var list = [];
+	
+
+	navigator.mediaDevices.enumerateDevices()
+	.then(function(devices) {
+	  devices.forEach(function(device) {
+		console.log(device.kind + ": " + device.label +
+					" id = " + device.deviceId);
+		list.push(device);
+	  });
+	  document.write(JSON.stringify(list, null, 2));
+	})
+	.catch(function(err) {
+	  console.log(err.name + ": " + err.message);
+	});
+	
+	
+</script>
+</body>
+</html>

dock.html

@@ -50,6 +50,12 @@ button{
 	transform-origin: 0 0;
 }
 
+.gone {
+	position: absolute;
+	display:inline-block;
+	left: -9999px;
+}
+
 </style>
 </head>
 <body>
@@ -69,17 +75,35 @@ function copyFunction(copyText) {
 
 }
 function generateStreamID(){
-		var text = "";
-		var possible = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789";
-		for (var i = 0; i < 7; i++){
-			text += possible.charAt(Math.floor(Math.random() * possible.length));
+	var text = "";
+	var possible = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789";
+	for (var i = 0; i < 7; i++){
+		text += possible.charAt(Math.floor(Math.random() * possible.length));
+	}
+	console.log(text);
+	return text;
+};
+function toHexString(byteArray){
+	return Array.prototype.map.call(byteArray, function(byte){
+		return ('0' + (byte & 0xFF).toString(16)).slice(-2);
+	}).join('');
+}
+generateHash = function (str, length=false){
+	var buffer = new TextEncoder("utf-8").encode(str);
+	return crypto.subtle.digest("SHA-256", buffer).then(
+		function (hash) {
+			hash = new Uint8Array(hash);
+			if (length){
+				hash = hash.slice(0, parseInt(parseInt(length)/2));
+			}
+			hash = toHexString(hash);
+			return hash;
 		}
-		console.log(text);
-		return text;
-	};
+	);
+};
 
 function generateInvite(){
-	var title = encodeURI(getById("videoname").value);
+	var title = encodeURI(getById("videoname").value.replace(/[\W]+/g,"_"));
 	if (title.length){
 		title = "&label="+title;
 	}
@@ -93,34 +117,31 @@ function generateInvite(){
 	if (getById("invite_vp9").checked){
 		viewstr+="&codec=vp9";
 	}
+	if (getById("invite_h264").checked){
+		viewstr+="&codec=h264";
+	}
 	if (getById("invite_stereo").checked){
 		viewstr+="&stereo";
 		sendstr+="&stereo";
 	}
-	if (getById("invite_secure").checked){
-		sendstr+="&secure";
-	}
+	//if (getById("invite_secure").checked){
+	//	sendstr+="&secure";
+	//}
 	if (getById("invite_hidescreen").checked){
 		sendstr+="&webcam";
 	}
 
-	if (getById("invite_remotecontrol").checked){  //
-		var remote_gen_id = generateStreamID();
-		sendstr+="&remote="+remote_gen_id; // security
-		viewstr+="&remote="+remote_gen_id;
-	}
+	//if (getById("invite_remotecontrol").checked){  //
+	//	var remote_gen_id = generateStreamID();
+	//	sendstr+="&remote="+remote_gen_id; // security
+	//	viewstr+="&remote="+remote_gen_id;
+	//}
 
 	if (getById("invite_joinroom").value.trim().length){
-		sendstr+="&room="+getById("invite_joinroom").value.trim();
-		viewstr+="&scene=1&room="+getById("invite_joinroom").value.trim();
+		sendstr+="&room="+getById("invite_joinroom").value.replace(/[\W]+/g,"_");
+		viewstr+="&scene&room="+getById("invite_joinroom").value.replace(/[\W]+/g,"_");
 	}
 
-	if (getById("invite_password").value.trim().length){
-		sendstr+="&password";
-		viewstr+="&password="+getById("invite_password").value.trim();
-	}
-
-
 	if (getById("invite_group_chat_type").value){ //  0 is default
 		if (getById("invite_group_chat_type").value==1){ // no video
 			sendstr+="&novideo";
@@ -138,14 +159,35 @@ function generateInvite(){
 			sendstr+="&quality=2";
 		}
 	}
-
-	sendstr = 'https://obs.ninja/?push=' + sid + sendstr;
-	viewstr = 'https://obs.ninja/?view=' + sid + viewstr + title;
-	getById("container-setup").style.display="none";
-	getById("container-links").style.display="block";
 	
-	getById("guest-link").value = sendstr;
-	getById("obs-link").value = viewstr;
+	var href = window.location.href;
+	var dir = href.substring(0, href.lastIndexOf('/')) + "/";
+	
+	var salt = location.hostname; // "obs.ninja" is the expected default. You will want to change this if hosting dock.html locally.
+	
+	if (getById("invite_password").value.trim().length){
+		generateHash(getById("invite_password").value.trim().replace(/[\W]+/g,"_")+salt,4).then(function(hash){
+			sendstr+="&hash="+hash;
+			viewstr+="&password="+getById("invite_password").value.trim();
+			sendstr = dir+'?push=' + sid + sendstr;
+			viewstr = dir+'?view=' + sid + viewstr + title;
+			getById("container-setup").style.display="none";
+			getById("container-links").style.display="block";
+			
+			getById("guest-link").value = sendstr;
+			getById("obs-link").value = viewstr;
+		});
+	} else {
+		sendstr = dir+'?push=' + sid + sendstr;
+		viewstr = dir+'?view=' + sid + viewstr + title;
+		getById("container-setup").style.display="none";
+		getById("container-links").style.display="block";
+		
+		getById("guest-link").value = sendstr;
+		getById("obs-link").value = viewstr;
+	}
+	
+	
 }
 
 function goBack(){
@@ -155,14 +197,17 @@ function goBack(){
 
 document.addEventListener("dragstart", event => {
 	var url = event.target.href || event.target.value;
+	
 	if (!url || !url.startsWith('https://')) return;
 	if (event.target.dataset.drag!="1"){
 		return;
 	}
+	//event.target.ondragend = function(){event.target.blur();}
+	
 	var streamId = url.split('view=');
 	var label = url.split('label=');
 
-	url += '&layer-name=OBS.Ninja';
+	url += '&layer-name=OBSN';
 	if (streamId.length>1) url += ': ' + streamId[1].split('&')[0];
 	if (label.length>1) url += ' - ' + decodeURI(label[1].split('&')[0]);
 	
@@ -170,8 +215,12 @@ document.addEventListener("dragstart", event => {
 	url += '&layer-width=1920'; // this isn't always 100% correct, as the resolution can fluxuate, but it is probably good enough
 	url += '&layer-height=1080';
 	
-	console.warn(url);
+	event.dataTransfer.setDragImage(document.querySelector('#dragImage'), 24, 24);
 	event.dataTransfer.setData("text/uri-list", encodeURI(url));
+	//event.dataTransfer.setData("url", encodeURI(url));
+	
+	//warnlog(event);
+	
 });
 
 </script>
@@ -185,7 +234,9 @@ document.addEventListener("dragstart", event => {
 	
 	<input type="checkbox" id="invite_bitrate" /><label for="invite_bitrate"> <span data-translate="unlock-video-bitrate">Unlock Video Bitrate (20mbps)</span></label>
 	<br />
-	<input type="checkbox" id="invite_vp9" /><label for="invite_vp9"> <span data-translate="force-vp9-video-codec">VP9 Video Codec</span></label>
+	<input type="checkbox" id="invite_vp9" onclick="getById('invite_h264').checked=false;" /><label for="invite_vp9"> <span data-translate="force-vp9-video-codec">VP9 Video Codec</span></label>
+	<br />
+	<input type="checkbox" id="invite_h264" onclick="getById('invite_vp9').checked=false;" /><label for="invite_h264"> <span data-translate="force-h264-video-codec">H264 Video Codec</span></label>
 	<br />
 	<input type="checkbox" id="invite_stereo" /><label for="invite_stereo"> <span data-translate="enable-stereo-and-pro">Stereo and Pro HD Audio</span></label>
 	<br />
@@ -199,17 +250,11 @@ document.addEventListener("dragstart", event => {
 	</select>
 	<br />
 	<br />
-	<input type="checkbox" id="invite_secure" />
-	<label for="invite_secure"> <span data-translate="high-security-mode">High Security Mode</span></label>
-	<br />
 	<input type="checkbox" id="invite_hidescreen" />
 	<label for="invite_hidescreen"> <span data-translate="hide-screen-share">Hide Screenshare Option</span></label>
 	<br />
-	<input type="checkbox" id="invite_remotecontrol" />
-	<label for="invite_remotecontrol"> <span data-translate="allow-remote-control">Remote Control Camera Zoom</span></label>
 	<br />
-	<br />
-	<label for="videoname">Stream label:</label>
+	<label for="videoname">Stream Label:</label>
 	<input id="videoname" placeholder="Give stream a description"  />
 	<br />
 	<br />
@@ -245,5 +290,9 @@ document.addEventListener("dragstart", event => {
 			<i>(links are draggable)</i>
 	</div>
 </div>
+<div class="gone" >
+	<!-- This image is used when dragging elements -->
+	<img src="./media/favicon-32x32.png" id="dragImage" />
+</div>
 </body>
 </html>

dual.html

@@ -0,0 +1,331 @@
+<html>
+<head><title>Dual Input</title>
+<style>
+body{
+	padding:0;
+	margin:0;
+}
+iframe {
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+	margin:0px;
+	min-height: 100px;
+    min-width: 100px;
+    max-height: 95%;
+    max-width: 99%%;
+    float: left;
+    position: fixed;
+}
+
+#viewlink {
+	width:400px;
+}
+
+
+input{
+	padding:5px;
+	margin:5px;
+}
+button{
+	padding:5px;
+	margin:5px;
+	position:relative;
+	
+}
+
+.menu {
+	z-index: 10;
+	float:right;
+	right: 20px;
+	color: #fff;
+}
+
+.close {
+	background-color: #d33;
+    color: #fff;
+}
+
+.reload {
+	background-color: #0a0;
+	color: #fff;
+}
+
+.popup {
+	z-index: 9;
+	background-color: #f1f1f1;
+	border: 1px solid #d3d3d3;
+	text-align: center;
+	min-height: 100px;
+	min-width: 100px;
+	max-height: 95%;
+    max-width: 99%;
+	scale: 0.5;
+}
+
+.popup {
+  position: absolute;
+  /*resize: both; !*enable this to css resize*! */
+  overflow: auto;
+}
+
+.popup-header {
+  cursor: move;
+  background-color: #2196f3;
+}
+
+
+
+.popup .resizer-right {
+  width: 5px;
+  height: 100%;
+  background: transparent;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: e-resize;
+}
+
+.popup .resizer-bottom {
+  width: 100%;
+  height: 5px;
+  background: transparent;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: n-resize;
+}
+
+.popup .resizer-both {
+  width: 5px;
+  height: 5px;
+  background: transparent;
+  z-index: 10;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: nw-resize;
+}
+
+
+/*NOSELECT*/
+
+.popup * {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+
+</style>
+</head>
+<body>
+
+<input placeholder="Enter an OBS.Ninja Room Link" id="viewlink" />
+
+<button onclick="loadIframe();">Load URL</button>You can drag and resize the generated windows; multiple can be created.
+
+<div id="container"></div>
+
+<script>
+var currentZIndex = 100;
+function initDragElement(popup){
+
+	var pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+
+	var elmnt = null;
+
+	var header = getHeader(popup);
+	var iframe = getIFrame(popup);
+
+	popup.onmousedown = function() {
+	  this.style.zIndex = "" + ++currentZIndex;
+	};
+
+	if (header) {
+	  header.parentPopup = popup;
+	  header.onmousedown = dragMouseDown;
+	}
+  
+
+  function dragMouseDown(e) {
+    elmnt = this.parentPopup;
+    elmnt.style.zIndex = "" + ++currentZIndex;
+
+    e = e || window.event;
+    // get the mouse cursor position at startup:
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.onmouseup = closeDragElement;
+    // call a function whenever the cursor moves:
+    document.onmousemove = elementDrag;
+  }
+
+  function elementDrag(e) {
+    if (!elmnt) {
+      return;
+    }
+
+    e = e || window.event;
+    // calculate the new cursor position:
+    pos1 = pos3 - e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    // set the element's new position:
+    elmnt.style.top = elmnt.offsetTop - pos2 + "px";
+    elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
+	
+	iframe.style.top = elmnt.offsetTop - pos2 + "px";
+	iframe.style.left = elmnt.offsetLeft - pos1 + "px";
+  }
+
+  function closeDragElement() {
+    /* stop moving when mouse button is released:*/
+    document.onmouseup = null;
+    document.onmousemove = null;
+  }
+
+  function getHeader(element) {
+    var headerItems = element.getElementsByClassName("popup-header");
+
+    if (headerItems.length === 1) {
+      return headerItems[0];
+    }
+
+    return null;
+  }
+  
+  function getIFrame(element) {
+    var headerItems = element.getElementsByTagName("iframe");
+
+    if (headerItems.length === 1) {
+      return headerItems[0];
+    }
+
+    return null;
+  }
+}
+
+function initResizeElement(p) {
+
+	var iframe = getIFrame(p);
+	var element = null;
+	var startX, startY, startWidth, startHeight;
+
+    var right = document.createElement("div");
+    right.className = "resizer-right";
+    p.appendChild(right);
+    right.addEventListener("mousedown", initDrag, false);
+    right.parentPopup = p;
+
+    var bottom = document.createElement("div");
+    bottom.className = "resizer-bottom";
+    p.appendChild(bottom);
+    bottom.addEventListener("mousedown", initDrag, false);
+    bottom.parentPopup = p;
+
+    var both = document.createElement("div");
+    both.className = "resizer-both";
+    p.appendChild(both);
+    both.addEventListener("mousedown", initDrag, false);
+    both.parentPopup = p;
+  
+
+  function initDrag(e) {
+    element = this.parentPopup;
+
+    startX = e.clientX;
+    startY = e.clientY;
+    startWidth = parseInt(
+      document.defaultView.getComputedStyle(element).width,
+      10
+    );
+    startHeight = parseInt(
+      document.defaultView.getComputedStyle(element).height,
+      10
+    );
+    document.documentElement.addEventListener("mousemove", doDrag, false);
+    document.documentElement.addEventListener("mouseup", stopDrag, false);
+	document.documentElement.addEventListener("click", stopDrag, false)
+  }
+
+  function doDrag(e) {
+	if (e.buttons==0){
+		stopDrag(e);
+		return false;
+	}
+  
+    element.style.width = startWidth + e.clientX - startX + "px";
+    element.style.height = startHeight + e.clientY - startY + "px";
+	
+	iframe.style.width = startWidth + e.clientX - startX + "px";
+	iframe.style.height = startHeight + e.clientY - startY + "px";
+  }
+
+  function stopDrag(e) {
+    document.documentElement.removeEventListener("mousemove", doDrag, false);
+    document.documentElement.removeEventListener("mouseup", stopDrag, false);
+  }
+
+  function getIFrame(element) {
+    var headerItems = element.getElementsByTagName("iframe");
+
+    if (headerItems.length === 1) {
+      return headerItems[0];
+    }
+
+    return null;
+  }
+}
+  
+function loadIframe(){
+
+	var iframeContainer = document.createElement("div");
+	iframeContainer.className="popup";
+	iframeContainer.style.zIndex = "" + ++currentZIndex;
+	iframeContainer.style.width="325px";
+	iframeContainer.style.height="420px";
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Move";
+	button.className = "popup-header menu";
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Close";
+	button.className = "menu close";
+	button.onclick = function(){iframe.contentWindow.postMessage({"close":true}, '*');iframe.parentNode.parentNode.removeChild(iframeContainer);}
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Reload";
+	button.className = "menu reload";
+	button.onclick = function(){iframe.contentWindow.postMessage({"reload":true}, '*');}
+	iframeContainer.appendChild(button);
+
+	var iframe = document.createElement("iframe");
+	iframe.allow="autoplay";
+	iframe.src = document.getElementById("viewlink").value || "https://obs.ninja";
+	iframe.style.width="325px";
+	iframe.style.height="420px";
+	
+	iframeContainer.appendChild(iframe);
+	
+	document.getElementById("container").appendChild(iframeContainer);
+
+	initDragElement(iframeContainer);
+	initResizeElement(iframeContainer);
+	
+}
+
+</script>
+</body>
+</html>

electron.html

@@ -1,320 +1,585 @@
-<html>
-<head><style>
-html {
-	border:0;
-	margin: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;
-	
-}
-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;
-}
-</style></head>
-<body >
-
-<div id="header" style="-webkit-app-region: drag;color:white;font-size:2em">OBS.Ninja</div>
-<div class="formcss" >
-
-	<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><br><br>
-	<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" style="max-width:400px"></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.
-*
-*/
-
-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){
-	if (listed==true){
-		return;
-	} 
-	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(){alert("Failed to list available output devices\n\nPlease ensure you allowed the microphone permissions.");});
-}
-
-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.
-}
-
-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, "stereo", "");
-					alert('Audio bitrate increased to 256kbps.\n\nPlease note: the Video Publisher must also have the stereo flag enabled for stereo to work.');
-				} else {
-					url=updateURLParameter(url, "stereo", false);
-				}
-			  }
-			  
-			  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);
-          window.location = url;
-    };
-</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: 5px 10px; 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/" 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 ((location.hostname.toLowerCase() == "vdo.ninja") || (location.hostname.toLowerCase() == "obs.ninja")){
+	try {
+		if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) { 
+			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);
+				try{
+					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){}
+			}
+		}
+	} 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;
+	} else if (url.startsWith("youtube.com")){
+		url = "https://"+url;
+	} else if (url.startsWith("twitch.tv")){
+		url = "https://"+url;
+	} else if (url.startsWith("vdo.ninja")){
+		url = "https://"+url;
+	} else if (url.startsWith("http://")){
+		// pass
+	} else if (url.startsWith("https://")){
+		// pass
+	} else if (url.startsWith("file:")){
+		// pass
+	} else {
+		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 renamed to 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>

en.json

@@ -0,0 +1,394 @@
+{
+  "titles": {
+    "join-by-room-name-here": "Geben Sie einen Raumnamen ein",
+    "join-room": "Join room",
+    "load-the-next-guest-in-queue": "Load the next guest in queue",
+    "toggle-the-chat": "Toggle the Chat",
+    "mute-the-speaker": "Mute the Speaker",
+    "mute-the-mic": "Mute the Mic",
+    "disable-the-camera": "Disable the Camera",
+    "share-a-screen-with-others": "Share a Screen with others",
+    "create-a-secondary-stream": "Create a Secondary Stream",
+    "share-a-website-as-an-embedded-iframe": "Share a website as an embedded iFRAME",
+    "room-settings": "Room Settings",
+    "your-audio-and-video-settings": "Your audio and video Settings",
+    "hangup-the-call": "Hangup the Call",
+    "alert-the-host-you-want-to-speak": "Alert the host you want to speak",
+    "record-your-stream-to-disk": "Record your stream to disk",
+    "you-can-also-enable-the-director-s-video-output-afterwards-by-clicking-the-setting-s-button": "You can also enable the director`s Video Output afterwards by clicking the Setting`s button",
+    "cancel-the-director-s-video-audio": "Cancel the Director's Video/Audio",
+    "submit-any-error-logs": "Submit any error logs",
+    "show-help-info": "Show Help Info",
+    "language-options": "Language Options",
+    "add-to-calendar": "Add to Calendar",
+    "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-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 in the OBS Browser Source 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",
+    "allow-for-remote-stat-monitoring-via-the-monitoring-tool": "Allow for remote stat monitoring via the monitoring tool",
+    "the-guest-will-be-asked-if-they-want-to-reload-the-previous-link-when-revisiting": "The guest will be asked if they want to reload the previous link when revisiting",
+    "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",
+    "the-guest-s-self-video-preview-will-appear-tiny-in-the-top-right": "The guest's self-video preview will appear tiny in the top right",
+    "allow-the-guests-to-pick-a-virtual-backscreen-effect": "Allow the guests to pick a virtual backscreen effect",
+    "videos-use-an-animated-transition-when-being-remixed": "Videos use an animated transition when being remixed",
+    "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",
+    "show-some-prep-suggestions-to-the-guests-on-connect": "Show some prep suggestions to the guests on connect",
+    "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.",
+    "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.",
+    "the-guest-will-not-be-asked-for-a-video-device-on-connection": "The guest will not be asked for a video device on connection",
+    "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",
+    "set-the-background-color-to-bright-green": "Set the background color to bright green",
+    "fade-videos-in-over-500ms": "Fade videos in over 500ms",
+    "add-a-10px-margin-around-all-video-elements": "Add a 10px margin around all video elements",
+    "playback-the-video-with-mono-channel-audio": "Playback the video with mono-channel audio",
+    "have-the-videos-fit-their-respective-areas-even-if-it-means-cropping-a-bit": "Have the videos fit their respective areas, even if it means cropping a bit",
+    "have-videos-be-aligned-with-sizing-designed-for-vertical-video": "Have videos be aligned with sizing designed for vertical video",
+    "copy-this-stream-id-to-the-clipboard": "Copy this Stream ID to the clipboard",
+    "click-here-to-edit-the-label-for-this-stream-changes-will-propagate-to-all-viewers-of-this-stream": "Click here to edit the label for this stream. Changes will propagate to all viewers of this stream",
+    "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.",
+    "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-this-video-to-any-remote-scene-1-": "Add this Video to any remote '&scene=1'",
+    "mute-this-guest-everywhere": "Mute this guest everywhere",
+    "add-this-video-to-any-remote-scene-2-": "Add this Video to any remote '&scene=2'",
+    "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",
+    "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",
+    "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",
+    "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*",
+    "remotely-change-the-volume-of-this-guest": "Remotely change the volume of this guest",
+    "disable-video-preview": "Disable Video Preview",
+    "low-quality-preview": "Low-Quality Preview",
+    "high-quality-preview": "High-Quality Preview",
+    "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",
+    "set-to-audio-channel-6": "Set to Audio Channel 6",
+    "remote-audio-settings": "Remote Audio Settings",
+    "advanced-video-settings": "Advanced Video Settings",
+    "this-will-ask-the-remote-guest-for-permission-to-change": "This will ask the remote guest for permission to change",
+    "a-direct-solo-view-of-the-video-audio-stream-with-nothing-else-its-audio-can-be-remotely-controlled-from-here": "A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here",
+    "this-guest-raised-their-hand-click-this-to-clear-notification-": "This guest raised their hand. Click this to clear notification.",
+    "add-to-scene-2": "Add to Scene 2",
+    "activate-or-reload-this-video-device-": "Activate or Reload this video device.",
+    "tip-hold-ctrl-command-to-select-multiple": "tip: Hold CTRL (command) to select Multiple",
+    "improve-performance-and-quality-with-this-tip": "Improve performance and quality with this tip",
+    "increase-this-at-your-peril-changes-the-total-inbound-video-bitrate-per-guest-mobile-devices-excluded-webp-mode-also-excluded-": "Increase this at your peril. Changes the total inbound video bitrate per guest; mobile devices excluded. Webp-mode also excluded.",
+    "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",
+    "hide-this-window": "Hide this window",
+    "cycle-the-cameras": "Cycle the Cameras",
+    "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",
+    "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",
+    "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",
+    "start-streaming": "start streaming",
+    "remote-screenshare-into-obs": "Remote Screenshare into OBS",
+    "create-reusable-invite": "Create Reusable Invite",
+    "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",
+    "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.",
+    "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",
+    "more-options": "More Options",
+    "hold-ctrl-or-cmd-to-select-multiple-files": "Hold CTRL (or CMD) to select multiple files",
+    "enter-an-https-url": "Enter an HTTPS URL",
+    "creative-commons-by-3-0": "Creative Commons BY 3.0",
+    "have-screen-shares-stream-id-s-use-a-predictable-prefixed-value-instead-of-a-random-one-": "Have screen-shares stream ID's use a predictable prefixed value instead of a random one.",
+    "toggle-solo-voice-chat-or-hold-ctrl-cmd-when-selecting-to-make-it-two-way-private-": "Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private.",
+    "transfer-any-file-to-the-group": "Transfer any file to the group",
+    "transfer-any-file": "Transfer any file",
+    "the-camera-will-load-in-a-default-safe-mode-that-may-work-if-other-modes-fail-": "The camera will load in a default safe-mode that may work if other modes fail.",
+    "disable-animated-transitions-during-video-mixing": "Disable animated transitions during video mixing",
+    "allow-the-guest-to-select-a-file-to-upload-to-the-director-once-shared-it-will-show-in-the-chat-as-a-download-link-": "Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link.",
+    "set-a-countdown-timer-that-this-guest-sees": "Set a countdown timer that this guest sees"
+  },
+  "innerHTML": {
+    "copy-this-url": "Copy this URL into an OBS \"Browser Source\"",
+    "you-are-in-the-control-center": "Control center for room:",
+    "joining-room": "You are in room",
+    "push-to-talk-enable": " enable director`s microphone or video<br>(only guests can see this feed)",
+    "hide-the-links": " LINKS (GUEST INVITES &amp; SCENES)",
+    "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\">Click Here for a quick overview and help</span>\n\t\t\t\t\t",
+    "click-here-for-help": "Click Here for a quick overview and help",
+    "welcome-to-control-room": "\n\t\t\t\t\t\t<b>Welcome. This is the director's control-room for the group-chat.</b><br><br>\n\t\t\t\t\t\tYou can host a group chat with friends using a room. Share the blue link to invite guests who will join the chat automatically.\n\t\t\t\t\t\t<br><br>\n\t\t\t\t\t\t<font style=\"color:red\">Known Limitations with Group Rooms:</font><br>\n\t\t\t\t\t\t<li>A group room can handle up to around 30 guests, depending on numerous factors, including CPU and available bandwidth of all guests in the room. To achieve more than around 7-guests though, you will likely want to <a href=\"https://www.youtube.com/watch?v=bpRa8-UYCGc\" title=\"Youtube Video demoing how to do this\">disable video sharing between guests</a>. Using &amp;broadcast, &amp;roombitrate=0 or &amp;novideo are options there.</li>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<li>Videos will appear of low quality on purpose for guests and director; this is to save bandwidth and CPU resources. It will be high-quality within OBS still though.</li>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<li>The state of the scenes, such as which videos are active in a scene, are lost when the director resets the control-room or the scene.</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\tFurther Notes:<br><br>\n\t\t\t\t\t\t<li>Links to Solo-views of each guest video are offered under videos as they load. These can be used within an OBS Browser Source.</li>\n\t\t\t\t\t\t<li>You can use the auto-mixing Group Scenes, the green links, to auto arrange multiple videos for you in OBS.</li>\n\t\t\t\t\t\t<li>You can use this control room to record isolated video or audio streams, but it is an experimental feature still.</li>\n\t\t\t\t\t\t<li>If you transfer a guest from one room to another, they won't know which room they have been transferred to.</li>\n\t\t\t\t\t\t<li>OBS will see a guest's video in high-quality; the default video bitrate is 2500kbps. Setting higher bitrates will improve motion.</li>\n\t\t\t\t\t\t<li>VP8 is typically the default video codec, but using &amp;codec=vp9 or &amp;codec=h264 as a URL in OBS can help to reduce corrupted video puke issues.</li>\n\t\t\t\t\t\t<li>&amp;stereo=2 can be added to guests to turn off audio effects, such as echo cancellation and noise-reduction.</li>\n\t\t\t\t\t\t<li>https://invite.cam is a free service provided that can help obfuscuate the URL parameters of an invite link given to guests.</li>\n\t\t\t\t\t\t<li>Adding &amp;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>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\n\t\t\t\t\t\tFor advanced URL options and parameters, <a href=\"https://docs.vdo.ninja/advanced-settings\">see the Wiki.</a>\n\t\t\t\t\t",
+    "invite-users-to-join": "Guests can use the link to join the group room",
+    "guests-hear-others": "Guests hear others",
+    "capture-a-group-scene": "CAPTURE A GROUP SCENE",
+    "this-is-obs-browser-source-link": "Use in OBS or other studio software to capture the group video mix",
+    "auto-add-guests": "Auto-add guests",
+    "pro-audio-mode": "Pro-audio mode",
+    "hide-audio-only-sources": "Hide audio-only sources",
+    "remote-monitoring": "Remote Monitoring",
+    "invite-saved-to-cookie": "Invite saved to cookie",
+    "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",
+    "fade-videos-in": "Fade videos in",
+    "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",
+    "show-guest-tips": "Show guest setup tips",
+    "low-cpu=broadcast-codec": "Low-CPU broadcast codec",
+    "only-see-director-feed": "Only see the director's feed",
+    "mute-microphone-by-default": "Muted; guest can unmute",
+    "unmute-by-director-only": "Muted; director can unmute",
+    "guest-joins-with-no-camera": "Guest joins with no camera",
+    "obfuscate-link": "Obfuscate link and parameters",
+    "this-can-reduce-packet-loss": "Can reduce packet loss video corruption in OBS on PC",
+    "use-h264-codec": "Use H264 codec",
+    "show-active-speakers": "Show active speakers",
+    "green-background": "Green background",
+    "add-margin": "Add margin to videos",
+    "force-mono-audio": "Force mono audio",
+    "fill-video-space": "Crop video to fit",
+    "vertical-aspect-ratio": "Vertical video mode",
+    "learn-more-about-params": "Learn more about URL parameters at ",
+    "forward-to-room": "Transfer",
+    "send-direct-chat": "<i class=\"las la-envelope\"></i> Message",
+    "disconnect-guest": "Hangup",
+    "voice-chat": "<i class=\"las la-microphone\" style=\"color:#090\"></i> Solo Talk",
+    "add-to-scene": "add to scene 1",
+    "mute-guest": "mute guest",
+    "More-scene-options": "More scene options",
+    "add-to-scene2": "add to scene 2",
+    "mute-scene": "mute in scene",
+    "force-keyframe": "Rainbow Puke Fix",
+    "stats-remote": " Scene Stats",
+    "additional-controls": "Additional controls",
+    "solo-video": "Highlight guest",
+    "hide-guest": "hide guest",
+    "toggle-remote-speaker": "Deafen Guest",
+    "toggle-remote-display": "Blind Guest",
+    "order-down": "<i class=\"las la-minus\"></i>",
+    "order-up": "<i class=\"las la-plus\"></i>",
+    "change-url": "Change URL",
+    "change-params": "URL Params",
+    "record-local": " Record Local",
+    "record-remote": " Record Remote",
+    "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>",
+    "advanced-audio-settings": "<i class=\"las la-sliders-h\"></i> Audio Settings",
+    "advanced-camera-settings": "<i class=\"las la-sliders-h\"></i> Video Settings",
+    "user-raised-hand": "Lower Raised Hand",
+    "unmute": "un-mute",
+    "unhide-guest": "un-hide",
+    "undeafen": "un-deafen",
+    "unblind": "un-blind",
+    "close": "close",
+    "send-message": "send message<s pan=\"\"> </s>",
+    "record-director-local": " Record",
+    "video-source": " Video Source ",
+    "max-resolution": "Max Resolution",
+    "balanced": "Balanced",
+    "smooth-cool": "Smooth and Cool",
+    "select-audio-source": " Audio Source(s) ",
+    "select-output-source": " Audio Output Destination: ",
+    "select-digital-effect": " Digital Video Effects: ",
+    "no-effects-applied": "No effects applied",
+    "blurred-background": "Blurred background",
+    "digital-greenscreen": "Digital greenscreen",
+    "virtual-background": "Virtual background",
+    "select-local-image": "Select Local Image",
+    "close-settings": "Close Settings",
+    "advanced": "Advanced ",
+    "open-in-new-tab": "Open in new Tab",
+    "copy-to-clipboard": "Copy to Clipboard",
+    "send-chat": "Send",
+    "apply-new-guest-settings": "Apply settings",
+    "cancel": "Cancel",
+    "invisible-guests": "Not Visible",
+    "available-languages": "Available Languages:",
+    "add-more-here": "Add More Here!",
+    "add-to-calendar": "Add details to your Calendar:",
+    "add-to-google-calendar": "Add to Google Calendar",
+    "add-to-outlook-calendar": "Add to Outlook Calendar",
+    "add-to-yahoo-calendar": "Add to Yahoo Calendar",
+    "logo-header": "\n\t\t\t\t\t<font id=\"qos\">V</font>DO.Ninja \n\t\t\t\t",
+    "only-director-can-hear-you": "Only the director can hear you currently.",
+    "director-muted-you": "The director has muted you.",
+    "add-group-chat": "Create a Room",
+    "rooms-allow-for": "Rooms allow for group-chat and the tools to manage multiple guests.",
+    "room-name": "Room Name",
+    "password-input-field": "Password",
+    "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": "Enter the Room's Control Center",
+    "show-tips": "Show me some tips..",
+    "added-notes": "\n\t\t\t\t\t\t\t\t<u>\n\t\t\t\t\t\t\t\t\t<i>Important Tips:</i><br><br>\n\t\t\t\t\t\t\t\t</u>\n\t\t\t\t\t\t\t\t<li>Disabling video sharing between guests will improve performance</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>The \"Recording\" option is considered experimental.</li>\n\t\t\t\t\t\t\t\t<li><a href=\"https://params.vdo.ninja\" style=\"color:black;\"><u>Advanced URL parameters</u></a> are available to customize rooms.</li>\n\t\t\t\t\t\t\t",
+    "back": "Back",
+    "add-your-camera": "Add your Camera to OBS",
+    "ask-for-permissions": "Allow Access to Camera/Microphone",
+    "waiting-for-camera": "Waiting for Camera to Load",
+    "no-audio": "No Audio",
+    "add-a-password": " Add a Password:",
+    "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",
+    "remote-screenshare-obs": "Remote Screenshare into OBS",
+    "select-screen-to-share": "SELECT SCREEN TO SHARE",
+    "audio-sources": "Audio Sources",
+    "application-audio-capture": "For application-specific audio capture, <a href=\"https://docs.vdo.ninja/audio\" style=\"color: #007AC8;\">see here</a>",
+    "create-reusable-invite": "Create Reusable Invite",
+    "here-you-can-pre-generate": "Here you can pre-generate a reusable Browser Source link and a related guest invite link.",
+    "generate-invite-link": "GENERATE THE INVITE LINK",
+    "advanced-paramaters": "Advanced Options",
+    "unlock-video-bitrate": "Unlock Video Bitrate (20mbps)",
+    "force-vp9-video-codec": "Force VP9 Video Codec",
+    "enable-stereo-and-pro": "Enable Stereo and Pro HD Audio",
+    "video-resolution": "Video Resolution: ",
+    "hide-mic-selection": "Force Default Microphone",
+    "hide-screen-share": "Hide Screenshare Option",
+    "allow-remote-control": "Remote Control Camera Zoom (android)",
+    "obfuscate_url": "Obfuscate the Invite URL",
+    "add-a-password-to-stream": " Add a password:",
+    "add-the-guest-to-a-room": " Add the guest to a room:",
+    "invite-group-chat-type": "This room guest can:",
+    "can-see-and-hear": "Can see and hear the group chat",
+    "can-hear-only": "Can only hear the group chat",
+    "cant-see-or-hear": "Cannot hear or see the group chat",
+    "share-local-video-file": "Stream Media File",
+    "select-the-video-files-to-share": "SELECT THE VIDEO FILES TO SHARE",
+    "share-website-iframe": "Share Website",
+    "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\t<h2>What is VDO.Ninja</h2>\n\t\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\t<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>\n\t\t\t\t\t\t\t<li>Bring live video from your smartphone, remote computer, or friends directly into OBS or other studio software.</li>\n\t\t\t\t\t\t\t<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>\n\t\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\t<li>Youtube video \n\t\t\t\t\t\t\t\t<i class=\"lab la-youtube\"></i>\n\t\t\t\t\t\t\t\t<a href=\"https://www.youtube.com/watch?v=vLpRzMjUDaE&amp;list=PLWodc2tCfAH1WHjl4WAOOoRSscJ8CHACe&amp;index=2\" alt=\"Youtube video demoing VDO.Ninja\">Demoing it here</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\t<i>\n\t\t\t\t\t\t\t\t<font style=\"color: red;\">Known issues:</font>\n\t\t\t\t\t\t\t</i>\n\t\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\tSome devices that use H264 hardware encoding can experience video glitching; switching to VP8 or VP9 as a codec can help.\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\tIf using multiple group scenes at a time, iOS devices may fail to work if the hardware encoders max out. Perhaps try VP8 as a codec instead.\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\tA 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>.\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\t<h4 style=\"color:#daad09;\">\n\t\t\t\t\t\t\t\t👋 👀  Welcome to VDO Ninja! We've rebranded! 📼  Nothing else is changing and we're staying 100% free.\n\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\t🌻 Site Updated on July 8th. The <a href=\"https://docs.vdo.ninja/release-notes/v18_3\">v18.3 release notes are here</a>. If new issues occur, the previous version can also be <a href=\"https://vdo.ninja/v18/\">found here</a>.\n\n\t\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t   🛠 For support, see the <a href=\"https://www.reddit.com/r/VDONinja/\">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>\n\t\t\t\t\t\t\t</h3> \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t",
+    "animate-mixing": "Animate mixing",
+    "prefix-screenshare": "Prefix screenshare IDs",
+    "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\tWelcome to VDO.Ninja! You can send text messages directly to connected peers from here.\n\t\t\t\t",
+    "privacy-disabled": "Privacy warning: The director will be able to remotely access your camera and microphone if you continue.",
+    "face-mesh": "Face mesh (slow load)",
+    "anonymous-mask": "Anonymous mask",
+    "dog-face": "Dog ears and nose",
+    "compatibility-mode": "Compatibility mode",
+    "disable-animated-mixing": "Disable animations",
+    "request-upload": " Request File",
+    "create-timer": "Create Timer",
+    "edit-url": "Edit URL manually",
+    "mirror-video": "Mirror",
+    "toggle-control-video": "Toggle control bar",
+    "picture-in-picture": "Picture-in-picture",
+    "chrome-cast": "Cast.."
+  },
+  "placeholders": {
+    "join-by-room-name-here": "Join by Room Name here",
+    "enter-your-message-here": "Enter your message here",
+    "enter-chat-message-to-send-here": "Enter chat message to send here",
+    "enter-the-room-name-here": "Enter the room name here",
+    "enter-the-room-password-here": "Enter the room password here",
+    "enter-a-room-name-here": "Enter a Room Name here",
+    "optional-room-password-here": "Optional room password here",
+    "optional": "optional",
+    "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"
+  },
+  "miscellaneous": {
+    "start": "START",
+    "new-display-name": "Enter a new Display Name for this stream",
+    "submit-error-report": "Press OK to submit any error logs to VDO.Ninja. Error logs may contain private information.",
+    "director-redirect-1": "The director wishes to redirect you to the URL: ",
+    "director-redirect-2": "\n\nPress OK to be redirected.",
+    "add-a-label": "Add a label",
+    "audio-processing-disabled": "Audio processing is disabled with this guest. Can't mute or change volume",
+    "not-the-director": "<font color='red'>You are not the director of this room.  You will have limited to no control.  You can try claiming the room after the first director leaves.</font>",
+    "room-is-claimed": "The room is already claimed by someone else.\n\nOnly the first person to join a room is the assigned director.\n\nRefresh after the first director leaves to claim.",
+    "room-is-claimed-codirector": "The room is already claimed by someone else.\n\nTrying to join as a co-director...",
+    "streamid-already-published": "The stream ID you are publishing to is already in use.\n\nPlease try with a different invite link or refresh to retry again.\n\nYou will now be disconnected.",
+    "director": "Director",
+    "unknown-user": "Unknown User",
+    "room-test-not-good": "The room name 'test' is very commonly used and may not be secure.\n\nAre you sure you wish to proceed?",
+    "load-previous-session": "Would you like to load your previous session's settings?",
+    "enter-password": "Please enter the password below: \n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "enter-password-2": "Please enter the password below: \n\n(Note: Passwords are case-sensitive.)",
+    "enter-director-password": "Please enter the director's password:\n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "password-incorrect": "The password was incorrect.\n\nRefresh and try again.",
+    "enter-display-name": "Please enter your display name:",
+    "enter-new-display-name": "Enter a new Display Name for this stream",
+    "what-bitrate": "What bitrate would you like to record at? (kbps)",
+    "enter-website": "Enter a website URL to share",
+    "press-ok-to-record": "Press OK to start recording. Press again to stop and download.\n\nWarning: Keep this browser tab active to continue recording.\n\nYou can change the default video bitrate if desired below (kbps)",
+    "no-streamID-provided": "No streamID was provided; one will be generated randomily.\n\nStream ID: ",
+    "alphanumeric-only": "Info: Only AlphaNumeric characters should be used for the stream ID.\n\nThe offending characters have been replaced by an underscore",
+    "stream-id-too-long": "The Stream ID should be less than 45 alPhaNuMeric characters long.\n\nWe will trim it to length.",
+    "share-with-trusted": "Share only with those you trust",
+    "pass-recommended": "A password is recommended",
+    "insecure-room-name": "Insecure room name.",
+    "allowed-chars": "Allowed chars",
+    "transfer": "transfer",
+    "armed": "armed",
+    "transfer-guest-to-room": "Transfer guests to room:\n\n(Please note rooms must share the same password)",
+    "transfer-guest-to-url": "Transfer guests to new website URL.\n\n(Guests will be prompted to accept)",
+    "change-url": "change URL",
+    "mute-in-scene": "mute in scene",
+    "unmute-guest": "un-mute guest",
+    "undeafen": "un-deafen",
+    "deafen": "deafen guest",
+    "unblind": "un-blind",
+    "blind": "blind guest",
+    "unmute": "un-mute",
+    "mute-guest": "mute guest",
+    "unhide": "unhide guest",
+    "hide-guest": "hide guest",
+    "confirm-disconnect-users": "Are you sure you wish to disconnect these users?",
+    "confirm-disconnect-user": "Are you sure you wish to disconnect this user?"
+  }
+}

es.json

@@ -0,0 +1,406 @@
+{
+  "titles": {
+    "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.",
+    "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-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.",
+    "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-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",
+    "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",
+    "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",
+    "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": "Mostrar Rótulos",
+    "transfer-to-a-new-room": "Transferir a nueva Sala",
+    "enable-custom-password": "Activar password personalizado",
+    "share-a-website-as-an-embedded-iframe": "Share a website as an embedded iFRAME",
+    "room-settings": "Room Settings",
+    "your-audio-and-video-settings": "Your audio and video Settings",
+    "you-can-also-enable-the-director-s-video-output-afterwards-by-clicking-the-setting-s-button": "You can also enable the director`s Video Output afterwards by clicking the Setting`s button",
+    "allow-for-remote-stat-monitoring-via-the-monitoring-tool": "Allow for remote stat monitoring via the monitoring tool",
+    "the-guest-will-be-asked-if-they-want-to-reload-the-previous-link-when-revisiting": "The guest will be asked if they want to reload the previous link when revisiting",
+    "the-guest-s-self-video-preview-will-appear-tiny-in-the-top-right": "The guest's self-video preview will appear tiny in the top right",
+    "videos-use-an-animated-transition-when-being-remixed": "Videos use an animated transition when being remixed",
+    "show-some-prep-suggestions-to-the-guests-on-connect": "Show some prep suggestions to the guests on connect",
+    "set-the-background-color-to-bright-green": "Set the background color to bright green",
+    "fade-videos-in-over-500ms": "Fade videos in over 500ms",
+    "add-a-10px-margin-around-all-video-elements": "Add a 10px margin around all video elements",
+    "playback-the-video-with-mono-channel-audio": "Playback the video with mono-channel audio",
+    "have-the-videos-fit-their-respective-areas-even-if-it-means-cropping-a-bit": "Have the videos fit their respective areas, even if it means cropping a bit",
+    "have-videos-be-aligned-with-sizing-designed-for-vertical-video": "Have videos be aligned with sizing designed for vertical video",
+    "copy-this-stream-id-to-the-clipboard": "Copy this Stream ID to the clipboard",
+    "click-here-to-edit-the-label-for-this-stream-changes-will-propagate-to-all-viewers-of-this-stream": "Click here to edit the label for this stream. Changes will propagate to all viewers of this stream",
+    "this-will-ask-the-remote-guest-for-permission-to-change": "This will ask the remote guest for permission to change",
+    "a-direct-solo-view-of-the-video-audio-stream-with-nothing-else-its-audio-can-be-remotely-controlled-from-here": "A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here",
+    "this-guest-raised-their-hand-click-this-to-clear-notification-": "This guest raised their hand. Click this to clear notification.",
+    "increase-this-at-your-peril-changes-the-total-inbound-video-bitrate-per-guest-mobile-devices-excluded-webp-mode-also-excluded-": "Increase this at your peril. Changes the total inbound video bitrate per guest; mobile devices excluded. Webp-mode also excluded.",
+    "hide-this-window": "Hide this window",
+    "cycle-the-cameras": "Cycle the Cameras",
+    "have-screen-shares-stream-id-s-use-a-predictable-prefixed-value-instead-of-a-random-one-": "Have screen-shares stream ID's use a predictable prefixed value instead of a random one.",
+    "toggle-solo-voice-chat-or-hold-ctrl-cmd-when-selecting-to-make-it-two-way-private-": "Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private.",
+    "transfer-any-file-to-the-group": "Transfer any file to the group",
+    "transfer-any-file": "Transfer any file",
+    "the-camera-will-load-in-a-default-safe-mode-that-may-work-if-other-modes-fail-": "The camera will load in a default safe-mode that may work if other modes fail.",
+    "disable-animated-transitions-during-video-mixing": "Disable animated transitions during video mixing",
+    "allow-the-guest-to-select-a-file-to-upload-to-the-director-once-shared-it-will-show-in-the-chat-as-a-download-link-": "Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link.",
+    "set-a-countdown-timer-that-this-guest-sees": "Set a countdown timer that this guest sees",
+    "enter-a-room-name-to-quick-join": "Enter a room name to quick join"
+  },
+  "innerHTML": {
+    "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",
+    "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",
+    "waiting-for-camera": "Esperando a que se cargue la cámara",
+    "video-source": "Fuente de video",
+    "max-resolution": "Max. Resolución",
+    "balanced": "Equilibrado",
+    "smooth-cool": "Fluido",
+    "select-audio-source": "Seleccionar fuentes de audio",
+    "no-audio": "Sin 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 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 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)",
+    "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 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": "",
+    "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.</li>",
+    "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>",
+    "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",
+    "send-chat": "Enviar",
+    "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",
+    "push-to-talk-enable": " enable director`s microphone or video<br>(only guests can see this feed)",
+    "remote-monitoring": "Remote Monitoring",
+    "invite-saved-to-cookie": "Invite saved to cookie",
+    "fade-videos-in": "Fade videos in",
+    "show-guest-tips": "Show guest setup tips",
+    "green-background": "Green background",
+    "add-margin": "Add margin to videos",
+    "fill-video-space": "Crop video to fit",
+    "vertical-aspect-ratio": "Vertical video mode",
+    "add-to-scene2": "add to scene 2",
+    "user-raised-hand": "Lower Raised Hand",
+    "unmute": "un-mute",
+    "unhide-guest": "un-hide",
+    "undeafen": "un-deafen",
+    "unblind": "un-blind",
+    "close": "close",
+    "send-message": "send message<s pan=\"\"> </s>",
+    "record-director-local": " Record",
+    "logo-header": "\n\t\t\t\t\t<font id=\"qos\">V</font>DO.Ninja \n\t\t\t\t",
+    "only-director-can-hear-you": "Only the director can hear you currently.",
+    "director-muted-you": "The director has muted you.",
+    "application-audio-capture": "For application-specific audio capture, <a href=\"https://docs.vdo.ninja/audio\" style=\"color: #007AC8;\">see here</a>",
+    "animate-mixing": "Animate mixing",
+    "prefix-screenshare": "Prefix screenshare IDs",
+    "welcome-to-obs-ninja-chat": "\n\t\t\t\t\tWelcome to VDO.Ninja! You can send text messages directly to connected peers from here.\n\t\t\t\t",
+    "privacy-disabled": "Privacy warning: The director will be able to remotely access your camera and microphone if you continue.",
+    "face-mesh": "Face mesh (slow load)",
+    "anonymous-mask": "Anonymous mask",
+    "dog-face": "Dog ears and nose",
+    "compatibility-mode": "Compatibility mode",
+    "disable-animated-mixing": "Disable animations",
+    "request-upload": " Request File",
+    "create-timer": "Create Timer",
+    "edit-url": "Edit URL manually",
+    "mirror-video": "Mirror",
+    "toggle-control-video": "Toggle control bar",
+    "picture-in-picture": "Picture-in-picture",
+    "chrome-cast": "Cast..",
+    "join-room": "Join room",
+    "join-room-with-mic": "Join room with Microphone",
+    "join-room-with-camera": "Join Room with Camera",
+    "share-screen-with-room": "Screenshare with Room",
+    "share-your-mic": "Share your Microphone",
+    "share-your-camera": "Share your Camera",
+    "share-your-screen": "Share your Screen",
+    "click-start-to-join": "Click Start to Join",
+    "waiting-for-mic-to-load": "Waiting for mic to load",
+    "waiting-for-camera-to-load": "Waiting for Camera to load"
+  },
+  "placeholders": {
+    "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í",
+    "enter-your-message-here": "Enter your message here"
+  },
+  "miscellaneous": {
+    "start": "START",
+    "new-display-name": "Enter a new Display Name for this stream",
+    "submit-error-report": "Press OK to submit any error logs to VDO.Ninja. Error logs may contain private information.",
+    "director-redirect-1": "The director wishes to redirect you to the URL: ",
+    "director-redirect-2": "\n\nPress OK to be redirected.",
+    "add-a-label": "Add a label",
+    "audio-processing-disabled": "Audio processing is disabled with this guest. Can't mute or change volume",
+    "not-the-director": "<font color='red'>You are not the director of this room.  You will have limited to no control.  You can try claiming the room after the first director leaves.</font>",
+    "room-is-claimed": "The room is already claimed by someone else.\n\nOnly the first person to join a room is the assigned director.\n\nRefresh after the first director leaves to claim.",
+    "room-is-claimed-codirector": "The room is already claimed by someone else.\n\nTrying to join as a co-director...",
+    "streamid-already-published": "The stream ID you are publishing to is already in use.\n\nPlease try with a different invite link or refresh to retry again.\n\nYou will now be disconnected.",
+    "director": "Director",
+    "unknown-user": "Unknown User",
+    "room-test-not-good": "The room name 'test' is very commonly used and may not be secure.\n\nAre you sure you wish to proceed?",
+    "load-previous-session": "Would you like to load your previous session's settings?",
+    "enter-password": "Please enter the password below: \n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "enter-password-2": "Please enter the password below: \n\n(Note: Passwords are case-sensitive.)",
+    "enter-director-password": "Please enter the director's password:\n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "password-incorrect": "The password was incorrect.\n\nRefresh and try again.",
+    "enter-display-name": "Please enter your display name:",
+    "enter-new-display-name": "Enter a new Display Name for this stream",
+    "what-bitrate": "What bitrate would you like to record at? (kbps)",
+    "enter-website": "Enter a website URL to share",
+    "press-ok-to-record": "Press OK to start recording. Press again to stop and download.\n\nWarning: Keep this browser tab active to continue recording.\n\nYou can change the default video bitrate if desired below (kbps)",
+    "no-streamID-provided": "No streamID was provided; one will be generated randomily.\n\nStream ID: ",
+    "alphanumeric-only": "Info: Only AlphaNumeric characters should be used for the stream ID.\n\nThe offending characters have been replaced by an underscore",
+    "stream-id-too-long": "The Stream ID should be less than 45 alPhaNuMeric characters long.\n\nWe will trim it to length.",
+    "share-with-trusted": "Share only with those you trust",
+    "pass-recommended": "A password is recommended",
+    "insecure-room-name": "Insecure room name.",
+    "allowed-chars": "Allowed chars",
+    "transfer": "transfer",
+    "armed": "armed",
+    "transfer-guest-to-room": "Transfer guests to room:\n\n(Please note rooms must share the same password)",
+    "transfer-guest-to-url": "Transfer guests to new website URL.\n\n(Guests will be prompted to accept)",
+    "change-url": "change URL",
+    "mute-in-scene": "mute in scene",
+    "unmute-guest": "un-mute guest",
+    "undeafen": "un-deafen",
+    "deafen": "deafen guest",
+    "unblind": "un-blind",
+    "blind": "blind guest",
+    "unmute": "un-mute",
+    "mute-guest": "mute guest",
+    "unhide": "unhide guest",
+    "hide-guest": "hide guest",
+    "confirm-disconnect-users": "Are you sure you wish to disconnect these users?",
+    "confirm-disconnect-user": "Are you sure you wish to disconnect this user?"
+  }
+}

examples/bigmutebutton.html

@@ -0,0 +1,121 @@
+<html>
+<head><title>Twitch + Video</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+<style>
+body{
+	padding:0;
+	margin:0;
+	background-color:#003;
+	width:100%;
+	height:100%;
+}
+
+iframe {
+	width:100%;
+	height:100%;
+	border:0;
+	margin:0;
+	padding:0;
+	position:absolute;
+	display:block;
+}
+
+
+input{
+	padding:10px;
+	width:80%;
+	font-size:1.2em;
+	z-index: 1000;
+	margin:10%;
+}
+
+#startButton{
+	margin: 10px;
+    padding: 20px
+	display: block;
+	border-radius: 50px;
+	font-size:1.5em;
+}
+
+#toggleMute{
+	margin: 10px;
+    padding: 30px 0;
+    border-radius: 50px;
+	font-size:1.5em;
+	display: block;
+    position: fixed;
+    bottom: 0;
+	width:200px;
+    left: calc(50% - 100px);
+}
+
+.pressed {
+	background-color: red;
+}
+
+</style>
+</head>
+<body>
+<div id="clean">
+	<center>
+	<input placeholder="Enter a VDON stream ID here" id="viewlink" type="text" />
+	<button id="startButton" onclick="loadIframes()" style="display:block;padding:10px;margin:10px;">START</button></center>
+</div>
+<script>
+
+window.addEventListener("orientationchange", function() {
+  // Announce the new orientation number
+ // alert(window.orientation);
+}, false);
+
+
+
+
+function loadIframes(url=false){ 
+
+	var streamID = document.getElementById("viewlink").value;
+	https://vdo.ninja/?label&webcam&cleanoutput&ad=1&vd=1
+	
+	var path = "vdo.ninja"; //window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
+	var streamSrc = "https://"+path+"/?push="+streamID+"&label&webcam&cleanoutput&ad=1&vd=1";
+	
+	document.getElementById("clean").parentNode.removeChild(document.getElementById("clean"));
+	
+	var iframe = document.createElement("iframe");
+	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+	iframe.src = streamSrc;
+	document.body.appendChild(iframe);
+	
+	function sendSelfCommand(action, value=null){
+		iframe.contentWindow.postMessage({"target":null, "action":action, "value":value}, '*');
+	}
+	
+	
+	
+	var button = document.createElement("button");
+	button.id = "toggleMute";
+	button.innerHTML = "Mute";
+	button.dataset.value = "true";
+	document.body.appendChild(button);
+	
+	button.onclick = function(){
+		
+		if (this.dataset.value=="true"){
+			this.dataset.value = "false";
+			this.classList.add("pressed");
+			this.innerHTML = "Un-Mute";
+			sendSelfCommand("mic",false);
+		} else {
+			this.classList.remove("pressed");
+			this.innerHTML = "Mute";
+			this.dataset.value = "true";
+			sendSelfCommand("mic",true);
+		}
+	}
+	
+}
+
+</script>
+</body>
+</html>

examples/changepass.html

@@ -0,0 +1,25 @@
+<html><body><script>
+var generateHash = function (str, length=false){
+	var buffer = new TextEncoder("utf-8").encode(str);
+	return crypto.subtle.digest("SHA-256", buffer).then(
+		function (hash) {
+			hash = new Uint8Array(hash);
+			if (length){
+				hash = hash.slice(0, parseInt(parseInt(length)/2));
+			}
+			hash = toHexString(hash);
+			return hash;
+		}
+	);
+};
+function toHexString(byteArray){
+		return Array.prototype.map.call(byteArray, function(byte){
+			return ('0' + (byte & 0xFF).toString(16)).slice(-2);
+		}).join('');
+	}
+var password = prompt("Please enter the password");
+	
+generateHash(password + location.hostname, 4).then(function(hash) { // million to one error. 
+	alert("hash value: "+hash)
+});
+</script></body></html>

examples/chat.html

@@ -0,0 +1,159 @@
+<html>
+	<head>
+		<meta charset="utf8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>OBSN Chat Overlay</title>
+		<style>
+		
+			@font-face {
+			  font-family: 'Cousine';
+			  src: url('fonts/Cousine-Bold.ttf') format('truetype');
+			}
+		
+			body {
+				margin:0;
+				padding:0 10px;
+				height:100%;
+				border: 0;
+				display: flex;
+				flex-direction: column-reverse;
+				position:absolute;
+				bottom:0;
+				overflow:hidden;
+				max-width:100%;
+			}
+
+			div {
+				margin:0;
+				background-color: black; 
+				padding: 8px 8px 0px 8px;
+				color: white;
+				font-family: Cousine, monospace;
+				font-size: 3.2em;
+				line-height: 1.1em;
+				letter-spacing: 0.0em;
+				text-transform: uppercase;
+				text-shadow: 0.05em 0.05em 0px rgba(0,0,0,1);
+				max-width:100%;
+				word-wrap: break-word;
+				overflow-wrap: break-word;
+				word-break: break-all;
+				hyphens: auto;
+				display:inline-block;
+			}
+			
+			
+			
+			a {
+				color:white;
+				font-size:1.2em;
+				text-transform: none;
+				word-wrap: break-word;
+				overflow-wrap: break-word;
+				word-wrap: break-word;
+				word-break: break-all;
+				hyphens: auto;
+			}
+			</style>
+		<script>
+		
+		
+			(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);
+			
+
+			function loadIframe() {
+				
+				var iframe = document.createElement("iframe");
+
+				var view= "";
+				if (urlParams.has("view")) {
+					view = "&view="+(urlParams.get("view") || "");
+				} 
+				var room="";
+				if (urlParams.has("room")) {
+					room = "&room="+urlParams.get("room");
+				}
+				
+				var password="";
+				if (urlParams.has("password")) {
+					password = "&password="+urlParams.get("password");
+				}
+				
+				iframe.allow = "autoplay";
+				var srcString = "./?novideo&noaudio&label=chatOverlay&scene"+room+view+password;
+				
+				iframe.src = srcString;
+				iframe.style.width="0";
+				iframe.style.height="0";
+				iframe.style.border="0";
+				
+				document.body.appendChild(iframe);
+
+				////////////  LISTEN FOR EVENTS
+	
+				var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+				var eventer = window[eventMethod];
+				var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+
+				/// If you have a routing system setup, you could have just one global listener for all iframes instead.
+				
+				eventer(messageEvent, function (e) {
+					if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+
+					console.log(e);
+					if ("gotChat" in e.data){
+						logData(e.data.gotChat.label,e.data.gotChat.msg);
+					}
+				});
+			}
+
+			function printValues(obj) {
+				var out = "";
+				for (var key in obj) {
+					if (typeof obj[key] === "object") {
+						out += "<br />";
+						out += printValues(obj[key]);
+					} else {
+						if (key.startsWith("_")) {
+						} else {
+							out += "<b>" + key + "</b>: " + obj[key] + "<br />";
+						}
+					}
+				}
+				return out;
+			}
+
+			function logData(type, data) {
+				var span = document.createElement('span');
+				var entry = document.createElement('div');
+				if (type){
+					type = "<i>"+type.replace(/_/g, ' ')+"</i>";
+				}
+				entry.innerHTML = type + data;
+				span.appendChild(entry);
+				document.body.prepend(span);
+			}
+		</script>
+	</head>
+	<body onload="loadIframe();">
+	</body>
+</html>

examples/draggable.html

@@ -0,0 +1,331 @@
+<html>
+<head><title>Dual Input</title>
+<style>
+body{
+	padding:0;
+	margin:0;
+}
+iframe {
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+	margin:0px;
+	min-height: 100px;
+    min-width: 100px;
+    max-height: 95%;
+    max-width: 99%%;
+    float: left;
+    position: fixed;
+}
+
+#viewlink {
+	width:400px;
+}
+
+
+input{
+	padding:5px;
+	margin:5px;
+}
+button{
+	padding:5px;
+	margin:5px;
+	position:relative;
+	
+}
+
+.menu {
+	z-index: 10;
+	float:right;
+	right: 20px;
+	color: #fff;
+}
+
+.close {
+	background-color: #d33;
+    color: #fff;
+}
+
+.reload {
+	background-color: #0a0;
+	color: #fff;
+}
+
+.popup {
+	z-index: 9;
+	background-color: #f1f1f1;
+	border: 1px solid #d3d3d3;
+	text-align: center;
+	min-height: 100px;
+	min-width: 100px;
+	max-height: 95%;
+    max-width: 99%;
+	scale: 0.5;
+}
+
+.popup {
+  position: absolute;
+  /*resize: both; !*enable this to css resize*! */
+  overflow: auto;
+}
+
+.popup-header {
+  cursor: move;
+  background-color: #2196f3;
+}
+
+
+
+.popup .resizer-right {
+  width: 5px;
+  height: 100%;
+  background: transparent;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: e-resize;
+}
+
+.popup .resizer-bottom {
+  width: 100%;
+  height: 5px;
+  background: transparent;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: n-resize;
+}
+
+.popup .resizer-both {
+  width: 5px;
+  height: 5px;
+  background: transparent;
+  z-index: 10;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: nw-resize;
+}
+
+
+/*NOSELECT*/
+
+.popup * {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+
+</style>
+</head>
+<body>
+
+<input placeholder="Enter an OBS.Ninja Room Link" id="viewlink" />
+
+<button onclick="loadIframe();">Load URL</button>You can drag and resize the generated windows; multiple can be created.
+
+<div id="container"></div>
+
+<script>
+var currentZIndex = 100;
+function initDragElement(popup){
+
+	var pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+
+	var elmnt = null;
+
+	var header = getHeader(popup);
+	var iframe = getIFrame(popup);
+
+	popup.onmousedown = function() {
+	  this.style.zIndex = "" + ++currentZIndex;
+	};
+
+	if (header) {
+	  header.parentPopup = popup;
+	  header.onmousedown = dragMouseDown;
+	}
+  
+
+  function dragMouseDown(e) {
+    elmnt = this.parentPopup;
+    elmnt.style.zIndex = "" + ++currentZIndex;
+
+    e = e || window.event;
+    // get the mouse cursor position at startup:
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.onmouseup = closeDragElement;
+    // call a function whenever the cursor moves:
+    document.onmousemove = elementDrag;
+  }
+
+  function elementDrag(e) {
+    if (!elmnt) {
+      return;
+    }
+
+    e = e || window.event;
+    // calculate the new cursor position:
+    pos1 = pos3 - e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    // set the element's new position:
+    elmnt.style.top = elmnt.offsetTop - pos2 + "px";
+    elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
+	
+	iframe.style.top = elmnt.offsetTop - pos2 + "px";
+	iframe.style.left = elmnt.offsetLeft - pos1 + "px";
+  }
+
+  function closeDragElement() {
+    /* stop moving when mouse button is released:*/
+    document.onmouseup = null;
+    document.onmousemove = null;
+  }
+
+  function getHeader(element) {
+    var headerItems = element.getElementsByClassName("popup-header");
+
+    if (headerItems.length === 1) {
+      return headerItems[0];
+    }
+
+    return null;
+  }
+  
+  function getIFrame(element) {
+    var headerItems = element.getElementsByTagName("iframe");
+
+    if (headerItems.length === 1) {
+      return headerItems[0];
+    }
+
+    return null;
+  }
+}
+
+function initResizeElement(p) {
+
+	var iframe = getIFrame(p);
+	var element = null;
+	var startX, startY, startWidth, startHeight;
+
+    var right = document.createElement("div");
+    right.className = "resizer-right";
+    p.appendChild(right);
+    right.addEventListener("mousedown", initDrag, false);
+    right.parentPopup = p;
+
+    var bottom = document.createElement("div");
+    bottom.className = "resizer-bottom";
+    p.appendChild(bottom);
+    bottom.addEventListener("mousedown", initDrag, false);
+    bottom.parentPopup = p;
+
+    var both = document.createElement("div");
+    both.className = "resizer-both";
+    p.appendChild(both);
+    both.addEventListener("mousedown", initDrag, false);
+    both.parentPopup = p;
+  
+
+  function initDrag(e) {
+    element = this.parentPopup;
+
+    startX = e.clientX;
+    startY = e.clientY;
+    startWidth = parseInt(
+      document.defaultView.getComputedStyle(element).width,
+      10
+    );
+    startHeight = parseInt(
+      document.defaultView.getComputedStyle(element).height,
+      10
+    );
+    document.documentElement.addEventListener("mousemove", doDrag, false);
+    document.documentElement.addEventListener("mouseup", stopDrag, false);
+	document.documentElement.addEventListener("click", stopDrag, false)
+  }
+
+  function doDrag(e) {
+	if (e.buttons==0){
+		stopDrag(e);
+		return false;
+	}
+  
+    element.style.width = startWidth + e.clientX - startX + "px";
+    element.style.height = startHeight + e.clientY - startY + "px";
+	
+	iframe.style.width = startWidth + e.clientX - startX + "px";
+	iframe.style.height = startHeight + e.clientY - startY + "px";
+  }
+
+  function stopDrag(e) {
+    document.documentElement.removeEventListener("mousemove", doDrag, false);
+    document.documentElement.removeEventListener("mouseup", stopDrag, false);
+  }
+
+  function getIFrame(element) {
+    var headerItems = element.getElementsByTagName("iframe");
+
+    if (headerItems.length === 1) {
+      return headerItems[0];
+    }
+
+    return null;
+  }
+}
+  
+function loadIframe(){
+
+	var iframeContainer = document.createElement("div");
+	iframeContainer.className="popup";
+	iframeContainer.style.zIndex = "" + ++currentZIndex;
+	iframeContainer.style.width="325px";
+	iframeContainer.style.height="420px";
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Move";
+	button.className = "popup-header menu";
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Close";
+	button.className = "menu close";
+	button.onclick = function(){iframe.contentWindow.postMessage({"close":true}, '*');iframe.parentNode.parentNode.removeChild(iframeContainer);}
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Reload";
+	button.className = "menu reload";
+	button.onclick = function(){iframe.contentWindow.postMessage({"reload":true}, '*');}
+	iframeContainer.appendChild(button);
+
+	var iframe = document.createElement("iframe");
+	iframe.allow="autoplay";
+	iframe.src = document.getElementById("viewlink").value || "https://obs.ninja";
+	iframe.style.width="325px";
+	iframe.style.height="420px";
+	
+	iframeContainer.appendChild(iframe);
+	
+	document.getElementById("container").appendChild(iframeContainer);
+
+	initDragElement(iframeContainer);
+	initResizeElement(iframeContainer);
+	
+}
+
+</script>
+</body>
+</html>

examples/dual.html

@@ -0,0 +1,76 @@
+<html>
+<head><title>Dual Input</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+<style>
+body{
+	padding:0;
+	margin:0;
+	background-color:#003;
+	width:100%;
+	height:100%;
+}
+
+iframe {
+	width:100%;
+	height:100%;
+	border:0;
+	margin:0;
+	padding:0;
+	position:absolute;
+	display:block;
+}
+
+
+input{
+	padding:10px;
+	width:80%;
+	font-size:1.2em;
+	z-index: 1000;
+}
+
+</style>
+</head>
+<body>
+
+
+
+<div id="container1" style="width:100%;height:100%;display:none;"></div>
+<div id="container2" style="width: calc(25vh*1.777);height: calc(25vh); display:none; float:left; position: fixed; top: 2%; left: 0%;"></div>
+<input placeholder="Enter a Room name" id="viewlink" type="text" onchange="loadIframes()"/>
+<script>
+
+function loadIframes(url=false){ 
+
+	var roomname = document.getElementById("viewlink").value;
+	
+	document.getElementById("viewlink").parentNode.removeChild(document.getElementById("viewlink"));
+	document.getElementById("container1").style.display="inline-block";
+	document.getElementById("container2").style.display="inline-block";
+	
+	var path = window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
+	
+	var room1 = "https://"+path+"/?room="+roomname+"&push="+roomname+"_front&webcam&autostart&vd=front&ad=1&exclude="+roomname+"_rear";
+	var room2 = "https://"+path+"/?room="+roomname+"&push="+roomname+"_rear&webcam&autostart&vd=back&ad=0&view&cleanoutput&nosettings&transparent";
+	
+	var iframe = document.createElement("iframe");
+	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+	iframe.src = room1;
+	var iframeContainer = document.createElement("div");
+	iframeContainer.appendChild(iframe);
+	document.getElementById("container1").appendChild(iframeContainer);
+	
+	setTimeout(function(){
+		var iframe = document.createElement("iframe");
+		iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+		iframe.src = room2;
+		var iframeContainer = document.createElement("div");
+		iframeContainer.appendChild(iframe);
+		document.getElementById("container2").appendChild(iframeContainer);
+	},3000);
+	
+}
+
+</script>
+</body>
+</html>

examples/iframe.outbound-stats.html

@@ -0,0 +1,264 @@
+<html>
+
+<head>
+    <title>OBS.Ninja IFRAME Outgoing Stats Example</title>
+    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
+    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png" />
+    <link rel="icon" href="./images/favicon.ico" />
+    <link itemprop="thumbnailUrl" href="./images/obsNinja_logo_full.png" />
+    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <style>
+        body {
+            padding: 0;
+            margin: 0;
+            background-color: rgb(20, 25, 38);
+        }
+
+        iframe {
+            border: 0;
+            margin: 2px auto;
+            padding: 0;
+            display: block;
+            margin: 10px;
+            width: 640px;
+            height: 320px;
+            background-color: black;
+        }
+
+        input {
+            padding: 5px;
+            margin: 5px;
+        }
+
+        button {
+            padding: 5px;
+            margin: 5px;
+        }
+
+    </style>
+</head>
+
+<body>
+    <div class="container-fluid">
+        <div class="row controls" style="margin-bottom:15px;border-bottom:1px solid black;">
+            <div class="col-8">
+                <input type="text" class="form-control" style="width:95%;margin:10px auto;" placeholder="Enter an OBS.Ninja View URL here" value="" id="viewlink" />
+            </div>
+            <div class="col-4">
+                <div class="row">
+                    <div class="col-2"></div>
+                    <div class="col-10">
+                        <button type="button" class="btn btn-primary" style="margin:10px 0;width:calc(90% + 15px);margin-left:5px;" id="btnStart">Start</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row output">
+            <div class="col-7" id="source">
+                <iframe style="margin:0 auto;" allow="autoplay;camera;microphone" src=""></iframe>
+            </div>
+            <div class="col-5" id="sourcecontrols">
+                <div class="row text-light" style="margin-top:15px;">
+                    <div class="col">
+                        <p>This example will show all connections to the stream generated from this page using statistics gathered using the <a href="https://github.com/steveseguin/obsninja/blob/master/IFRAME.md">iFrame API</a>.</p>
+                        <p>Click start to generate a stream using the OBS.Ninja URL shown. If you use the example URL shown, you can <a id="aView" href="" target="_blank">click here</a> to connect to this stream as a viewer in a new window/tab, this will then show in the table below. Expired connections will be removed after a short delay.</p>
+                    </div>
+                </div>
+                <div class="row" style="margin-top:5px;">
+                    <div style="padding-top:10px;" class="col-4 text-right font-weight-bold text-light">Audio:</div>
+                    <div class="col-8">
+                        <button type="button" class="btn btn-sm btn-secondary" style="width:45%;" id="btnMuteAudio">Disable</button>
+                        <button type="button" class="btn btn-sm btn-success" style="width:45%;" id="btnUnMuteAudio">Enabled</button>
+                    </div>
+                </div>
+                <div class="row">
+                    <div style="padding-top:10px;" class="col-4 text-right font-weight-bold text-light">Video:</div>
+                    <div class="col-8">
+                        <button type="button" class="btn btn-sm btn-secondary" style="width:45%;" id="btnMuteVidio">Disable</button>
+                        <button type="button" class="btn btn-sm btn-success" style="width:45%;" id="btnUnMuteVidio">Enabled</button>
+                    </div>
+                </div>
+                <div class="row">
+                    <div style="padding-top:10px;" class="col-4 text-right font-weight-bold text-light">Stats:</div>
+                    <div class="col-8">
+                        <button type="button" class="btn btn-sm btn-secondary" style="width:45%;" id="btnStatsAuto">Auto Refresh Off</button>
+                        <button type="button" class="btn btn-sm btn-secondary" style="width:45%;" id="btnStatsRefresh">Refresh</button>
+                    </div>
+                </div>
+                <div class="row">
+                    <div style="padding-top:5px;" class="col-6 text-right font-weight-bold text-light">Outbound Connections:</div>
+                    <div style="padding-top:5px;" class="col-6 font-weight-bold text-light" id="divTotalConnections">0</div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <table id="viewers" style="margin-top:15px;" class="table table-hover text-center table-striped table-dark">
+                    <thead>
+                        <tr>
+                            <th scope="col" class="align-middle">Label</th>
+                            <th scope="col" class="align-middle">Added</th>
+                            <th scope="col" class="align-middle">Quality Limit Reason</th>
+                            <th scope="col" class="align-middle">Resolution</th>
+                            <th scope="col" class="align-middle">Platform</th>
+                            <th scope="col" class="align-middle">Encoder</th>
+                            <th scope="col" class="align-middle">User Agent</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script>
+        var autorefresh = false;
+        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+        var eventer = window[eventMethod];
+        var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+        eventer(messageEvent, function(e) {
+            //Check message is coming from our iframe, otherwise we don't care
+            if (e.source != $('#source iframe')[0].contentWindow) return;
+
+            if ("stats" in e.data) {
+                var now = new Date(); //Used for "Added" column and to remove stale viewers
+                for (var viewer in e.data.stats.outbound_stats) {
+                    //Check to see if a row exists for this viewier, if not then its a new viewer and we should create a row
+                    if ($("#obsn_viewer_" + viewer).length == 0) {
+                        var h = now.getHours();
+                        var m = now.getMinutes();
+                        var s = now.getSeconds();
+                        $('#viewers tbody').append('<tr id="obsn_viewer_' + viewer + '"><th class="obsn_viewer_label" scope="row"></th><td class="obsn_viewer_added">' + ("0" + h).slice(-2) + ':' + ("0" + m).slice(-2) + ':' + ("0" + s).slice(-2) + '</td><td class="obsn_viewer_qlr"></td><td class="obsn_viewer_resolution"></td><td class="obsn_viewer_platform"></td><td class="obsn_viewer_encoder"></td><td class="obsn_viewer_useragent"></td></tr>');
+                    }
+                    //Insert/update stats
+                    //Initially objects can be available but without any attributes, check they exist and ignore till the basics are available
+                    if (e.data.stats.outbound_stats[viewer] == undefined) continue;
+                    if (e.data.stats.outbound_stats[viewer].info == undefined) continue;
+                    //Checking these exist as not all attributes are available straight away when stats are created
+                    if (e.data.stats.outbound_stats[viewer].info.label != undefined) {
+                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_label').text(e.data.stats.outbound_stats[viewer].info.label);
+                    }
+                    if (e.data.stats.outbound_stats[viewer].quality_Limitation_Reason != undefined) {
+                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_qlr').text(e.data.stats.outbound_stats[viewer].quality_Limitation_Reason);
+                    }
+                    if (e.data.stats.outbound_stats[viewer].resolution != undefined) {
+                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_resolution').text(e.data.stats.outbound_stats[viewer].resolution);
+                    }
+                    if (e.data.stats.outbound_stats[viewer].info.platform != undefined) {
+                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_platform').text(e.data.stats.outbound_stats[viewer].info.platform);
+                    }
+                    if (e.data.stats.outbound_stats[viewer].encoder != undefined) {
+                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_encoder').text(e.data.stats.outbound_stats[viewer].encoder);
+                    }
+                    if (e.data.stats.outbound_stats[viewer].info.useragent != undefined) {
+                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_useragent').text(e.data.stats.outbound_stats[viewer].info.useragent);
+                    }
+                    $("#obsn_viewer_" + viewer).data('last', now.getTime()); //Used below to remove old viewers
+                }
+                //Mark and then remove viewers who have not been seen for a while
+                $('#viewers tbody tr').each(function(el) {
+                    if (parseInt($(this).data('last')) < (now.getTime() - 10000)) { //10 seconds
+                        $(this).remove();
+                    } else if (parseInt($(this).data('last')) < (now.getTime())) { //Mark viewer in red to show they have disappeared, note that it takes a few seconds for this to happen
+                        $(this).addClass('bg-danger');
+                    } else { //Viewer is there, make sure they're not marked as missing
+                        $(this).removeClass('bg-danger');
+                    }
+                });
+                $('#divTotalConnections').text(e.data.stats.total_outbound_connections);
+            }
+        });
+
+        $(document).ready(function() {
+            $('#btnMuteAudio').on('click', function() {
+                $(this).addClass('btn-success').removeClass('btn-secondary').text('Disabled');
+                $('#btnUnMuteAudio').removeClass('btn-success').addClass('btn-secondary').text('Enable');
+                $('#source iframe')[0].contentWindow.postMessage({
+                    "mic": false
+                }, '*');
+            });
+            $('#btnUnMuteAudio').on('click', function() {
+                $(this).addClass('btn-success').removeClass('btn-secondary').text('Enabled');
+                $('#btnMuteAudio').removeClass('btn-success').addClass('btn-secondary').text('Disable');
+                $('#source iframe')[0].contentWindow.postMessage({
+                    "mic": true
+                }, '*');
+            });
+            $('#btnMuteVidio').on('click', function() {
+                $(this).addClass('btn-success').removeClass('btn-secondary').text('Disabled');
+                $('#btnUnMuteVidio').removeClass('btn-success').addClass('btn-secondary').text('Enable');
+                $('#source iframe')[0].contentWindow.postMessage({
+                    "camera": false
+                }, '*');
+            });
+            $('#btnUnMuteVidio').on('click', function() {
+                $(this).addClass('btn-success').removeClass('btn-secondary').text('Enabled');
+                $('#btnMuteVidio').removeClass('btn-success').addClass('btn-secondary').text('Disable');
+                $('#source iframe')[0].contentWindow.postMessage({
+                    "camera": true
+                }, '*');
+            });
+
+            $('#btnStatsAuto').on('click', function() {
+                if (autorefresh) {
+                    autorefresh = false;
+                    $('#btnStatsAuto').removeClass('btn-success').addClass('btn-secondary').text('Auto Refresh Off');
+                } else {
+                    autorefresh = true;
+                    $('#btnStatsAuto').addClass('btn-success').removeClass('btn-secondary').text('Auto Refresh On');
+                }
+            });
+            $('#btnStatsRefresh').on('click', function() {
+                $(this).addClass('btn-success').removeClass('btn-secondary').attr('disabled', true);
+                $('#source iframe')[0].contentWindow.postMessage({
+                    "getStats": true
+                }, '*');
+                setTimeout(function() {
+                    $('#btnStatsRefresh').addClass('btn-secondary').removeClass('btn-success').attr('disabled', false);
+                }, 700);
+            });
+
+            $('#btnStart').on('click', function() {
+                //Reset buttons as currently we can't check the state of these properties
+                $('#btnMuteAudio,#btnMuteVidio').removeClass('btn-success').addClass('btn-secondary').text('Disable');
+                $('#btnUnMuteAudio,#btnUnMuteVidio').addClass('btn-success').removeClass('btn-secondary').text('Enabled');
+                //Update the iframe source from the input field, yup, that simple
+                $('#source iframe').attr('src', $('#viewlink').val());
+                //Start autorefresh of stats
+                autorefresh = true;
+                $('#btnStatsAuto').addClass('btn-success').removeClass('btn-secondary').text('Auto Refresh On');
+            });
+            //Start checking for stats
+            setInterval(function() {
+                if (autorefresh == false) return;
+                $('#source iframe')[0].contentWindow.postMessage({
+                    "getStats": true
+                }, '*');
+            }, 1000);
+            //Add in random ID and password strings to URL's, the below is purely for the purposes of this example
+            var pushid = makeid();
+            var password = makeid();
+            var baseUrl = "https://obs.ninja/";
+            $('#aView').attr('href', baseUrl + '?view=' + pushid + '&password=' + password + '&label=Test_Link');
+            $('#viewlink').val(baseUrl + '?push=' + pushid + '&password=' + password + '&autostart&turn=false&fps=25&maxbitrate=1000&cleanoutput&audiobitrate=32&aec=0&denoise=0&webcam');
+        });
+        //This function is purely used to generate random push id and password strings for the purposes of this example
+        function makeid() {
+            var result = '';
+            var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            var charactersLength = characters.length;
+            for (var i = 0; i < 8; i++) {
+                result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            }
+            return result;
+        }
+
+    </script>
+</body>
+
+</html>

examples/midi.html

@@ -0,0 +1,555 @@
+<html>
+<head>
+<script src="https://cdn.jsdelivr.net/npm/webmidi"></script>
+<link rel="stylesheet" href="./main.css" />
+<style>
+		.container {
+			max-width: 80%;
+			width: fit-content;
+			margin: 0 auto;
+		}
+
+		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;
+		}
+		button {
+			margin:5px;
+			border:solid black 2px;
+		}
+		
+		body {
+			color:white;
+		}
+		
+		a {
+			color: #225273!important;
+		}
+		
+		
+		
+	</style>
+	<title>VDO.Ninja MIDI Controller</title>
+</head>
+<body>
+<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>VDO.Ninja MIDI test app</h1>
+		
+		<div class="card">
+			<h2>About</h2>
+			<div>
+				You can check the console debug logs for added details.
+				<br /><br />You can download a virtual MIDI I/O controller for windwos here:<br />
+				http://www.tobias-erichsen.de/software/loopmidi.html
+				<br /><br />This code uses the WebMIDI.js library, referenced here:<br />
+				https://github.com/djipco/webmidi
+				<br /><br />
+				Below you can test the <a href="https://docs.vdo.ninja/general-settings/midi#midi-pass-through-mode">MIDI hotkey commands</a> for VDO.Ninja below:<br />
+			</div>
+		</div>
+		<div class="card">
+			<h2>Select the MIDI Output device:</h2>
+			<div>	
+				<label for="outputdevice">MIDI Output device:</label>
+				<select name="outputdevice" id="outputdevice">
+				</select>
+			</div>
+		</div>
+		<div class="card">
+			<h2>&midi=1</h2>
+			<div id="container1">
+				
+			</div>
+		</div>
+		<div class="card">
+			<h2>&midi=3</h2>
+			<div id="container2">
+				
+			</div>
+		</div>
+		<div class="card">
+			<h2>&midi=4 ; director</h2>
+			<div id="container3">
+				
+			</div>
+		</div>
+		<div class="card">
+			<h2>&midi=4 ; guest 1</h2>
+			<div id="container4">
+			
+			</div>
+		</div>
+		<div class="card">
+			<h2>&midi=4 ; guest 2</h2>
+			<div id="container5">
+				
+			</div>
+		</div>
+		<div class="card">
+			<h2>Sample Remote Director Control links</h2>
+			<div id="container6">
+				
+			</div>
+		</div>
+	</div>
+</div>
+
+
+
+<div id='commands'>
+
+</div>
+<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);
+  
+  var output = WebMidi.outputs[0];
+  
+  
+  var midiout = 0;
+  var outputdevice = document.getElementById("outputdevice");
+  for (var i=0;i<WebMidi.outputs.length;i++){
+	var opt = document.createElement('option');
+	opt.value = WebMidi.outputs[i].id;
+	opt.innerHTML = WebMidi.outputs[i].name + " (id:"+(1+i)+")";
+	if (i==0){
+		midiout = opt.value;
+		opt.selected = true;
+	}
+	outputdevice.appendChild(opt);
+  }
+  
+  var path = window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
+  
+  outputdevice.onchange = function(e){
+	midiout = outputdevice.value;
+	output = WebMidi.getOutputById(midiout);
+	console.log("MIDI DEVICE CHANGED: "+midiout);
+	
+	var container = document.getElementById("container6");
+	container.innerHTML = "<br />https://"+path+"/?midiremote=4&director=ROOMNAMEHERE";
+	container.innerHTML += "<br /><br />";
+	container.innerHTML += "https://"+path+"/?room=ROOMNAMEHERE&midiout="+(outputdevice.selectedIndex+1)+"&vd=0&ad=0&push&autostart&label=MIDI_CONTROLLER";
+  }
+  
+  var container = document.getElementById("container6");
+	container.innerHTML = "<br />https://"+path+"/?midiremote=4&director=ROOMNAMEHERE";
+	container.innerHTML += "<br /><br />";
+	container.innerHTML += "https://"+path+"/?room=ROOMNAMEHERE&midiout="+(outputdevice.selectedIndex+1)+"&vd=0&ad=0&push&autostart&label=MIDI_CONTROLLER";
+  
+  // 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[1];
+
+  // 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 + ").");
+	  console.log(e);
+    }
+  );
+
+  // 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);
+    }
+  );
+  
+  
+	
+	var container = document.getElementById("container1");
+	
+	
+	///
+	
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note G3; Chat";
+	button.onclick = function(){output.playNote("G3");};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note A3; Mute";
+	button.onclick = function(){output.playNote("A3");};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note B3; Mute Video";
+	button.onclick = function(){output.playNote("B3");};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note C4; ScreenShare";
+	button.onclick = function(){output.playNote("C4");};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note D4; Hangup";
+	button.onclick = function(){output.playNote("D4");};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note E4; Hands";
+	button.onclick = function(){output.playNote("E4");};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note F4; Record";
+	button.onclick = function(){output.playNote("F4");};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note G4; Turn on Dir's Audio";
+	button.onclick = function(){output.playNote("G4");};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note A4; Stop Dir's Audio";
+	button.onclick = function(){output.playNote("A4");};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	///
+	
+	var container = document.getElementById("container2");
+	
+	///
+	
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note C1; velocity 0";
+	button.onclick = function(){output.playNote("C1", 1, {velocity: 0});};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note C1; velocity 1";
+	button.onclick = function(){output.playNote("C1", 1, {velocity: 1});};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note C1; velocity 2";
+	button.onclick = function(){output.playNote("C1", 1, {velocity: 2});};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note C1; velocity 3";
+	button.onclick = function(){output.playNote("C1", 1, {velocity: 3});};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note C1; velocity 4";
+	button.onclick = function(){output.playNote("C1", 1, {velocity: 4});};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note C1; velocity 5";
+	button.onclick = function(){output.playNote("C1", 1, {velocity: 5});};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note C1; velocity 6";
+	button.onclick = function(){output.playNote("C1", 1, {velocity: 6});};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note C1; velocity 7";
+	button.onclick = function(){output.playNote("C1", 1, {velocity: 7});};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Note C1; velocity 8";
+	button.onclick = function(){output.playNote("C1", 1, {velocity: 8});};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	///
+	
+	var container = document.getElementById("container3");
+	
+	
+	///
+	
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 110; value 0";
+	button.onclick = function(){output.sendControlChange(110, 0, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 110; value 1";
+	button.onclick = function(){output.sendControlChange(110, 1, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 110; value 2";
+	button.onclick = function(){output.sendControlChange(110, 2, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 110; value 3";
+	button.onclick = function(){output.sendControlChange(110, 3, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 110; value 4";
+	button.onclick = function(){output.sendControlChange(110, 4, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 110; value 5";
+	button.onclick = function(){output.sendControlChange(110, 5, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 110; value 6";
+	button.onclick = function(){output.sendControlChange(110, 6, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 110; value 7";
+	button.onclick = function(){output.sendControlChange(110, 7, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 110; value 8";
+	button.onclick = function(){output.sendControlChange(110, 8, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	///
+	
+	var container = document.getElementById("container4");
+
+	
+	///
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 111; value 0";
+	button.onclick = function(){output.sendControlChange(111, 0, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 111; value 1";
+	button.onclick = function(){output.sendControlChange(111, 1, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 111; value 2";
+	button.onclick = function(){output.sendControlChange(111, 2, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 111; value 3";
+	button.onclick = function(){output.sendControlChange(111, 3, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 111; value 4";
+	button.onclick = function(){output.sendControlChange(111, 4, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 111; value 5";
+	button.onclick = function(){output.sendControlChange(111, 5, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	
+	///
+	
+	var container = document.getElementById("container5");
+	
+	
+	///
+	
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 112; transfer popup";
+	button.onclick = function(){output.sendControlChange(112, 0, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 112; scene 1";
+	button.onclick = function(){output.sendControlChange(112, 1, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 112; mute in scene";
+	button.onclick = function(){output.sendControlChange(112, 2, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 112; mute everywhere";
+	button.onclick = function(){output.sendControlChange(112, 3, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 112; hang up";
+	button.onclick = function(){output.sendControlChange(112, 4, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "channel 112; solo chat";
+	button.onclick = function(){output.sendControlChange(112, 5, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "remote speaker";
+	button.onclick = function(){output.sendControlChange(112, 6, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "remote display";
+	button.onclick = function(){output.sendControlChange(112, 7, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "scene 2";
+	button.onclick = function(){output.sendControlChange(112, 12, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "scene 3";
+	button.onclick = function(){output.sendControlChange(112, 13, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "scene 4";
+	button.onclick = function(){output.sendControlChange(112, 14, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "scene 5";
+	button.onclick = function(){output.sendControlChange(112, 15, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "scene 6";
+	button.onclick = function(){output.sendControlChange(112, 16, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = " scene 7";
+	button.onclick = function(){output.sendControlChange(112, 17, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "scene 8";
+	button.onclick = function(){output.sendControlChange(112, 18, 1);};  // "speaker" also works in the same way.
+	container.appendChild(button);
+	
+
+});
+</script>
+</body>
+</html>

examples/mini.css

@@ -0,0 +1,3 @@
+.tile {
+  max-width:200px !important;
+}

examples/minidirector.css

@@ -0,0 +1,97 @@
+body{
+	zoom: 75%;
+}
+.hidden{
+	display:unset!important;
+	visibility: visible;
+	width:unset;
+	height:unset;
+	opacity:  1;
+}
+button[data-action-type='solo-chat'] {
+	display:none! important;
+}
+
+button[data-action-type='recorder-local'] {
+	display:none! important;
+}
+span[data-action-type='ordering'] {
+	display:none! important;
+}
+button[data-action-type='open-file-share'] {
+	display:none! important;
+}
+
+button[data-action-type='add-channel']{
+	display:none! important;
+}
+button[data-action-type='toggle-remote-speaker']{
+	display:none! important;
+}
+button[data-action-type='toggle-remote-display']{
+	display:none! important;
+}
+button[data-action-type='hide-guest']{
+	display:none! important;
+}
+button[data-action-type='create-timer']{
+	display:none! important;
+}
+button[data-action-type='change-url']{
+	display:none! important;
+}
+button[data-action-type='change-params']{
+	display:none! important;
+}
+span[data-action-type='change-quality']{
+	display:none! important;
+}
+
+span[data-action-type='sceneCluster2']{
+	display:none! important;
+}
+span[data-action-type='sceneCluster1']{
+	display:none! important;
+}
+
+.orderspan{
+	display:none! important;
+}
+#roomHeader{
+	display:none! important;
+}
+.directorContainer {
+	display:none!important;
+}
+
+.hideDropMenu{
+	display:none!important;
+}
+
+#header{
+	display:none!important;
+}
+body {
+	background-color: #000;
+}
+
+button[class="pull-right"]{
+	display:none! important;
+}
+
+div#guestFeeds {
+	padding: 1px!important;
+	margin: 1px!important;
+}
+div[class="vidcon directorMargins"] {
+	padding: 1px!important;
+	margin: 1px!important;
+	width: 260px;
+}
+button[data-action-type]{
+	margin: 1px!important;
+}
+
+
+
+

examples/obs_client.html

@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript" src="./thirdparty/obs-websocket.min.js"></script>
+ 
+	<link rel="stylesheet" href="./main.css" />
+	<style>
+	
+		.container {
+			max-width: 80%;
+			width: fit-content;
+			margin: 0 auto;
+		}
+
+		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;
+			display: inline-block;
+			flex-flow: unset;
+			margin: 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;
+		}
+		button {
+			margin:5px;
+			border:solid black 2px;
+		}
+		
+		body {
+			color:white;
+			display: inline-block;
+			flex-flow: unset;
+		}
+		
+		a {
+			color: #225273!important;
+		}
+		
+		.hidden{
+			display:none !important;
+		}
+		
+		.stat {
+			background-color: black;
+			margin: 7px;
+			padding: 5px;
+		}
+		.stat:nth-child(2n) {
+			background-color: #333;
+		}
+		.stat:empty {
+			display:none;
+		}
+		
+		
+		
+	</style>
+	<title>OBS Controller Demo using VDO.NInja</title>
+</head>
+
+<div class="container">
+	<h1>OBS remote (client)</h1>
+	<div id="info">
+		<div class="card">
+			<h2>Scenes</h2>
+			<div id="scene_list">
+			</div>
+		</div>
+		<div class="card hidden">
+			<h2>General</h2>
+			<div>
+				<button onclick="basicCommand(this);" data-command="GetVersion">GetVersion</button>
+				<button onclick="basicCommand(this);" data-command="GetStats">GetStats</button>
+				<button onclick="basicCommand(this);" data-command="GetVideoInfo">GetVideoInfo</button>
+			</div>
+		</div>
+		<div class="card">
+			<h2>Output</h2>
+			<div id="outputs">
+				<button onclick="basicCommand(this);" data-command="ListOutputs">ListOutputs</button>
+			</div>
+		</div>
+		<div class="card">
+			<h2>Active Sources</h2>
+			<div id="active_source_list">
+			</div>
+		</div>
+		<div class="card">
+			<h2>All Sources</h2>
+			<div id="source_list">
+			</div>
+		</div>
+		<div class="card hidden">
+			<h2>Source debug</h2>
+			<div>
+				<button onclick="basicCommand(this);" data-command="GetMediaSourcesList">GetMediaSourcesList</button>
+				<button onclick="basicCommand(this);" data-command="GetSourcesList">GetSourcesList</button>
+				<button onclick="basicCommand(this);" data-command="GetSourceActive">GetSourceActive</button>
+				<button onclick="basicCommand(this);" data-command="GetAudioActive">GetAudioActive</button>
+			</div>
+		</div>
+		<div id="audio" class="card hidden">
+			<h2>Audio</h2>
+			<div>
+				<button class="hidden"  onclick="basicCommand(this, {source:selectedSource});" data-command="GetVolume">GetVolume</button>
+				<input type='range' min="0" max="100" value="100" onchange="basicCommand(this, {source:selectedSource, volume:parseInt(this.value)/100});" data-command="SetVolume" />
+				<button class="hidden" onclick="basicCommand(this, {source:selectedSource});" data-command="ToggleMute">ToggleMute</button>
+			</div>
+		</div>
+		<div class="card" id='commands'>
+			<h2>Custom Commands</h2>
+			<input id="newCommand"  placeholder="enter a custom command" type='text' /><button id="goCreate" onclick="createCommand()">Create</button>
+			<br />
+			A list of possible commands <a href="https://github.com/Palakis/obs-websocket/blob/4.x-current/docs/generated/protocol.md#requests">available here:</a><br />
+		</div>
+	</div>
+	<div  style="width:100%;display:block;margin:0;padding:0;">
+		<div id='OBSstats' style="width:49%;display:inline-block;vertical-align: top;">
+			<div id="stat-current-profile" class='stat'></div>
+			<div id="stat-current-scene" class='stat'></div>
+			<div id="stat-streaming" class='stat'></div>
+			<div id="stat-memory-usage" class='stat'></div>
+			<div id="stat-recording" class='stat'></div>
+			<div id="stat-recording-paused" class='stat'></div>
+			<div id="stat-average-frame-time" class='stat'></div>
+			<div id="stat-cpu-usage" class='stat'></div>
+			<div id="stat-fps" class='stat'></div>
+			<div id="stat-free-disk-space" class='stat'></div>
+		</div>
+		<div id='OBSsettings'  style="width:49%;display:inline-block;vertical-align: top;">
+			<div id="setting-baseHeight" class='stat'></div>
+			<div id="setting-baseWidth" class='stat'></div>
+			<div id="setting-outputHeight" class='stat'></div>
+			<div id="setting-outputWidth" class='stat'></div>
+			<div id="setting-scaleType" class='stat'></div>
+			<div id="setting-fps" class='stat'></div>
+		</div>
+	</div>
+	
+</div>
+<script>
+
+	function basicCommand(ele, data={}){
+		sendToOBS(ele.dataset.command, data);
+	}
+
+	function createCommand(){
+		var command = document.getElementById("newCommand").value;
+		document.getElementById("newCommand").value = "";
+		var button = document.createElement("button");
+		button.innerText = command;
+		button.dataset.command = command;
+		button.onclick = function(){basicCommand(this);};
+		document.getElementById("commands").appendChild(button);
+	}
+
+	(function(w) {
+	w.URLSearchParams = w.URLSearchParams || function(searchString) {
+		var self = this;
+		searchString = searchString.replace("??", "?");
+		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 urlEdited = window.location.search.replace(/\?\?/g, "?");
+	urlEdited = urlEdited.replace(/\?/g, "&");
+	urlEdited = urlEdited.replace(/\&/, "?");
+
+	if (urlEdited !== window.location.search){
+		warnlog(window.location.search + " changed to " + urlEdited);
+		window.history.pushState({path: urlEdited.toString()}, '', urlEdited.toString());
+	}
+	var urlParams = new URLSearchParams(urlEdited);
+
+	if (urlParams.get("password")){
+		var password = urlParams.get("password");
+		localStorage.setItem('password',password)
+	} else if (localStorage.getItem('password')){
+		password = localStorage.getItem('password');
+	}
+	if (urlParams.get("room")){
+		var roomname = urlParams.get("room")
+		localStorage.setItem('roomname',roomname)
+	} else if (localStorage.getItem('roomname')){
+		roomname = localStorage.getItem('roomname');
+	}
+
+	const obs = new OBSWebSocket();
+	var scenesData = {};
+	var selectedSource = null;
+	scenesData.scenes = [];
+	
+	function sendToOBS(action, data){
+		var msg = {};
+		msg.sendToOBS = {};
+		msg.sendToOBS.action = action;
+		msg.sendToOBS.data = data;
+		iframe.contentWindow.postMessage({"sendData":msg}, '*');
+	}
+
+	var iframe = document.createElement("iframe");
+	iframe.src = "./?room="+roomname+"&password="+password+"&push&novideo=mainOBSOutput&noaudio=mainOBSOutput&autostart&vd=0&ad=0&transparent&cleanoutput&label=CLIENT_"+Math.floor(Math.random() * 1000000);
+//	iframe.style.opacity = 0;
+	iframe.style.width = "160px";
+	iframe.style.height = "90px";
+	iframe.style.position = "fixed";
+	iframe.style.top = "10px";
+	iframe.style.right = "170px";
+	document.body.appendChild(iframe)
+
+	var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+	var eventer = window[eventMethod];
+	var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+	eventer(messageEvent, function (e) {
+		if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+		if ("dataReceived" in e.data){ 
+			if ("sentFromOBS" in e.data.dataReceived){
+				processIncoming(e.data.dataReceived.sentFromOBS);
+			}
+		}
+	});
+
+	function changeScene(scene){
+		sendToOBS('SetCurrentScene', {
+			'scene-name': scene
+		});
+	}
+	
+	function processIncoming(data){
+		if ("scenes" in data){
+			scenesData = data.scenes;
+			updateSceneList();
+		}
+		if ("callbackData" in data){
+			console.log(data.callbackData);
+		} else if ("callbackError" in data){
+			console.log(data.callbackError);
+		}
+		if ("rawData" in data){
+			var data = JSON.parse(data.rawData);
+			console.log(data);
+			if (("update-type" in data) && (data["update-type"]="Heartbeat")){
+				for (var i in data){
+					if (i === "stats"){
+						for (var j in data[i]){
+							if (document.getElementById("stat-"+j)){
+							
+								if (typeof data[i][j] == "number"){
+									data[i][j] = parseInt(data[i][j]*100)/100.0;
+								}
+								if (data[i][j]===true){
+									document.getElementById("stat-"+j).innerHTML = j+ " : <font color='#CFC'>" + data[i][j]+"</font>";
+								} else if (data[i][j] === false){
+									document.getElementById("stat-"+j).innerHTML = j+ " : <font color='#FCC'>" + data[i][j]+"</font>";
+								} else {
+									document.getElementById("stat-"+j).innerHTML = j+ " : <font color='#DDD'>" + data[i][j]+"</font>";
+								}
+							}
+						}
+					} else if (document.getElementById("stat-"+i)){
+						if (data[i]===true){
+							document.getElementById("stat-"+i).innerHTML = i+ " : <font color='#CFC'>" + data[i]+"</font>";
+						} else if (data[i] === false){
+							document.getElementById("stat-"+i).innerHTML = i+ " : <font color='#FCC'>" + data[i]+"</font>";
+						} else {
+							document.getElementById("stat-"+i).innerHTML = i+ " : <font color='#DDD'>" + data[i]+"</font>";
+						}
+					}
+				}
+			} else if ("baseHeight" in data){
+				for (var i in data){
+					if (document.getElementById("setting-"+i)){
+						if (data[i]===true){
+							document.getElementById("setting-"+i).innerHTML = i+ " : <font color='#CFC'>" + data[i]+"</font>";
+						} else if (data[i] === false){
+							document.getElementById("setting-"+i).innerHTML = i+ " : <font color='#FCC'>" + data[i]+"</font>";
+						} else {
+							document.getElementById("setting-"+i).innerHTML = i+ " : <font color='#DDD'>" + data[i]+"</font>";
+						}
+					}
+				}
+			} else if ("sources" in data){
+				if ("name" in data){
+					document.getElementById("active_source_list").innerHTML = "";
+					for (var i =0;i<data.sources.length;i++){
+						var button = document.createElement("button");
+						button.innerText = data.sources[i].name;
+						button.dataset.name = data.sources[i].name;
+						button.dataset.type = "source"
+						button.onclick = function(){
+							console.log("CLICKED: " + this.innerText);
+							selectedSource = this.dataset.name;
+							document.getElementById("audio").classList.add("hidden");
+							var sources = document.querySelectorAll("[data-name");
+							for (var k = 0 ; k<sources.length; k++){
+								sources[k].classList.remove("pressed");
+							}
+							var sources = document.querySelectorAll("[data-name='"+selectedSource+"']");
+							console.log(sources);
+							for (var k = 0 ; k<sources.length; k++){
+								document.getElementById("audio").classList.remove("hidden");
+								sources[k].classList.add("pressed");
+							}
+						};
+						document.getElementById("active_source_list").appendChild(button);
+					}
+					if (selectedSource){
+						var sources = document.querySelectorAll("[data-name");
+						document.getElementById("audio").classList.add("hidden");
+						for (var k = 0 ; k<sources.length; k++){
+							sources[k].classList.remove("pressed");
+						}
+						var sources = document.querySelectorAll("[data-name='"+selectedSource+"']");
+						console.log(sources);
+						for (var k = 0 ; k<sources.length; k++){
+							sources[k].classList.add("pressed");
+							document.getElementById("audio").classList.remove("hidden");
+						}
+					} else {
+						document.getElementById("audio").classList.add("hidden");
+					}
+				} else {
+					document.getElementById("source_list").innerHTML = "";
+					for (var i =0;i<data.sources.length;i++){
+						var button = document.createElement("button");
+						button.innerText = data.sources[i].name;
+						button.dataset.name = data.sources[i].name;
+						button.dataset.type = "source"
+						button.onclick = function(){
+							console.log("CLICKED: " + this.innerText);
+							selectedSource = this.dataset.name;
+							document.getElementById("audio").classList.add("hidden");
+							var sources = document.querySelectorAll("[data-name");
+							for (var k = 0 ; k<sources.length; k++){
+								sources[k].classList.remove("pressed");
+							}
+							var sources = document.querySelectorAll("[data-name='"+selectedSource+"']");
+							console.log(sources);
+							for (var k = 0 ; k<sources.length; k++){
+								sources[k].classList.add("pressed");
+								document.getElementById("audio").classList.remove("hidden");
+							}
+						};
+						document.getElementById("source_list").appendChild(button);
+					}
+					if (selectedSource){
+						var sources = document.querySelectorAll("[data-name");
+						document.getElementById("audio").classList.add("hidden");
+						for (var k = 0 ; k<sources.length; k++){
+							sources[k].classList.remove("pressed");
+						}
+						var sources = document.querySelectorAll("[data-name='"+selectedSource+"']");
+						console.log(sources);
+						for (var k = 0 ; k<sources.length; k++){
+							sources[k].classList.add("pressed");
+							document.getElementById("audio").classList.remove("hidden");
+						}
+					} else {
+						document.getElementById("audio").classList.add("hidden");
+					}
+				}
+				
+				<!-- congestion: 0 -->
+				<!-- droppedFrames: 0 -->
+				<!-- flags: {audio: true, encoded: true, multiTrack: true, rawValue: 31, service: true, …} -->
+				<!-- height: 1080 -->
+				<!-- name: "simple_stream" -->
+				<!-- reconnecting: false -->
+				<!-- settings: {bind_ip: 'default', dyn_bitrate: false, low_latency_mode_enabled: false, new_socket_loop_enabled: false} -->
+				<!-- totalBytes: 351121 -->
+				<!-- totalFrames: 30 -->
+				<!-- type: "rtmp_output" -->
+				<!-- width: 1920 -->
+				
+			} else if ("outputs" in data){
+				document.getElementById("outputs").innerHTML = "";
+				for (var i =0;i<data.outputs.length;i++){
+					var button = document.createElement("button");
+					button.innerText = data.outputs[i].name;
+					button.dataset.output = data.outputs[i].name;
+					button.onclick = function(){
+						console.log("CLICKED: " + this.innerText);
+						var outputName = this.dataset.output;
+						if (this.classList.contains("pressed")){
+							this.classList.remove("pressed");
+							sendToOBS("StopOutput",{outputName:outputName});
+						} else {
+							this.classList.add("pressed");
+							sendToOBS("StartOutput",{outputName:outputName});
+						}
+					};
+					document.getElementById("outputs").appendChild(button);
+				}
+			}
+			
+		} 
+	}
+
+	function updateSceneList(){
+		var scenes = scenesData.scenes;
+		document.getElementById("scene_list").innerHTML = "";
+		scenes.forEach(scene => {
+			var button = document.createElement("button");
+			button.innerText = scene.name;
+			button.onclick = function(){
+				console.log("CLICKED");
+				changeScene(this.innerText);
+			};  // "speaker" also works in the same way.
+			document.getElementById("scene_list").appendChild(button);
+			
+			if (scene.name === scenesData.currentScene) {
+				button.classList.add("pressed");
+			}
+		});
+	}
+	
+		
+    </script>
+  </body>
+</html>

examples/obs_remote/index.html

@@ -0,0 +1,401 @@
+<html>
+  <head>
+    <script type="text/javascript" src="./thirdparty/obs-websocket.min.js"></script>
+	<link rel="stylesheet" href="https://vdo.ninja/main.css" />
+	<title>OBS Controller Demo using VDO.Ninja</title>
+	<style>
+	
+		.container {
+			max-width: 80%;
+			width: fit-content;
+			margin: 0 auto;
+		}
+
+		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;
+			display: inline-block;
+			flex-flow: unset;
+			margin: 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;
+		}
+		button {
+			margin:5px;
+			border:solid black 2px;
+		}
+		
+		body {
+			color:white;
+			display: inline-block;
+			flex-flow: unset;
+		}
+		
+		a {
+			color: #CEF!important;
+		}
+		
+		#info{
+			margin: 20px;
+			max-height: 50%;
+			overflow: auto;
+		}
+		
+		#client {
+			margin:10px;
+			display:block;
+		}
+		label {
+			color:white;
+		}
+		
+	</style>
+</head>
+<body>
+	<div class="container">
+		<h1>OBS remote (server)</h1>
+		<span id='setup'>
+			<label for="address">Websocket Address</label>
+			<input name="address" id="address" placeholder="address (optional)" value="localhost:4444" />
+			<label for="address">Websocket Password</label>
+			<input  name="password" id="password"  placeholder="password here (optional)" />
+			<br />
+			<label for="vdoroomname">Room name to use</label>
+			<input name="vdoroomname" id="vdoroomname" placeholder="vdo room name to use (optional)" />
+			<label for="vdopassword">Room password to use</label>
+			<input name="vdopassword" id="vdopassword"  placeholder="vdo password to use (optional)" />
+			<br />
+			<button id="address_button">Connect</button>
+			<button id="address_button_2">Connect and share OBS Output</button>
+		</span>
+		<a id="client" target="_blank"></a>
+		<div id="info"></div>
+		<small>Code available on GitHub: <a target="_blank" href='https://github.com/steveseguin/remote_ninja'>https://github.com/steveseguin/remote_ninja</a></small>
+	</div>
+	<script>
+
+		var hostname = "vdo.ninja"; // all that's supported as of this moment. 
+
+		const obs = new OBSWebSocket();
+		var scenesData = {};
+		scenesData.scenes = [];
+
+		function sendToOBS(action, data={}){
+			document.getElementById("info").innerHTML = action + "<br />"+document.getElementById("info").innerHTML;
+			obs.sendCallback(action, data, sendCallback)
+		}
+		
+		(function(w) {
+			w.URLSearchParams = w.URLSearchParams || function(searchString) {
+				var self = this;
+				searchString = searchString.replace("??", "?");
+				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 urlEdited = window.location.search.replace(/\?\?/g, "?");
+		urlEdited = urlEdited.replace(/\?/g, "&");
+		urlEdited = urlEdited.replace(/\&/, "?");
+
+		if (urlEdited !== window.location.search){
+			warnlog(window.location.search + " changed to " + urlEdited);
+			window.history.pushState({path: urlEdited.toString()}, '', urlEdited.toString());
+		}
+		var urlParams = new URLSearchParams(urlEdited);
+		
+		var roomname = Math.floor(Math.random() * 1000000);
+		var pwurl = Math.floor(Math.random() * 1000000);
+
+		if (urlParams.get("password")){
+			pwurl = urlParams.get("password");
+			localStorage.setItem('password',pwurl)
+		} else if (localStorage.getItem('password')){
+			pwurl = localStorage.getItem('password');
+		} else {
+			localStorage.setItem('password',pwurl)
+		}
+		
+		if (urlParams.get("room")){
+			roomname = urlParams.get("room")
+			localStorage.setItem('roomname',roomname)
+		} else if (localStorage.getItem('roomname')){
+			roomname = localStorage.getItem('roomname');
+		} else {
+			localStorage.setItem('roomname',roomname)
+		}
+		
+		document.getElementById('vdoroomname').value = roomname;
+		document.getElementById('vdopassword').value = pwurl;
+		
+		
+		if (localStorage.getItem('address')){
+			document.getElementById('address').value = localStorage.getItem('address');
+		} 
+		
+		if (localStorage.getItem('wspass')){
+			document.getElementById('password').value = localStorage.getItem('wspass');
+		} 
+		
+		var iframe = null;
+		function createIFrame(visible=true){
+			iframe = document.createElement("iframe");
+			
+			if (visible){
+				iframe.src = "https://"+hostname+"/?room="+roomname+"&push=mainOBSOutput&od=0&transparent&webcam&vd=obs&view&password="+pwurl+"&label=OBS_"+Math.floor(Math.random() * 1000000);
+				iframe.style.minWidth = "720px";
+				iframe.style.minHeight = "480px";		
+				iframe.style.maxWidth = "50%";
+				iframe.style.maxHeight = "50%";		
+				iframe.style.display = "block";		
+				iframe.style.margin = "auto";
+				iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+			} else {
+				iframe.src = "https://"+hostname+"/?room="+roomname+"&push&autostart&vd=0&view&ad=0&transparent&cleanoutput&password="+pwurl+"&label=OBS_"+Math.floor(Math.random() * 1000000);
+				iframe.style.opacity = 0;
+				iframe.style.width = 0;
+				iframe.style.height = 0;
+				iframe.style.position = "absolulte";
+				iframe.style.top = "-100px";
+				iframe.style.left = "-100px";
+			}
+			document.getElementById("client").parentNode.insertBefore(iframe, document.getElementById("client").nextSibling);
+
+			var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+			var eventer = window[eventMethod];
+			var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+			eventer(messageEvent, function (e) {
+				if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+				console.log(e);
+				if ("dataReceived" in e.data){
+					if ("sendToOBS" in e.data.dataReceived){
+						if ("action" in e.data.dataReceived.sendToOBS){
+							if ("data" in e.data.dataReceived.sendToOBS){
+								sendToOBS(e.data.dataReceived.sendToOBS.action, e.data.dataReceived.sendToOBS.data);
+							}
+						}
+					}
+				} else if ("action" in e.data){
+					if (e.data.action === "new-push-connection"){
+						console.log(e.data);
+						updateSceneList();
+					}
+				}
+			});
+		}
+		
+		function sendCallback(err, data){
+			console.log("CALLBACK TRIGGERED");
+			var msg = {};
+			msg.sentFromOBS = {};
+			msg.sentFromOBS.callbackData = data;
+			msg.sentFromOBS.callbackError = err;
+			try {
+				iframe.contentWindow.postMessage({"sendData":msg}, '*');
+			} catch(e){}
+		}
+		
+		function sendRawData(data){
+			var msg = {};
+			msg.sentFromOBS = {};
+			msg.sentFromOBS.rawData = data;
+			try {
+				iframe.contentWindow.postMessage({"sendData":msg}, '*');
+			} catch(e){}
+		}
+		
+		function heartBeat(){
+			obs.send("GetStats");
+		}
+
+		function updateSceneList(){
+			var msg = {};
+			msg.sentFromOBS = {};
+			msg.sentFromOBS.scenes = scenesData;
+			try {
+				iframe.contentWindow.postMessage({"sendData":msg}, '*');
+			} catch(e){}
+			console.log(msg);
+			obs.send("GetSourcesList");
+			obs.send('GetCurrentScene');
+			obs.send("GetVideoInfo");
+			obs.send("ListOutputs");
+		}
+
+		document.getElementById('address_button').addEventListener('click', e => {
+			connect(e, false);
+		});
+		
+		document.getElementById('address_button_2').addEventListener('click', e => {
+			connect(e, true);
+		});
+		
+		var heartBeatInterval = null;
+		
+		function connect(e, camera){
+			const address = document.getElementById('address').value || "localhost:4444";
+			const password = document.getElementById('password').value;
+			
+			
+			roomname = document.getElementById('vdoroomname').value || Math.floor(Math.random() * 1000000);
+			pwurl = document.getElementById('vdopassword').value || Math.floor(Math.random() * 1000000);
+			localStorage.setItem('roomname',roomname)
+			localStorage.setItem('password',pwurl)
+			
+			createIFrame(camera); // connects to VDO.Ninja's IFRAME API
+			
+			localStorage.setItem('address',address);
+			if (password){
+				localStorage.setItem('wspass',password);
+				var ret = obs.connect({
+				  address: address,
+				  password: password
+				});
+			} else {
+				var ret = obs.connect({
+				  address: address
+				});
+			}
+			
+			ret.then(() => {
+				console.log(`Success!`);
+				return obs.send('GetSceneList');
+			}).then(data => {
+				document.getElementById("setup").style.display = "none";
+				scenesData = data;
+				updateSceneList();
+				var pathname = window.location.pathname.split("/");
+				pathname.pop();
+				pathname = pathname.join("/");
+				var clientLink = window.location.protocol + "//" + window.location.host + pathname + "/interface.html?room="+roomname+"&password="+pwurl;
+				document.getElementById("client").href = clientLink;
+				document.getElementById("client").innerHTML = "<b><font style='color:#70c4ff;'>client link:</font></b> "+clientLink;
+				document.getElementById("info").innerHTML = "<br /><p style='color:#bdffbd;'>Connection to OBS websockets opened.</p>" + document.getElementById("info").innerHTML;
+				try {
+					obs._socket.onmessage2 = obs._socket.onmessage; // hijacking the obs-websocket.js framework
+					obs._socket.onmessage = function(data){
+					console.log(data);
+						obs._socket.onmessage2(data);
+						if (data.type && data.data){
+							if (data.type == "message"){
+								sendRawData(data.data);
+							}
+						}
+					}
+				} catch(e){console.error(e);}
+				
+				clearInterval(heartBeatInterval);
+				heartBeatInterval = setInterval(function(){heartBeat();},3000);
+				
+			}).catch(err => { // Promise convention dicates you have a catch on every chain.
+				console.log(err);
+				document.getElementById("info").innerHTML = "<br />Error trying to connect. Is SSL enabled on your domain?" + document.getElementById("info").innerHTML;
+				if ("error" in err){
+					document.getElementById("info").innerHTML = "<br />"+err.error + document.getElementById("info").innerHTML;
+				}
+			});
+		};
+		
+		// We use the source visibility one and filter visibility web socket commands quite often in shows.
+			
+		obs.on('SwitchScenes', data => {
+			console.log(`New Active Scene: ${data.sceneName}`);
+			scenesData.currentScene = data.sceneName
+			updateSceneList();
+		});
+		obs.on('ConnectionOpened', (data) => function(){
+			document.getElementById("setup").style.display = "none";
+			document.getElementById("info").innerHTML = "<br /><p style='color:#bdffbd;'>Connection to OBS websockets opened.</p>" + document.getElementById("info").innerHTML;
+		});
+		obs.on('ConnectionClosed', (data) => function(){
+			document.getElementById("setup").style.display = "unset";
+			document.getElementById("info").innerHTML = "<br />Connection to OBS websockets closed" + document.getElementById("info").innerHTML;
+		});
+		obs.on('AuthenticationSuccess', (data) => function(){
+			document.getElementById("setup").style.display = "none";
+			document.getElementById("info").innerHTML = "<br />OBS websockets authenticated" + document.getElementById("info").innerHTML;
+		});
+		obs.on('AuthenticationFailure', (data) => function(){
+			document.getElementById("setup").style.display = "unset";
+			document.getElementById("info").innerHTML = "<br />Authentication to OBS websockets failed" + document.getElementById("info").innerHTML;
+		});
+		obs.on('ScenesChanged', (data) => function(){
+			scenesData = data;
+			updateSceneList()
+		});
+		// You must add this handler to avoid uncaught exceptions.
+		obs.on('error', err => {
+			document.getElementById("info").innerHTML = "<br />OBS websockets error" + document.getElementById("info").innerHTML;
+			console.error('socket error:', err);
+			if ("error" in err){
+				document.getElementById("info").innerHTML = "<br />"+err.error + document.getElementById("info").innerHTML;
+			}
+		});
+			
+	</script>
+</body>
+</html>

examples/obs_remote/interface.html

@@ -0,0 +1,474 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript" src="./thirdparty/obs-websocket.min.js"></script>
+	<link rel="stylesheet" href="https://vdo.ninja/main.css" />
+	<style>
+	
+		.container {
+			max-width: 80%;
+			width: fit-content;
+			margin: 0 auto;
+		}
+
+		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;
+			display: inline-block;
+			flex-flow: unset;
+			margin: 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;
+		}
+		button {
+			margin:5px;
+			border:solid black 2px;
+		}
+		
+		body {
+			color:white;
+			display: inline-block;
+			flex-flow: unset;
+		}
+		
+		a {
+			color: #225273!important;
+		}
+		
+		.hidden{
+			display:none !important;
+		}
+		
+		.stat {
+			background-color: black;
+			margin: 7px;
+			padding: 5px;
+		}
+		.stat:nth-child(2n) {
+			background-color: #333;
+		}
+		.stat:empty {
+			display:none;
+		}
+		
+		
+		
+	</style>
+	<title>OBS Controller Demo using VDO.NInja</title>
+</head>
+
+<div class="container">
+	<h1>OBS remote (client)</h1>
+	<div id="info">
+		<div class="card">
+			<h2>Scenes</h2>
+			<div id="scene_list">
+			</div>
+		</div>
+		<div class="card hidden">
+			<h2>General</h2>
+			<div>
+				<button onclick="basicCommand(this);" data-command="GetVersion">GetVersion</button>
+				<button onclick="basicCommand(this);" data-command="GetStats">GetStats</button>
+				<button onclick="basicCommand(this);" data-command="GetVideoInfo">GetVideoInfo</button>
+			</div>
+		</div>
+		<div class="card">
+			<h2>Output</h2>
+			<div id="outputs">
+				<button onclick="basicCommand(this);" data-command="ListOutputs">ListOutputs</button>
+			</div>
+		</div>
+		<div class="card">
+			<h2>Active Sources</h2>
+			<div id="active_source_list">
+			</div>
+		</div>
+		<div class="card">
+			<h2>All Sources</h2>
+			<div id="source_list">
+			</div>
+		</div>
+		<div class="card hidden">
+			<h2>Source debug</h2>
+			<div>
+				<button onclick="basicCommand(this);" data-command="GetMediaSourcesList">GetMediaSourcesList</button>
+				<button onclick="basicCommand(this);" data-command="GetSourcesList">GetSourcesList</button>
+				<button onclick="basicCommand(this);" data-command="GetSourceActive">GetSourceActive</button>
+				<button onclick="basicCommand(this);" data-command="GetAudioActive">GetAudioActive</button>
+			</div>
+		</div>
+		<div id="audio" class="card hidden">
+			<h2>Audio</h2>
+			<div>
+				<button class="hidden"  onclick="basicCommand(this, {source:selectedSource});" data-command="GetVolume">GetVolume</button>
+				<input type='range' min="0" max="100" value="100" onchange="basicCommand(this, {source:selectedSource, volume:parseInt(this.value)/100});" data-command="SetVolume" />
+				<button class="hidden" onclick="basicCommand(this, {source:selectedSource});" data-command="ToggleMute">ToggleMute</button>
+			</div>
+		</div>
+		<div class="card" id='commands'>
+			<h2>Custom Commands</h2>
+			<input id="newCommand"  placeholder="enter a custom command" type='text' /><button id="goCreate" onclick="createCommand()">Create</button>
+			<br />
+			A list of possible commands <a href="https://github.com/Palakis/obs-websocket/blob/4.x-current/docs/generated/protocol.md#requests">available here:</a><br />
+		</div>
+	</div>
+	<div  style="width:100%;display:block;margin:0;padding:0;">
+		<div id='OBSstats' style="width:49%;display:inline-block;vertical-align: top;">
+			<div id="stat-current-profile" class='stat'></div>
+			<div id="stat-current-scene" class='stat'></div>
+			<div id="stat-streaming" class='stat'></div>
+			<div id="stat-memory-usage" class='stat'></div>
+			<div id="stat-recording" class='stat'></div>
+			<div id="stat-recording-paused" class='stat'></div>
+			<div id="stat-average-frame-time" class='stat'></div>
+			<div id="stat-cpu-usage" class='stat'></div>
+			<div id="stat-fps" class='stat'></div>
+			<div id="stat-free-disk-space" class='stat'></div>
+		</div>
+		<div id='OBSsettings'  style="width:49%;display:inline-block;vertical-align: top;">
+			<div id="setting-baseHeight" class='stat'></div>
+			<div id="setting-baseWidth" class='stat'></div>
+			<div id="setting-outputHeight" class='stat'></div>
+			<div id="setting-outputWidth" class='stat'></div>
+			<div id="setting-scaleType" class='stat'></div>
+			<div id="setting-fps" class='stat'></div>
+		</div>
+	</div>
+	
+</div>
+<script>
+
+	function basicCommand(ele, data={}){
+		sendToOBS(ele.dataset.command, data);
+	}
+
+	function createCommand(){
+		var command = document.getElementById("newCommand").value;
+		document.getElementById("newCommand").value = "";
+		var button = document.createElement("button");
+		button.innerText = command;
+		button.dataset.command = command;
+		button.onclick = function(){basicCommand(this);};
+		document.getElementById("commands").appendChild(button);
+	}
+
+	(function(w) {
+	w.URLSearchParams = w.URLSearchParams || function(searchString) {
+		var self = this;
+		searchString = searchString.replace("??", "?");
+		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 urlEdited = window.location.search.replace(/\?\?/g, "?");
+	urlEdited = urlEdited.replace(/\?/g, "&");
+	urlEdited = urlEdited.replace(/\&/, "?");
+
+	if (urlEdited !== window.location.search){
+		warnlog(window.location.search + " changed to " + urlEdited);
+		window.history.pushState({path: urlEdited.toString()}, '', urlEdited.toString());
+	}
+	var urlParams = new URLSearchParams(urlEdited);
+
+	if (urlParams.get("password")){
+		var password = urlParams.get("password");
+		localStorage.setItem('password',password)
+	} else if (localStorage.getItem('password')){
+		password = localStorage.getItem('password');
+	}
+	if (urlParams.get("room")){
+		var roomname = urlParams.get("room")
+		localStorage.setItem('roomname',roomname)
+	} else if (localStorage.getItem('roomname')){
+		roomname = localStorage.getItem('roomname');
+	}
+
+	const obs = new OBSWebSocket();
+	var scenesData = {};
+	var selectedSource = null;
+	scenesData.scenes = [];
+	
+	function sendToOBS(action, data){
+		var msg = {};
+		msg.sendToOBS = {};
+		msg.sendToOBS.action = action;
+		msg.sendToOBS.data = data;
+		iframe.contentWindow.postMessage({"sendData":msg}, '*');
+	}
+
+	var iframe = document.createElement("iframe");
+	iframe.src = "https://vdo.ninja/?room="+roomname+"&password="+password+"&push&novideo=mainOBSOutput&noaudio=mainOBSOutput&autostart&vd=0&ad=0&transparent&cleanoutput&label=CLIENT_"+Math.floor(Math.random() * 1000000);
+//	iframe.style.opacity = 0;
+	iframe.style.width = "160px";
+	iframe.style.height = "90px";
+	iframe.style.position = "fixed";
+	iframe.style.top = "10px";
+	iframe.style.right = "170px";
+	document.body.appendChild(iframe)
+
+	var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+	var eventer = window[eventMethod];
+	var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+	eventer(messageEvent, function (e) {
+		if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+		if ("dataReceived" in e.data){ 
+			if ("sentFromOBS" in e.data.dataReceived){
+				processIncoming(e.data.dataReceived.sentFromOBS);
+			}
+		}
+	});
+
+	function changeScene(scene){
+		sendToOBS('SetCurrentScene', {
+			'scene-name': scene
+		});
+	}
+	
+	function processIncoming(data){
+		if ("scenes" in data){
+			scenesData = data.scenes;
+			updateSceneList();
+		}
+		if ("callbackData" in data){
+			console.log(data.callbackData);
+		} else if ("callbackError" in data){
+			console.log(data.callbackError);
+		}
+		if ("rawData" in data){
+			var data = JSON.parse(data.rawData);
+			console.log(data);
+			if ("stats" in data){
+				var i = "stats";
+				for (var j in data[i]){
+					if (document.getElementById("stat-"+j)){
+					
+						if (typeof data[i][j] == "number"){
+							data[i][j] = parseInt(data[i][j]*100)/100.0;
+						}
+						if (data[i][j]===true){
+							document.getElementById("stat-"+j).innerHTML = j+ " : <font color='#CFC'>" + data[i][j]+"</font>";
+						} else if (data[i][j] === false){
+							document.getElementById("stat-"+j).innerHTML = j+ " : <font color='#FCC'>" + data[i][j]+"</font>";
+						} else {
+							document.getElementById("stat-"+j).innerHTML = j+ " : <font color='#DDD'>" + data[i][j]+"</font>";
+						}
+					}
+				}
+			} else if ("baseHeight" in data){
+				for (var i in data){
+					if (document.getElementById("setting-"+i)){
+						if (data[i]===true){
+							document.getElementById("setting-"+i).innerHTML = i+ " : <font color='#CFC'>" + data[i]+"</font>";
+						} else if (data[i] === false){
+							document.getElementById("setting-"+i).innerHTML = i+ " : <font color='#FCC'>" + data[i]+"</font>";
+						} else {
+							document.getElementById("setting-"+i).innerHTML = i+ " : <font color='#DDD'>" + data[i]+"</font>";
+						}
+					}
+				}
+			} else if ("sources" in data){
+				if ("name" in data){
+					document.getElementById("active_source_list").innerHTML = "";
+					for (var i =0;i<data.sources.length;i++){
+						var button = document.createElement("button");
+						button.innerText = data.sources[i].name;
+						button.dataset.name = data.sources[i].name;
+						button.dataset.type = "source"
+						button.onclick = function(){
+							console.log("CLICKED: " + this.innerText);
+							selectedSource = this.dataset.name;
+							document.getElementById("audio").classList.add("hidden");
+							var sources = document.querySelectorAll("[data-name");
+							for (var k = 0 ; k<sources.length; k++){
+								sources[k].classList.remove("pressed");
+							}
+							var sources = document.querySelectorAll("[data-name='"+selectedSource+"']");
+							console.log(sources);
+							for (var k = 0 ; k<sources.length; k++){
+								document.getElementById("audio").classList.remove("hidden");
+								sources[k].classList.add("pressed");
+							}
+						};
+						document.getElementById("active_source_list").appendChild(button);
+					}
+					if (selectedSource){
+						var sources = document.querySelectorAll("[data-name");
+						document.getElementById("audio").classList.add("hidden");
+						for (var k = 0 ; k<sources.length; k++){
+							sources[k].classList.remove("pressed");
+						}
+						var sources = document.querySelectorAll("[data-name='"+selectedSource+"']");
+						console.log(sources);
+						for (var k = 0 ; k<sources.length; k++){
+							sources[k].classList.add("pressed");
+							document.getElementById("audio").classList.remove("hidden");
+						}
+					} else {
+						document.getElementById("audio").classList.add("hidden");
+					}
+				} else {
+					document.getElementById("source_list").innerHTML = "";
+					for (var i =0;i<data.sources.length;i++){
+						var button = document.createElement("button");
+						button.innerText = data.sources[i].name;
+						button.dataset.name = data.sources[i].name;
+						button.dataset.type = "source"
+						button.onclick = function(){
+							console.log("CLICKED: " + this.innerText);
+							selectedSource = this.dataset.name;
+							document.getElementById("audio").classList.add("hidden");
+							var sources = document.querySelectorAll("[data-name");
+							for (var k = 0 ; k<sources.length; k++){
+								sources[k].classList.remove("pressed");
+							}
+							var sources = document.querySelectorAll("[data-name='"+selectedSource+"']");
+							console.log(sources);
+							for (var k = 0 ; k<sources.length; k++){
+								sources[k].classList.add("pressed");
+								document.getElementById("audio").classList.remove("hidden");
+							}
+						};
+						document.getElementById("source_list").appendChild(button);
+					}
+					if (selectedSource){
+						var sources = document.querySelectorAll("[data-name");
+						document.getElementById("audio").classList.add("hidden");
+						for (var k = 0 ; k<sources.length; k++){
+							sources[k].classList.remove("pressed");
+						}
+						var sources = document.querySelectorAll("[data-name='"+selectedSource+"']");
+						console.log(sources);
+						for (var k = 0 ; k<sources.length; k++){
+							sources[k].classList.add("pressed");
+							document.getElementById("audio").classList.remove("hidden");
+						}
+					} else {
+						document.getElementById("audio").classList.add("hidden");
+					}
+				}
+				
+				<!-- congestion: 0 -->
+				<!-- droppedFrames: 0 -->
+				<!-- flags: {audio: true, encoded: true, multiTrack: true, rawValue: 31, service: true, …} -->
+				<!-- height: 1080 -->
+				<!-- name: "simple_stream" -->
+				<!-- reconnecting: false -->
+				<!-- settings: {bind_ip: 'default', dyn_bitrate: false, low_latency_mode_enabled: false, new_socket_loop_enabled: false} -->
+				<!-- totalBytes: 351121 -->
+				<!-- totalFrames: 30 -->
+				<!-- type: "rtmp_output" -->
+				<!-- width: 1920 -->
+				
+			} else if ("outputs" in data){
+				document.getElementById("outputs").innerHTML = "";
+				for (var i =0;i<data.outputs.length;i++){
+					var button = document.createElement("button");
+					button.innerText = data.outputs[i].name;
+					button.dataset.output = data.outputs[i].name;
+					button.onclick = function(){
+						console.log("CLICKED: " + this.innerText);
+						var outputName = this.dataset.output;
+						if (this.classList.contains("pressed")){
+							this.classList.remove("pressed");
+							sendToOBS("StopOutput",{outputName:outputName});
+						} else {
+							this.classList.add("pressed");
+							sendToOBS("StartOutput",{outputName:outputName});
+						}
+					};
+					document.getElementById("outputs").appendChild(button);
+				}
+			}
+			
+		} 
+	}
+
+	function updateSceneList(){
+		var scenes = scenesData.scenes;
+		document.getElementById("scene_list").innerHTML = "";
+		scenes.forEach(scene => {
+			var button = document.createElement("button");
+			button.innerText = scene.name;
+			button.onclick = function(){
+				console.log("CLICKED");
+				changeScene(this.innerText);
+			};  // "speaker" also works in the same way.
+			document.getElementById("scene_list").appendChild(button);
+			
+			if (scene.name === scenesData.currentScene) {
+				button.classList.add("pressed");
+			}
+		});
+	}
+	
+		
+    </script>
+  </body>
+</html>

examples/obs_ws_dock.html

@@ -0,0 +1,388 @@
+<html>
+  <head>
+    <script type="text/javascript" src="https://vdo.ninja/beta/thirdparty/obs-websocket.min.js"></script>
+	<link rel="stylesheet" href="https://vdo.ninja/beta/main.css" />
+	<title>OBS Controller Demo using VDO.Ninja</title>
+	<style>
+	
+		.container {
+			max-width: 80%;
+			width: fit-content;
+			margin: 0 auto;
+		}
+
+		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;
+			display: inline-block;
+			flex-flow: unset;
+			margin: 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;
+		}
+		button {
+			margin:5px;
+			border:solid black 2px;
+		}
+		
+		body {
+			color:white;
+			display: inline-block;
+			flex-flow: unset;
+		}
+		
+		a {
+			color: #CEF!important;
+		}
+		
+		#info{
+			margin: 20px;
+			max-height: 50%;
+			overflow: auto;
+		}
+		
+		#client {
+			margin:10px;
+			display:block;
+		}
+		label {
+			color:white;
+		}
+		
+	</style>
+</head>
+<body>
+	<div class="container">
+		<h1>OBS remote (server)</h1>
+		<span id='setup'>
+			<label for="address">Websocket Address</label>
+			<input name="address" id="address" placeholder="address (optional)" value="localhost:4444" />
+			<label for="address">Websocket Password</label>
+			<input  name="password" id="password"  placeholder="password here (optional)" />
+			<br />
+			<label for="vdoroomname">Room name to use</label>
+			<input name="vdoroomname" id="vdoroomname" placeholder="vdo room name to use (optional)" />
+			<label for="vdopassword">Room password to use</label>
+			<input name="vdopassword" id="vdopassword"  placeholder="vdo password to use (optional)" />
+			<br />
+			<button id="address_button">Connect</button>
+			<button id="address_button_2">Connect and share OBS Output</button>
+		</span>
+		<a id="client" target="_blank"></a>
+		<div id="info"></div>
+	</div>
+	<script>
+
+		var hostname = "vdo.ninja/beta"; // all that's supported as of this moment. 
+		console.error("TODO: Change hostname");
+
+		const obs = new OBSWebSocket();
+		var scenesData = {};
+		scenesData.scenes = [];
+
+		function sendToOBS(action, data={}){
+			document.getElementById("info").innerHTML = action + "<br />"+document.getElementById("info").innerHTML;
+			obs.sendCallback(action, data, sendCallback)
+		}
+		
+		(function(w) {
+			w.URLSearchParams = w.URLSearchParams || function(searchString) {
+				var self = this;
+				searchString = searchString.replace("??", "?");
+				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 urlEdited = window.location.search.replace(/\?\?/g, "?");
+		urlEdited = urlEdited.replace(/\?/g, "&");
+		urlEdited = urlEdited.replace(/\&/, "?");
+
+		if (urlEdited !== window.location.search){
+			warnlog(window.location.search + " changed to " + urlEdited);
+			window.history.pushState({path: urlEdited.toString()}, '', urlEdited.toString());
+		}
+		var urlParams = new URLSearchParams(urlEdited);
+		
+		var roomname = Math.floor(Math.random() * 1000000);
+		var pwurl = Math.floor(Math.random() * 1000000);
+
+		if (urlParams.get("password")){
+			pwurl = urlParams.get("password");
+			localStorage.setItem('password',pwurl)
+		} else if (localStorage.getItem('password')){
+			pwurl = localStorage.getItem('password');
+		} else {
+			localStorage.setItem('password',pwurl)
+		}
+		
+		if (urlParams.get("room")){
+			roomname = urlParams.get("room")
+			localStorage.setItem('roomname',roomname)
+		} else if (localStorage.getItem('roomname')){
+			roomname = localStorage.getItem('roomname');
+		} else {
+			localStorage.setItem('roomname',roomname)
+		}
+		
+		document.getElementById('vdoroomname').value = roomname;
+		document.getElementById('vdopassword').value = pwurl;
+		
+		
+		if (localStorage.getItem('address')){
+			document.getElementById('address').value = localStorage.getItem('address');
+		} 
+		
+		if (localStorage.getItem('wspass')){
+			document.getElementById('password').value = localStorage.getItem('wspass');
+		} 
+		
+		var iframe = null;
+		function createIFrame(visible=true){
+			iframe = document.createElement("iframe");
+			
+			if (visible){
+				iframe.src = "https://"+hostname+"/?room="+roomname+"&push=mainOBSOutput&od=0&transparent&webcam&vd=obs&view&password="+pwurl+"&label=OBS_"+Math.floor(Math.random() * 1000000);
+				iframe.style.minWidth = "720px";
+				iframe.style.minHeight = "480px";		
+				iframe.style.maxWidth = "50%";
+				iframe.style.maxHeight = "50%";		
+				iframe.style.display = "block";		
+				iframe.style.margin = "auto";
+				iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+			} else {
+				iframe.src = "https://"+hostname+"/?room="+roomname+"&push&autostart&vd=0&view&ad=0&transparent&cleanoutput&password="+pwurl+"&label=OBS_"+Math.floor(Math.random() * 1000000);
+				iframe.style.opacity = 0;
+				iframe.style.width = 0;
+				iframe.style.height = 0;
+				iframe.style.position = "absolulte";
+				iframe.style.top = "-100px";
+				iframe.style.left = "-100px";
+			}
+			document.getElementById("client").parentNode.insertBefore(iframe, document.getElementById("client").nextSibling);
+
+			var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+			var eventer = window[eventMethod];
+			var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+			eventer(messageEvent, function (e) {
+				if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+				console.log(e);
+				if ("dataReceived" in e.data){
+					if ("sendToOBS" in e.data.dataReceived){
+						if ("action" in e.data.dataReceived.sendToOBS){
+							if ("data" in e.data.dataReceived.sendToOBS){
+								sendToOBS(e.data.dataReceived.sendToOBS.action, e.data.dataReceived.sendToOBS.data);
+							}
+						}
+					}
+				} else if ("action" in e.data){
+					if (e.data.action === "new-push-connection"){
+						console.log(e.data);
+						updateSceneList();
+					}
+				}
+			});
+		}
+		
+		function sendCallback(err, data){
+			console.log("CALLBACK TRIGGERED");
+			var msg = {};
+			msg.sentFromOBS = {};
+			msg.sentFromOBS.callbackData = data;
+			msg.sentFromOBS.callbackError = err;
+			try {
+				iframe.contentWindow.postMessage({"sendData":msg}, '*');
+			} catch(e){}
+		}
+		
+		function sendRawData(data){
+			var msg = {};
+			msg.sentFromOBS = {};
+			msg.sentFromOBS.rawData = data;
+			try {
+				iframe.contentWindow.postMessage({"sendData":msg}, '*');
+			} catch(e){}
+		}
+
+		function updateSceneList(){
+			var msg = {};
+			msg.sentFromOBS = {};
+			msg.sentFromOBS.scenes = scenesData;
+			try {
+				iframe.contentWindow.postMessage({"sendData":msg}, '*');
+			} catch(e){}
+			console.log(msg);
+			obs.send("GetSourcesList");
+			obs.send('GetCurrentScene');
+			obs.send("GetVideoInfo");
+			obs.send("ListOutputs");
+		}
+
+		document.getElementById('address_button').addEventListener('click', e => {
+			connect(e, false);
+		});
+		
+		document.getElementById('address_button_2').addEventListener('click', e => {
+			connect(e, true);
+		});
+		
+		function connect(e, camera){
+			const address = document.getElementById('address').value || "localhost:4444";
+			const password = document.getElementById('password').value;
+			
+			
+			roomname = document.getElementById('vdoroomname').value || Math.floor(Math.random() * 1000000);
+			pwurl = document.getElementById('vdopassword').value || Math.floor(Math.random() * 1000000);
+			localStorage.setItem('roomname',roomname)
+			localStorage.setItem('password',pwurl)
+			
+			createIFrame(camera); // connects to VDO.Ninja's IFRAME API
+			
+			localStorage.setItem('address',address);
+			if (password){
+				localStorage.setItem('wspass',password);
+				var ret = obs.connect({
+				  address: address,
+				  password: password
+				});
+			} else {
+				var ret = obs.connect({
+				  address: address
+				});
+			}
+			
+			ret.then(() => {
+				console.log(`Success!`);
+				return obs.send('GetSceneList');
+			}).then(data => {
+				document.getElementById("setup").style.display = "none";
+				scenesData = data;
+				updateSceneList();
+				var clientLink = "https://"+hostname+"/obs_client.html?room="+roomname+"&password="+pwurl;
+				document.getElementById("client").href = clientLink;
+				document.getElementById("client").innerHTML = "<b><font style='color:#70c4ff;'>client link:</font></b> "+clientLink;
+				document.getElementById("info").innerHTML = "<br /><p style='color:#bdffbd;'>Connection to OBS websockets opened.</p>" + document.getElementById("info").innerHTML;
+				try {
+					obs._socket.onmessage2 = obs._socket.onmessage;
+					obs._socket.onmessage = function(data){
+						obs._socket.onmessage2(data);
+						if (data.type && data.data){
+							if (data.type == "message"){
+								sendRawData(data.data);
+							}
+						}
+					}
+				} catch(e){console.error(e);}
+				
+			}).catch(err => { // Promise convention dicates you have a catch on every chain.
+				console.log(err);
+				document.getElementById("info").innerHTML = "<br />Error trying to connect." + document.getElementById("info").innerHTML;
+				if ("error" in err){
+					document.getElementById("info").innerHTML = "<br />"+err.error + document.getElementById("info").innerHTML;
+				}
+			});
+		};
+		
+		// We use the source visibility one and filter visibility web socket commands quite often in shows.
+			
+		obs.on('SwitchScenes', data => {
+			console.log(`New Active Scene: ${data.sceneName}`);
+			scenesData.currentScene = data.sceneName
+			updateSceneList();
+		});
+		obs.on('ConnectionOpened', (data) => function(){
+			document.getElementById("setup").style.display = "none";
+			document.getElementById("info").innerHTML = "<br /><p style='color:#bdffbd;'>Connection to OBS websockets opened.</p>" + document.getElementById("info").innerHTML;
+		});
+		obs.on('ConnectionClosed', (data) => function(){
+			document.getElementById("setup").style.display = "unset";
+			document.getElementById("info").innerHTML = "<br />Connection to OBS websockets closed" + document.getElementById("info").innerHTML;
+		});
+		obs.on('AuthenticationSuccess', (data) => function(){
+			document.getElementById("setup").style.display = "none";
+			document.getElementById("info").innerHTML = "<br />OBS websockets authenticated" + document.getElementById("info").innerHTML;
+		});
+		obs.on('AuthenticationFailure', (data) => function(){
+			document.getElementById("setup").style.display = "unset";
+			document.getElementById("info").innerHTML = "<br />Authentication to OBS websockets failed" + document.getElementById("info").innerHTML;
+		});
+		obs.on('ScenesChanged', (data) => function(){
+			scenesData = data;
+			updateSceneList()
+		});
+		// You must add this handler to avoid uncaught exceptions.
+		obs.on('error', err => {
+			document.getElementById("info").innerHTML = "<br />OBS websockets error" + document.getElementById("info").innerHTML;
+			console.error('socket error:', err);
+			if ("error" in err){
+				document.getElementById("info").innerHTML = "<br />"+err.error + document.getElementById("info").innerHTML;
+			}
+		});
+			
+	</script>
+</body>
+</html>

examples/p2p.html

@@ -0,0 +1,69 @@
+<html>
+<body>
+<div id="results" style="overflow:scroll;max-height:300px;">
+  starting...
+</div>
+<script> // https://jsfiddle.net/steveseguin/0t3ayvk8/31/
+  var connectionID = Math.random()*100000001;
+  function RecvDataWindow(){ 
+    var iframe = document.createElement("iframe");
+    iframe.src = "https://vdo.ninja/beta/?view="+connectionID+"&cleanoutput";
+    iframe.style.width = "0px";
+    iframe.style.height = "0px";
+    iframe.style.position = "fixed";
+    iframe.style.left = "-100px";
+    iframe.style.top = "-100px";
+    iframe.id = "frame1"
+    document.body.appendChild(iframe);
+    
+    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+    var eventer = window[eventMethod];
+    var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+    
+    eventer(messageEvent, function (e) {
+      if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+      if ("dataReceived" in e.data){ // raw data 
+        document.getElementById("results").innerHTML += e.data.dataReceived+"<br />";
+        console.log(e.data);
+        try {
+          iframe.contentWindow.postMessage({"sendData":"pong!!", "UUID":e.data.UUID}, '*');
+        } catch(E){}
+      }
+    });
+  }
+
+  function SendDataWindow(){
+    var iframe = document.createElement("iframe");
+    iframe.src = "https://vdo.ninja/beta/?push="+connectionID+"&vd=0&ad=0&autostart&cleanoutput";
+    iframe.style.width = "0px";
+    iframe.style.height = "0px";
+    iframe.style.position = "fixed";
+    iframe.style.left = "-100px";
+    iframe.style.top = "-100px";
+    iframe.id = "frame2";
+    document.body.appendChild(iframe);
+
+    setInterval(function(){
+      try {
+          console.log(".");
+          document.getElementById("frame2").contentWindow.postMessage({"sendData":"ping!!"}, '*');
+        } catch(E){}
+    }, 1000);
+
+    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+    var eventer = window[eventMethod];
+    var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+    eventer(messageEvent, function (e) {
+      if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+      if ("dataReceived" in e.data){ // raw data 
+        console.log(e.data);
+        document.getElementById("results").innerHTML += e.data.dataReceived+"<br />";
+      }
+    });
+  }
+  SendDataWindow();
+  RecvDataWindow();
+</script>
+</body>
+</html>

examples/readme.md

@@ -0,0 +1,23 @@
+p2p is a sample of how to use vdo.ninja as a data transport tunneling service
+
+twitch is an example of how to have a twitch live chat side-by-side with VDO.NInja on the same screen
+
+dual is an example of how to have two VDO.Ninja windows (or any windows really) open on the same page; Picture-in-Picture style
+
+sensors is an example of how to transmit sensor and video data from a phone to a computer, drawing it to canvas: youtube video for this exists
+
+midi demonstrates the MIDI API for VDO.Ninja
+
+draggable demonstrates how to drag multiple windows around, if you wanted to create a custom layout of elements. (experimental)
+
+chat.html is an example of a chat-only interface for VDO.NInja; maybe dockable into OBS even
+
+iframe.outbound-stats.html demostrates how to get stats from VDO.Ninja using the IFRAME API
+
+changepass lets you create passwords and related HASH values for VDO.NInja rooms
+
+webhid demonstrates how to interface with a USB device, like a streamdeck (mouse/keyboard not supported)
+
+zoom.html is a tool for letting you publish into VDO.Ninja, but then full-screen the window once setup, allowing for window-capturing into zoom.
+
+obs_remote is also hosted on github elsewhere, but it's an example of how to remotely control OBS using VDO.Ninja's tunneling abilities

examples/sensors.html

@@ -0,0 +1,280 @@
+<html>
+<head><title>Sensor and video stream access example</title>
+<style>
+body{
+	padding:0;
+	margin:0;
+	background-color: rgb(222,242,253);
+}
+iframe {
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+	margin:10px;
+	width:640px;
+	height:320px;
+}
+#viewlink {
+	width:400px;
+}
+#container {
+	display:block;
+	padding:0px;
+}
+input{
+	padding:5px;
+	margin:5px;
+}
+button{
+	padding:5px;
+	margin:5px;
+}
+canvas{
+	width:100%;
+	display:block;
+	margin:0;
+	padding:0;
+}
+</style>
+</head>
+<body>
+
+
+<canvas id="canvas" style="display:none;max-height:70vh;max-width:calc(70vh*1.777);width:100%;height:100%;" width="1920" height="1080" ></canvas>
+<input placeholder="Enter a VDO.Ninja View URL here" id="viewlink" style="display:block;" onchange="loadIframe();"/>
+<label for="hori">FOA-Horizontal</label>
+<input type="range" id="hori" name="hori" value="63" title="63"  min="40" max="80" title="67" onchange="updateHor(this);">
+<label for="vert">FOA-Vertical</label>
+<input type="range" id="vert" name="vert" value="50" title="50"  min="30" max="70" onchange="updateVer(this);">
+<label for="draw">Draw Delay</label>
+<input type="range" id="draw" name="draw" value="110" title="110" min="0" max="500" style="width:500px" onchange="updateDelay(this);"><br /><br />
+Add &sensor to the push link to send data; see: <a target="_blank" href="https://docs.vdo.ninja/source-settings/sensor">https://docs.vdo.ninja/source-settings/sensor</a>
+<div id="container">
+
+</div>
+
+<script>
+// https://www.camerafv5.com/devices/manufacturers/google/pixel_4a_sunfish_1/ ; pixel 4a specs
+var horFOA = 49.6;
+var verFOA = 63.3;
+var drawDelay = 110;
+function updateHor(hor){
+	horFOA = parseInt(hor.value);
+	hor.title = horFOA;
+}
+function updateVer(ver){
+	verFOA = parseInt(ver.value);
+	ver.title = verFOA;
+}
+function updateDelay(time){
+	drawDelay = parseInt(time.value);
+	time.title = drawDelay;
+}
+function loadIframe(url=false){  // this is pretty important if you want to avoid camera permission popup problems.  You can also call it automatically via: <body onload=>loadIframe();"> , but don't call it before the page loads.
+
+	var canvas = document.getElementById("canvas");
+	var ctx = canvas.getContext('2d');
+	ctx.imageSmoothingEnabled= false;
+	var iframe = document.createElement("iframe");
+	var iframeContainer = document.createElement("div");
+	
+	if (url){
+		var iframesrc = url;
+	} else {
+		var iframesrc = document.getElementById("viewlink").value;
+	}
+	console.log(iframesrc);
+	document.getElementById("viewlink").parentNode.removeChild(document.getElementById("viewlink"));
+	document.getElementById("canvas").style.display="block";
+	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+
+	if (iframesrc==""){
+		iframesrc="./";
+	}
+	
+	iframe.src = iframesrc;
+	
+	iframeContainer.appendChild(iframe);
+	
+	document.getElementById("container").appendChild(iframeContainer);
+
+	var videos = iframe.contentWindow.document.querySelectorAll("video");
+	var sensors = {};
+	
+	function drawFrame(vid){
+		try {
+			if (sensors.mag){ // androids may not support this.
+				var angle = 1.5 * Math.PI - Math.atan2(sensors.mag.y,sensors.mag.x);
+				var startPixel = (angle / ( 2 * Math.PI)) * 1920;
+				var endPixel = (verFOA/360) * 1920 + startPixel;
+			} else if (sensors.ori){ 
+				var angle = sensors.ori.a;
+				var frontToBack = sensors.ori.b;
+				var leftToRight = sensors.ori.g;
+				
+				var startPixel = Math.floor((angle / 360) * 1920);
+				var width = Math.floor((verFOA/360) * 1920);
+				var height = vid.videoHeight*(width/vid.videoWidth);
+				
+				var h_offset = Math.floor(((frontToBack+(verFOA/2))/180 * 1080)-540);
+				var w_offset = Math.floor((leftToRight+horFOA)/180 * 1920);
+			}
+			
+			setTimeout(function(a1,a2,a3,a4,a5){
+			
+				ctx.filter = 'blur(4px)';
+				ctx.drawImage(a1,a2,a3,a4,a5);
+				
+				ctx.filter = "none";
+				ctx.drawImage(a1,a2,a3,a4,a5);
+				
+			}, drawDelay, vid, startPixel-w_offset, h_offset, width, height);
+		} catch(e){console.error(e);}
+	};
+	
+	setInterval(function(){
+		if (videos.length){
+			if ("UUID" in sensors){
+				if (videos[0].id !== "videosource_"+sensors.UUID){
+					videos = iframe.contentWindow.document.querySelectorAll("video#videosource_"+sensors.UUID);
+				} 
+				if (videos.length){
+					drawFrame(videos[0]);
+				}
+			}
+		}
+	},100);
+	
+	
+	////////////  LISTEN FOR EVENTS
+
+	var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+	var eventer = window[eventMethod];
+	var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+
+	/// If you have a routing system setup, you could have just one global listener for all iframes instead.
+	
+	eventer(messageEvent, function (e) {
+		if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+		
+		if ("stats" in e.data){
+			var outputWindow = document.createElement("div");
+			//console.log(e.data.stats);
+			
+			
+			var out = "<br />total_inbound_connections:"+e.data.stats.total_inbound_connections;
+			out += "<br />total_outbound_connections:"+e.data.stats.total_outbound_connections;
+			
+			for (var streamID in e.data.stats.inbound_stats){
+				out += "<br /><br /><b>streamID:</b> "+streamID+"<br />";
+				out += printValues(e.data.stats.inbound_stats[streamID]);
+			}
+			
+			outputWindow.innerHTML = out;
+			iframeContainer.appendChild(outputWindow);
+		}
+		
+		if ("gotChat" in e.data){
+			var outputWindow = document.createElement("div");
+			outputWindow.innerHTML = e.data.gotChat.msg;
+			outputWindow.style.border="1px dotted black";
+			iframeContainer.appendChild(outputWindow);
+		}
+		
+		if ("action" in e.data){
+			var outputWindow = document.createElement("div");
+			outputWindow.innerHTML = "child-page-action: "+e.data.action+"<br />";
+			outputWindow.style.border="1px dotted black";
+			iframeContainer.appendChild(outputWindow);
+			console.log(e.data.action);
+			
+			if (e.data.action == "new-view-connection"){
+				setTimeout(function(){
+					videos = iframe.contentWindow.document.querySelectorAll("video");
+					console.log(videos);
+				},500);
+			}
+		}
+		
+		
+		if ("streamIDs" in e.data){
+			var outputWindow = document.createElement("div");
+			outputWindow.innerHTML = "child-page-action: streamIDs<br />";
+			for (var key in e.data.streamIDs) {
+				outputWindow.innerHTML += "streamID: " +  key + ", label:"+e.data.streamIDs[key] + "\n";          
+			}
+			outputWindow.style.border="1px dotted black";
+			iframeContainer.appendChild(outputWindow);
+		}
+		
+		if ("loudness" in e.data){
+			//console.log(e.data);
+			if (document.getElementById("loudness")){
+				outputWindow = document.getElementById("loudness");
+			} else {
+				var outputWindow = document.createElement("div");
+				outputWindow.style.border="1px dotted black";
+				iframeContainer.appendChild(outputWindow);
+				outputWindow.id = "loudness";
+			}
+			outputWindow.innerHTML = "child-page-action: loudness<br />";
+			for (var key in e.data.loudness) {
+				outputWindow.innerHTML += key + " Loudness: " +  e.data.loudness[key] + "\n";          
+			}
+			outputWindow.style.border="1px black";
+			
+		}
+		
+		if ("sensors" in e.data){
+			sensors = e.data.sensors;
+			if (document.getElementById("sensors")){
+				outputWindow = document.getElementById("sensors");
+			} else {
+				var outputWindow = document.createElement("div");
+				outputWindow.style.border="1px dotted black";
+				iframeContainer.appendChild(outputWindow);
+				outputWindow.id = "sensors";
+				console.log(sensors);
+			}
+			outputWindow.innerHTML = "child-page-action: sensors<br /><br />";
+				
+			for (var key in e.data.sensors.lin) {
+				outputWindow.innerHTML += key + " linear: " +  e.data.sensors.lin[key] + "<br />";          
+			}
+			for (var key in e.data.sensors.acc) {
+				outputWindow.innerHTML += key + " acceleration: " +  e.data.sensors.acc[key] + "<br />";         
+			}
+			for (var key in e.data.sensors.gyro) {
+				outputWindow.innerHTML += key + " gyro: " +  e.data.sensors.gyro[key] + "<br />";           
+			}
+			for (var key in e.data.sensors.mag) {
+				outputWindow.innerHTML += key + " magnet: " +  e.data.sensors.mag[key] + "<br />";         
+			}
+			for (var key in e.data.sensors.ori) {
+				outputWindow.innerHTML += key + " orientation: " +  e.data.sensors.ori[key] + "<br />";         
+			}
+			outputWindow.style.border="1px black";
+		}
+	});
+}
+
+
+function printValues( obj) {
+	var out = "";
+	for (var key in obj) {
+		if (typeof obj[key] === "object") {
+			out +="<br />";
+			out += printValues(obj[key]);   
+		} else {
+			out +="<b>"+key+"</b>: "+obj[key]+"<br />";
+		}
+	}
+	return out;
+}
+		
+		
+</script>
+</body>
+</html>

examples/status.html

@@ -0,0 +1,172 @@
+<html>
+	<head>
+		<meta charset="utf8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>OBSN Chat Overlay</title>
+		<style>
+		
+			@font-face {
+			  font-family: 'Cousine';
+			  src: url('fonts/Cousine-Bold.ttf') format('truetype');
+			}
+		
+			body {
+				margin:0;
+				padding:0 10px;
+				height:100%;
+				border: 0;
+				display: flex;
+				flex-direction: column-reverse;
+				position:absolute;
+				bottom:0;
+				overflow:hidden;
+				max-width:100%;
+			}
+
+			ul {
+				margin:0;
+				background-color: #0000;
+				color: white;
+				font-family: Cousine, monospace;
+				font-size: 3.2em;
+				line-height: 1.1em;
+				letter-spacing: 0.0em;
+				text-transform: uppercase;
+				padding: 0em;
+				text-shadow: 0.05em 0.05em 0px rgba(0,0,0,1);
+				max-width:100%;
+			}
+			
+			ul li { 
+				background-color: black; 
+				padding: 8px 8px 0px 8px;
+				margin:0;
+				word-wrap: break-word;
+				overflow-wrap: break-word;
+				word-wrap: break-word;
+				word-break: break-all;
+				hyphens: auto;
+				max-width:100%;
+			}
+			
+			a {
+				color:white;
+				font-size:1.2em;
+				text-transform: none;
+				word-wrap: break-word;
+				overflow-wrap: break-word;
+				word-wrap: break-word;
+				word-break: break-all;
+				hyphens: auto;
+			}
+			</style>
+		<script>
+		
+		
+			(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);
+			
+
+			function loadIframe() {
+				
+				var iframe = document.createElement("iframe");
+
+				var view= "";
+				if (urlParams.has("view")) {
+					view = "&view="+(urlParams.get("view") || "");
+				} 
+				var room="";
+				if (urlParams.has("room")) {
+					room = "&room="+urlParams.get("room");
+				}
+				
+				var password="";
+				if (urlParams.has("password")) {
+					password = "&password="+urlParams.get("password");
+				}
+				
+				iframe.allow = "autoplay";
+				var srcString = "./?novideo&noaudio&label=chatOverlay&scene"+room+view+password;
+				
+				iframe.src = srcString;
+				iframe.style.width="0";
+				iframe.style.height="0";
+				iframe.style.border="0";
+				
+				document.body.appendChild(iframe);
+
+				////////////  LISTEN FOR EVENTS
+	
+				var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+				var eventer = window[eventMethod];
+				var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+
+				/// If you have a routing system setup, you could have just one global listener for all iframes instead.
+				
+				eventer(messageEvent, function (e) {
+					if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+
+					console.log(e);
+					if ("gotChat" in e.data){
+						logData(e.data.gotChat.label,e.data.gotChat.msg);
+					}
+				});
+			}
+
+			function printValues(obj) {
+				var out = "";
+				for (var key in obj) {
+					if (typeof obj[key] === "object") {
+						out += "<br />";
+						out += printValues(obj[key]);
+					} else {
+						if (key.startsWith("_")) {
+						} else {
+							out += "<b>" + key + "</b>: " + obj[key] + "<br />";
+						}
+					}
+				}
+				return out;
+			}
+
+			function logData(type, data) {
+				var log = document.body.getElementsByTagName("ul")[0];
+				var entry = document.createElement('li');
+				if (type){
+					type = "<i>"+type+"</i>";
+				}
+				entry.innerHTML = type + data;
+				
+				//setTimeout(function(entry){ // hide message after 60 seconds
+			//		entry.innerHTML="";
+			//		entry.remove();
+			//	},60000,entry);
+				
+				log.appendChild(entry);
+			}
+		</script>
+	</head>
+	<body onload="loadIframe();">
+			<ul></ul>
+
+
+	</body>
+</html>

examples/twitch.html

@@ -0,0 +1,111 @@
+<html>
+<head><title>Twitch + Video</title>
+<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1.0, user-scalable=yes" />
+<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+<style>
+body{
+	padding:0;
+	margin:0;
+	background-color:#003;
+	width:100%;
+	height:100%;
+}
+
+iframe {
+	width:100%;
+	height:100%;
+	border:0;
+	margin:0;
+	padding:0;
+	position:absolute;
+	display:block;
+}
+
+
+input{
+	padding:10px;
+	width:80%;
+	font-size:1.2em;
+	z-index: 1000;
+}
+
+
+@media screen and (orientation:portrait) {
+	#container2{
+		width:100%;height:100%;display:none;
+	}
+	#container1{
+		width: 50vw;height: 50vh; display:none; float:left; position: fixed; top: 0; right: 0%;
+	}
+	iframe{
+		width:100%;
+	}
+}
+
+@media screen and (orientation:landscape) {
+	#container2{
+		width:60vw;height:100%;display:none;
+		z-index:5;
+	}
+	#container1{
+		width: 50vw;height: 80vh; display:none; float:left; position: fixed; top: 0; right: -10vw;
+	}
+	iframe{
+		max-width:60vw;
+	}
+}
+
+</style>
+</head>
+<body>
+
+
+
+<div id="container2"></div>
+<div id="container1" ></div>
+<div id="clean">
+	<input placeholder="Enter a VDON stream ID" id="viewlink" type="text" />
+	<input placeholder="Enter the Twitch channel name" id="twitch" type="text" />
+	<button onclick="loadIframes()" style="display:block;padding:10px;margin:10px;">START</button>
+</div>
+<script>
+
+window.addEventListener("orientationchange", function() {
+  // Announce the new orientation number
+ // alert(window.orientation);
+}, false);
+
+function loadIframes(url=false){ 
+
+	var roomname = document.getElementById("viewlink").value;
+	var twitch = document.getElementById("twitch").value;
+	
+	document.getElementById("clean").parentNode.removeChild(document.getElementById("clean"));
+	document.getElementById("container1").style.display="inline-block";
+	document.getElementById("container2").style.display="inline-block";
+	
+	var path = window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
+	
+	var room1 = "https://"+path+"/?push="+roomname+"&webcam&autostart&vd=front&ad=1&transparent&noheader";
+	var room2 = "https://www.twitch.tv/embed/"+twitch+"/chat?parent="+location.hostname;
+	var iframe = document.createElement("iframe");
+	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+	iframe.src = room1;
+	var iframeContainer = document.createElement("div");
+	iframeContainer.appendChild(iframe);
+	document.getElementById("container1").appendChild(iframeContainer);
+	
+	setTimeout(function(){
+		var iframe = document.createElement("iframe");
+		iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+		iframe.src = room2;
+		var iframeContainer = document.createElement("div");
+		iframeContainer.appendChild(iframe);
+		document.getElementById("container2").appendChild(iframeContainer);
+	},3000);
+	
+}
+
+</script>
+</body>
+</html>

examples/webhid.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<title>WebHID Demo</title>
+	<style>
+	body {
+		text-align: center;
+    }
+  
+  .button {
+    background-color: black;
+    border: none;
+    color: #00FF00;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    margin: 4px 2px;
+    cursor: pointer;
+    font-size: 24px;
+  }
+  
+  #connected {
+	font-size: 24px;
+	max-height:700px;
+	overflow-y:scroll
+  }
+  #disconnectButton {
+    font-size: 24px;
+  }
+ 
+  </style>
+</head>
+<body>
+	<h1>STREAMDECK DEMO</h1>
+	<img src="./media/streamdeck.png" /><br />
+	<input class="button" type="button" id="connectButton" value="Connect" />
+	<input class="button" type="button" id="disconnectButton" style="display:none" value="Disconnect" />
+	<div id="connected" style>
+	</div>
+
+    <script>
+		const connectButton = document.getElementById("connectButton");
+		const disconnectButton = document.getElementById("disconnectButton");
+		const connect = document.getElementById("connect");
+		const deviceButtonPressed = document.getElementById("deviceButtonPressed");
+		var lastState = false;
+			//productId: 0x0060,
+			//class: models_1.StreamDeckOriginal,
+		
+			//productId: 0x0063,
+			//class: models_1.StreamDeckMini,
+		
+			//productId: 0x006c,
+			//class: models_1.StreamDeckXL,
+		
+			//productId: 0x006d,
+			//class: models_1.StreamDeckOriginalV2,
+				
+		document.addEventListener('DOMContentLoaded', async () => {
+		  let devices = await navigator.hid.getDevices();
+		  devices.forEach(device => {
+			console.log(`HID: ${device.productName}`);
+		  });
+		});
+		
+		function handleInputReport(e) {
+		  console.log(e.device.productName + ": got input report " + e.reportId);
+		  console.log(new Uint8Array(e.data.buffer));
+		  var data = new Uint8Array(e.data.buffer);
+		  if (lastState!==false){
+			for (var i=0;i<data.length;i++){
+				
+				if (parseInt(data[i])!=data[i]){continue;}
+				if (lastState[i]!==data[i]){
+					if (data[i]){
+						document.getElementById("connected").innerHTML = "<br />Button "+(i+1)+" Pressed"+document.getElementById("connected").innerHTML;
+					} else {
+						document.getElementById("connected").innerHTML = "<br />Button "+(i+1)+" Released"+document.getElementById("connected").innerHTML;
+					}
+				} else {
+					if (data[i]){
+						document.getElementById("connected").innerHTML = "<br />Button "+(i+1)+" Pressed"+document.getElementById("connected").innerHTML;
+					}
+				}
+			}
+		  }
+		  lastState = data;
+		}
+
+		let device;
+		
+		connectButton.onclick = async () => {
+		  navigator.hid.requestDevice({
+			filters: [{ vendorId: 0x0fd9}] // elgato?
+		  }).then((devices)=>{
+			console.log(devices);
+			
+			device = devices[0];
+			
+			console.log(`HID connected: ${device.productName}`);
+			document.getElementById("connected").innerHTML = "<br />Connected" +document.getElementById("connected").innerHTML;
+			document.getElementById("disconnectButton").style.display = "inline-block";
+			device.addEventListener("inputreport", handleInputReport);
+			
+			//device.sendReport(outputReportId, outputReport).then(() => {
+			//  console.log("Sent output report " + outputReportId);
+			//});
+			
+			if (!device.opened){
+				device.open().then(()=>{
+					window.addEventListener("onbeforeunload", async () => {
+					  await device.close();
+					});
+				}).catch(function(err){console.error(err);});
+			}
+		  }).catch(function(err){console.error(err);});
+		  
+		};
+
+		disconnectButton.onclick = async () => {
+		  await device.close();
+
+		  //connected.style.display = "none";
+		  //connectButton.style.display = "initial";
+		  disconnectButton.style.display = "none";
+		};
+		
+	</script>
+</body>
+</html>
+

examples/zoom.html

@@ -0,0 +1,182 @@
+
+<html>
+<head><style>
+span{margin:10px 0 0 0;display:block;} 
+body {
+	
+	background-color:#cdf;
+	padding:0;
+	width;100%;height:100%
+} 
+
+input{padding:5px;}
+
+button {margin:10px 3px;}
+
+#stream{
+	display:block;
+}
+
+ </style></head>
+<body id="main" style="margin:5%;"
+<meta charset="utf-8"/>
+
+<video id="video" autoplay="true" muted="true" playsinline style='height:420px;background-color:black;display:block;margin:0 0 10px 0;'></video>
+<div id="devices">
+  <div class="select">
+    <label for="videoSource">Video source: </label><select id="videoSource"></select>
+  </div>
+  <div class="select">
+    <label for="audioSource">Audio source: </label><select id="audioSource"></select>
+  </div>
+</div>
+<button onclick="fullwindow()">FULL WINDOW</button>
+<script>
+window.onerror = function backupErr(errorMsg, url=false, lineNumber=false) {
+	console.error(errorMsg);
+	console.error(lineNumber);
+	console.error("Unhandeled Error occured"); //or any message
+	return false;
+};
+
+function fullwindow(){
+	videoElement.style.width="100%";
+	videoElement.style.padding= "0";
+	videoElement.style.margin="0";
+	videoElement.style.height="100%";
+	videoElement.style.zIndex="5";
+	videoElement.style.position = "absolute";
+	videoElement.style.top="0px";
+	videoElement.style.left="0px";
+	document.getElementById("main").style.overflow = "hidden";
+	videoElement.style.overflow = "hidden"
+	document.getElementById("main").style.backgroundColor="#000";
+	videoElement.style.cursor="none";
+	document.getElementById("main").style.cursor="none";
+}
+
+var videoElement = document.getElementById("video");
+var gotDev = false;
+async function gotDevices() {
+ if (gotDev){return;}
+	gotDev=true;
+	await navigator.mediaDevices.getUserMedia({audio:true, video:true}); // is needed to ask for permissinos.
+	navigator.mediaDevices.enumerateDevices().then((deviceInfos)=>{
+	  for (let i = 0; i !== deviceInfos.length; ++i) {
+		var deviceInfo = deviceInfos[i];
+		var option = document.createElement("option");
+		option.value = deviceInfo.deviceId;
+		
+		if (deviceInfo.kind === "audioinput") {
+		  option.text = deviceInfo.label || "microphone " + (audioSelect.length + 1);
+		  audioSelect.appendChild(option);
+		  if (option.text.startsWith("CABLE")){
+			option.selected =true;
+		  }
+		} else if (deviceInfo.kind === "videoinput") {
+		  option.text = deviceInfo.label || "camera " + (videoSelect.length + 1);
+		  if (option.text.startsWith("NewTek")){
+			continue;
+		  }
+		  videoSelect.appendChild(option);
+		  if (option.text.startsWith("OBS")){
+			option.selected =true;
+		  }
+		}
+	  }
+	  getStream();
+  });
+}
+
+function getStream() {
+  if (window.stream) {
+	window.stream.getTracks().forEach(function (track) {
+		track.stop();
+		log("TRack stopping");
+	});
+  }
+	
+  const constraints = {
+    audio: {
+      deviceId: { exact: audioSelect.value },
+	  echoCancellation : false,
+	  autoGainControl : false,
+	  noiseSuppression : false
+    },
+    video: {
+      deviceId: { exact: videoSelect.value },
+		width: { min: 1280, ideal: 1920, max: 1920 },
+		height: { min: 720, ideal: 1080, max: 1080 }
+    }
+  };
+  return navigator.mediaDevices.getUserMedia(constraints)
+    .then(gotStream)
+    .catch(console.error);
+}
+
+
+function gotStream(stream) {
+	if (window.stream) {
+		window.stream = stream; // make stream available to console
+		videoElement.srcObject = stream;
+		var senders = session.pc.getSenders();
+		videoElement.srcObject.getVideoTracks().forEach((track)=>{
+			var added = false;
+			senders.forEach((sender) => { // I suppose there could be a race condition between negotiating and updating this. if joining at the same time as changnig streams?
+				if (sender.track) {
+					if (sender.track && sender.track.kind == "video") {
+						sender.replaceTrack(track); // replace may not be supported by all browsers.  eek.
+						track.enabled = notCensored;
+						added = true;
+					}
+				}
+			});
+			if (added==false){
+				session.pc.addTrack(track);
+				log("ADDED NOT REPLACED?");
+			}
+		});
+
+		videoElement.srcObject.getAudioTracks().forEach((track)=>{
+			var added = false;
+			senders.forEach((sender) => { // I suppose there could be a race condition between negotiating and updating this. if joining at the same time as changnig streams?
+				if (sender.track) {
+					if (sender.track && sender.track.kind == "audio") {
+						sender.replaceTrack(track); // replace may not be supported by all browsers.  eek.
+						track.enabled = notCensored;
+						added = true;
+					}
+				}
+			});
+			if (added==false){
+				session.pc.addTrack(track);
+				log("ADDED NOT REPLACED?");
+			}
+		});
+	} else {
+		window.stream = stream; // make stream available to console
+		videoElement.srcObject = stream;
+	}
+}
+
+
+var audioSelect = document.querySelector("select#audioSource");
+var videoSelect = document.querySelector("select#videoSource");
+audioSelect.onchange = getStream;
+videoSelect.onchange = getStream;
+gotDevices();
+
+
+</script>
+</body>
+</html>
+
+
+
+
+
+
+
+
+
+

filters/anon.js

@@ -0,0 +1,143 @@
+function effectsEngine(effectName){
+	function loadScript(url){
+		var script = document.createElement('script');
+		script.type = 'text/javascript';
+		script.src = url;
+		script.onload = function(){
+			this.remove();
+			if (loadList.length){
+				loadScript(loadList.pop());
+			}
+		}
+		document.head.appendChild(script);
+	}
+	var loadList = [];
+	if (typeof JEELIZFACEFILTER == 'undefined' || JEELIZFACEFILTER==null){
+		loadList.push("./thirdparty/jeeliz/jeelizFaceFilter.js");
+	} 
+	if (typeof THREE == 'undefined' || THREE == null){
+		loadList.push("./thirdparty/jeeliz/three/v112/three.min.js");
+	} else {
+		console.log("typeof THREE:"+typeof THREE);
+	}
+	if (typeof JeelizThreeHelper == 'undefined' || JeelizThreeHelper==null){
+		loadList.push("./thirdparty/jeeliz/JeelizThreeHelper.js");
+	}
+	if (typeof TWEEN == 'undefined' || TWEEN == null){
+		loadList.push("./thirdparty/jeeliz/Tween.min.js");
+	}
+	
+	if (loadList.length){
+		loadList.reverse();
+		loadScript(loadList.pop());
+	}
+
+	// some globals:
+	let THREECAMERA = null; // should be prop of window
+	let ANONYMOUSMESH = null;
+	let ANONYMOUSOBJ3D = null;
+	let isTransformed = false;
+	
+	var pathname = window.location.pathname.split("/");
+	pathname.pop();
+	pathname = window.location.protocol + "//" + window.location.host + pathname.join("/");
+
+
+	// callback: launched if a face is detected or lost.
+	function detect_callback(isDetected) {
+	 // if (isDetected) {
+	//	console.log('INFO in detect_callback(): DETECTED');
+	 // } else {
+	//	console.log('INFO in detect_callback(): LOST');
+	 // }
+	}
+
+	// entry point:
+	function main(){
+		if (session.canvasSource && document.getElementById("effectsCanvasTarget") && JEELIZFACEFILTER){
+			try {
+				warnlog("LOADING JEELIZ");
+				THREECAMERA = null; // should be prop of window
+				ANONYMOUSMESH = null;
+				ANONYMOUSOBJ3D = null;
+				isTransformed = false;
+				init_faceFilter("effectsCanvasTarget", session.canvasSource);
+			} catch(e){
+			}
+		} else {
+			setTimeout(function(){main();},500);
+			warnlog("...retrying to load");
+		}
+	}
+
+	function init_faceFilter(canvasId, videoElement){
+	  JEELIZFACEFILTER.init({
+		canvasId: canvasId,
+		NNCPath: pathname+'/thirdparty/jeeliz/neuralNets/',
+		videoSettings: {
+			videoElement: videoElement
+		},
+		callbackReady: function (errCode, spec) {
+			if (errCode) {
+				errorlog(errCode);
+				try{
+					JEELIZFACEFILTER.destroy();
+				} catch(e){}
+				THREECAMERA = null; // should be prop of window
+				ANONYMOUSMESH = null;
+				ANONYMOUSOBJ3D = null;
+				isTransformed = false;
+				setTimeout(function(){main();},500);
+				return;
+			}
+			const threeStuffs = JeelizThreeHelper.init(spec, detect_callback);
+			// CREATE OUR ANONYMOUS MASK:
+			const headLoader = new THREE.BufferGeometryLoader();
+			headLoader.load('./filters/anon/anonymous.json',(geometryHead) => {
+				const mat = new THREE.MeshLambertMaterial({
+					map: new THREE.TextureLoader().load('./filters/anon/anonymous.png'),
+					transparent: true
+				});
+
+				ANONYMOUSMESH = new THREE.Mesh(geometryHead, mat);
+				ANONYMOUSMESH.frustumCulled = false;
+				ANONYMOUSMESH.scale.multiplyScalar(0.065); // mask scale
+				ANONYMOUSMESH.position.fromArray([0, -0.75, 0.35]); // maskPositionOffset
+				ANONYMOUSMESH.renderOrder = 1000000;
+				ANONYMOUSMESH.material.opacity = 0;
+				ANONYMOUSOBJ3D = new THREE.Object3D();
+				ANONYMOUSOBJ3D.add(ANONYMOUSMESH);
+				threeStuffs.faceObject.add(ANONYMOUSOBJ3D);
+			});
+			THREECAMERA = JeelizThreeHelper.create_camera();
+			const ambient = new THREE.AmbientLight(0xffffff, 0.8);
+			threeStuffs.scene.add(ambient);
+			const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
+			dirLight.position.set(100, 1000, 1000);
+			threeStuffs.scene.add(dirLight);
+		},
+		callbackTrack: function (detectState) {
+			if (effectName !== session.effects){
+				try{
+					JEELIZFACEFILTER.toggle_pause(true,false); // unload the filter when no longer active.  Leaving the track active is required, else it breaks the app
+				} catch(e){errorlog(e);}
+				THREECAMERA = null; // should be prop of window
+				ANONYMOUSMESH = null;
+				ANONYMOUSOBJ3D = null;
+				isTransformed = false;
+				return;
+			}
+			
+			const isDetected = JeelizThreeHelper.get_isDetected();
+			//if (isDetected && detectState.expressions[0] >= 0.8 && !isTransformed) { // If the person opens their mouth wide, then activate..
+			if (isDetected && !isTransformed){
+				isTransformed = true;
+				new TWEEN.Tween( ANONYMOUSMESH.material ).to({ opacity: 1}, 700).start(); // animation
+			}
+			TWEEN.update();
+			JeelizThreeHelper.render(detectState, THREECAMERA);
+		}
+	  }); 
+	}
+	return main;
+}

filters/anon/addVideoRecordingEffect.js

@@ -0,0 +1,75 @@
+function addVideoRecordingEffect(canvas) {
+    var viewWidth,
+    viewHeight,
+    canvas = document.getElementById("canvasVideoEffect"),
+    ctx;
+    // change these settings
+    var patternSize = 64,
+    patternScaleX = 3,
+    patternScaleY = 1,
+    patternRefreshInterval = 8,
+    patternAlpha = 25; // int between 0 and 255,
+
+    var patternPixelDataLength = patternSize * patternSize * 4,
+    patternCanvas,
+    patternCtx,
+    patternData,
+    frame = 0;
+
+    // create a canvas which will render the grain
+    function initCanvas() {
+    viewWidth = canvas.width = canvas.clientWidth;
+    viewHeight = canvas.height = canvas.clientHeight;
+    ctx = canvas.getContext('2d');
+
+    ctx.scale(patternScaleX, patternScaleY);
+    }
+
+    // create a canvas which will be used as a pattern
+    function initGrain() {
+    patternCanvas = document.createElement('canvas');
+    patternCanvas.width = patternSize;
+    patternCanvas.height = patternSize;
+    patternCtx = patternCanvas.getContext('2d');
+    patternData = patternCtx.createImageData(patternSize, patternSize);
+    }
+
+    // put a random shade of gray into every pixel of the pattern
+    function update() {
+    var value;
+
+    for (var i = 0; i < patternPixelDataLength; i += 1) {
+        value = (Math.random() * 155) | 0;
+
+        patternData.data[i    ] = value;
+        patternData.data[i + 10] = value;
+        patternData.data[i + 15] = value;
+        patternData.data[i + 11] = patternAlpha;
+    }
+
+    patternCtx.putImageData(patternData, 0, 0);
+    }
+
+    // fill the canvas using the pattern
+    function draw() {
+    ctx.clearRect(0, 0, viewWidth, viewHeight);
+
+    ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat');
+    ctx.fillRect(0, 0, viewWidth, viewHeight);
+    }
+
+    function loop() {
+    if (++frame % patternRefreshInterval === 0) {
+      update();
+      draw();
+    }
+
+    requestAnimationFrame(loop);
+    }
+
+
+
+  initCanvas();
+  initGrain();
+  requestAnimationFrame(loop);
+}

filters/cube.js

@@ -0,0 +1,65 @@
+function effectsEngine(){
+	console.log('LOADED SAMPLE');
+	function loadScript(url, callback=false){
+		var script = document.createElement('script');
+		script.type = 'text/javascript';
+		script.src = url;
+		script.onload = function(){this.remove();if(callback){callback();}}
+		document.head.appendChild(script);
+		
+	}
+
+	loadScript("https://stevesserver.com/dist/jeelizFaceFilter.js", 
+		function(){
+			loadScript("https://stevesserver.com/helpers/JeelizCanvas2DHelper.js");
+		}
+	);
+
+	function main(){ // entry point
+		console.log(".");
+		if (session.canvasSource && session.canvasSource.videoWidth && session.canvasSource.videoHeight && session.canvasWebGL){
+			if (session.canvasWebGL && !(document.getElementById("effectsCanvasTarget"))){
+				session.canvasWebGL.id = "effectsCanvasTarget";
+				session.canvasWebGL.style.position="fixed";
+				session.canvasWebGL.style.top= "-9999px";
+				session.canvasWebGL.style.left= "-9999px";
+				document.body.appendChild(session.canvasWebGL);
+			}
+			start(JEELIZFACEFILTER, "effectsCanvasTarget", session.canvasSource, 'yellow');
+		} else {
+			setTimeout(main, 500);
+		}
+	}
+
+	function start(jeeFaceFilterAPIInstance, canvasId, videoElement, borderColor){
+		let cvd = null; // return of Canvas2DDisplay
+
+		jeeFaceFilterAPIInstance.init({
+			canvasId: canvasId,
+			videoSettings: {
+				videoElement: videoElement
+			},
+			NNCPath: 'https://stevesserver.com/neuralNets/', // root of NN_DEFAULT.json file
+			callbackReady: function(errCode, spec){
+				if (errCode){
+					console.log('AN ERROR HAPPENS. SORRY BRO :( . ERR =', errCode);
+					return;
+				}
+				console.log('INFO: JEELIZFACEFILTER IS READY');
+				cvd = JeelizCanvas2DHelper(spec);
+				cvd.ctx.strokeStyle = borderColor;
+			},
+			callbackTrack: function(detectState){ // drawing loop
+				if (detectState.detected>0.6){
+					// draw a border around the face:
+					const faceCoo = cvd.getCoordinates(detectState);
+					cvd.ctx.clearRect(0,0,cvd.canvas.width, cvd.canvas.height);
+					cvd.ctx.strokeRect(faceCoo.x, faceCoo.y, faceCoo.w, faceCoo.h);
+					cvd.update_canvasTexture();
+				}
+			  cvd.draw();
+			}
+		});
+	}
+	main();
+};

filters/dog.js

@@ -0,0 +1,357 @@
+function effectsEngine(effectName){
+	function loadScript(url){
+		var script = document.createElement('script');
+		script.type = 'text/javascript';
+		script.src = url;
+		script.onload = function(){
+			this.remove();
+			if (loadList.length){
+				loadScript(loadList.pop());
+			}
+		}
+		document.head.appendChild(script);
+	}
+	var loadList = [];
+	if (typeof JEELIZFACEFILTER == 'undefined' || JEELIZFACEFILTER==null){
+		loadList.push("./thirdparty/jeeliz/jeelizFaceFilter.js");
+	} 
+	if (typeof THREE == 'undefined' || THREE == null){
+		loadList.push("./thirdparty/jeeliz/three/v112/three.min.js");
+	} else {
+		console.log("typeof THREE:"+typeof THREE);
+	}
+	if (typeof JeelizThreeHelper == 'undefined' || JeelizThreeHelper==null){
+		loadList.push("./thirdparty/jeeliz/JeelizThreeHelper.js");
+	}
+	if (typeof TWEEN == 'undefined' || TWEEN == null){
+		loadList.push("./thirdparty/jeeliz/Tween.min.js");
+	}
+	
+	loadList.push("./filters/dog/libs/glfx.js");
+	loadList.push("./thirdparty/jeeliz/three/customMaterials/FlexMaterial/ThreeFlexMaterial.js");
+	
+	if (loadList.length){
+		loadList.reverse();
+		loadScript(loadList.pop());
+	}
+	
+	
+	var pathname = window.location.pathname.split("/");
+	pathname.pop();
+	pathname = window.location.protocol + "//" + window.location.host + pathname.join("/");
+
+	// some globals:
+	let THREECAMERA = null; // should be prop of window
+	let isTransformed = false;
+	
+	let ISDETECTED = false;
+	let NOSEMESH = null, EARMESH = null;
+	let DOGOBJ3D = null, FRAMEOBJ3D = null;
+
+
+	let ISOVERTHRESHOLD = false, ISUNDERTRESHOLD = true;
+
+	let ISLOADED = false;
+
+	let MIXER = null;
+	let ACTION = null;
+
+	let ISANIMATING = false;
+	let ISOPAQUE = false;
+	let ISANIMATIONOVER = false;
+
+	let _flexParts = [];
+	let _videoGeometry = null;
+
+
+	// callback: launched if a face is detected or lost.
+	function detect_callback(isDetected) {
+	 // if (isDetected) {
+	//	console.log('INFO in detect_callback(): DETECTED');
+	 // } else {
+	//	console.log('INFO in detect_callback(): LOST');
+	 // }
+	}
+	
+	function create_mat2d(threeTexture, isTransparent){ // MT216: we put the creation of the video material in a func because we will also use it for the frame
+	  return new THREE.RawShaderMaterial({
+		depthWrite: false,
+		depthTest: false,
+		transparent: isTransparent,
+		vertexShader: "attribute vec2 position;\n\
+		  varying vec2 vUV;\n\
+		  void main(void){\n\
+			gl_Position = vec4(position, 0., 1.);\n\
+			vUV = 0.5 + 0.5 * position;\n\
+		  }",
+		fragmentShader: "precision lowp float;\n\
+		  uniform sampler2D samplerVideo;\n\
+		  varying vec2 vUV;\n\
+		  void main(void){\n\
+			gl_FragColor = texture2D(samplerVideo, vUV);\n\
+		  }",
+		 uniforms:{
+		  samplerVideo: { value: threeTexture }
+		 }
+	  });
+	}
+	
+	function applyFilter() {
+	  let canvas;
+	  try {
+		canvas = fx.canvas();
+	  } catch (e) {
+		alert('Ow no! WebGL isn\'t supported...')
+		return
+	  }
+
+	  const tempImage = new Image(512, 512);
+	  tempImage.src = './filters/dog/images/texture_pink.jpg';
+
+	  tempImage.onload = () => {
+		const texture = canvas.texture(tempImage);
+
+		// Create the effet
+		canvas.draw(texture).vignette(0.5, 0.6).update();
+
+		const canvasOpacity = document.createElement('canvas');
+		canvasOpacity.width = 512;
+		canvasOpacity.height = 512;
+		const ctx = canvasOpacity.getContext('2d');
+
+		ctx.globalAlpha = 0.2
+		ctx.drawImage(canvas, 0, 0, 512, 512);
+
+		// Add the effect
+		const calqueMesh = new THREE.Mesh(_videoGeometry,  create_mat2d(new THREE.TextureLoader().load(canvasOpacity.toDataURL('image/png')), true))
+		calqueMesh.material.opacity = 0.2;
+		calqueMesh.material.transparent = true;
+		calqueMesh.renderOrder = 999; // render last
+		calqueMesh.frustumCulled = false;
+		FRAMEOBJ3D.add(calqueMesh);
+	  }
+	}
+	
+	
+	// build the 3D. called once when Jeeliz Face Filter is OK
+	function init_threeScene(spec) {
+	  // INIT THE THREE.JS context
+	  const threeStuffs = JeelizThreeHelper.init(spec, detect_callback);
+	  _videoGeometry =  threeStuffs.videoMesh.geometry;
+
+	  // CREATE OUR DOG EARS:
+
+	  // let's begin by creating a loading manager that will allow us to
+	  // have more control over the three parts of our dog model
+	  const loadingManager = new THREE.LoadingManager();
+
+	  const loaderEars = new THREE.BufferGeometryLoader(loadingManager);
+
+	  loaderEars.load(
+		'./filters/dog/models/dog/dog_ears.json',
+		function (geometry) {
+		  const mat = new THREE.FlexMaterial({
+			map: new THREE.TextureLoader().load('./filters/dog/models/dog/texture_ears.jpg'),
+			flexMap: new THREE.TextureLoader().load('./filters/dog/models/dog/flex_ears_256.jpg'),
+			alphaMap: new THREE.TextureLoader().load('./filters/dog/models/dog/alpha_ears_256.jpg'),
+			transparent: true,
+			opacity: 1,
+			bumpMap: new THREE.TextureLoader().load('./filters/dog/models/dog/normal_ears.jpg'),
+			bumpScale: 0.0075,
+			shininess: 1.5,
+			specular: 0xffffff,
+		  });
+
+		  EARMESH = new THREE.Mesh(geometry, mat);
+		  EARMESH.scale.multiplyScalar(0.025);
+		  EARMESH.position.setY(-0.3);
+		  EARMESH.frustumCulled = false;
+		  EARMESH.renderOrder = 10000;
+		  EARMESH.material.opacity.value = 1;
+		}
+	  );
+	  // CREATE OUR DOG NOSE
+	  const loaderNose = new THREE.BufferGeometryLoader(loadingManager);
+
+	  loaderNose.load(
+		'./filters/dog/models/dog/dog_nose.json',
+		function (geometry) {
+		  const mat = new THREE.MeshPhongMaterial({
+			map: new THREE.TextureLoader().load('./filters/dog/models/dog/texture_nose.jpg'),
+			shininess: 1.5,
+			specular: 0xffffff,
+			bumpMap: new THREE.TextureLoader().load('./filters/dog/models/dog/normal_nose.jpg'),
+			bumpScale: 0.005
+		  });
+
+		  NOSEMESH = new THREE.Mesh(geometry, mat);
+		  NOSEMESH.scale.multiplyScalar(0.018);
+		  NOSEMESH.position.setY(-0.05);
+		  NOSEMESH.position.setZ(0.15);
+		  NOSEMESH.frustumCulled = false;
+		  NOSEMESH.renderOrder = 10000;
+		}
+	  );
+
+	  loadingManager.onLoad = () => {
+		DOGOBJ3D.add(EARMESH);
+		DOGOBJ3D.add(NOSEMESH);
+		threeStuffs.faceObject.add(DOGOBJ3D);
+
+		ISLOADED = true;
+	  }
+
+	  // CREATE AN AMBIENT LIGHT
+	  const ambient = new THREE.AmbientLight(0xffffff, 0.8);
+	  threeStuffs.scene.add(ambient);
+
+	  // CREAT A DIRECTIONALLIGHT
+	  const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
+	  dirLight.position.set(100, 1000, 1000);
+	  threeStuffs.scene.add(dirLight);
+
+	  // CREATE THE CAMERA
+	  THREECAMERA = JeelizThreeHelper.create_camera();
+	 
+	  threeStuffs.scene.add(FRAMEOBJ3D);
+
+	  // Add filter
+	  applyFilter();
+	} // end init_threeScene()
+
+	function animateTongue (mesh, isReverse) {
+	  mesh.visible = true;
+
+	  if (isReverse) {
+		ACTION.timescale = -1;
+		ACTION.paused = false;
+
+		setTimeout(() => {
+		  ACTION.paused = true;
+
+		  ISOPAQUE = false;
+		  ISANIMATING = false;
+		  ISANIMATIONOVER = true;
+
+
+		  new TWEEN.Tween(mesh.material.opacity)
+			.to({ value: 0 }, 150)
+			.start();
+		}, 150);
+	  } else {
+		ACTION.timescale = 1;
+		ACTION.reset();
+		ACTION.paused = false;
+
+		new TWEEN.Tween(mesh.material.opacity)
+		  .to({ value: 1 }, 100)
+		  .onComplete(() => {
+			ISOPAQUE = true;
+			setTimeout(() => {
+			  ACTION.paused = true;
+			  ISANIMATING = false;
+			  ISANIMATIONOVER = true;
+			}, 150);
+		  })
+		  .start();
+	  }
+	}
+
+
+	// entry point:
+	function main(){
+		if (session.canvasSource && document.getElementById("effectsCanvasTarget") && JEELIZFACEFILTER){
+			try {
+				warnlog("LOADING JEELIZ");
+				THREECAMERA = null; // should be prop of window
+				isTransformed = false;
+				DOGOBJ3D = new THREE.Object3D();
+				FRAMEOBJ3D = new THREE.Object3D();
+				
+				init_faceFilter("effectsCanvasTarget", session.canvasSource);
+			} catch(e){
+			}
+		} else {
+			setTimeout(function(){main();},500);
+			warnlog("...retrying to load");
+		}
+	}
+
+
+	function init_faceFilter(canvasId, videoElement){
+	  JEELIZFACEFILTER.init({
+		canvasId: canvasId,
+		NNCPath: pathname+'/thirdparty/jeeliz/neuralNets/',
+		videoSettings: {
+			videoElement: videoElement
+		},
+		callbackReady: function (errCode, spec) {
+			if (errCode) {
+				errorlog(errCode);
+				try{
+					JEELIZFACEFILTER.destroy();
+				} catch(e){}
+				THREECAMERA = null; // should be prop of window
+				DOGOBJ3D=null;
+				FRAMEOBJ3D=null;
+				isTransformed = false;
+				setTimeout(function(){main();},500);
+				return;
+			}
+			init_threeScene(spec);
+		},
+		callbackTrack: function (detectState) {
+			if (effectName !== session.effects){
+				try{
+					JEELIZFACEFILTER.toggle_pause(true,false); // unload the filter when no longer active.  Leaving the track active is required, else it breaks the app
+				} catch(e){errorlog(e);}
+				THREECAMERA = null; // should be prop of window
+				isTransformed = false;
+				DOGOBJ3D=null;
+				FRAMEOBJ3D=null;
+				return;
+			}
+			
+			const ISDETECTED = JeelizThreeHelper.get_isDetected();
+			//if (isDetected && detectState.expressions[0] >= 0.8 && !isTransformed) { // If the person opens their mouth wide, then activate..
+			if (ISDETECTED){
+				
+				const _quat = new THREE.Quaternion();
+				const _eul = new THREE.Euler();
+				_eul.setFromQuaternion(_quat);
+
+				// flex ears material:
+				if (EARMESH && EARMESH.material.set_amortized){
+				  EARMESH.material.set_amortized(
+					EARMESH.getWorldPosition(new THREE.Vector3(0,0,0)),
+					EARMESH.getWorldScale(new THREE.Vector3(0,0,0)),
+					EARMESH.getWorldQuaternion(_eul),
+					false,
+					0.1
+				  );
+				}
+
+				if (detectState.expressions[0] >= 0.85 && !ISOVERTHRESHOLD) {
+				  ISOVERTHRESHOLD = true;
+				  ISUNDERTRESHOLD = false;
+				  ISANIMATIONOVER = false;
+				}
+				if (detectState.expressions[0] <= 0.1 && !ISUNDERTRESHOLD) {
+				  ISOVERTHRESHOLD = false;
+				  ISUNDERTRESHOLD = true;
+				  ISANIMATIONOVER = false;
+				}
+			}
+
+			TWEEN.update();
+
+			if (ISOPAQUE) {
+				MIXER.update(0.16);
+			}
+
+			JeelizThreeHelper.render(detectState, THREECAMERA);
+		}
+	  }); 
+	}
+	return main;
+}

filters/dog/ThreeFlexMaterial.js

@@ -0,0 +1,132 @@
+"use strict";
+
+THREE.FlexMaterial = function(spec){
+  const _worldMatrixDelayed = new THREE['Matrix4']();
+
+  function mix(a,b,t){
+    a.set(
+      b.x*t+a.x*(1-t),
+      b.y*t+a.y*(1-t),
+      b.z*t+a.z*(1-t)
+    );
+  }
+  
+  // tweak shaders helpers:
+  function tweak_shaderAdd(code, chunk, glslCode){
+    return code.replace(chunk, chunk+"\n"+glslCode);
+  }
+  function tweak_shaderDel(code, chunk){
+    return code.replace(chunk, '');
+  }
+  function tweak_shaderRepl(code, chunk, glslCode){
+    return code.replace(chunk, glslCode);
+  }
+
+  // get PHONG shader and tweak it :
+  const phongShader = THREE.ShaderLib.phong;
+  let vertexShaderSource = phongShader.vertexShader;
+  vertexShaderSource = tweak_shaderAdd(vertexShaderSource, '#include <common>',
+    'uniform mat4 modelMatrixDelayed;\n'
+    +'uniform sampler2D flexMap;\n'
+  );
+  vertexShaderSource = tweak_shaderDel(vertexShaderSource, '#include <worldpos_vertex>');
+  vertexShaderSource = tweak_shaderRepl(vertexShaderSource, '#include <project_vertex>',
+    "vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );\n\
+    vec4 worldPositionDelayed = modelMatrixDelayed * vec4( transformed, 1.0 );\n\
+    worldPosition = mix(worldPosition, worldPositionDelayed, texture2D(flexMap, uv).r);\n\
+    vec4 mvPosition = viewMatrix* worldPosition;\n\
+    gl_Position = projectionMatrix * mvPosition;");
+
+
+  const uniforms0 = {
+    'modelMatrixDelayed': {
+      'value': _worldMatrixDelayed
+    },
+    'flexMap': {
+      value: spec.flexMap
+    },
+    'opacity': {
+      value: (typeof(spec.opacity)!=='undefined')?spec.opacity:1
+    }
+  };
+  const uniforms = Object.assign({}, phongShader.uniforms, uniforms0);
+  
+  const isMorphs = (spec.morphTargets) ? true : false;
+  const mat = new THREE.ShaderMaterial({
+    vertexShader: vertexShaderSource,
+    fragmentShader: phongShader.fragmentShader,
+    uniforms: uniforms,
+    transparent: (spec.transparent)?true:false,
+    lights: true,
+    morphTargets: isMorphs,
+    morphNormals: isMorphs
+  });
+  mat.flexMap = spec.flexMap;
+  mat.opacity = mat.uniforms.opacity; // shortcut
+
+  if (typeof(spec.map)!=='undefined') {
+    uniforms.map = {value: spec.map};
+    mat.map = spec.map;
+  }
+  if (typeof(spec.alphaMap)!=='undefined') {
+    uniforms.alphaMap = {value: spec.alphaMap};
+    mat.transparent = true;
+    mat.alphaMap = spec.alphaMap;
+  }
+
+  if (typeof(spec.bumpMap)!=='undefined') {
+    uniforms.bumpMap = {value: spec.bumpMap};
+    mat.bumpMap = spec.bumpMap;
+  }
+
+  if (typeof(spec.bumpScale)!=='undefined') {
+    uniforms.bumpScale = {value: spec.bumpScale};
+    mat.bumpScale = spec.bumpScale;
+  }
+
+  if (typeof(spec.shininess)!=='undefined') {
+    uniforms.shininess = {value: spec.shininess};
+    mat.shininess = spec.shininess;
+  }
+
+  const _positionDelayed = new THREE.Vector3();
+  const _scaleDelayed = new THREE.Vector3();
+  const _eulerDelayed = new THREE['Euler']();
+  let _initialized = false;
+
+  mat.set_amortized = function(positionTarget, scaleTarget, eulerTarget, parentMatrix, amortization){
+    if (!_initialized){
+      if (positionTarget){
+        _positionDelayed.copy(positionTarget);
+      }
+      if (scaleTarget){
+        _scaleDelayed.copy(scaleTarget);
+      }
+      if (eulerTarget){
+        _eulerDelayed.copy(eulerTarget);
+      }
+      _initialized = true;
+    }
+
+    if (eulerTarget){
+      mix( _eulerDelayed, eulerTarget, amortization );
+      _worldMatrixDelayed['makeRotationFromEuler'](_eulerDelayed);
+    }
+    
+    if (positionTarget){
+      mix( _positionDelayed, positionTarget, amortization );
+      _worldMatrixDelayed['setPosition'](_positionDelayed);
+    }
+
+    if (scaleTarget){
+      mix(_scaleDelayed, scaleTarget, amortization );
+      _worldMatrixDelayed['scale'](_scaleDelayed);
+    }
+
+    if (parentMatrix){
+      _worldMatrixDelayed.multiplyMatrices(parentMatrix, _worldMatrixDelayed);
+    }
+  }
+
+  return mat;
+};

filters/dog/index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta http-equiv="content-language" content="en-EN" />
+    
+    <title>JEELIZ FACEFILTER: DOG</title>
+    
+    <!-- INCLUDE JEELIZ FACEFILTER SCRIPT -->
+    <script src="../../../dist/jeelizFaceFilter.js"></script>
+
+    <!-- INCLUDE THREE.JS -->
+    <script src="../../../libs/three/v97/three.js"></script>
+
+    <!-- INCLUDE JEELIZRESIZER -->
+    <script src="../../../helpers/JeelizResizer.js"></script>
+
+    <!-- INCLUDE JEELIZTHREEJSHELPER -->
+    <script src="../../../helpers/JeelizThreeHelper.js"></script>
+
+    <!-- INCLUDE FLEXMATERIAL (CUSTOM DEV) -->
+    <script src="../../../libs/three/customMaterials/FlexMaterial/ThreeFlexMaterial.js"></script>
+
+    <!-- INCLUDE TWEEN.JS -->
+    <script src='../../../libs/tween/v16_3_5/Tween.min.js'></script>
+
+    <!-- INCLUDE JQUERY -->
+    <script src='../../../libs/jquery/jquery-3.3.1.min.js'></script>
+
+    <!-- INCLUDE GLFX -->
+    <script src='libs/glfx.js'></script>
+
+    <!-- INCLUDE DEMO SCRIPT -->
+    <script src="./main.js"></script>
+
+    <!-- INCLUDE ADDDRAGEVENTLISTENER.JS -->
+    <script src='../../../helpers/addDragEventListener.js'></script>
+
+    <!-- INCLUDE FORK ME ON GITHUB BANNER -->
+    <script src="../../appearance/widget.js"></script>
+
+    <link rel="stylesheet" href="../../appearance/style.css" type="text/css" />
+
+    <style>
+      .canvasContainer {
+        position: relative;
+        margin: 0 auto;
+        text-align: center;
+      }
+      #jeeFaceFilterCanvas {
+        z-index: 0;
+        max-height: 100%;
+        left: auto;
+        top: auto;
+        width: 100vmin;
+        transform: translate(0,0) rotateY(180deg);
+        position: static;
+      }
+      img {
+        max-width: 100%;
+      }
+      #filter {
+        position: absolute;
+        z-index: 0;
+        max-height: 100%;
+        width: 100vmin;
+        top: 0;
+        left: 50%;
+        transform: translate(-50%);
+        opacity: 0.15;
+      }
+      #filter canvas {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  
+  <body onload="main()">
+    <div class="canvasContainer">
+      <canvas width="600" height="600" id='jeeFaceFilterCanvas'></canvas>
+      <div id='filter'></div>      
+    </div>
+  </body>
+</html>
+ 
+ 

filters/dog/libs/glfx.js

@@ -0,0 +1,59 @@
+/*
+ * glfx.js
+ * http://evanw.github.com/glfx.js/
+ *
+ * Copyright 2011 Evan Wallace
+ * Released under the MIT license
+ */
+var fx=function(){function q(a,d,c){return Math.max(a,Math.min(d,c))}function w(b){return{_:b,loadContentsOf:function(b){a=this._.gl;this._.loadContentsOf(b)},destroy:function(){a=this._.gl;this._.destroy()}}}function A(a){return w(r.fromElement(a))}function B(b,d){var c=a.UNSIGNED_BYTE;if(a.getExtension("OES_texture_float")&&a.getExtension("OES_texture_float_linear")){var e=new r(100,100,a.RGBA,a.FLOAT);try{e.drawTo(function(){c=a.FLOAT})}catch(g){}e.destroy()}this._.texture&&this._.texture.destroy();
+this._.spareTexture&&this._.spareTexture.destroy();this.width=b;this.height=d;this._.texture=new r(b,d,a.RGBA,c);this._.spareTexture=new r(b,d,a.RGBA,c);this._.extraTexture=this._.extraTexture||new r(0,0,a.RGBA,c);this._.flippedShader=this._.flippedShader||new h(null,"uniform sampler2D texture;varying vec2 texCoord;void main(){gl_FragColor=texture2D(texture,vec2(texCoord.x,1.0-texCoord.y));}");this._.isInitialized=!0}function C(a,d,c){this._.isInitialized&&
+a._.width==this.width&&a._.height==this.height||B.call(this,d?d:a._.width,c?c:a._.height);a._.use();this._.texture.drawTo(function(){h.getDefaultShader().drawRect()});return this}function D(){this._.texture.use();this._.flippedShader.drawRect();return this}function f(a,d,c,e){(c||this._.texture).use();this._.spareTexture.drawTo(function(){a.uniforms(d).drawRect()});this._.spareTexture.swapWith(e||this._.texture)}function E(a){a.parentNode.insertBefore(this,a);a.parentNode.removeChild(a);return this}
+function F(){var b=new r(this._.texture.width,this._.texture.height,a.RGBA,a.UNSIGNED_BYTE);this._.texture.use();b.drawTo(function(){h.getDefaultShader().drawRect()});return w(b)}function G(){var b=this._.texture.width,d=this._.texture.height,c=new Uint8Array(4*b*d);this._.texture.drawTo(function(){a.readPixels(0,0,b,d,a.RGBA,a.UNSIGNED_BYTE,c)});return c}function k(b){return function(){a=this._.gl;return b.apply(this,arguments)}}function x(a,d,c,e,g,l,n,p){var m=c-g,h=e-l,f=n-g,k=p-l;g=a-c+g-n;l=
+d-e+l-p;var q=m*k-f*h,f=(g*k-f*l)/q,m=(m*l-g*h)/q;return[c-a+f*c,e-d+f*e,f,n-a+m*n,p-d+m*p,m,a,d,1]}function y(a){var d=a[0],c=a[1],e=a[2],g=a[3],l=a[4],n=a[5],p=a[6],m=a[7];a=a[8];var f=d*l*a-d*n*m-c*g*a+c*n*p+e*g*m-e*l*p;return[(l*a-n*m)/f,(e*m-c*a)/f,(c*n-e*l)/f,(n*p-g*a)/f,(d*a-e*p)/f,(e*g-d*n)/f,(g*m-l*p)/f,(c*p-d*m)/f,(d*l-c*g)/f]}function z(a){var d=a.length;this.xa=[];this.ya=[];this.u=[];this.y2=[];a.sort(function(a,b){return a[0]-b[0]});for(var c=0;c<d;c++)this.xa.push(a[c][0]),this.ya.push(a[c][1]);
+this.u[0]=0;this.y2[0]=0;for(c=1;c<d-1;++c){a=this.xa[c+1]-this.xa[c-1];var e=(this.xa[c]-this.xa[c-1])/a,g=e*this.y2[c-1]+2;this.y2[c]=(e-1)/g;this.u[c]=(6*((this.ya[c+1]-this.ya[c])/(this.xa[c+1]-this.xa[c])-(this.ya[c]-this.ya[c-1])/(this.xa[c]-this.xa[c-1]))/a-e*this.u[c-1])/g}this.y2[d-1]=0;for(c=d-2;0<=c;--c)this.y2[c]=this.y2[c]*this.y2[c+1]+this.u[c]}function u(a,d){return new h(null,a+"uniform sampler2D texture;uniform vec2 texSize;varying vec2 texCoord;void main(){vec2 coord=texCoord*texSize;"+
+d+"gl_FragColor=texture2D(texture,coord/texSize);vec2 clampedCoord=clamp(coord,vec2(0.0),texSize);if(coord!=clampedCoord){gl_FragColor.a*=max(0.0,1.0-length(coord-clampedCoord));}}")}function H(b,d){a.brightnessContrast=a.brightnessContrast||new h(null,"uniform sampler2D texture;uniform float brightness;uniform float contrast;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);color.rgb+=brightness;if(contrast>0.0){color.rgb=(color.rgb-0.5)/(1.0-contrast)+0.5;}else{color.rgb=(color.rgb-0.5)*(1.0+contrast)+0.5;}gl_FragColor=color;}");
+f.call(this,a.brightnessContrast,{brightness:q(-1,b,1),contrast:q(-1,d,1)});return this}function t(a){a=new z(a);for(var d=[],c=0;256>c;c++)d.push(q(0,Math.floor(256*a.interpolate(c/255)),255));return d}function I(b,d,c){b=t(b);1==arguments.length?d=c=b:(d=t(d),c=t(c));for(var e=[],g=0;256>g;g++)e.splice(e.length,0,b[g],d[g],c[g],255);this._.extraTexture.initFromBytes(256,1,e);this._.extraTexture.use(1);a.curves=a.curves||new h(null,"uniform sampler2D texture;uniform sampler2D map;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);color.r=texture2D(map,vec2(color.r)).r;color.g=texture2D(map,vec2(color.g)).g;color.b=texture2D(map,vec2(color.b)).b;gl_FragColor=color;}");
+a.curves.textures({map:1});f.call(this,a.curves,{});return this}function J(b){a.denoise=a.denoise||new h(null,"uniform sampler2D texture;uniform float exponent;uniform float strength;uniform vec2 texSize;varying vec2 texCoord;void main(){vec4 center=texture2D(texture,texCoord);vec4 color=vec4(0.0);float total=0.0;for(float x=-4.0;x<=4.0;x+=1.0){for(float y=-4.0;y<=4.0;y+=1.0){vec4 sample=texture2D(texture,texCoord+vec2(x,y)/texSize);float weight=1.0-abs(dot(sample.rgb-center.rgb,vec3(0.25)));weight=pow(weight,exponent);color+=sample*weight;total+=weight;}}gl_FragColor=color/total;}");
+for(var d=0;2>d;d++)f.call(this,a.denoise,{exponent:Math.max(0,b),texSize:[this.width,this.height]});return this}function K(b,d){a.hueSaturation=a.hueSaturation||new h(null,"uniform sampler2D texture;uniform float hue;uniform float saturation;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float angle=hue*3.14159265;float s=sin(angle),c=cos(angle);vec3 weights=(vec3(2.0*c,-sqrt(3.0)*s-c,sqrt(3.0)*s-c)+1.0)/3.0;float len=length(color.rgb);color.rgb=vec3(dot(color.rgb,weights.xyz),dot(color.rgb,weights.zxy),dot(color.rgb,weights.yzx));float average=(color.r+color.g+color.b)/3.0;if(saturation>0.0){color.rgb+=(average-color.rgb)*(1.0-1.0/(1.001-saturation));}else{color.rgb+=(average-color.rgb)*(-saturation);}gl_FragColor=color;}");
+f.call(this,a.hueSaturation,{hue:q(-1,b,1),saturation:q(-1,d,1)});return this}function L(b){a.noise=a.noise||new h(null,"uniform sampler2D texture;uniform float amount;varying vec2 texCoord;float rand(vec2 co){return fract(sin(dot(co.xy,vec2(12.9898,78.233)))*43758.5453);}void main(){vec4 color=texture2D(texture,texCoord);float diff=(rand(texCoord)-0.5)*amount;color.r+=diff;color.g+=diff;color.b+=diff;gl_FragColor=color;}");
+f.call(this,a.noise,{amount:q(0,b,1)});return this}function M(b){a.sepia=a.sepia||new h(null,"uniform sampler2D texture;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float r=color.r;float g=color.g;float b=color.b;color.r=min(1.0,(r*(1.0-(0.607*amount)))+(g*(0.769*amount))+(b*(0.189*amount)));color.g=min(1.0,(r*0.349*amount)+(g*(1.0-(0.314*amount)))+(b*0.168*amount));color.b=min(1.0,(r*0.272*amount)+(g*0.534*amount)+(b*(1.0-(0.869*amount))));gl_FragColor=color;}");
+f.call(this,a.sepia,{amount:q(0,b,1)});return this}function N(b,d){a.unsharpMask=a.unsharpMask||new h(null,"uniform sampler2D blurredTexture;uniform sampler2D originalTexture;uniform float strength;uniform float threshold;varying vec2 texCoord;void main(){vec4 blurred=texture2D(blurredTexture,texCoord);vec4 original=texture2D(originalTexture,texCoord);gl_FragColor=mix(blurred,original,1.0+strength);}");
+this._.extraTexture.ensureFormat(this._.texture);this._.texture.use();this._.extraTexture.drawTo(function(){h.getDefaultShader().drawRect()});this._.extraTexture.use(1);this.triangleBlur(b);a.unsharpMask.textures({originalTexture:1});f.call(this,a.unsharpMask,{strength:d});this._.extraTexture.unuse(1);return this}function O(b){a.vibrance=a.vibrance||new h(null,"uniform sampler2D texture;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float average=(color.r+color.g+color.b)/3.0;float mx=max(color.r,max(color.g,color.b));float amt=(mx-average)*(-amount*3.0);color.rgb=mix(color.rgb,vec3(mx),amt);gl_FragColor=color;}");
+f.call(this,a.vibrance,{amount:q(-1,b,1)});return this}function P(b,d){a.vignette=a.vignette||new h(null,"uniform sampler2D texture;uniform float size;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float dist=distance(texCoord,vec2(0.5,0.5));color.rgb*=smoothstep(0.8,size*0.799,dist*(amount+size));gl_FragColor=color;}");
+f.call(this,a.vignette,{size:q(0,b,1),amount:q(0,d,1)});return this}function Q(b,d,c){a.lensBlurPrePass=a.lensBlurPrePass||new h(null,"uniform sampler2D texture;uniform float power;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);color=pow(color,vec4(power));gl_FragColor=vec4(color);}");var e="uniform sampler2D texture0;uniform sampler2D texture1;uniform vec2 delta0;uniform vec2 delta1;uniform float power;varying vec2 texCoord;"+
+s+"vec4 sample(vec2 delta){float offset=random(vec3(delta,151.7182),0.0);vec4 color=vec4(0.0);float total=0.0;for(float t=0.0;t<=30.0;t++){float percent=(t+offset)/30.0;color+=texture2D(texture0,texCoord+delta*percent);total+=1.0;}return color/total;}";
+a.lensBlur0=a.lensBlur0||new h(null,e+"void main(){gl_FragColor=sample(delta0);}");a.lensBlur1=a.lensBlur1||new h(null,e+"void main(){gl_FragColor=(sample(delta0)+sample(delta1))*0.5;}");a.lensBlur2=a.lensBlur2||(new h(null,e+"void main(){vec4 color=(sample(delta0)+2.0*texture2D(texture1,texCoord))/3.0;gl_FragColor=pow(color,vec4(power));}")).textures({texture1:1});for(var e=
+[],g=0;3>g;g++){var l=c+2*g*Math.PI/3;e.push([b*Math.sin(l)/this.width,b*Math.cos(l)/this.height])}b=Math.pow(10,q(-1,d,1));f.call(this,a.lensBlurPrePass,{power:b});this._.extraTexture.ensureFormat(this._.texture);f.call(this,a.lensBlur0,{delta0:e[0]},this._.texture,this._.extraTexture);f.call(this,a.lensBlur1,{delta0:e[1],delta1:e[2]},this._.extraTexture,this._.extraTexture);f.call(this,a.lensBlur0,{delta0:e[1]});this._.extraTexture.use(1);f.call(this,a.lensBlur2,{power:1/b,delta0:e[2]});return this}
+function R(b,d,c,e,g,l){a.tiltShift=a.tiltShift||new h(null,"uniform sampler2D texture;uniform float blurRadius;uniform float gradientRadius;uniform vec2 start;uniform vec2 end;uniform vec2 delta;uniform vec2 texSize;varying vec2 texCoord;"+s+"void main(){vec4 color=vec4(0.0);float total=0.0;float offset=random(vec3(12.9898,78.233,151.7182),0.0);vec2 normal=normalize(vec2(start.y-end.y,end.x-start.x));float radius=smoothstep(0.0,1.0,abs(dot(texCoord*texSize-start,normal))/gradientRadius)*blurRadius;for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec4 sample=texture2D(texture,texCoord+delta/texSize*percent*radius);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
+var n=c-b,p=e-d,m=Math.sqrt(n*n+p*p);f.call(this,a.tiltShift,{blurRadius:g,gradientRadius:l,start:[b,d],end:[c,e],delta:[n/m,p/m],texSize:[this.width,this.height]});f.call(this,a.tiltShift,{blurRadius:g,gradientRadius:l,start:[b,d],end:[c,e],delta:[-p/m,n/m],texSize:[this.width,this.height]});return this}function S(b){a.triangleBlur=a.triangleBlur||new h(null,"uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;"+s+"void main(){vec4 color=vec4(0.0);float total=0.0;float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec4 sample=texture2D(texture,texCoord+delta*percent);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
+f.call(this,a.triangleBlur,{delta:[b/this.width,0]});f.call(this,a.triangleBlur,{delta:[0,b/this.height]});return this}function T(b,d,c){a.zoomBlur=a.zoomBlur||new h(null,"uniform sampler2D texture;uniform vec2 center;uniform float strength;uniform vec2 texSize;varying vec2 texCoord;"+s+"void main(){vec4 color=vec4(0.0);float total=0.0;vec2 toCenter=center-texCoord*texSize;float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=0.0;t<=40.0;t++){float percent=(t+offset)/40.0;float weight=4.0*(percent-percent*percent);vec4 sample=texture2D(texture,texCoord+toCenter*percent*strength/texSize);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
+f.call(this,a.zoomBlur,{center:[b,d],strength:c,texSize:[this.width,this.height]});return this}function U(b,d,c,e){a.colorHalftone=a.colorHalftone||new h(null,"uniform sampler2D texture;uniform vec2 center;uniform float angle;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;float pattern(float angle){float s=sin(angle),c=cos(angle);vec2 tex=texCoord*texSize-center;vec2 point=vec2(c*tex.x-s*tex.y,s*tex.x+c*tex.y)*scale;return(sin(point.x)*sin(point.y))*4.0;}void main(){vec4 color=texture2D(texture,texCoord);vec3 cmy=1.0-color.rgb;float k=min(cmy.x,min(cmy.y,cmy.z));cmy=(cmy-k)/(1.0-k);cmy=clamp(cmy*10.0-3.0+vec3(pattern(angle+0.26179),pattern(angle+1.30899),pattern(angle)),0.0,1.0);k=clamp(k*10.0-5.0+pattern(angle+0.78539),0.0,1.0);gl_FragColor=vec4(1.0-cmy-k,color.a);}");
+f.call(this,a.colorHalftone,{center:[b,d],angle:c,scale:Math.PI/e,texSize:[this.width,this.height]});return this}function V(b,d,c,e){a.dotScreen=a.dotScreen||new h(null,"uniform sampler2D texture;uniform vec2 center;uniform float angle;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;float pattern(){float s=sin(angle),c=cos(angle);vec2 tex=texCoord*texSize-center;vec2 point=vec2(c*tex.x-s*tex.y,s*tex.x+c*tex.y)*scale;return(sin(point.x)*sin(point.y))*4.0;}void main(){vec4 color=texture2D(texture,texCoord);float average=(color.r+color.g+color.b)/3.0;gl_FragColor=vec4(vec3(average*10.0-5.0+pattern()),color.a);}");
+f.call(this,a.dotScreen,{center:[b,d],angle:c,scale:Math.PI/e,texSize:[this.width,this.height]});return this}function W(b){a.edgeWork1=a.edgeWork1||new h(null,"uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;"+s+"void main(){vec2 color=vec2(0.0);vec2 total=vec2(0.0);float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec3 sample=texture2D(texture,texCoord+delta*percent).rgb;float average=(sample.r+sample.g+sample.b)/3.0;color.x+=average*weight;total.x+=weight;if(abs(t)<15.0){weight=weight*2.0-1.0;color.y+=average*weight;total.y+=weight;}}gl_FragColor=vec4(color/total,0.0,1.0);}");
+a.edgeWork2=a.edgeWork2||new h(null,"uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;"+s+"void main(){vec2 color=vec2(0.0);vec2 total=vec2(0.0);float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec2 sample=texture2D(texture,texCoord+delta*percent).xy;color.x+=sample.x*weight;total.x+=weight;if(abs(t)<15.0){weight=weight*2.0-1.0;color.y+=sample.y*weight;total.y+=weight;}}float c=clamp(10000.0*(color.y/total.y-color.x/total.x)+0.5,0.0,1.0);gl_FragColor=vec4(c,c,c,1.0);}");
+f.call(this,a.edgeWork1,{delta:[b/this.width,0]});f.call(this,a.edgeWork2,{delta:[0,b/this.height]});return this}function X(b,d,c){a.hexagonalPixelate=a.hexagonalPixelate||new h(null,"uniform sampler2D texture;uniform vec2 center;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;void main(){vec2 tex=(texCoord*texSize-center)/scale;tex.y/=0.866025404;tex.x-=tex.y*0.5;vec2 a;if(tex.x+tex.y-floor(tex.x)-floor(tex.y)<1.0)a=vec2(floor(tex.x),floor(tex.y));else a=vec2(ceil(tex.x),ceil(tex.y));vec2 b=vec2(ceil(tex.x),floor(tex.y));vec2 c=vec2(floor(tex.x),ceil(tex.y));vec3 TEX=vec3(tex.x,tex.y,1.0-tex.x-tex.y);vec3 A=vec3(a.x,a.y,1.0-a.x-a.y);vec3 B=vec3(b.x,b.y,1.0-b.x-b.y);vec3 C=vec3(c.x,c.y,1.0-c.x-c.y);float alen=length(TEX-A);float blen=length(TEX-B);float clen=length(TEX-C);vec2 choice;if(alen<blen){if(alen<clen)choice=a;else choice=c;}else{if(blen<clen)choice=b;else choice=c;}choice.x+=choice.y*0.5;choice.y*=0.866025404;choice*=scale/texSize;gl_FragColor=texture2D(texture,choice+center/texSize);}");
+f.call(this,a.hexagonalPixelate,{center:[b,d],scale:c,texSize:[this.width,this.height]});return this}function Y(b){a.ink=a.ink||new h(null,"uniform sampler2D texture;uniform float strength;uniform vec2 texSize;varying vec2 texCoord;void main(){vec2 dx=vec2(1.0/texSize.x,0.0);vec2 dy=vec2(0.0,1.0/texSize.y);vec4 color=texture2D(texture,texCoord);float bigTotal=0.0;float smallTotal=0.0;vec3 bigAverage=vec3(0.0);vec3 smallAverage=vec3(0.0);for(float x=-2.0;x<=2.0;x+=1.0){for(float y=-2.0;y<=2.0;y+=1.0){vec3 sample=texture2D(texture,texCoord+dx*x+dy*y).rgb;bigAverage+=sample;bigTotal+=1.0;if(abs(x)+abs(y)<2.0){smallAverage+=sample;smallTotal+=1.0;}}}vec3 edge=max(vec3(0.0),bigAverage/bigTotal-smallAverage/smallTotal);gl_FragColor=vec4(color.rgb-dot(edge,edge)*strength*100000.0,color.a);}");
+f.call(this,a.ink,{strength:b*b*b*b*b,texSize:[this.width,this.height]});return this}function Z(b,d,c,e){a.bulgePinch=a.bulgePinch||u("uniform float radius;uniform float strength;uniform vec2 center;","coord-=center;float distance=length(coord);if(distance<radius){float percent=distance/radius;if(strength>0.0){coord*=mix(1.0,smoothstep(0.0,radius/distance,percent),strength*0.75);}else{coord*=mix(1.0,pow(percent,1.0+strength*0.75)*radius/distance,1.0-percent);}}coord+=center;");
+f.call(this,a.bulgePinch,{radius:c,strength:q(-1,e,1),center:[b,d],texSize:[this.width,this.height]});return this}function $(b,d,c){a.matrixWarp=a.matrixWarp||u("uniform mat3 matrix;uniform bool useTextureSpace;","if(useTextureSpace)coord=coord/texSize*2.0-1.0;vec3 warp=matrix*vec3(coord,1.0);coord=warp.xy/warp.z;if(useTextureSpace)coord=(coord*0.5+0.5)*texSize;");b=Array.prototype.concat.apply([],b);if(4==b.length)b=
+[b[0],b[1],0,b[2],b[3],0,0,0,1];else if(9!=b.length)throw"can only warp with 2x2 or 3x3 matrix";f.call(this,a.matrixWarp,{matrix:d?y(b):b,texSize:[this.width,this.height],useTextureSpace:c|0});return this}function aa(a,d){var c=x.apply(null,d),e=x.apply(null,a),c=y(c);return this.matrixWarp([c[0]*e[0]+c[1]*e[3]+c[2]*e[6],c[0]*e[1]+c[1]*e[4]+c[2]*e[7],c[0]*e[2]+c[1]*e[5]+c[2]*e[8],c[3]*e[0]+c[4]*e[3]+c[5]*e[6],c[3]*e[1]+c[4]*e[4]+c[5]*e[7],c[3]*e[2]+c[4]*e[5]+c[5]*e[8],c[6]*e[0]+c[7]*e[3]+c[8]*e[6],
+c[6]*e[1]+c[7]*e[4]+c[8]*e[7],c[6]*e[2]+c[7]*e[5]+c[8]*e[8]])}function ba(b,d,c,e){a.swirl=a.swirl||u("uniform float radius;uniform float angle;uniform vec2 center;","coord-=center;float distance=length(coord);if(distance<radius){float percent=(radius-distance)/radius;float theta=percent*percent*angle;float s=sin(theta);float c=cos(theta);coord=vec2(coord.x*c-coord.y*s,coord.x*s+coord.y*c);}coord+=center;");
+f.call(this,a.swirl,{radius:c,center:[b,d],angle:e,texSize:[this.width,this.height]});return this}var v={};(function(){function a(b){if(!b.getExtension("OES_texture_float"))return!1;var c=b.createFramebuffer(),e=b.createTexture();b.bindTexture(b.TEXTURE_2D,e);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,b.NEAREST);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,b.NEAREST);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_S,b.CLAMP_TO_EDGE);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_T,b.CLAMP_TO_EDGE);
+b.texImage2D(b.TEXTURE_2D,0,b.RGBA,1,1,0,b.RGBA,b.UNSIGNED_BYTE,null);b.bindFramebuffer(b.FRAMEBUFFER,c);b.framebufferTexture2D(b.FRAMEBUFFER,b.COLOR_ATTACHMENT0,b.TEXTURE_2D,e,0);c=b.createTexture();b.bindTexture(b.TEXTURE_2D,c);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,b.LINEAR);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,b.LINEAR);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_S,b.CLAMP_TO_EDGE);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_T,b.CLAMP_TO_EDGE);b.texImage2D(b.TEXTURE_2D,
+0,b.RGBA,2,2,0,b.RGBA,b.FLOAT,new Float32Array([2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]));var e=b.createProgram(),d=b.createShader(b.VERTEX_SHADER),g=b.createShader(b.FRAGMENT_SHADER);b.shaderSource(d,"attribute vec2 vertex;void main(){gl_Position=vec4(vertex,0.0,1.0);}");b.shaderSource(g,"uniform sampler2D texture;void main(){gl_FragColor=texture2D(texture,vec2(0.5));}");b.compileShader(d);b.compileShader(g);b.attachShader(e,d);b.attachShader(e,
+g);b.linkProgram(e);d=b.createBuffer();b.bindBuffer(b.ARRAY_BUFFER,d);b.bufferData(b.ARRAY_BUFFER,new Float32Array([0,0]),b.STREAM_DRAW);b.enableVertexAttribArray(0);b.vertexAttribPointer(0,2,b.FLOAT,!1,0,0);d=new Uint8Array(4);b.useProgram(e);b.viewport(0,0,1,1);b.bindTexture(b.TEXTURE_2D,c);b.drawArrays(b.POINTS,0,1);b.readPixels(0,0,1,1,b.RGBA,b.UNSIGNED_BYTE,d);return 127===d[0]||128===d[0]}function d(){}function c(a){"OES_texture_float_linear"===a?(void 0===this.$OES_texture_float_linear$&&Object.defineProperty(this,
+"$OES_texture_float_linear$",{enumerable:!1,configurable:!1,writable:!1,value:new d}),a=this.$OES_texture_float_linear$):a=n.call(this,a);return a}function e(){var a=f.call(this);-1===a.indexOf("OES_texture_float_linear")&&a.push("OES_texture_float_linear");return a}try{var g=document.createElement("canvas").getContext("experimental-webgl")}catch(l){}if(g&&-1===g.getSupportedExtensions().indexOf("OES_texture_float_linear")&&a(g)){var n=WebGLRenderingContext.prototype.getExtension,f=WebGLRenderingContext.prototype.getSupportedExtensions;
+WebGLRenderingContext.prototype.getExtension=c;WebGLRenderingContext.prototype.getSupportedExtensions=e}})();var a;v.canvas=function(){var b=document.createElement("canvas");try{a=b.getContext("experimental-webgl",{premultipliedAlpha:!1})}catch(d){a=null}if(!a)throw"This browser does not support WebGL";b._={gl:a,isInitialized:!1,texture:null,spareTexture:null,flippedShader:null};b.texture=k(A);b.draw=k(C);b.update=k(D);b.replace=k(E);b.contents=k(F);b.getPixelArray=k(G);b.brightnessContrast=k(H);
+b.hexagonalPixelate=k(X);b.hueSaturation=k(K);b.colorHalftone=k(U);b.triangleBlur=k(S);b.unsharpMask=k(N);b.perspective=k(aa);b.matrixWarp=k($);b.bulgePinch=k(Z);b.tiltShift=k(R);b.dotScreen=k(V);b.edgeWork=k(W);b.lensBlur=k(Q);b.zoomBlur=k(T);b.noise=k(L);b.denoise=k(J);b.curves=k(I);b.swirl=k(ba);b.ink=k(Y);b.vignette=k(P);b.vibrance=k(O);b.sepia=k(M);return b};v.splineInterpolate=t;var h=function(){function b(b,c){var e=a.createShader(b);a.shaderSource(e,c);a.compileShader(e);if(!a.getShaderParameter(e,
+a.COMPILE_STATUS))throw"compile error: "+a.getShaderInfoLog(e);return e}function d(d,l){this.texCoordAttribute=this.vertexAttribute=null;this.program=a.createProgram();d=d||c;l=l||e;l="precision highp float;"+l;a.attachShader(this.program,b(a.VERTEX_SHADER,d));a.attachShader(this.program,b(a.FRAGMENT_SHADER,l));a.linkProgram(this.program);if(!a.getProgramParameter(this.program,a.LINK_STATUS))throw"link error: "+a.getProgramInfoLog(this.program);}var c="attribute vec2 vertex;attribute vec2 _texCoord;varying vec2 texCoord;void main(){texCoord=_texCoord;gl_Position=vec4(vertex*2.0-1.0,0.0,1.0);}",
+e="uniform sampler2D texture;varying vec2 texCoord;void main(){gl_FragColor=texture2D(texture,texCoord);}";d.prototype.destroy=function(){a.deleteProgram(this.program);this.program=null};d.prototype.uniforms=function(b){a.useProgram(this.program);for(var e in b)if(b.hasOwnProperty(e)){var c=a.getUniformLocation(this.program,e);if(null!==c){var d=b[e];if("[object Array]"==Object.prototype.toString.call(d))switch(d.length){case 1:a.uniform1fv(c,new Float32Array(d));break;
+case 2:a.uniform2fv(c,new Float32Array(d));break;case 3:a.uniform3fv(c,new Float32Array(d));break;case 4:a.uniform4fv(c,new Float32Array(d));break;case 9:a.uniformMatrix3fv(c,!1,new Float32Array(d));break;case 16:a.uniformMatrix4fv(c,!1,new Float32Array(d));break;default:throw"dont't know how to load uniform \""+e+'" of length '+d.length;}else if("[object Number]"==Object.prototype.toString.call(d))a.uniform1f(c,d);else throw'attempted to set uniform "'+e+'" to invalid value '+(d||"undefined").toString();
+}}return this};d.prototype.textures=function(b){a.useProgram(this.program);for(var c in b)b.hasOwnProperty(c)&&a.uniform1i(a.getUniformLocation(this.program,c),b[c]);return this};d.prototype.drawRect=function(b,c,e,d){var f=a.getParameter(a.VIEWPORT);c=void 0!==c?(c-f[1])/f[3]:0;b=void 0!==b?(b-f[0])/f[2]:0;e=void 0!==e?(e-f[0])/f[2]:1;d=void 0!==d?(d-f[1])/f[3]:1;null==a.vertexBuffer&&(a.vertexBuffer=a.createBuffer());a.bindBuffer(a.ARRAY_BUFFER,a.vertexBuffer);a.bufferData(a.ARRAY_BUFFER,new Float32Array([b,
+c,b,d,e,c,e,d]),a.STATIC_DRAW);null==a.texCoordBuffer&&(a.texCoordBuffer=a.createBuffer(),a.bindBuffer(a.ARRAY_BUFFER,a.texCoordBuffer),a.bufferData(a.ARRAY_BUFFER,new Float32Array([0,0,0,1,1,0,1,1]),a.STATIC_DRAW));null==this.vertexAttribute&&(this.vertexAttribute=a.getAttribLocation(this.program,"vertex"),a.enableVertexAttribArray(this.vertexAttribute));null==this.texCoordAttribute&&(this.texCoordAttribute=a.getAttribLocation(this.program,"_texCoord"),a.enableVertexAttribArray(this.texCoordAttribute));
+a.useProgram(this.program);a.bindBuffer(a.ARRAY_BUFFER,a.vertexBuffer);a.vertexAttribPointer(this.vertexAttribute,2,a.FLOAT,!1,0,0);a.bindBuffer(a.ARRAY_BUFFER,a.texCoordBuffer);a.vertexAttribPointer(this.texCoordAttribute,2,a.FLOAT,!1,0,0);a.drawArrays(a.TRIANGLE_STRIP,0,4)};d.getDefaultShader=function(){a.defaultShader=a.defaultShader||new d;return a.defaultShader};return d}();z.prototype.interpolate=function(a){for(var d=0,c=this.ya.length-1;1<c-d;){var e=c+d>>1;this.xa[e]>a?c=e:d=e}var e=this.xa[c]-
+this.xa[d],g=(this.xa[c]-a)/e;a=(a-this.xa[d])/e;return g*this.ya[d]+a*this.ya[c]+((g*g*g-g)*this.y2[d]+(a*a*a-a)*this.y2[c])*e*e/6};var r=function(){function b(b,c,d,f){this.gl=a;this.id=a.createTexture();this.width=b;this.height=c;this.format=d;this.type=f;a.bindTexture(a.TEXTURE_2D,this.id);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MAG_FILTER,a.LINEAR);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MIN_FILTER,a.LINEAR);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_S,a.CLAMP_TO_EDGE);a.texParameteri(a.TEXTURE_2D,
+a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE);b&&c&&a.texImage2D(a.TEXTURE_2D,0,this.format,b,c,0,this.format,this.type,null)}function d(a){null==c&&(c=document.createElement("canvas"));c.width=a.width;c.height=a.height;a=c.getContext("2d");a.clearRect(0,0,c.width,c.height);return a}b.fromElement=function(c){var d=new b(0,0,a.RGBA,a.UNSIGNED_BYTE);d.loadContentsOf(c);return d};b.prototype.loadContentsOf=function(b){this.width=b.width||b.videoWidth;this.height=b.height||b.videoHeight;a.bindTexture(a.TEXTURE_2D,
+this.id);a.texImage2D(a.TEXTURE_2D,0,this.format,this.format,this.type,b)};b.prototype.initFromBytes=function(b,c,d){this.width=b;this.height=c;this.format=a.RGBA;this.type=a.UNSIGNED_BYTE;a.bindTexture(a.TEXTURE_2D,this.id);a.texImage2D(a.TEXTURE_2D,0,a.RGBA,b,c,0,a.RGBA,this.type,new Uint8Array(d))};b.prototype.destroy=function(){a.deleteTexture(this.id);this.id=null};b.prototype.use=function(b){a.activeTexture(a.TEXTURE0+(b||0));a.bindTexture(a.TEXTURE_2D,this.id)};b.prototype.unuse=function(b){a.activeTexture(a.TEXTURE0+
+(b||0));a.bindTexture(a.TEXTURE_2D,null)};b.prototype.ensureFormat=function(b,c,d,f){if(1==arguments.length){var h=arguments[0];b=h.width;c=h.height;d=h.format;f=h.type}if(b!=this.width||c!=this.height||d!=this.format||f!=this.type)this.width=b,this.height=c,this.format=d,this.type=f,a.bindTexture(a.TEXTURE_2D,this.id),a.texImage2D(a.TEXTURE_2D,0,this.format,b,c,0,this.format,this.type,null)};b.prototype.drawTo=function(b){a.framebuffer=a.framebuffer||a.createFramebuffer();a.bindFramebuffer(a.FRAMEBUFFER,
+a.framebuffer);a.framebufferTexture2D(a.FRAMEBUFFER,a.COLOR_ATTACHMENT0,a.TEXTURE_2D,this.id,0);if(a.checkFramebufferStatus(a.FRAMEBUFFER)!==a.FRAMEBUFFER_COMPLETE)throw Error("incomplete framebuffer");a.viewport(0,0,this.width,this.height);b();a.bindFramebuffer(a.FRAMEBUFFER,null)};var c=null;b.prototype.fillUsingCanvas=function(b){b(d(this));this.format=a.RGBA;this.type=a.UNSIGNED_BYTE;a.bindTexture(a.TEXTURE_2D,this.id);a.texImage2D(a.TEXTURE_2D,0,a.RGBA,a.RGBA,a.UNSIGNED_BYTE,c);return this};
+b.prototype.toImage=function(b){this.use();h.getDefaultShader().drawRect();var f=4*this.width*this.height,k=new Uint8Array(f),n=d(this),p=n.createImageData(this.width,this.height);a.readPixels(0,0,this.width,this.height,a.RGBA,a.UNSIGNED_BYTE,k);for(var m=0;m<f;m++)p.data[m]=k[m];n.putImageData(p,0,0);b.src=c.toDataURL()};b.prototype.swapWith=function(a){var b;b=a.id;a.id=this.id;this.id=b;b=a.width;a.width=this.width;this.width=b;b=a.height;a.height=this.height;this.height=b;b=a.format;a.format=
+this.format;this.format=b};return b}(),s="float random(vec3 scale,float seed){return fract(sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453+seed);}";return v}();

filters/dog/main.js

@@ -0,0 +1,354 @@
+"use strict";
+
+// some globalz:
+let THREECAMERA = null;
+let ISDETECTED = false;
+let TONGUEMESH = null, NOSEMESH = null, EARMESH = null;
+let DOGOBJ3D = null, FRAMEOBJ3D = null;
+
+
+let ISOVERTHRESHOLD = false, ISUNDERTRESHOLD = true;
+
+let ISLOADED = false;
+
+let MIXER = null;
+let ACTION = null;
+
+let ISANIMATING = false;
+let ISOPAQUE = false;
+let ISTONGUEOUT = false;
+let ISANIMATIONOVER = false;
+
+let _flexParts = [];
+let _videoGeometry = null;
+
+// callback: launched if a face is detected or lost
+function detect_callback(isDetected) {
+  if (isDetected) {
+    console.log('INFO in detect_callback(): DETECTED');
+  } else {
+    console.log('INFO in detect_callback(): LOST');
+  }
+}
+
+function create_mat2d(threeTexture, isTransparent){ // MT216: we put the creation of the video material in a func because we will also use it for the frame
+  return new THREE.RawShaderMaterial({
+    depthWrite: false,
+    depthTest: false,
+    transparent: isTransparent,
+    vertexShader: "attribute vec2 position;\n\
+      varying vec2 vUV;\n\
+      void main(void){\n\
+        gl_Position = vec4(position, 0., 1.);\n\
+        vUV = 0.5 + 0.5 * position;\n\
+      }",
+    fragmentShader: "precision lowp float;\n\
+      uniform sampler2D samplerVideo;\n\
+      varying vec2 vUV;\n\
+      void main(void){\n\
+        gl_FragColor = texture2D(samplerVideo, vUV);\n\
+      }",
+     uniforms:{
+      samplerVideo: { value: threeTexture }
+     }
+  });
+}
+
+function applyFilter() {
+  let canvas;
+  try {
+    canvas = fx.canvas();
+  } catch (e) {
+    alert('Ow no! WebGL isn\'t supported...')
+    return
+  }
+
+  const tempImage = new Image(512, 512);
+  tempImage.src = './images/texture_pink.jpg';
+
+  tempImage.onload = () => {
+    const texture = canvas.texture(tempImage);
+
+    // Create the effet
+    canvas.draw(texture).vignette(0.5, 0.6).update();
+
+    const canvasOpacity = document.createElement('canvas');
+    canvasOpacity.width = 512;
+    canvasOpacity.height = 512;
+    const ctx = canvasOpacity.getContext('2d');
+
+    ctx.globalAlpha = 0.2
+    ctx.drawImage(canvas, 0, 0, 512, 512);
+
+    // Add the effect
+    const calqueMesh = new THREE.Mesh(_videoGeometry,  create_mat2d(new THREE.TextureLoader().load(canvasOpacity.toDataURL('image/png')), true))
+    calqueMesh.material.opacity = 0.2;
+    calqueMesh.material.transparent = true;
+    calqueMesh.renderOrder = 999; // render last
+    calqueMesh.frustumCulled = false;
+    FRAMEOBJ3D.add(calqueMesh);
+  }
+}
+
+// build the 3D. called once when Jeeliz Face Filter is OK
+function init_threeScene(spec) {
+  // INIT THE THREE.JS context
+  const threeStuffs = JeelizThreeHelper.init(spec, detect_callback);
+  _videoGeometry =  threeStuffs.videoMesh.geometry;
+
+  // CREATE OUR DOG EARS:
+
+  // let's begin by creating a loading manager that will allow us to
+  // have more control over the three parts of our dog model
+  const loadingManager = new THREE.LoadingManager();
+
+  const loaderEars = new THREE.BufferGeometryLoader(loadingManager);
+
+  loaderEars.load(
+    './models/dog/dog_ears.json',
+    function (geometry) {
+      const mat = new THREE.FlexMaterial({
+        map: new THREE.TextureLoader().load('./models/dog/texture_ears.jpg'),
+        flexMap: new THREE.TextureLoader().load('./models/dog/flex_ears_256.jpg'),
+        alphaMap: new THREE.TextureLoader().load('./models/dog/alpha_ears_256.jpg'),
+        transparent: true,
+        opacity: 1,
+        bumpMap: new THREE.TextureLoader().load('./models/dog/normal_ears.jpg'),
+        bumpScale: 0.0075,
+        shininess: 1.5,
+        specular: 0xffffff,
+      });
+
+      EARMESH = new THREE.Mesh(geometry, mat);
+      EARMESH.scale.multiplyScalar(0.025);
+      EARMESH.position.setY(-0.3);
+      EARMESH.frustumCulled = false;
+      EARMESH.renderOrder = 10000;
+      EARMESH.material.opacity.value = 1;
+    }
+  );
+  // CREATE OUR DOG NOSE
+  const loaderNose = new THREE.BufferGeometryLoader(loadingManager);
+
+  loaderNose.load(
+    './models/dog/dog_nose.json',
+    function (geometry) {
+      const mat = new THREE.MeshPhongMaterial({
+        map: new THREE.TextureLoader().load('./models/dog/texture_nose.jpg'),
+        shininess: 1.5,
+        specular: 0xffffff,
+        bumpMap: new THREE.TextureLoader().load('./models/dog/normal_nose.jpg'),
+        bumpScale: 0.005
+      });
+
+      NOSEMESH = new THREE.Mesh(geometry, mat);
+      NOSEMESH.scale.multiplyScalar(0.018);
+      NOSEMESH.position.setY(-0.05);
+      NOSEMESH.position.setZ(0.15);
+      NOSEMESH.frustumCulled = false;
+      NOSEMESH.renderOrder = 10000;
+    }
+  );
+
+  // CREATE OUR DOG TONGUE
+  const loaderTongue = new THREE.JSONLoader(loadingManager);
+
+  loaderTongue.load(
+    'models/dog/dog_tongue.json',
+    function (geometry) {
+      geometry.computeMorphNormals();
+      const mat = new THREE.FlexMaterial({
+        map: new THREE.TextureLoader().load('./models/dog/dog_tongue.jpg'),
+        flexMap: new THREE.TextureLoader().load('./models/dog/flex_tongue_256.png'),
+        alphaMap: new THREE.TextureLoader().load('./models/dog/tongue_alpha_256.jpg'),
+        transparent: true,
+        morphTargets: true,
+        opacity: 1
+      });
+
+      TONGUEMESH = new THREE.Mesh(geometry, mat);
+      TONGUEMESH.material.opacity.value = 0;
+
+      TONGUEMESH.scale.multiplyScalar(2);
+      TONGUEMESH.position.setY(-0.28);
+
+      TONGUEMESH.frustumCulled = false;
+      TONGUEMESH.visible = false;
+
+      if (!MIXER) {
+        // the mixer is declared globally so we can use it in the THREE renderer
+        MIXER = new THREE.AnimationMixer(TONGUEMESH);
+        const clips = TONGUEMESH.geometry.animations;
+
+        const clip = clips[0];
+
+        ACTION = MIXER.clipAction(clip);
+        ACTION.noLoop = true;
+
+        ACTION.play();
+      }
+    }
+  );
+
+  loadingManager.onLoad = () => {
+    DOGOBJ3D.add(EARMESH);
+    DOGOBJ3D.add(NOSEMESH);
+    DOGOBJ3D.add(TONGUEMESH);
+
+    addDragEventListener(DOGOBJ3D);
+
+    threeStuffs.faceObject.add(DOGOBJ3D);
+
+    ISLOADED = true;
+  }
+
+  // CREATE AN AMBIENT LIGHT
+  const ambient = new THREE.AmbientLight(0xffffff, 0.8);
+  threeStuffs.scene.add(ambient);
+
+  // CREAT A DIRECTIONALLIGHT
+  const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
+  dirLight.position.set(100, 1000, 1000);
+  threeStuffs.scene.add(dirLight);
+
+  // CREATE THE CAMERA
+  THREECAMERA = JeelizThreeHelper.create_camera();
+ 
+  threeStuffs.scene.add(FRAMEOBJ3D);
+
+  // Add filter
+  applyFilter();
+} // end init_threeScene()
+
+function animateTongue (mesh, isReverse) {
+  mesh.visible = true;
+
+  if (isReverse) {
+    ACTION.timescale = -1;
+    ACTION.paused = false;
+
+    setTimeout(() => {
+      ACTION.paused = true;
+
+      ISOPAQUE = false;
+      ISTONGUEOUT = false;
+      ISANIMATING = false;
+      ISANIMATIONOVER = true;
+
+
+      new TWEEN.Tween(mesh.material.opacity)
+        .to({ value: 0 }, 150)
+        .start();
+    }, 150);
+  } else {
+    ACTION.timescale = 1;
+    ACTION.reset();
+    ACTION.paused = false;
+
+    new TWEEN.Tween(mesh.material.opacity)
+      .to({ value: 1 }, 100)
+      .onComplete(() => {
+        ISOPAQUE = true;
+        setTimeout(() => {
+          ACTION.paused = true;
+          ISANIMATING = false;
+          ISTONGUEOUT = true;
+          ISANIMATIONOVER = true;
+        }, 150);
+      })
+      .start();
+  }
+}
+
+// Entry point: launched by body.onload()
+function main(){
+  DOGOBJ3D = new THREE.Object3D();
+  FRAMEOBJ3D = new THREE.Object3D();
+
+  JeelizResizer.size_canvas({
+    canvasId: 'jeeFaceFilterCanvas',
+    callback: function(isError, bestVideoSettings){
+      init_faceFilter(bestVideoSettings);
+    }
+  });
+}
+
+function init_faceFilter(videoSettings){
+  JEELIZFACEFILTER.init({
+    canvasId: 'jeeFaceFilterCanvas',
+    NNCPath: '../../../neuralNets/', // root of NN_DEFAULT.json file
+    videoSettings: videoSettings,
+    callbackReady: function (errCode, spec) {
+      if (errCode) {
+        console.log('AN ERROR HAPPENS. SORRY BRO :( . ERR =', errCode);
+        return;
+      }
+
+      console.log('INFO: JEELIZFACEFILTER IS READY');
+      init_threeScene(spec);
+    }, // end callbackReady()
+
+    // called at each render iteration (drawing loop)
+    callbackTrack: function (detectState) {
+      ISDETECTED = JeelizThreeHelper.get_isDetected();
+
+      if (ISDETECTED) {
+        const _quat = new THREE.Quaternion();
+        const _eul = new THREE.Euler();
+        _eul.setFromQuaternion(_quat);
+
+        // flex ears material:
+        if (EARMESH && EARMESH.material.set_amortized){
+          EARMESH.material.set_amortized(
+            EARMESH.getWorldPosition(new THREE.Vector3(0,0,0)),
+            EARMESH.getWorldScale(new THREE.Vector3(0,0,0)),
+            EARMESH.getWorldQuaternion(_eul),
+            false,
+            0.1
+          );
+        }
+
+        if (TONGUEMESH && TONGUEMESH.material.set_amortized){
+          TONGUEMESH.material.set_amortized(
+            TONGUEMESH.getWorldPosition(new THREE.Vector3(0,0,0)),
+            TONGUEMESH.getWorldScale(new THREE.Vector3(0,0,0)),
+            TONGUEMESH.getWorldQuaternion(_eul),
+            false,
+            0.3
+          );
+        }
+
+        if (detectState.expressions[0] >= 0.85 && !ISOVERTHRESHOLD) {
+          ISOVERTHRESHOLD = true;
+          ISUNDERTRESHOLD = false;
+          ISANIMATIONOVER = false;
+        }
+        if (detectState.expressions[0] <= 0.1 && !ISUNDERTRESHOLD) {
+          ISOVERTHRESHOLD = false;
+          ISUNDERTRESHOLD = true;
+          ISANIMATIONOVER = false;
+        }
+
+        if (ISLOADED && ISOVERTHRESHOLD && !ISANIMATING && !ISANIMATIONOVER) {
+          if (!ISTONGUEOUT) {
+            ISANIMATING = true;
+            animateTongue(TONGUEMESH);
+          } else {
+            ISANIMATING = true;
+            animateTongue(TONGUEMESH, true);
+          }
+        }
+      }
+
+      TWEEN.update();
+
+      // Update the mixer on each frame:
+      if (ISOPAQUE) {
+        MIXER.update(0.16);
+      }
+
+      JeelizThreeHelper.render(detectState, THREECAMERA);
+    } // end callbackTrack()
+  }); // end JEELIZFACEFILTER.init call
+}
+

filters/readme.md

@@ -0,0 +1,3 @@
+Some of the code in this folder is based on the sample code made available from Jeeliz;
+Apache-2.0 License
+https://github.com/jeeliz/jeelizFaceFilter/blob/master/LICENSE

filters/sample.js

@@ -0,0 +1,65 @@
+function effectsEngine(){
+	console.log('LOADED SAMPLE');
+	function loadScript(url, callback=false){
+		var script = document.createElement('script');
+		script.type = 'text/javascript';
+		script.src = url;
+		script.onload = function(){this.remove();if(callback){callback();}}
+		document.head.appendChild(script);
+		
+	}
+
+	loadScript("./thirdparty/jeeliz/jeelizFaceFilter.js", 
+		function(){
+			loadScript("./thirdparty/jeeliz/helpers/JeelizCanvas2DHelper.js");
+		}
+	);
+
+	function main(){ // entry point
+		console.log(".");
+		if (session.canvasSource && session.canvasSource.videoWidth && session.canvasSource.videoHeight && session.canvasWebGL){
+			if (session.canvasWebGL && !(document.getElementById("effectsCanvasTarget"))){
+				session.canvasWebGL.id = "effectsCanvasTarget";
+				session.canvasWebGL.style.position="fixed";
+				session.canvasWebGL.style.top= "-9999px";
+				session.canvasWebGL.style.left= "-9999px";
+				document.body.appendChild(session.canvasWebGL);
+			}
+			start(JEELIZFACEFILTER, "effectsCanvasTarget", session.canvasSource, 'yellow');
+		} else {
+			setTimeout(main, 500);
+		}
+	}
+
+	function start(jeeFaceFilterAPIInstance, canvasId, videoElement, borderColor){
+		let cvd = null; // return of Canvas2DDisplay
+
+		jeeFaceFilterAPIInstance.init({
+			canvasId: canvasId,
+			videoSettings: {
+				videoElement: videoElement
+			},
+			NNCPath: './thirdparty/jeeliz/neuralNets/', // root of NN_DEFAULT.json file
+			callbackReady: function(errCode, spec){
+				if (errCode){
+					console.log('AN ERROR HAPPENS. SORRY BRO :( . ERR =', errCode);
+					return;
+				}
+				console.log('INFO: JEELIZFACEFILTER IS READY');
+				cvd = JeelizCanvas2DHelper(spec);
+				cvd.ctx.strokeStyle = borderColor;
+			},
+			callbackTrack: function(detectState){ // drawing loop
+				if (detectState.detected>0.6){
+					// draw a border around the face:
+					const faceCoo = cvd.getCoordinates(detectState);
+					cvd.ctx.clearRect(0,0,cvd.canvas.width, cvd.canvas.height);
+					cvd.ctx.strokeRect(faceCoo.x, faceCoo.y, faceCoo.w, faceCoo.h);
+					cvd.update_canvasTexture();
+				}
+			  cvd.draw();
+			}
+		});
+	}
+	main();
+};

fr.json

@@ -0,0 +1,425 @@
+{
+  "titles": {
+    "toggle-the-chat": "Réduire le tchat",
+    "mute-the-speaker": "Mettre le haut parleur en sourdine",
+    "mute-the-mic": "Mettre le micro en sourdine",
+    "disable-the-camera": "Désactiver la caméra",
+    "settings": "Paramètres",
+    "hangup-the-call": "Raccrocher",
+    "show-help-info": "Montrer l'aide",
+    "language-options": "Options de langue",
+    "tip-hold-ctrl-command-to-select-multiple": "conseil : Maintenir CTRL (ou command) pour sélectionner plusieurs",
+    "ideal-for-1080p60-gaming-if-your-computer-and-upload-are-up-for-it": "Idéal pour le format gaming 1080p60 si votre ordinateur le permet",
+    "better-video-compression-and-quality-at-the-cost-of-increased-cpu-encoding-load": "Meilleure compression et qualité vidéo en contrepartie d'un chargement d'encodage CPU plus long",
+    "disable-digital-audio-effects-and-increase-audio-bitrate": "Désactiver les effets audio et augmenter le débit audio",
+    "the-guest-will-not-have-a-choice-over-audio-options": "L'invité ne pourra pas modifier les paramètres audio",
+    "the-guest-will-only-be-able-to-select-their-webcam-as-an-option": "L'invité pourra uniquement modifier sa caméra",
+    "hold-ctrl-and-the-mouse-wheel-to-zoom-in-and-out-remotely-of-compatible-video-streams": "Maintenir CTRL (ou command) et rouler la molette de la souris pour effectuer un zoom avant et arrière à distance sur les flux vidéo compatibles",
+    "add-a-password-to-make-the-stream-inaccessible-to-those-without-the-password": "Ajouter un mot de passe pour que le flux vidéo ne soit pas accessible au personne n'ayant pas le mot de passe",
+    "add-the-guest-to-a-group-chat-room-it-will-be-created-automatically-if-needed-": "Ajouter l'invité à une salle de discussion en groupe; elle sera créée automatiquement si nécessaire.",
+    "customize-the-room-settings-for-this-guest": "Personnaliser les paramètres de la salle pour cet invité",
+    "hold-ctrl-or-cmd-to-select-multiple-files": "Maintenir CTRL (ou command) pour sélectionner plusieurs fichiers à la fois",
+    "enter-an-https-url": "Saisir une URL en HTTPS",
+    "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-": "Ajouter cette vidéo à n'importe quel flux '&scene=1'",
+    "forward-user-to-another-room-they-can-always-return-": "Transférer l'utilisateur vers une autre salle. Il pourra toujours revenir par la suite.",
+    "start-recording-this-stream-experimental-views": "Commencer à enregistrer ce flux. *experimental*' views",
+    "force-the-user-to-disconnect-they-can-always-reconnect-": "Forcer la déconnexion de l'utilisateur. Il pourra toujours se reconnecter par la suite.",
+    "change-this-audio-s-volume-in-all-remote-scene-views": "Modifier le volume de l'audio sur l'ensemble des flux '&scene' views",
+    "remotely-mute-this-audio-in-all-remote-scene-views": "Mettre en sourdine l'audio sur l'ensemble des flux '&scene' views",
+    "disable-video-preview": "Désactiver l'aperçu vidéo",
+    "low-quality-preview": "Aperçu faible définition",
+    "high-quality-preview": "Aperçu haute définition",
+    "send-direct-message": "Envoyer un message direct",
+    "advanced-settings-and-remote-control": "Paramètres avancés et contrôle à distance",
+    "toggle-voice-chat-with-this-guest": "Basculer le tchat vocal pour cet utilisateur",
+    "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",
+    "create-reusable-invite": "Create Reusable Invite",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "toggle-solo-voice-chat": "Toggle Solo Voice Chat",
+    "add-to-scene-2": "Add to Scene 2",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "share-a-website-as-an-embedded-iframe": "Share a website as an embedded iFRAME",
+    "room-settings": "Room Settings",
+    "your-audio-and-video-settings": "Your audio and video Settings",
+    "you-can-also-enable-the-director-s-video-output-afterwards-by-clicking-the-setting-s-button": "You can also enable the director`s Video Output afterwards by clicking the Setting`s button",
+    "allow-for-remote-stat-monitoring-via-the-monitoring-tool": "Allow for remote stat monitoring via the monitoring tool",
+    "the-guest-will-be-asked-if-they-want-to-reload-the-previous-link-when-revisiting": "The guest will be asked if they want to reload the previous link when revisiting",
+    "the-guest-s-self-video-preview-will-appear-tiny-in-the-top-right": "The guest's self-video preview will appear tiny in the top right",
+    "videos-use-an-animated-transition-when-being-remixed": "Videos use an animated transition when being remixed",
+    "show-some-prep-suggestions-to-the-guests-on-connect": "Show some prep suggestions to the guests on connect",
+    "set-the-background-color-to-bright-green": "Set the background color to bright green",
+    "fade-videos-in-over-500ms": "Fade videos in over 500ms",
+    "add-a-10px-margin-around-all-video-elements": "Add a 10px margin around all video elements",
+    "playback-the-video-with-mono-channel-audio": "Playback the video with mono-channel audio",
+    "have-the-videos-fit-their-respective-areas-even-if-it-means-cropping-a-bit": "Have the videos fit their respective areas, even if it means cropping a bit",
+    "have-videos-be-aligned-with-sizing-designed-for-vertical-video": "Have videos be aligned with sizing designed for vertical video",
+    "copy-this-stream-id-to-the-clipboard": "Copy this Stream ID to the clipboard",
+    "click-here-to-edit-the-label-for-this-stream-changes-will-propagate-to-all-viewers-of-this-stream": "Click here to edit the label for this stream. Changes will propagate to all viewers of this stream",
+    "this-will-ask-the-remote-guest-for-permission-to-change": "This will ask the remote guest for permission to change",
+    "a-direct-solo-view-of-the-video-audio-stream-with-nothing-else-its-audio-can-be-remotely-controlled-from-here": "A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here",
+    "this-guest-raised-their-hand-click-this-to-clear-notification-": "This guest raised their hand. Click this to clear notification.",
+    "increase-this-at-your-peril-changes-the-total-inbound-video-bitrate-per-guest-mobile-devices-excluded-webp-mode-also-excluded-": "Increase this at your peril. Changes the total inbound video bitrate per guest; mobile devices excluded. Webp-mode also excluded.",
+    "hide-this-window": "Hide this window",
+    "cycle-the-cameras": "Cycle the Cameras",
+    "have-screen-shares-stream-id-s-use-a-predictable-prefixed-value-instead-of-a-random-one-": "Have screen-shares stream ID's use a predictable prefixed value instead of a random one.",
+    "toggle-solo-voice-chat-or-hold-ctrl-cmd-when-selecting-to-make-it-two-way-private-": "Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private.",
+    "transfer-any-file-to-the-group": "Transfer any file to the group",
+    "transfer-any-file": "Transfer any file",
+    "the-camera-will-load-in-a-default-safe-mode-that-may-work-if-other-modes-fail-": "The camera will load in a default safe-mode that may work if other modes fail.",
+    "disable-animated-transitions-during-video-mixing": "Disable animated transitions during video mixing",
+    "allow-the-guest-to-select-a-file-to-upload-to-the-director-once-shared-it-will-show-in-the-chat-as-a-download-link-": "Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link.",
+    "set-a-countdown-timer-that-this-guest-sees": "Set a countdown timer that this guest sees",
+    "enter-a-room-name-to-quick-join": "Enter a room name to quick join"
+  },
+  "innerHTML": {
+    "logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
+    "copy-this-url": "Copiez cette URL dans un OBS \"Browser Source\"",
+    "you-are-in-the-control-center": "Vous êtes dans le centre de contrôle de la pièce",
+    "joining-room": "Vous rejoignez la salle",
+    "add-group-chat": "Conversation de groupe",
+    "rooms-allow-for": "Les salles permettent une conversation de groupe simplifiée et la gestion avancée de plusieurs flux à la fois.",
+    "room-name": "Nom de la salle",
+    "password-input-field": "Mot de passe",
+    "enter-the-rooms-control": "Entrez dans le centre de contrôle de la pièce",
+    "show-tips": "Montrez-moi quelques conseils ...",
+    "added-notes": "\n\t\t\t\t<u><i>Added Notes:</i></u>\n\t\t\t\t<li>N'importe qui peut entrer dans une pièce s'il en connaît le nom, alors gardez-le unique</li>\n\t\t\t\t<li>Il n'est pas conseillé d'avoir plus de quatre (4) personnes dans une pièce pour des raisons de performances, mais cela dépend de votre matériel.</li>\n\t\t\t\t<li>Les appareils iOS sont limités à des groupes de deux (2) personnes maximum. Il s'agit d'une limitation matérielle.</li>\n\t\t\t\t\n\t\t\t\t",
+    "back": "Retour",
+    "add-your-camera": "Ajoutez votre caméra à OBS",
+    "ask-for-permissions": "Autoriser l'accès à la caméra / au micro",
+    "waiting-for-camera": "Chargement de la caméra",
+    "video-source": "Source vidéo",
+    "max-resolution": "Résolution max.",
+    "balanced": "Équilibré",
+    "smooth-cool": "Lisse et frais",
+    "select-audio-source": "Sélectionner la source audio :  \n\t\t\t\t\t",
+    "no-audio": "Pas de son",
+    "select-output-source": "Sélectionner la sortie audio ",
+    "remote-screenshare-obs": "Partage d'écran à distance dans OBS",
+    "note-share-audio": "\n\t\t\t\t\t<b>note</b>: N'oubliez pas de cliquer sur Partager l'audio dans Chrome.<br>(Firefox ne prend pas en charge le partage audio.)",
+    "select-screen-to-share": "Choisir l'écran à partager",
+    "audio-sources": "Sources audio",
+    "create-reusable-invite": "Créer une invitation réutilisable",
+    "here-you-can-pre-generate": "Ici, vous pouvez pré-générer un lien de source de navigateur réutilisable et un lien d'invitation d'invité associé.",
+    "generate-invite-link": "GÉNÉRER LE LIEN D'INVITATION",
+    "advanced-paramaters": "Paramètres avancés",
+    "unlock-video-bitrate": "Déverrouiller le débit vidéo (20 Mbps)",
+    "force-vp9-video-codec": "Forcer le codec vidéo VP9",
+    "enable-stereo-and-pro": "Activer l'audio stéréo et Pro HD",
+    "video-resolution": "Video Resolution: ",
+    "hide-mic-selection": "Forcer l'utilisation du micro par défaut",
+    "hide-screen-share": "Masquer les options de partage d'écran",
+    "allow-remote-control": "Contrôle à distance du zoom de la caméra (android)",
+    "add-a-password-to-stream": " Ajouter un mot de passe:",
+    "add-the-guest-to-a-room": " Ajouter l'invité à une salle:",
+    "invite-group-chat-type": "Cet invité peut:",
+    "can-see-and-hear": "Peut voir et entendre le tchat de groupe",
+    "can-hear-only": "Peut seulement entendre le tchat de groupe",
+    "cant-see-or-hear": "Ne peut ni entendre ni voir le tchat de groupe",
+    "share-local-video-file": "Partager un fichier média",
+    "share-website-iframe": "Partager site internet",
+    "run-a-speed-test": "Exécuter un test de vitesse",
+    "read-the-guides": "Parcourir les guides",
+    "info-blob": "\n\t\t\t\t\t\t<h2>Qu'est-ce que OBS.Ninja</h2><br>\n\t\t\t\t\t\t<li>100% <b> gratuit </b>; aucun téléchargement; aucune collecte de données personnelles; pas de connexion</li>\n\t\t\t\t\t\t<li>Importez des vidéos de votre smartphone, ordinateur portable, ordinateur ou de vos amis directement dans votre flux vidéo OBS</li>\n\t\t\t\t\t\t<li>Nous utilisons une technologie de transfert Peer-to-Peer de pointe qui offre une confidentialité et une latence ultra-faible</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\">Démonstration ici</a> </li>\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t<i>Découvrez le <a href=\"https://www.reddit.com/r/OBSNinja/\">sub-reddit</a> <i class=\"fa fa-reddit-alien\" aria-hidden=\"true\"></i> pour de l'aide et des informations avancées.</i></h3>",
+    "add-to-scene": "Ajouter à la scène",
+    "forward-to-room": "Transférer",
+    "record": "Enregistrer",
+    "disconnect-guest": "Raccrocher",
+    "mute": "Mettre en sourdine",
+    "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",
+    "open-in-new-tab": "Ouvrir dans un nouvel onglet",
+    "copy-to-clipboard": "Copier dans le presse-papier",
+    "click-for-quick-room-overview": "❔ Cliquez ici pour un aperçu rapide et de l'aide",
+    "push-to-talk-enable": "🔊 Permettre à l'administrateur d'utiliser le push-to-talk",
+    "welcome-to-control-room": "Welcome. This is the control-room for the group-chat. There are different things you can use this room for:<br><br>\t<li>You can host a group chat with friends using a room. Share the blue link to invite guests who will join the chat automatically.</li>\t<li>A group room can handle around 4 to 30 guests, depending on numerous factors, including CPU and available bandwidth of all guests in the room.</li>\t<li>Solo-views of each video are offered under videos as they load. These can be used within an OBS Browser Source.</li>\t<li>You can use the auto-mixing Group Scene, the green link, to auto arrange multiple videos for you in OBS.</li>\t<li>You can use this control room to record isolated video or audio streams, but it is an experimental feature still.</li>\t<li>Videos in the Director's room will be of low quality on purpose; to save bandwidth/CPU</li>\t<li>Guest's in the room will see each other's videos at a very limited quality to conserve bandwidth/CPU.</li>\t<li>OBS will see a guest's video in high-quality; the default video bitrate is 2500kbps.</li>\t<br>\tAs guests join, their videos will appear below. You can bring their video streams into OBS as solo-scenes or you can add them to the Group Scene.\t<br>The Group Scene auto-mixes videos that have been added to the group scene. Please note that the Auto-Mixer requires guests be manually added to it for them to appear in it; they are not added automatically.<br><br>Apple mobile devices, such as iPhones and iPads, do not fully support Video Group Chat. This is a hardware constraint.<br><br>\tFor advanced options and parameters, <a href=\"https://github.com/steveseguin/obsninja/wiki/Guides-and-How-to's#urlparameters\">see the 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\tWelcome to OBS.Ninja! You can send text messages directly to connected peers from here.\n\t\t\t\t",
+    "names-and-labels-coming-soon": "\n\t\t\t\t\tNames identifying connected peers will be a feature in an upcoming release.\n\t\t\t\t",
+    "send-chat": "Send",
+    "available-languages": "Options de langues disponibles :",
+    "add-more-here": "Ajouter ici!",
+    "waiting-for-camera-to-load": "Chargement de votre caméra",
+    "start": "REJOINDRE",
+    "share-your-mic": "Partager votre micro",
+    "share-your-camera": "Partager votre caméra",
+    "share-your-screen": "Partager votre écran",
+    "join-room-with-mic": "Rejoindre la salle avec votre micro",
+    "share-screen-with-room": "Partager votre écran avec la salle",
+    "join-room-with-camera": "Rejoindre la salle avec votre caméra",
+    "click-start-to-join": "Appuyer sur rejoindre pour commencer",
+    "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",
+    "remote-monitoring": "Remote Monitoring",
+    "invite-saved-to-cookie": "Invite saved to cookie",
+    "fade-videos-in": "Fade videos in",
+    "show-guest-tips": "Show guest setup tips",
+    "green-background": "Green background",
+    "add-margin": "Add margin to videos",
+    "fill-video-space": "Crop video to fit",
+    "vertical-aspect-ratio": "Vertical video mode",
+    "add-to-scene2": "add to scene 2",
+    "user-raised-hand": "Lower Raised Hand",
+    "unmute": "un-mute",
+    "unhide-guest": "un-hide",
+    "undeafen": "un-deafen",
+    "unblind": "un-blind",
+    "close": "close",
+    "send-message": "send message<s pan=\"\"> </s>",
+    "record-director-local": " Record",
+    "only-director-can-hear-you": "Only the director can hear you currently.",
+    "director-muted-you": "The director has muted you.",
+    "application-audio-capture": "For application-specific audio capture, <a href=\"https://docs.vdo.ninja/audio\" style=\"color: #007AC8;\">see here</a>",
+    "animate-mixing": "Animate mixing",
+    "prefix-screenshare": "Prefix screenshare IDs",
+    "privacy-disabled": "Privacy warning: The director will be able to remotely access your camera and microphone if you continue.",
+    "face-mesh": "Face mesh (slow load)",
+    "anonymous-mask": "Anonymous mask",
+    "dog-face": "Dog ears and nose",
+    "compatibility-mode": "Compatibility mode",
+    "disable-animated-mixing": "Disable animations",
+    "request-upload": " Request File",
+    "create-timer": "Create Timer",
+    "edit-url": "Edit URL manually",
+    "mirror-video": "Mirror",
+    "toggle-control-video": "Toggle control bar",
+    "picture-in-picture": "Picture-in-picture",
+    "chrome-cast": "Cast..",
+    "join-room": "Join room",
+    "waiting-for-mic-to-load": "Waiting for mic to load"
+  },
+  "placeholders": {
+    "join-by-room-name-here": "Rejoindre via le nom de salle ici",
+    "enter-a-room-name-here": "Saisir un nom de salle ici",
+    "optional-room-password-here": "Mot de passe (optionnel) pour la salle ici",
+    "give-this-media-source-a-name-optional-": "Donner un nom à cette source média (optionnel)",
+    "add-an-optional-password": "Ajouter un mot de passe optionnel",
+    "enter-room-name-here": "Saisir le nom de la salle ici",
+    "enter-chat-message-to-send-here": "Saisir un message ici pour l'envoyer dans le tchat",
+    "optional": "optional",
+    "enter-the-room-name-here": "Enter the room name here",
+    "enter-the-room-password-here": "Enter the room password here",
+    "enter-your-message-here": "Enter your message here"
+  },
+  "miscellaneous": {
+    "start": "START",
+    "new-display-name": "Enter a new Display Name for this stream",
+    "submit-error-report": "Press OK to submit any error logs to VDO.Ninja. Error logs may contain private information.",
+    "director-redirect-1": "The director wishes to redirect you to the URL: ",
+    "director-redirect-2": "\n\nPress OK to be redirected.",
+    "add-a-label": "Add a label",
+    "audio-processing-disabled": "Audio processing is disabled with this guest. Can't mute or change volume",
+    "not-the-director": "<font color='red'>You are not the director of this room.  You will have limited to no control.  You can try claiming the room after the first director leaves.</font>",
+    "room-is-claimed": "The room is already claimed by someone else.\n\nOnly the first person to join a room is the assigned director.\n\nRefresh after the first director leaves to claim.",
+    "room-is-claimed-codirector": "The room is already claimed by someone else.\n\nTrying to join as a co-director...",
+    "streamid-already-published": "The stream ID you are publishing to is already in use.\n\nPlease try with a different invite link or refresh to retry again.\n\nYou will now be disconnected.",
+    "director": "Director",
+    "unknown-user": "Unknown User",
+    "room-test-not-good": "The room name 'test' is very commonly used and may not be secure.\n\nAre you sure you wish to proceed?",
+    "load-previous-session": "Would you like to load your previous session's settings?",
+    "enter-password": "Please enter the password below: \n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "enter-password-2": "Please enter the password below: \n\n(Note: Passwords are case-sensitive.)",
+    "enter-director-password": "Please enter the director's password:\n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "password-incorrect": "The password was incorrect.\n\nRefresh and try again.",
+    "enter-display-name": "Please enter your display name:",
+    "enter-new-display-name": "Enter a new Display Name for this stream",
+    "what-bitrate": "What bitrate would you like to record at? (kbps)",
+    "enter-website": "Enter a website URL to share",
+    "press-ok-to-record": "Press OK to start recording. Press again to stop and download.\n\nWarning: Keep this browser tab active to continue recording.\n\nYou can change the default video bitrate if desired below (kbps)",
+    "no-streamID-provided": "No streamID was provided; one will be generated randomily.\n\nStream ID: ",
+    "alphanumeric-only": "Info: Only AlphaNumeric characters should be used for the stream ID.\n\nThe offending characters have been replaced by an underscore",
+    "stream-id-too-long": "The Stream ID should be less than 45 alPhaNuMeric characters long.\n\nWe will trim it to length.",
+    "share-with-trusted": "Share only with those you trust",
+    "pass-recommended": "A password is recommended",
+    "insecure-room-name": "Insecure room name.",
+    "allowed-chars": "Allowed chars",
+    "transfer": "transfer",
+    "armed": "armed",
+    "transfer-guest-to-room": "Transfer guests to room:\n\n(Please note rooms must share the same password)",
+    "transfer-guest-to-url": "Transfer guests to new website URL.\n\n(Guests will be prompted to accept)",
+    "change-url": "change URL",
+    "mute-in-scene": "mute in scene",
+    "unmute-guest": "un-mute guest",
+    "undeafen": "un-deafen",
+    "deafen": "deafen guest",
+    "unblind": "un-blind",
+    "blind": "blind guest",
+    "unmute": "un-mute",
+    "mute-guest": "mute guest",
+    "unhide": "unhide guest",
+    "hide-guest": "hide guest",
+    "confirm-disconnect-users": "Are you sure you wish to disconnect these users?",
+    "confirm-disconnect-user": "Are you sure you wish to disconnect this user?"
+  }
+}

iframe.html

@@ -0,0 +1,628 @@
+<html>
+<head><title>IFRAME Example</title>
+<style>
+body{
+	padding:0;
+	margin:0;
+	background-color: rgb(222,242,253);
+}
+iframe {
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+	margin:10px;
+	width:100%;
+	height:520px;
+}
+#viewlink {
+	width:400px;
+}
+#container {
+	display:block;
+	padding:0px;
+}
+input{
+	padding:5px;
+	margin:5px;
+}
+button{
+	padding:5px;
+	margin:5px;
+}
+</style>
+<script>
+
+function loadIframe(){  // this is pretty important if you want to avoid camera permission popup problems.  You can also call it automatically via: <body onload=>loadIframe();"> , but don't call it before the page loads.
+	
+	var iframe = document.createElement("iframe");
+	var iframeContainer = document.createElement("div");
+	var iframesrc = document.getElementById("viewlink").value;
+	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+
+	if (iframesrc==""){
+		iframesrc="./";
+	}
+
+	if (document.getElementById("clean").checked){
+		if (iframesrc.includes("?")){
+			iframesrc+='&';
+		} else {
+			iframesrc+='?';
+		}
+		iframesrc+="cleanoutput";
+	}
+	if (document.getElementById("transparent").checked){
+		if (iframesrc.includes("?")){
+			iframesrc+='&';
+		} else {
+			iframesrc+='?';
+		}
+		iframesrc+="transparent";
+	}
+	
+	if (document.getElementById("hidemenu").checked){
+		if (iframesrc.includes("?")){
+			iframesrc+='&';
+		} else {
+			iframesrc+='?';
+		}
+		iframesrc+="hidemenu";
+	}
+	
+	iframe.src = iframesrc;
+	
+	iframeContainer.appendChild(iframe);
+	
+	document.getElementById("container").appendChild(iframeContainer);
+	
+	
+	var h3 = document.createElement("h3");
+	h3.innerText = "The following commands are exclusive to the IFRAME API.";
+	iframeContainer.appendChild(h3);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Mute Speaker";
+	button.onclick = function(){iframe.contentWindow.postMessage({"mute":true}, '*');};  // "speaker" also works in the same way.
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Un-Mute Speaker";
+	button.onclick = function(){iframe.contentWindow.postMessage({"mute":false}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Toggle Speaker";
+	button.onclick = function(){iframe.contentWindow.postMessage({"mute":"toggle"}, '*');}; // open to a better suggestion here.
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Mute Mic";
+	button.onclick = function(){iframe.contentWindow.postMessage({"mic":false}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Un-Mute Mic";
+	button.onclick = function(){iframe.contentWindow.postMessage({"mic":true}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Toggle Mic";
+	button.onclick = function(){iframe.contentWindow.postMessage({"mic":"toggle"}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Mute Camera";
+	button.onclick = function(){iframe.contentWindow.postMessage({"camera":false}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Unmute Camera";
+	button.onclick = function(){iframe.contentWindow.postMessage({"camera":true}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Toggle Camera";
+	button.onclick = function(){iframe.contentWindow.postMessage({"camera":"toggle"}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Disconnect";
+	button.onclick = function(){iframe.contentWindow.postMessage({"close":true}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Low Bitrate";
+	button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":30}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "High Bitrate";
+	button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":5000}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Default Bitrate";
+	button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":-1}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Reload";
+	button.onclick = function(){iframe.contentWindow.postMessage({"reload":true}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "50% Volume";
+	button.onclick = function(){iframe.contentWindow.postMessage({"volume":0.5}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "100% Volume";
+	button.onclick = function(){iframe.contentWindow.postMessage({"volume":1.0}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Pan Left";
+	button.title = "Requires &panning to be added to the view link";
+	button.onclick = function(){iframe.contentWindow.postMessage({"panning":0}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Pan right";
+	button.title = "Requires &panning to be added to the view link";
+	button.onclick = function(){iframe.contentWindow.postMessage({"panning":180}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Pan Center";
+	button.title = "Requires &panning to be added to the view link";
+	button.onclick = function(){iframe.contentWindow.postMessage({"panning":90}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Request Loudness Levels";
+	button.onclick = function(){iframe.contentWindow.postMessage({"getLoudness":true}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Stop Sending Loudness Levels";
+	button.onclick = function(){iframe.contentWindow.postMessage({"getLoudness":false}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Start Recording";
+	button.onclick = function(){iframe.contentWindow.postMessage({"record":true}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Stop Recording";
+	button.onclick = function(){iframe.contentWindow.postMessage({"record":false}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Say Hello";
+	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;}";
+	button.onclick = function(){iframe.contentWindow.postMessage({"style":stylesheet}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "get StreamIDs and labels"; 
+	button.onclick = function(){iframe.contentWindow.postMessage({"getStreamIDs":true}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Start AutoMixer"; 
+	button.onclick = function(){iframe.contentWindow.postMessage({"automixer":true}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Stop AutoMixer"; 
+	button.onclick = function(){iframe.contentWindow.postMessage({"automixer":false}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "ENABLE TALLY LIGHT"; 
+	button.onclick = function(){iframe.contentWindow.postMessage({"sceneState":true}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "STOP TALLY LIGHT"; 
+	button.onclick = function(){iframe.contentWindow.postMessage({"sceneState":false}, '*');};
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Add Target Video"; 
+	button.onclick = function(){iframe.contentWindow.postMessage({"target":"*", "add":true, "settings":{"style":{"width":"640px", "height":"360px", "float":"left", "border":"10px solid red", "display":"block"}}}, '*');}; // target can be a stream ID or * for all.
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Remove Target Video"; 
+	button.onclick = function(){iframe.contentWindow.postMessage({"target":"*",  "remove": true}, '*');};  // target can be a stream ID or * for all.
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "previewWebcam()";
+	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
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "Change Add Camera text";
+	button.onclick = function(){iframe.contentWindow.postMessage({"function":"changeHTML", "target":"add_camera", "value":"NEW CAMERA TEXT"}, '*');};  // change text of add camera button
+	iframeContainer.appendChild(button);
+	
+	var button = document.createElement("button");
+	button.innerHTML = "CLOSE IFRAME";
+	button.onclick = function(){iframeContainer.parentNode.removeChild(iframeContainer);};
+	iframeContainer.appendChild(button);
+	
+	////////////  LISTEN FOR EVENTS
+
+	var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+	var eventer = window[eventMethod];
+	var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+
+	/// If you have a routing system setup, you could have just one global listener for all iframes instead.
+	
+	eventer(messageEvent, function (e) {
+		if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+		
+		if ("stats" in e.data){
+			var outputWindow = document.createElement("div");
+			console.log(e.data.stats);
+			
+			
+			var out = "<br />total_inbound_connections:"+e.data.stats.total_inbound_connections;
+			out += "<br />total_outbound_connections:"+e.data.stats.total_outbound_connections;
+			
+			for (var streamID in e.data.stats.inbound_stats){
+				out += "<br /><br /><b>streamID:</b> "+streamID+"<br />";
+				out += printValues(e.data.stats.inbound_stats[streamID]);
+			}
+			
+			outputWindow.innerHTML = out;
+			iframeContainer.appendChild(outputWindow);
+		}
+		
+		if ("gotChat" in e.data){
+			var outputWindow = document.createElement("div");
+			outputWindow.innerHTML = e.data.gotChat.msg;
+			outputWindow.style.border="1px dotted black";
+			iframeContainer.appendChild(outputWindow);
+		}
+		
+		if ("action" in e.data){
+			var outputWindow = document.createElement("div");
+			outputWindow.innerHTML = "child-page-action: "+e.data.action+"<br />";
+			outputWindow.style.border="1px dotted black";
+			iframeContainer.appendChild(outputWindow);
+		}
+		
+		
+		if ("streamIDs" in e.data){
+			var outputWindow = document.createElement("div");
+			outputWindow.innerHTML = "child-page-action: streamIDs<br />";
+			for (var key in e.data.streamIDs) {
+				outputWindow.innerHTML += "streamID: " +  key + ", label:"+e.data.streamIDs[key] + "\n";          
+			}
+			outputWindow.style.border="1px dotted black";
+			iframeContainer.appendChild(outputWindow);
+		}
+		
+		if ("loudness" in e.data){
+			console.log(e.data);
+			if (document.getElementById("loudness")){
+				outputWindow = document.getElementById("loudness");
+			} else {
+				var outputWindow = document.createElement("div");
+				outputWindow.style.border="1px dotted black";
+				iframeContainer.appendChild(outputWindow);
+				outputWindow.id = "loudness";
+			}
+			outputWindow.innerHTML = "child-page-action: loudness<br />";
+			for (var key in e.data.loudness) {
+				outputWindow.innerHTML += key + " Loudness: " +  e.data.loudness[key] + "\n";          
+			}
+			outputWindow.style.border="1px black";
+			
+		}
+		
+		if ("sensors" in e.data){
+			console.log(e.data);
+			if (document.getElementById("sensors")){
+				outputWindow = document.getElementById("sensors");
+			} else {
+				var outputWindow = document.createElement("div");
+				outputWindow.style.border="1px dotted black";
+				iframeContainer.appendChild(outputWindow);
+				outputWindow.id = "sensors";
+			}
+			outputWindow.innerHTML = "child-page-action: sensors<br /><br />";
+				
+			for (var key in e.data.sensors.lin) {
+				outputWindow.innerHTML += key + " linear: " +  e.data.sensors.lin[key] + "<br />";          
+			}
+			for (var key in e.data.sensors.acc) {
+				outputWindow.innerHTML += key + " acceleration: " +  e.data.sensors.acc[key] + "<br />";         
+			}
+			for (var key in e.data.sensors.gyro) {
+				outputWindow.innerHTML += key + " gyro: " +  e.data.sensors.gyro[key] + "<br />";           
+			}
+			for (var key in e.data.sensors.mag) {
+				outputWindow.innerHTML += key + " magnet: " +  e.data.sensors.mag[key] + "<br />";         
+			}
+			outputWindow.style.border="1px black";
+			
+		}
+	});
+	
+	function loadSelfCommands(){
+		var commands = {}
+		commands.speaker = function(value){sendSelfCommand("speaker",value)};  // "speaker" also works in the same way
+		
+		commands.mic = function(value){sendSelfCommand("mic",value)};
+
+		commands.camera = function(value){sendSelfCommand("camera",value)};
+
+		commands.bitrate = function(value){sendSelfCommand("bitrate",value)};
+
+		commands.volume = function(value){sendSelfCommand("volume",value)};
+
+		commands.record = function(value){sendSelfCommand("record",value)};
+
+		commands.sayHello = function(value){sendSelfCommand("sendChat","Hello")};
+		
+		var target_self = document.body;
+		
+		var hr = document.createElement("hr");
+		target_self.appendChild(hr);
+		
+		var h3 = document.createElement("h3");
+		h3.innerText = "The following commands re-use the  Companion.Ninja HTTP/WSS API, except you can send them via this Iframe interface.";
+		target_self.appendChild(h3);
+		
+		var a = document.createElement("a");
+		a.innerText = "More details of the below IFRAME API details are here: https://github.com/steveseguin/Companion-Ninja#api-commands";
+		a.href = "https://github.com/steveseguin/Companion-Ninja#api-commands";
+		a.target = "_blank";
+		target_self.appendChild(a);
+		
+		var hr = document.createElement("hr");
+		target_self.appendChild(hr);
+		
+
+		for (var k in commands) {
+			
+			var button = document.createElement("button");
+			button.innerHTML = k + ":<br />TRUE"; 
+			button.dataset.command = k;
+			button.onclick = function(){commands[this.dataset.command](true);}
+			target_self.appendChild(button);
+		
+			var button = document.createElement("button");
+			button.innerHTML = k + ":<br />FALSE"; 
+			button.dataset.command = k;
+			button.onclick = function(){commands[this.dataset.command](false);}
+			target_self.appendChild(button);
+			
+		} // list available commands to console
+		
+		commands.reload = function(){sendSelfCommand("reload",true);};
+		
+		commands.hangup = function(){sendSelfCommand("hangup",true);};
+		
+		
+		var button = document.createElement("button");
+		button.innerHTML = k + ":<br />TRUE"; 
+		button.onclick = function(){commands["reload"](true);}
+		target_self.appendChild(button);
+		
+		
+		var button = document.createElement("button");
+		button.innerHTML = k + ":<br />TRUE"; 
+		button.onclick = function(){commands["hangup"](true);}
+		target_self.appendChild(button);
+		
+		return commands;
+			
+	}
+	
+	function loadGuestCommands(guestid, streamID=false){  // this is the same as the Companion API, but can be issued to the IFRAME API
+
+		var container = document.createElement("div");
+		container.id = "guest_"+guestid+"_container";
+		document.body.appendChild(container);
+		
+		var hr = document.createElement("hr");
+		container.appendChild(hr);
+		var h3 = document.createElement("h3");
+		if (streamID){
+			h3.innerHTML = "These target guest with the streamID: <i>"+guestid+ "</i> (if a director)";
+		} else {
+			h3.innerText = "These target the guest in slot "+guestid+ " (if you are director)";
+		}
+		container.appendChild(h3);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "transfer popup";
+		button.onclick = function(){sendGuestCommand(guestid, "forward");};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "transfer to 'room321'";
+		button.onclick = function(){sendGuestCommand(guestid, "forward", 'room321');};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "scene 1";
+		button.onclick = function(){sendGuestCommand(guestid, "addScene");};    /// SCENE 1 or specify a custom scene name as a value
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "mute in scene";
+		button.onclick = function(){sendGuestCommand(guestid, "muteScene");};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "mute everywhere";
+		button.onclick = function(){sendGuestCommand(guestid, "mic");};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "hang up";
+		button.onclick = function(){sendGuestCommand(guestid, "hangup");};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "solo chat";
+		button.onclick = function(){sendGuestCommand(guestid, "soloChat");};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "remote speaker";
+		button.onclick = function(){sendGuestCommand(guestid, "speaker");};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "remote display";
+		button.onclick = function(){sendGuestCommand(guestid, "display");};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "rainbow puke fix";
+		button.onclick = function(){sendGuestCommand(guestid, "forceKeyframe");};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "highlight";
+		button.onclick = function(){sendGuestCommand(guestid, "soloVideo");};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "scene 2";
+		button.onclick = function(){sendGuestCommand(guestid, "addScene", 2);};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "scene 3";
+		button.onclick = function(){sendGuestCommand(guestid, "addScene", 3);};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "scene 4";
+		button.onclick = function(){sendGuestCommand(guestid, "addScene", 4);};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "scene 5";
+		button.onclick = function(){sendGuestCommand(guestid, "addScene", 5);};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "scene 6";
+		button.onclick = function(){sendGuestCommand(guestid, "addScene", 6);};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = " scene 7";
+		button.onclick = function(){sendGuestCommand(guestid, "addScene", 7);};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "scene 8";
+		button.onclick = function(){sendGuestCommand(guestid, "addScene", 8);};  
+		container.appendChild(button);
+		
+		var button = document.createElement("button");
+		button.innerHTML = "scene 'test'";
+		button.onclick = function(){sendGuestCommand(guestid, "addScene", 'test');};   // specifying a custom scene; it needs to be active for this to work..
+		container.appendChild(button);
+		
+		
+		var input = document.createElement("label");
+		input.innerHTML = "mic volume:";
+		container.appendChild(input);
+		var input = document.createElement("input");
+		input.type = "range";
+		input.title = "volume";
+		input.min = 0;
+		input.max = 200;
+		input.value = 100;
+		input.onchange = function(){sendGuestCommand(guestid, "volume", this.value);};  
+		container.appendChild(input);
+			
+	}
+	
+	function sendGuestCommand(target, action, value=null){ // 
+		iframe.contentWindow.postMessage({"target":target, "action":action, "value":value}, '*'); // 
+		//sendMessage(JSON.stringify({"target":target, "action":action, "value":value})); // if using the Companion API..
+	}
+	
+	function sendSelfCommand(action, value=null){
+		iframe.contentWindow.postMessage({"target":null, "action":action, "value":value}, '*');
+		//sendMessage(JSON.stringify({"target":target, "action":action, "value":value})); // if using the Companion API..
+	}
+
+	loadSelfCommands();
+	loadGuestCommands(1);
+	loadGuestCommands(2);
+	loadGuestCommands(3);
+	var randomGuest = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 10);
+	loadGuestCommands(randomGuest, true);
+		
+}
+
+
+function printValues( obj) {
+	var out = "";
+	for (var key in obj) {
+		if (typeof obj[key] === "object") {
+			out +="<br />";
+			out += printValues(obj[key]);   
+		} else {
+			out +="<b>"+key+"</b>: "+obj[key]+"<br />";
+		}
+	}
+	return out;
+}
+		
+		
+</script>
+</head>
+<body>
+
+<input placeholder="Enter an VDO.Ninja View URL here" id="viewlink" />
+<button onclick="loadIframe();">ADD</button>
+<input type="checkbox" id="clean" >Clean Output
+<input type="checkbox" id="transparent">Transparent
+<input type="checkbox" id="hidemenu">Hide Menu
+<div id="container">
+
+</div>
+</body>
+</html>

install.md

@@ -0,0 +1,106 @@
+Deploying this code. A guide. 
+
+### PREFACE
+
+The code is obvious enough already that someone experienced with NGINX webservers or with basic site deployments should have no problem getting things running.
+
+I'm concerned at times that less experienced users will be deploying the code without really understanding why or properly how to.  There are few cases a person needs to deploy any code. Those reasons are:  wanting custom branding; contributing as a developer to the codebase; or deploying a private TURN server.
+
+There may be misconceptions that deploying the website code will make the service faster; it will not. The service is video peer-to-peer based, so deploying webservers servers will not make it faster. Deploying a TURN server may help in some cases, although using a VPN, a cloud VM (for OBS), or disabling any symmetrical firewall will often provide a better end result than a private TURN server.
+
+For those looking for a brand-free experience already with a different domain name, I offer https://rtc.ninja, and as well as other alternate domain names, such as:
+
+- https://invite.cam (via URL obfuscation option)
+- https://ltt.ninja
+- https://rtc.ninja
+- https://vmix.ninja
+- https://auxiliary.live (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 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 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.
+
+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/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 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:
+
+### SETUP
+
+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. 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. 
+```
+sudo apt-get update 
+apt-get install nginx -y
+sudo vi /etc/nginx/sites-available/default
+sudo systemctl restart nginx
+```
+
+An example NGINX config file that "hides" the file extensions is as follows.  Update the file as needed and 
+
+```server {
+        listen 80;
+        listen [::]:80;
+
+        server_name vdo.ninja;
+
+        root /var/www/html/vdo.ninja;
+        index index.html;
+
+
+        location ~ ^/([^/]+)/([^/?]+)$ {
+                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 *;
+        }
+
+        location / {
+                if ($request_uri ~ ^/(.*)\.html$) {
+                        return 302 /$1;
+                }
+                try_files $uri $uri.html $uri/ /index.html;
+                add_header Access-Control-Allow-Origin *;
+        }
+}
+```
+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 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/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 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/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 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.
+
+### Internet-free deployments
+
+For those looking to deploy a completely Internet-free or fully-isolated option, you'll need to deploy your own STUN services and a handshake server as well.
+
+Details on how to deploy your own private STUN server can be Googled online; it's rather out of the scope of this guide's goals though.  As of this writing, VDO.Ninja uses Google's public STUN servers, but most TURN-servers offers STUN server functionality as well; just takes some added configuration. 
+
+Internet-free deployments will also need to deal with private SSL certificates and any DNS secure context issues that may arise. VDO.Ninja relies on SSL for security, but if you can't figure out how to do private SSL issuance, these SSL restrictions can be disabled via the Chrome browser's command-line. VDO.Ninja may complain about the lack of security if you take this approach though.
+
+Finally, there is an experimental handshake server option that lets advanced users use a basic/generic websocket service as a personal handshake server; useful for air-gapped private deployments of the service.  A simple socket server has been developed that can be used as a personal handshake server. Documentation with installation instructions are included here: https://github.com/steveseguin/websocket_server
+
+Just on a side note, support for piesocket.com has also been added as a third-party handshake-server service option, which demonstrates and offers a cheap alternative to a managed hosted alternative of the official handshake service. If using piesocket, you can just do &pie=APKKEY to use that service, without deploying any code or servers yourself. The free tier is quite generous and I have no affiliation with them, but you'll need the Internet to make use of their service.
+
+Regards,
+Steve

it.json

@@ -0,0 +1,425 @@
+{
+  "titles": {
+    "toggle-the-chat": "Attiva o disattiva la chat",
+    "mute-the-speaker": "Muta lo Speaker",
+    "mute-the-mic": "Disattiva il microfono",
+    "disable-the-camera": "Disattiva la Camera",
+    "settings": "Impostazioni",
+    "hangup-the-call": "Riaggancia la chiamata",
+    "show-help-info": "Mostra Info Helo",
+    "language-options": "Opzioni di lingua",
+    "tip-hold-ctrl-command-to-select-multiple": "tip: Tieni premut CTRL (command) per selezionare multipla ",
+    "ideal-for-1080p60-gaming-if-your-computer-and-upload-are-up-for-it": "Ideale per il gioco a 1080p60 , se il tuo computer e upload lo supportano",
+    "better-video-compression-and-quality-at-the-cost-of-increased-cpu-encoding-load": "Migliore compressione e qualità video al costo di un maggiore carico di codifica della CPU ",
+    "disable-digital-audio-effects-and-increase-audio-bitrate": "Disattiva gli effetti audio digitali e aumenta il bitrate audio ",
+    "the-guest-will-not-have-a-choice-over-audio-options": "L'ospite non avrà scelta sulle opzioni audio",
+    "the-guest-will-only-be-able-to-select-their-webcam-as-an-option": "L'ospite potrà solo selezionare la propria webcam come opzione",
+    "hold-ctrl-and-the-mouse-wheel-to-zoom-in-and-out-remotely-of-compatible-video-streams": "Tieni premuto CTRL e la rotellina del mouse per ingrandire e ridurre in remoto i flussi video compatibili ",
+    "add-a-password-to-make-the-stream-inaccessible-to-those-without-the-password": "Aggiungi una password per rendere il flusso inaccessibile a chi non ha la password",
+    "add-the-guest-to-a-group-chat-room-it-will-be-created-automatically-if-needed-": "Aggiungere l'ospite a una chat room di gruppo; verrà creato automaticamente se necessario.",
+    "customize-the-room-settings-for-this-guest": "Personalizza le impostazioni della stanza per questo ospite ",
+    "hold-ctrl-or-cmd-to-select-multiple-files": "Tieni premuto CTRL (or CMD) per selezionare più file",
+    "enter-an-https-url": "Inserisci un URL HTTPS ",
+    "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-": "Aggiungi questo video a una scena in remoto '&scene=1'",
+    "forward-user-to-another-room-they-can-always-return-": "Inoltra l'utente a un'altra stanza. Possono sempre tornare.",
+    "start-recording-this-stream-experimental-views": "Inizia a registrare questo flusso. visualizzazioni *sperimentale*'",
+    "force-the-user-to-disconnect-they-can-always-reconnect-": "Forza l'utente a disconnettersi. Possono sempre riconnettersi.",
+    "change-this-audio-s-volume-in-all-remote-scene-views": "Cambia il volume di questo audio in tutte le scene in remoto  '&scene'",
+    "remotely-mute-this-audio-in-all-remote-scene-views": "Disattiva l'audio in remoto '&scene'",
+    "disable-video-preview": "Disattiva anteprima video",
+    "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",
+    "create-reusable-invite": "Create Reusable Invite",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "toggle-solo-voice-chat": "Toggle Solo Voice Chat",
+    "add-to-scene-2": "Add to Scene 2",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "share-a-website-as-an-embedded-iframe": "Share a website as an embedded iFRAME",
+    "room-settings": "Room Settings",
+    "your-audio-and-video-settings": "Your audio and video Settings",
+    "you-can-also-enable-the-director-s-video-output-afterwards-by-clicking-the-setting-s-button": "You can also enable the director`s Video Output afterwards by clicking the Setting`s button",
+    "allow-for-remote-stat-monitoring-via-the-monitoring-tool": "Allow for remote stat monitoring via the monitoring tool",
+    "the-guest-will-be-asked-if-they-want-to-reload-the-previous-link-when-revisiting": "The guest will be asked if they want to reload the previous link when revisiting",
+    "the-guest-s-self-video-preview-will-appear-tiny-in-the-top-right": "The guest's self-video preview will appear tiny in the top right",
+    "videos-use-an-animated-transition-when-being-remixed": "Videos use an animated transition when being remixed",
+    "show-some-prep-suggestions-to-the-guests-on-connect": "Show some prep suggestions to the guests on connect",
+    "set-the-background-color-to-bright-green": "Set the background color to bright green",
+    "fade-videos-in-over-500ms": "Fade videos in over 500ms",
+    "add-a-10px-margin-around-all-video-elements": "Add a 10px margin around all video elements",
+    "playback-the-video-with-mono-channel-audio": "Playback the video with mono-channel audio",
+    "have-the-videos-fit-their-respective-areas-even-if-it-means-cropping-a-bit": "Have the videos fit their respective areas, even if it means cropping a bit",
+    "have-videos-be-aligned-with-sizing-designed-for-vertical-video": "Have videos be aligned with sizing designed for vertical video",
+    "copy-this-stream-id-to-the-clipboard": "Copy this Stream ID to the clipboard",
+    "click-here-to-edit-the-label-for-this-stream-changes-will-propagate-to-all-viewers-of-this-stream": "Click here to edit the label for this stream. Changes will propagate to all viewers of this stream",
+    "this-will-ask-the-remote-guest-for-permission-to-change": "This will ask the remote guest for permission to change",
+    "a-direct-solo-view-of-the-video-audio-stream-with-nothing-else-its-audio-can-be-remotely-controlled-from-here": "A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here",
+    "this-guest-raised-their-hand-click-this-to-clear-notification-": "This guest raised their hand. Click this to clear notification.",
+    "increase-this-at-your-peril-changes-the-total-inbound-video-bitrate-per-guest-mobile-devices-excluded-webp-mode-also-excluded-": "Increase this at your peril. Changes the total inbound video bitrate per guest; mobile devices excluded. Webp-mode also excluded.",
+    "hide-this-window": "Hide this window",
+    "cycle-the-cameras": "Cycle the Cameras",
+    "have-screen-shares-stream-id-s-use-a-predictable-prefixed-value-instead-of-a-random-one-": "Have screen-shares stream ID's use a predictable prefixed value instead of a random one.",
+    "toggle-solo-voice-chat-or-hold-ctrl-cmd-when-selecting-to-make-it-two-way-private-": "Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private.",
+    "transfer-any-file-to-the-group": "Transfer any file to the group",
+    "transfer-any-file": "Transfer any file",
+    "the-camera-will-load-in-a-default-safe-mode-that-may-work-if-other-modes-fail-": "The camera will load in a default safe-mode that may work if other modes fail.",
+    "disable-animated-transitions-during-video-mixing": "Disable animated transitions during video mixing",
+    "allow-the-guest-to-select-a-file-to-upload-to-the-director-once-shared-it-will-show-in-the-chat-as-a-download-link-": "Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link.",
+    "set-a-countdown-timer-that-this-guest-sees": "Set a countdown timer that this guest sees",
+    "enter-a-room-name-to-quick-join": "Enter a room name to quick join"
+  },
+  "innerHTML": {
+    "logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
+    "copy-this-url": "Copia questo URL in un OBS \"Browser Source\"",
+    "you-are-in-the-control-center": "Sei nel pannello di controllo",
+    "joining-room": "Ti stai unendo alla stanza",
+    "add-group-chat": "Aggiungi chat di gruppo a OBS",
+    "rooms-allow-for": "Le stanze consentono una chat di gruppo semplificata e la gestione avanzata di più flussi contemporaneamente.",
+    "room-name": "Nome stanza",
+    "password-input-field": "Password",
+    "enter-the-rooms-control": "Entra nella gestione della stanza",
+    "show-tips": "Mosta alcuni suggerimenti..",
+    "added-notes": "\n<u><i>Aggiungi note:</i></u>\n<li>Chiunque può entrare in una stanza se conosce il nome, quindi mantienilo unico</li>\n<li>Invita solo persone fidate nella stanza.</li>\n<li>I dispositivi iOS condivideranno solo il loro audio con altri ospiti; questa è principalmente una limitazione hardware</li>\n<li>Opzione \"Registrazione\" è considerata opzioneale.</li>\n",
+    "back": "Indietro",
+    "add-your-camera": "Aggiungi camera ad  OBS",
+    "ask-for-permissions": "Allow Access to Camera/Microphone",
+    "waiting-for-camera": "In attesa di caricamento",
+    "video-source": "Sorgente Video",
+    "max-resolution": "1080p (hi-def)",
+    "balanced": "720p (balanced)",
+    "smooth-cool": "360p (smooth)",
+    "select-audio-source": "Seleziona sorgente audio",
+    "no-audio": "No Audio",
+    "select-output-source": " Destinazione Output Audio : \n\t\t\t\t\t",
+    "remote-screenshare-obs": "Screenshare remoto dentro OBS",
+    "note-share-audio": "\n<b>note</b>: Do not forget to click \"Condividi audio\" in Chrome.<br>(Firefox non supporta la condivisione dell'audio..)",
+    "select-screen-to-share": "Seleziona lo schermo da condividere",
+    "audio-sources": "Sorgenti Audio",
+    "create-reusable-invite": "Crea un invito riutilizzabile",
+    "here-you-can-pre-generate": "Qui è possibile pre-generare un collegamento Sorgente del browser riutilizzabile e un collegamento di invito ospite correlato.",
+    "generate-invite-link": "Genera Link invito",
+    "advanced-paramaters": "Opzioni avanzate:",
+    "unlock-video-bitrate": "Sblocca Video Bitrate (20mbps)",
+    "force-vp9-video-codec": "Forza VP9 Video Codec (less artifacting)",
+    "enable-stereo-and-pro": "Abilita Stereo e Pro HD Audio",
+    "video-resolution": "Risoluzioni Video: ",
+    "hide-mic-selection": "Force Default Microphone",
+    "hide-screen-share": "Nascondi opzione Screenshare",
+    "allow-remote-control": "Controllo remoto camera zoom (android)",
+    "add-a-password-to-stream": " Aggiungi Password:",
+    "add-the-guest-to-a-room": "Aggiungi l'ospite a una stanza:",
+    "invite-group-chat-type": "In questa stanza ospite può fare:",
+    "can-see-and-hear": "Può vedere e ascoltare la chat di gruppo",
+    "can-hear-only": "Può solo ascoltare la chat di gruppo",
+    "cant-see-or-hear": "Impossibile ascoltare o vedere la chat di gruppo",
+    "share-local-video-file": "Stream Media File",
+    "share-website-iframe": "Share Website",
+    "run-a-speed-test": "Run a Speed Test",
+    "read-the-guides": "Browse the Guides",
+    "info-blob": "\n<h2>Cosa è OBS.Ninja</h2><br>\n<li>100% <b>free</b>; nessun download; nessuna raccolta di dati personali; nessun accesso</li>\n<li>Porta video dal tuo smartphone, computer o amici direttamente nel tuo flusso video OBS</li>\n<li>Utilizziamo una tecnologia di inoltro peer-to-peer all'avanguardia che offre privacy e latenza ultra bassa</li>\n<br>\n<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demoing è presente</a> </li>",
+    "add-to-scene": "Add to Scene",
+    "forward-to-room": "Transfer",
+    "record": "Registra",
+    "disconnect-guest": "Hangup",
+    "mute": "Muta",
+    "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",
+    "open-in-new-tab": "Apri in una nuova Tab",
+    "copy-to-clipboard": "Copia negli appunti",
+    "click-for-quick-room-overview": "❔ Fare clic qui per una rapida panoramica e assistenza ",
+    "push-to-talk-enable": "🔊 Abilita Director's Push-to-Talk Mode",
+    "welcome-to-control-room": "Benvenuto. Questa è la sala di controllo per la chat di gruppo. Ci sono diverse cose per cui puoi usare questa stanza:<br><br>\t<li>Puoi ospitare una chat di gruppo con gli amici utilizzando una stanza. Condividi il link blu per invitare gli ospiti che si uniranno automaticamente alla chat.</li>\t<li>Una sala per gruppi può ospitare da 4 a 30 persone, a seconda di numerosi fattori, tra cui CPU e larghezza di banda disponibile di tutti gli ospiti nella stanza.</li>\t<li>Solo-views of each video are offered under videos as they load. These can be used within an OBS Browser Source.</li>\t<li>You can use the auto-mixing Group Scene, the green link, to auto arrange multiple videos for you in OBS.</li>\t<li>You can use this control room to record isolated video or audio streams, but it is an experimental feature still.</li>\t<li>Videos in the Director's room will be of low quality on purpose; to save bandwidth/CPU</li>\t<li>Guest's in the room will see each other's videos at a very limited quality to conserve bandwidth/CPU.</li>\t<li>OBS will see a guest's video in high-quality; the default video bitrate is 2500kbps.</li>\t<br>\tAs guests join, their videos will appear below. You can bring their video streams into OBS as solo-scenes or you can add them to the Group Scene.\t<br>The Group Scene auto-mixes videos that have been added to the group scene. Please note that the Auto-Mixer requires guests be manually added to it for them to appear in it; they are not added automatically.<br><br>Apple mobile devices, such as iPhones and iPads, do not fully support Video Group Chat. This is a hardware constraint.<br><br>\tFor advanced options and parameters, <a href=\"https://github.com/steveseguin/obsninja/wiki/Guides-and-How-to's#urlparameters\">see the 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\tBenvenuto in OBS.Ninja! Da qui puoi inviare messaggi di testo direttamente ai peer connessi.\n\t\t\t\t",
+    "names-and-labels-coming-soon": "\n\t\t\t\t\tI nomi che identificano i peer connessi saranno una funzionalità in una prossima versione..\n\t\t\t\t",
+    "send-chat": "Invia",
+    "available-languages": "Lingue Disponibili:",
+    "add-more-here": "Aggiungi altro qui!",
+    "waiting-for-camera-to-load": "waiting-for-camera-to-load",
+    "start": "START",
+    "share-your-mic": "Condividi il tuo microfono",
+    "share-your-camera": "Condividi Camera",
+    "share-your-screen": "Condividi il tuo schermo",
+    "join-room-with-mic": "Entra nella stanza con il Microfono",
+    "share-screen-with-room": "Condivisione dello schermo con la stanza",
+    "join-room-with-camera": "Entra nella stanza con la Camera ",
+    "click-start-to-join": "Fare clic su Start per partecipare",
+    "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",
+    "remote-monitoring": "Remote Monitoring",
+    "invite-saved-to-cookie": "Invite saved to cookie",
+    "fade-videos-in": "Fade videos in",
+    "show-guest-tips": "Show guest setup tips",
+    "green-background": "Green background",
+    "add-margin": "Add margin to videos",
+    "fill-video-space": "Crop video to fit",
+    "vertical-aspect-ratio": "Vertical video mode",
+    "add-to-scene2": "add to scene 2",
+    "user-raised-hand": "Lower Raised Hand",
+    "unmute": "un-mute",
+    "unhide-guest": "un-hide",
+    "undeafen": "un-deafen",
+    "unblind": "un-blind",
+    "close": "close",
+    "send-message": "send message<s pan=\"\"> </s>",
+    "record-director-local": " Record",
+    "only-director-can-hear-you": "Only the director can hear you currently.",
+    "director-muted-you": "The director has muted you.",
+    "application-audio-capture": "For application-specific audio capture, <a href=\"https://docs.vdo.ninja/audio\" style=\"color: #007AC8;\">see here</a>",
+    "animate-mixing": "Animate mixing",
+    "prefix-screenshare": "Prefix screenshare IDs",
+    "privacy-disabled": "Privacy warning: The director will be able to remotely access your camera and microphone if you continue.",
+    "face-mesh": "Face mesh (slow load)",
+    "anonymous-mask": "Anonymous mask",
+    "dog-face": "Dog ears and nose",
+    "compatibility-mode": "Compatibility mode",
+    "disable-animated-mixing": "Disable animations",
+    "request-upload": " Request File",
+    "create-timer": "Create Timer",
+    "edit-url": "Edit URL manually",
+    "mirror-video": "Mirror",
+    "toggle-control-video": "Toggle control bar",
+    "picture-in-picture": "Picture-in-picture",
+    "chrome-cast": "Cast..",
+    "join-room": "Join room",
+    "waiting-for-mic-to-load": "Waiting for mic to load"
+  },
+  "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",
+    "enter-your-message-here": "Enter your message here"
+  },
+  "miscellaneous": {
+    "start": "START",
+    "new-display-name": "Enter a new Display Name for this stream",
+    "submit-error-report": "Press OK to submit any error logs to VDO.Ninja. Error logs may contain private information.",
+    "director-redirect-1": "The director wishes to redirect you to the URL: ",
+    "director-redirect-2": "\n\nPress OK to be redirected.",
+    "add-a-label": "Add a label",
+    "audio-processing-disabled": "Audio processing is disabled with this guest. Can't mute or change volume",
+    "not-the-director": "<font color='red'>You are not the director of this room.  You will have limited to no control.  You can try claiming the room after the first director leaves.</font>",
+    "room-is-claimed": "The room is already claimed by someone else.\n\nOnly the first person to join a room is the assigned director.\n\nRefresh after the first director leaves to claim.",
+    "room-is-claimed-codirector": "The room is already claimed by someone else.\n\nTrying to join as a co-director...",
+    "streamid-already-published": "The stream ID you are publishing to is already in use.\n\nPlease try with a different invite link or refresh to retry again.\n\nYou will now be disconnected.",
+    "director": "Director",
+    "unknown-user": "Unknown User",
+    "room-test-not-good": "The room name 'test' is very commonly used and may not be secure.\n\nAre you sure you wish to proceed?",
+    "load-previous-session": "Would you like to load your previous session's settings?",
+    "enter-password": "Please enter the password below: \n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "enter-password-2": "Please enter the password below: \n\n(Note: Passwords are case-sensitive.)",
+    "enter-director-password": "Please enter the director's password:\n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "password-incorrect": "The password was incorrect.\n\nRefresh and try again.",
+    "enter-display-name": "Please enter your display name:",
+    "enter-new-display-name": "Enter a new Display Name for this stream",
+    "what-bitrate": "What bitrate would you like to record at? (kbps)",
+    "enter-website": "Enter a website URL to share",
+    "press-ok-to-record": "Press OK to start recording. Press again to stop and download.\n\nWarning: Keep this browser tab active to continue recording.\n\nYou can change the default video bitrate if desired below (kbps)",
+    "no-streamID-provided": "No streamID was provided; one will be generated randomily.\n\nStream ID: ",
+    "alphanumeric-only": "Info: Only AlphaNumeric characters should be used for the stream ID.\n\nThe offending characters have been replaced by an underscore",
+    "stream-id-too-long": "The Stream ID should be less than 45 alPhaNuMeric characters long.\n\nWe will trim it to length.",
+    "share-with-trusted": "Share only with those you trust",
+    "pass-recommended": "A password is recommended",
+    "insecure-room-name": "Insecure room name.",
+    "allowed-chars": "Allowed chars",
+    "transfer": "transfer",
+    "armed": "armed",
+    "transfer-guest-to-room": "Transfer guests to room:\n\n(Please note rooms must share the same password)",
+    "transfer-guest-to-url": "Transfer guests to new website URL.\n\n(Guests will be prompted to accept)",
+    "change-url": "change URL",
+    "mute-in-scene": "mute in scene",
+    "unmute-guest": "un-mute guest",
+    "undeafen": "un-deafen",
+    "deafen": "deafen guest",
+    "unblind": "un-blind",
+    "blind": "blind guest",
+    "unmute": "un-mute",
+    "mute-guest": "mute guest",
+    "unhide": "unhide guest",
+    "hide-guest": "hide guest",
+    "confirm-disconnect-users": "Are you sure you wish to disconnect these users?",
+    "confirm-disconnect-user": "Are you sure you wish to disconnect this user?"
+  }
+}

ja.json

@@ -0,0 +1,425 @@
+{
+  "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",
+    "create-reusable-invite": "Create Reusable Invite",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "toggle-solo-voice-chat": "Toggle Solo Voice Chat",
+    "add-to-scene-2": "Add to Scene 2",
+    "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",
+    "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.",
+    "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",
+    "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",
+    "share-a-website-as-an-embedded-iframe": "Share a website as an embedded iFRAME",
+    "room-settings": "Room Settings",
+    "your-audio-and-video-settings": "Your audio and video Settings",
+    "you-can-also-enable-the-director-s-video-output-afterwards-by-clicking-the-setting-s-button": "You can also enable the director`s Video Output afterwards by clicking the Setting`s button",
+    "allow-for-remote-stat-monitoring-via-the-monitoring-tool": "Allow for remote stat monitoring via the monitoring tool",
+    "the-guest-will-be-asked-if-they-want-to-reload-the-previous-link-when-revisiting": "The guest will be asked if they want to reload the previous link when revisiting",
+    "the-guest-s-self-video-preview-will-appear-tiny-in-the-top-right": "The guest's self-video preview will appear tiny in the top right",
+    "videos-use-an-animated-transition-when-being-remixed": "Videos use an animated transition when being remixed",
+    "show-some-prep-suggestions-to-the-guests-on-connect": "Show some prep suggestions to the guests on connect",
+    "set-the-background-color-to-bright-green": "Set the background color to bright green",
+    "fade-videos-in-over-500ms": "Fade videos in over 500ms",
+    "add-a-10px-margin-around-all-video-elements": "Add a 10px margin around all video elements",
+    "playback-the-video-with-mono-channel-audio": "Playback the video with mono-channel audio",
+    "have-the-videos-fit-their-respective-areas-even-if-it-means-cropping-a-bit": "Have the videos fit their respective areas, even if it means cropping a bit",
+    "have-videos-be-aligned-with-sizing-designed-for-vertical-video": "Have videos be aligned with sizing designed for vertical video",
+    "copy-this-stream-id-to-the-clipboard": "Copy this Stream ID to the clipboard",
+    "click-here-to-edit-the-label-for-this-stream-changes-will-propagate-to-all-viewers-of-this-stream": "Click here to edit the label for this stream. Changes will propagate to all viewers of this stream",
+    "this-will-ask-the-remote-guest-for-permission-to-change": "This will ask the remote guest for permission to change",
+    "a-direct-solo-view-of-the-video-audio-stream-with-nothing-else-its-audio-can-be-remotely-controlled-from-here": "A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here",
+    "this-guest-raised-their-hand-click-this-to-clear-notification-": "This guest raised their hand. Click this to clear notification.",
+    "increase-this-at-your-peril-changes-the-total-inbound-video-bitrate-per-guest-mobile-devices-excluded-webp-mode-also-excluded-": "Increase this at your peril. Changes the total inbound video bitrate per guest; mobile devices excluded. Webp-mode also excluded.",
+    "hide-this-window": "Hide this window",
+    "cycle-the-cameras": "Cycle the Cameras",
+    "have-screen-shares-stream-id-s-use-a-predictable-prefixed-value-instead-of-a-random-one-": "Have screen-shares stream ID's use a predictable prefixed value instead of a random one.",
+    "toggle-solo-voice-chat-or-hold-ctrl-cmd-when-selecting-to-make-it-two-way-private-": "Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private.",
+    "transfer-any-file-to-the-group": "Transfer any file to the group",
+    "transfer-any-file": "Transfer any file",
+    "the-camera-will-load-in-a-default-safe-mode-that-may-work-if-other-modes-fail-": "The camera will load in a default safe-mode that may work if other modes fail.",
+    "disable-animated-transitions-during-video-mixing": "Disable animated transitions during video mixing",
+    "allow-the-guest-to-select-a-file-to-upload-to-the-director-once-shared-it-will-show-in-the-chat-as-a-download-link-": "Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link.",
+    "set-a-countdown-timer-that-this-guest-sees": "Set a countdown timer that this guest sees",
+    "enter-a-room-name-to-quick-join": "Enter a room name to quick join"
+  },
+  "innerHTML": {
+    "logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
+    "copy-this-url": "このURLをOBSの「ブラウザソース」に追加",
+    "you-are-in-the-control-center": "ルーム管理センター",
+    "joining-room": "ルームに参加しています",
+    "add-group-chat": "OBSにグループミーティングを追加",
+    "rooms-allow-for": "ルームを利用すると、グループミーティングや複数ストリームを、一つの画面で管理できます。",
+    "room-name": "ルーム名",
+    "password-input-field": "Password",
+    "enter-the-rooms-control": "ルーム管理センターに入る",
+    "show-tips": "ヒントを表示",
+    "added-notes": "<i><u>追加情報:<u></u></u></i><li><u><u>ルーム名を知っている人は誰でもルームに入れるため、ユニークなルーム名にして下さい。</u></u></li><li><u><u>ハードウェア性能にもよりますが、パフォーマンス上の理由から、4人以上のルーム利用はおすすめできません。</u></u></li><li><u><u>iOSデバイスでは、2人以下のグループサイズに制限されます。これはハードウェアによる制限です。</u></u></li><li><u><u>\"Recording\" オプションは実験的な新機能です。</u></u></li><li><u><u>ビデオフィードを「グループシーン」に表示するには、そこに「追加」する必要があります。</u></u></li><li><u><u>ゲストのビューに、新しい「強化されたフルスクリーン」ボタンが追加されました。</u></u></li>",
+    "back": "戻る",
+    "add-your-camera": "OBSに自分のカメラを追加",
+    "ask-for-permissions": "Allow Access to Camera/Microphone",
+    "waiting-for-camera": "カメラがロードされるのを待っています...",
+    "video-source": "映像ソース",
+    "max-resolution": "最大解像度",
+    "balanced": "バランス",
+    "smooth-cool": "スムーズ＆クール",
+    "select-audio-source": "音声ソースを選択",
+    "no-audio": "音声なし",
+    "select-output-source": "音声出力先:",
+    "remote-screenshare-obs": "OBSに画面共有を追加",
+    "note-share-audio": "<strong>注意</strong>: Chromeの「音声の共有」を必ずクリックして下さい。<br>(Firefox は音声の共有をサポートしていません)",
+    "select-screen-to-share": "共有する画面を選択",
+    "audio-sources": "音声ソース",
+    "create-reusable-invite": "再利用可能な招待リンクを作成",
+    "here-you-can-pre-generate": "再利用可能なブラウザソースリンクと、関連するゲスト招待リンクを、事前に作成できます。",
+    "generate-invite-link": "招待リンクを作成",
+    "advanced-paramaters": "高度なパラメータ",
+    "unlock-video-bitrate": "ビデオビットレートをアンロック (20mbps)",
+    "force-vp9-video-codec": "VP9ビデオコーデックの使用を強制 (less artifacting)",
+    "enable-stereo-and-pro": "ステレオ・プロHDオーディオを有効にする",
+    "video-resolution": "ビデオ解像度: ",
+    "hide-mic-selection": "Force Default Microphone",
+    "hide-screen-share": "画面共有オプションを非表示",
+    "allow-remote-control": "カメラズームのリモートコントロール (android)",
+    "add-a-password-to-stream": "パスワードを追加:",
+    "add-the-guest-to-a-room": "ゲストをルームに追加:",
+    "invite-group-chat-type": "このルームのゲストは、次のことができる:",
+    "can-see-and-hear": "グループミーティングの映像・音声を視聴できる",
+    "can-hear-only": "グループミーティングの音声のみ聞ける",
+    "cant-see-or-hear": "グループミーティングの映像・音声を視聴できない",
+    "share-local-video-file": "Stream Media File",
+    "share-website-iframe": "Share Website",
+    "run-a-speed-test": "Run a Speed Test",
+    "read-the-guides": "Browse the Guides",
+    "info-blob": "<h2>OBS.Ninja とは？</h2><br><li>超低遅延でプライバシーが保護された、ビデオストリームサービスです。</li><li>ライブ配信でゲストとの対話を配信したり、少人数のグループミーティングにも利用できます。</li><li>100% <strong>無料</strong>、ダウンロード不要、サインイン不要、個人情報を一切収集しません。</li><li>あなたや友人のスマートフォン、タブレット、PCなどから、直接OBSビデオストリームに映像を取り込めます。</li><li>プライバシーと超低遅延を実現するために、最先端のピアツーピア転送技術を使用しています。</li><br><li>YouTube: <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">デモ動画を見る</a> </li>",
+    "add-to-scene": "Add to Scene",
+    "forward-to-room": "Transfer",
+    "record": "録画",
+    "disconnect-guest": "Hangup",
+    "mute": "ミュート",
+    "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",
+    "open-in-new-tab": "新しいタブで開く",
+    "copy-to-clipboard": "クリップボードにコピー",
+    "click-for-quick-room-overview": "❔ Click Here for a quick overview and help",
+    "push-to-talk-enable": "🔊 Enable Director's Push-to-Talk Mode",
+    "welcome-to-control-room": "Welcome. This is the control-room for the group-chat. There are different things you can use this room for:<br><br>\t<li>You can host a group chat with friends using a room. Share the blue link to invite guests who will join the chat automatically.</li>\t<li>A group room can handle around 4 to 30 guests, depending on numerous factors, including CPU and available bandwidth of all guests in the room.</li>\t<li>Solo-views of each video are offered under videos as they load. These can be used within an OBS Browser Source.</li>\t<li>You can use the auto-mixing Group Scene, the green link, to auto arrange multiple videos for you in OBS.</li>\t<li>You can use this control room to record isolated video or audio streams, but it is an experimental feature still.</li>\t<li>Videos in the Director's room will be of low quality on purpose; to save bandwidth/CPU</li>\t<li>Guest's in the room will see each other's videos at a very limited quality to conserve bandwidth/CPU.</li>\t<li>OBS will see a guest's video in high-quality; the default video bitrate is 2500kbps.</li>\t<br>\tAs guests join, their videos will appear below. You can bring their video streams into OBS as solo-scenes or you can add them to the Group Scene.\t<br>The Group Scene auto-mixes videos that have been added to the group scene. Please note that the Auto-Mixer requires guests be manually added to it for them to appear in it; they are not added automatically.<br><br>Apple mobile devices, such as iPhones and iPads, do not fully support Video Group Chat. This is a hardware constraint.<br><br>\tFor advanced options and parameters, <a href=\"https://github.com/steveseguin/obsninja/wiki/Guides-and-How-to's#urlparameters\">see the 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\tWelcome to OBS.Ninja! You can send text messages directly to connected peers from here.\n\t\t\t\t",
+    "names-and-labels-coming-soon": "\n\t\t\t\t\tNames identifying connected peers will be a feature in an upcoming release.\n\t\t\t\t",
+    "send-chat": "Send",
+    "available-languages": "Available Languages:",
+    "add-more-here": "Add More Here!",
+    "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",
+    "remote-monitoring": "Remote Monitoring",
+    "invite-saved-to-cookie": "Invite saved to cookie",
+    "fade-videos-in": "Fade videos in",
+    "show-guest-tips": "Show guest setup tips",
+    "green-background": "Green background",
+    "add-margin": "Add margin to videos",
+    "fill-video-space": "Crop video to fit",
+    "vertical-aspect-ratio": "Vertical video mode",
+    "add-to-scene2": "add to scene 2",
+    "user-raised-hand": "Lower Raised Hand",
+    "unmute": "un-mute",
+    "unhide-guest": "un-hide",
+    "undeafen": "un-deafen",
+    "unblind": "un-blind",
+    "close": "close",
+    "send-message": "send message<s pan=\"\"> </s>",
+    "record-director-local": " Record",
+    "only-director-can-hear-you": "Only the director can hear you currently.",
+    "director-muted-you": "The director has muted you.",
+    "application-audio-capture": "For application-specific audio capture, <a href=\"https://docs.vdo.ninja/audio\" style=\"color: #007AC8;\">see here</a>",
+    "animate-mixing": "Animate mixing",
+    "prefix-screenshare": "Prefix screenshare IDs",
+    "privacy-disabled": "Privacy warning: The director will be able to remotely access your camera and microphone if you continue.",
+    "face-mesh": "Face mesh (slow load)",
+    "anonymous-mask": "Anonymous mask",
+    "dog-face": "Dog ears and nose",
+    "compatibility-mode": "Compatibility mode",
+    "disable-animated-mixing": "Disable animations",
+    "request-upload": " Request File",
+    "create-timer": "Create Timer",
+    "edit-url": "Edit URL manually",
+    "mirror-video": "Mirror",
+    "toggle-control-video": "Toggle control bar",
+    "picture-in-picture": "Picture-in-picture",
+    "chrome-cast": "Cast..",
+    "join-room": "Join room",
+    "waiting-for-mic-to-load": "Waiting for mic to load"
+  },
+  "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",
+    "enter-your-message-here": "Enter your message here"
+  },
+  "miscellaneous": {
+    "start": "START",
+    "new-display-name": "Enter a new Display Name for this stream",
+    "submit-error-report": "Press OK to submit any error logs to VDO.Ninja. Error logs may contain private information.",
+    "director-redirect-1": "The director wishes to redirect you to the URL: ",
+    "director-redirect-2": "\n\nPress OK to be redirected.",
+    "add-a-label": "Add a label",
+    "audio-processing-disabled": "Audio processing is disabled with this guest. Can't mute or change volume",
+    "not-the-director": "<font color='red'>You are not the director of this room.  You will have limited to no control.  You can try claiming the room after the first director leaves.</font>",
+    "room-is-claimed": "The room is already claimed by someone else.\n\nOnly the first person to join a room is the assigned director.\n\nRefresh after the first director leaves to claim.",
+    "room-is-claimed-codirector": "The room is already claimed by someone else.\n\nTrying to join as a co-director...",
+    "streamid-already-published": "The stream ID you are publishing to is already in use.\n\nPlease try with a different invite link or refresh to retry again.\n\nYou will now be disconnected.",
+    "director": "Director",
+    "unknown-user": "Unknown User",
+    "room-test-not-good": "The room name 'test' is very commonly used and may not be secure.\n\nAre you sure you wish to proceed?",
+    "load-previous-session": "Would you like to load your previous session's settings?",
+    "enter-password": "Please enter the password below: \n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "enter-password-2": "Please enter the password below: \n\n(Note: Passwords are case-sensitive.)",
+    "enter-director-password": "Please enter the director's password:\n\n(Note: Passwords are case-sensitive and you will not be alerted if it is incorrect.)",
+    "password-incorrect": "The password was incorrect.\n\nRefresh and try again.",
+    "enter-display-name": "Please enter your display name:",
+    "enter-new-display-name": "Enter a new Display Name for this stream",
+    "what-bitrate": "What bitrate would you like to record at? (kbps)",
+    "enter-website": "Enter a website URL to share",
+    "press-ok-to-record": "Press OK to start recording. Press again to stop and download.\n\nWarning: Keep this browser tab active to continue recording.\n\nYou can change the default video bitrate if desired below (kbps)",
+    "no-streamID-provided": "No streamID was provided; one will be generated randomily.\n\nStream ID: ",
+    "alphanumeric-only": "Info: Only AlphaNumeric characters should be used for the stream ID.\n\nThe offending characters have been replaced by an underscore",
+    "stream-id-too-long": "The Stream ID should be less than 45 alPhaNuMeric characters long.\n\nWe will trim it to length.",
+    "share-with-trusted": "Share only with those you trust",
+    "pass-recommended": "A password is recommended",
+    "insecure-room-name": "Insecure room name.",
+    "allowed-chars": "Allowed chars",
+    "transfer": "transfer",
+    "armed": "armed",
+    "transfer-guest-to-room": "Transfer guests to room:\n\n(Please note rooms must share the same password)",
+    "transfer-guest-to-url": "Transfer guests to new website URL.\n\n(Guests will be prompted to accept)",
+    "change-url": "change URL",
+    "mute-in-scene": "mute in scene",
+    "unmute-guest": "un-mute guest",
+    "undeafen": "un-deafen",
+    "deafen": "deafen guest",
+    "unblind": "un-blind",
+    "blind": "blind guest",
+    "unmute": "un-mute",
+    "mute-guest": "mute guest",
+    "unhide": "unhide guest",
+    "hide-guest": "hide guest",
+    "confirm-disconnect-users": "Are you sure you wish to disconnect these users?",
+    "confirm-disconnect-user": "Are you sure you wish to disconnect this user?"
+  }
+}

media/camera_inkscape.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="91.859253mm"
+   height="49.479435mm"
+   viewBox="0 0 91.859252 49.479436"
+   version="1.1"
+   id="svg4530"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="camera_inkscape.svg">
+  <defs
+     id="defs4524" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.3235466"
+     inkscape:cx="338.91574"
+     inkscape:cy="131.01428"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:snap-text-baseline="false"
+     inkscape:snap-bbox="false"
+     inkscape:snap-global="true"
+     inkscape:window-width="2560"
+     inkscape:window-height="1361"
+     inkscape:window-x="2391"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4527">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-4.0990803,-66.079714)">
+    <rect
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:6.29999971;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:22.7149601;stroke-opacity:1;paint-order:markers fill stroke"
+       id="rect5164"
+       width="65.568779"
+       height="43.179436"
+       x="7.2490802"
+       y="69.229713" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:6.30000019;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 73.017762,94.91748 19.790574,15.89243 V 73.227808 L 73.117714,88.420574 Z"
+       id="path5172"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+  </g>
+</svg>