diff --git a/.github/workflows/update_translations.yml b/.github/workflows/update_translations.yml
index 370ebb1..d85c1dd 100644
--- a/.github/workflows/update_translations.yml
+++ b/.github/workflows/update_translations.yml
@@ -35,5 +35,5 @@ jobs:
with:
commit-message: Generated updated translations
branch: generated_translations
- title: "[OBSNinja Bot] Updated translations"
+ title: "[VDONinja Bot] Updated translations"
labels: i18n
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9ea7d1d..7f1c87f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,16 +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
-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.
-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.
diff --git a/IFRAME.md b/IFRAME.md
index f1f362b..be52e54 100644
--- a/IFRAME.md
+++ b/IFRAME.md
@@ -1,38 +1,47 @@
-## OBS.Ninja - iFrame API documentation
+***
+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.
-OBS.Ninja (OBSN) is offers here a simple and free solution to quickly enable real-time video streaming in their websites. OBSN wishes to make live video streaming development accessible to any developer, even novices, yet still remain flexible and powerful.
-While OBS.Ninja does offer source-code to customize the application and UI at a low level, this isn't for beginners and it is rather hard to maintain. As well, due to the complexity of video streaming in the web, typical approaches for offering API access isn't quite feasible either.
-The solution decided on isn't an SDK framework, but rather the use of embeddable _IFrames_ and a corresponding bi-directional iframe API. An [iframe](https://www.w3schools.com/tags/tag_iframe.ASP) allows us to embed a webpage inside a webpage, including OBS.Ninja into your own website.
-Modern web browsers allow the parent website to communicate with the child webpage, giving a high-level of control to a developer, while also abstracting the complex code and hosting requirements. Functionality, we can make an OBSN video stream act much like an HTML video element tag, where you can issue commands like play, pause, or change video sources with ease.
-Creating an OBSN iframe can be done in HTML or programmatically with Javascript like so:
+## 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://obs.ninja/?webcam";
+iframe.src = "https://vdo.ninja/?webcam";
```
-You can also make an OBS.Ninja without Javascript, using just HTML, like
+You can also make an VDO.Ninja without Javascript, using just HTML, like
-``
+``
Adding that iframe to the DOM will reveal a simple page accessing for a user to select and share their webcam. For a developer wishing to access a remote guest's stream, this makes the ingestion of that stream into production software like OBS Studios very easy. The level of customization and control opens up opportunities, such as a pay-to-join audience option for a streaming interactive broadcast experience.
-An example of how this API is used by OBS.Ninja is with its Internet Speedtest, which has two OBS.Ninja IFrames on a single page. One iframe feeds video to the other iframe, and the speed at which it does this is a measure of the system's performance. Detailed stats of the connection are made available to the parent window, which displays the results.
-https://obs.ninja/speedtest
+An example of how this API is used by VDO.Ninja is with its Internet Speedtest, which has two VDO.Ninja IFrames on a single page. One iframe feeds video to the other iframe, and the speed at which it does this is a measure of the system's performance. Detailed stats of the connection are made available to the parent window, which displays the results.
+https://vdo.ninja/speedtest
-More community-contributed IFRAME examples can be found here: https://github.com/steveseguin/obsninja/tree/master/examples
+More community-contributed IFRAME examples can be found here: https://github.com/steveseguin/vdoninja/tree/master/examples
-A sandbox of options is available at this page, too: https://obs.ninja/iframe You can enter an OBS.Ninja URL in the input box to start using it. For developers, viewing the source of that page will reveal examples of how all the available functions work, along with a way to test and play with each of them. You can also see here for the source-code on GitHub: https://github.com/steveseguin/obsninja/blob/master/iframe.html
+A sandbox of options is available at this page, too: https://vdo.ninja/iframe You can enter an VDO.Ninja URL in the input box to start using it. For developers, viewing the source of that page will reveal examples of how all the available functions work, along with a way to test and play with each of them. You can also see here for the source-code on GitHub: https://github.com/steveseguin/vdoninja/blob/master/iframe.html
-One thing to note about this iframe API is that it is a mix of URL parameters given to the iframe _src_ URL, but also the postMessage and addEventListener methods of the browser. The later is used to dynamically control OBS.Ninja, while the former is used to initiate the instance to a desired state.
+One thing to note about this iframe API is that it is a mix of URL parameters given to the iframe _src_ URL, but also the postMessage and addEventListener methods of the browser. The later is used to dynamically control VDO.Ninja, while the former is used to initiate the instance to a desired state.
-For more information on the URL parameters thare are available, please see: https://github.com/steveseguin/obsninja/wiki/Advanced-Settings
+For more information on the URL parameters thare are available, please see: https://github.com/steveseguin/vdoninja/wiki/Advanced-Settings
Some of the more interesting ones primarily for iframe users might include:
@@ -56,7 +65,7 @@ Some of the more interesting ones primarily for iframe users might include:
- Send/Recieve a chat message to other connected guests
- Get notified when there is a video connection
-As for the actually details for methods and options available to dynamically control child OBSN iframe, they are primarily kept up to via the iframe.html file that is mentioned previously. see: _iframe.html_. Below is a snippet from that file:
+As for the actually details for methods and options available to dynamically control child VDON iframe, they are primarily kept up to via the iframe.html file that is mentioned previously. see: _iframe.html_. Below is a snippet from that file:
```js
let button = document.createElement("button");
@@ -228,7 +237,7 @@ button.onclick = () => {
};
iframeContainer.appendChild(button);
-// As for listening events, where the parent listens for responses or events from the OBSN child frame:
+// As for listening events, where the parent listens for responses or events from the VDON child frame:
// ////////// LISTEN FOR EVENTS
@@ -298,10 +307,8 @@ eventer(messageEvent, function (e) {
});
```
-This OBS.Ninja API is developed and expanded based on user feedback and requests. It is by no means complete.
+This VDO.Ninja API is developed and expanded based on user feedback and requests. It is by no means complete.
-Regarding versioning, I currently host past versions of OBS.Ninja, so using those past versions can ensure some level of consistency and expectation. https://obs.ninja/v12/ for example is the version 12 hosted version. The active and main production version of OBSN of course undergoes constant updates, and while I try to maintain backwards compatibility with changes to the API, it is still early days and changes might happen.
-
-Please feel free to follow me in the OBS.Ninja Discord channel, where I post news about updates and listen to requests. The upcoming version of OBS.Ninja is also often hosted at https://obs.ninja/beta, where you can explore new features and help crush any unexpected bugs.
+Please feel free to follow me in the VDO.Ninja Discord channel (discord.vdo.ninja) where I post news about updates and listen to requests. The upcoming version of VDO.Ninja is also often hosted at https://vdo.ninja/beta, where you can explore new features and help crush any unexpected bugs.
-steve
diff --git a/LICENCE.md b/LICENCE.md
index 4fc7ede..7f8c8d6 100644
--- a/LICENCE.md
+++ b/LICENCE.md
@@ -1,15 +1,14 @@
-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: [AGPLv3.md](https://github.com/steveseguin/obsninja/blob/master/AGPLv3.md)
+The VDO.Ninja source repository is governed by the GNU AFFERO GENERAL PUBLIC LICENSE. (AGPL-3.0)
+That AGPL-3.0 licence can be found here: [AGPLv3.md](https://github.com/steveseguin/vdo.ninja/blob/master/AGPLv3.md)
-In essence, OBS.Ninja is open-source and free to use, both for commercial and non-commercial use.
+In essence, VDO.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.
Such licencing and copyright information will be contained in the file's header and be limited to those files.
If no such header is present in a file, the default AGPL-3.0 licence applies.
-Alternative licencing options can be made available on request, if AGPL-3.0 is not appropriate.
-Unless stated otherwise, all code is copyright 2020 Stephen Seguin. All rights reserved.
-Contributors to the OBS.Ninja project must first agree to the Contributor License Agreement (CLA).
+Unless stated otherwise, all code is copyright 2021 Stephen Seguin. All rights reserved.
+Contributors to the VDO.Ninja project must first agree to the Contributor License Agreement (CLA).
Thank you for your understanding.
diff --git a/README.md b/README.md
index 8c1515e..bb61a29 100644
--- a/README.md
+++ b/README.md
@@ -1,72 +1,87 @@
-
+### ⚠ Notice! We've rebranded from OBS.Ninja to VDO.Ninja - all else is staying the same ✨
-## 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.
+
-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.
+## What is **VDO NINJA**
+VDO.Ninja uses peer-to-peer technology to bring remote cameras into OBS or other studio software.
-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
+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.vdo.ninja
+Please see the sub-reddit added info: https://reddit.com/r/vdoninja
+Also check out the user documentation at: https://docs.vdo.ninja
+
+
## How to use
-I demo the basic usage of OBS.Ninja on YouTube: https://www.youtube.com/watch?v=6R_sQKxFAhg
-
-Here is a podcast series showing how to use different basic OBS.Ninja features, including macOS support: https://www.youtube.com/watch?v=XfSqufuoV74&list=PLWodc2tCfAH1l_LDvEyxEqFf42hOBKqQM
+A video demo and playlist of the basic usage of VDO.Ninja on YouTube can be found here: https://www.youtube.com/watch?v=QaA_6aOP9z8&list=PLWodc2tCfAH1l_LDvEyxEqFf42hOBKqQM&index=1.
And Here is another video series touching on some more advanced settings: https://www.youtube.com/watch?v=mQ1Jdhf5aYg&list=PL8VJWj2-XLFpFu3G35Hdm1nKZ2xn9_0_8
Check the subreddit for added use cases, advanced features, and support. Advanced features includes high-quality audio modes, custom video resolutions, and more.
-MacOS users will face some challenges in using OBS 25/26, but there are workarounds. Please see the subreddit or [the Wiki](https://github.com/steveseguin/obsninja/wiki).
-
## What's in this repo
-This repo contains software for OBS.Ninja, including the HTML landing page for its Electron Capture app offering. A sample config file and instructions for setting up a TURN server (video relay server), is also provided. You may also find [the Wiki](https://github.com/steveseguin/obsninja/wiki) for the project in this repo, which contains added information on how to use the software.
+This repo contains the web client software for VDO.Ninja, along with many sample apps that leverage its IFRAME API. A sample config file and instructions for setting up an optional TURN video relay server is also provided here. The user documentation for VDO.Ninja itself is found at docs.vdo.ninja.
## How to Deploy this Repo
-To use, just download and host the files on a HTTPS-enabled webserver. You may want to hide the .html extensions within your HTTP server as well, else the generated links will not work. See [here](https://github.com/steveseguin/obsninja/blob/master/install.md) for added details and alternative install options.
+VDO.Ninja is available as a free-to-use hosted service at https://vdo.ninja, so deploying is optional. If you do wish to self-deploy the service however, details are provided below.
-Directions on how to deploy a TURN server are listed in the turnserver.md file. You may wish to do so, although not all use cases will not need one. Only about 10% of remote guests, those often connected via 4G LTE, will require a TURN server. While OBS.Ninja does host some TURN servers, they are quite expensive to operate and not really for private deployment use. If you are deploying your own version of OBS.Ninja, I'd ask you use your own TURN servers instead.
+Hosting a private deployment can be as simple as hosting the files in this repository on a HTTPS-enabled webserver. For a very simple method on how to do this, there's a video guide here: https://www.youtube.com/watch?v=uYLKkX2_flY
+
+For more advanced users, you can see the [install.md](https://github.com/steveseguin/vdoninja/blob/master/install.md) file for alternative hosting options and more details on deploying additional system components. Limited technical support is provided for self-deployments, mainly due to how time-consuming such requests are, but the details to fully-deploy all system components are provided in the install.md file.
+
+If self-hosting, you might also wish to host your own video relay TURN server. Directions on how to deploy a TURN server are listed in the turnserver.md file. Only about ~ 5% of remote guests usually will need a TURN server, often those connected via 4G LTE or those behind a strict firewall, but most other users don't need one. While VDO.Ninja does host some pubiic TURN servers, they are quite expensive to operate, so please try to avoid abusing if possible. If you are deploying your own version of VDO.Ninja, I'd ask you to use your own TURN servers if you are capable of doing so; it's understandable if you aren't able to though.
+
+### Develop vs Release versions
+
+The develop branch is a bit like the preview or nightly version of VDO.Ninja. It's intended to be functional, but it may not be that well tested or there could be incomplete features. This version aligns closely with what is normally on vdo.ninja/beta/ or vdo.ninja/alpha/, which is well suited for those wishing to submit code changes or to gain access to experimental new features. You can access the GitHub develop on Github pages here as well: https://steveseguin.github.io/vdo.ninja/
+
+Release versions of VDO.Ninja have their own branches though, with the newest release being hosted at https://vdo.ninja/. These latest release branch will be updated to fix bugs or critical issues as needed, but are otherwise unchanged. https://github.com/steveseguin/vdo.ninja/branches
+
+Due to the nature of live video production, where unexpected changes to the app are not welcomed usually, I don't update https://vdo.ninja/ all that often. As well, constant updates to the primary hosted app makes supporting users challenging, as its hard to tell if an issue is with the code or with the user. For this reason, VDO.Ninja does infrequent updates to the primary hosted production version. Users wanting newer features, or who have greater risk tolerance, should use the beta version (vdo.ninja/beta/). The alpha version is usually updated daily, whereas beta is usually updated weekly.
## Server side / API software
-Since OBS.Ninja uses peer-2-peer technology, video connections are made directly between viewer and publisher in 90% of cases. Hosting a TURN server yourself may help improve performance, but less than 1% of users will see any benefit of this. Details on how to deploy a TURN server are provided. For those capable of hosting their own TURN server, that would be appreciated if possible, as TURN servers are the only real cost incurred by OBS.Ninja at present. (other than time, of course)
+Since VDO.Ninja uses peer-2-peer technology, video connections are made directly between viewer and publisher in 95% of cases. Hosting a TURN server yourself may help improve performance, but less than 1% of users will see an improvement to video quality by using one. They also will not help lower bandwidth usage or CPU usage, so generally you wish to avoid using them if possible.
-Other than TURN servers, OBS.Ninja also uses public STUN servers and a hosted handshake server. These are used to facilitate the initial setup of peer connections and are generally not required after a peer connection is established. These servers are free to access and use, even for private deployments. The handshake server's code is currently not available, so basic access to the Internet is still required to use OBS.Ninja even with a private deployment.
+Details on how to deploy a TURN server are provided; see: turnserver.md. For those capable of hosting their own TURN server, that would be appreciated if possible, as TURN servers are the largest cost incurred by VDO.Ninja at present. (other than time, of course)
-Development builds of OBS.Ninja may include debugging software, but in-production releases have this removed. Double check to ensure "console.re" debugging is disabled before deployment, just to be safe.
+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
-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 near 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
+If urgent, join me on discord: https://discord.vdo.ninja or email me at steve@seguin.email (Steve may not respond to emails if deemed unimportant)
## 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, but has been expanded to have additional functionality for content creators in general
https://github.com/steveseguin/electroncapture
### CAPTION.Ninja
-A free AI-based closed-captioning tool to add speech-to-text overlays to OBS Studio. It's browser-based with an easy OBS integration. Developed by Steve as well! https://caption.ninja
+A free AI-based closed-captioning tool to add speech-to-text overlays to OBS Studio. It's browser-based with an easy OBS or VMix integration. Developed by Steve as well! https://caption.ninja
-### Chat.Overlay.Ninja
-A free Chrome extension that lets you select Youtube Live Chat comments, with those comments then appearing directly in OBS or VMix as an overlay. No chroma-keying needed and the styling is pretty easy to customize without needing to modify the Chrome extension itself.
-http://chat.overlay.ninja/
+### Social Stream Ninja
+A free Chrome extension that lets you stream and feature chat comments from Youtube, Twitch, Facebook, and more. Featured comments will appear directly in OBS or VMix as an overlay, or as a stream list of comments. It also includes a dock for more advanced function, such as text-to-speech, sentiment analysis, and saving to disk. No chroma-keying needed and the styling is pretty easy to customize without needing to modify the Chrome extension itself.
+http://socialstream.ninja
-### Steves.app:
-A website designed to also work with OBS.Ninja as a Broadcasting tool. Share your webcam, window, desktop, or video file with friends and family. Peer-2-peer, so privacy can be maintained, but you can also list your broadcasts for others to watch.
-https://steves.app/
+### Rasbperry Ninja
+Use a Raspberry Pi, NVidia Jetson, or Linux box as a dedicated camera for VDO.Ninja. This project can use the hardware encoder of the RPi or Jetson to enable 1080p30 or even 4K video capture and webRTC-based broadcasting. Support for USB, CSI, and HDMI video sources is available. Python-based.
+[http://socialstream.ninja](https://github.com/steveseguin/raspberry_ninja)
## Privacy
-I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with OBS.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you. See: [turnserver.md](turnserver.md)
+I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with VDO.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you. See: [turnserver.md](turnserver.md)
-https://obs.ninja may unavoidably use cookies that are exempt from EU laws of requiring notice of their use; they are exempt as they are required and necessary for the technical functioning of the web service. Our webserver is cached by Cloudflare and it provides denial of server protection for the users of OBS.Ninja.
+https://vdo.ninja may unavoidably use cookies that are exempt from EU laws of requiring notice of their use; they are exempt as they are required and necessary for the technical functioning of the web service. Our webserver is cached by Cloudflare and it provides denial of server protection for the users of VDO.Ninja.
Additional security features are being added weekly on request. Please ask about these options if added security and privacy are requirements for you.
@@ -74,4 +89,12 @@ Additional security features are being added weekly on request. Please ask about
Ideas, feedback, bugs, etc -- all welcomed. I'm dumping many of my ideas as issues into Github. Feedback is typically most welcomed via Email or Discord.
## Licence
-OBS.Ninja is available as 'mostly' open-source; please see the LICENCE.md file for details.
+VDO.Ninja is available as 'mostly' open-source; please see the LICENCE.md file for details.
+
+## 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.
+
+## Contributors of this repo
+
+
+
diff --git a/check.html b/check.html
new file mode 100644
index 0000000..77a23b3
--- /dev/null
+++ b/check.html
@@ -0,0 +1,752 @@
+
+
+
+
+
+
+ VDON Speed Test
+
+
+
+
+
+ Welcome
+
+
+ This application will access your camera and complete a video test stream.
+
+
+
+ The test will take a few minutes to complete.
+ ⭐⭐⭐
+
+
+
+
+
+
+ Please note, for best results:
+
Connect your computer to a wired connection, instead of Wi-Fi
+
Have no other applications open while running this test
+
If using a laptop, connect your laptop to a power outlet
+ 🌠⭐⭐
+
+
+
+
+
+
+ The next step will access your camera and microphone.
+
+ Accept the camera and microphone permissions if prompted.
+
+
+ 🌠🌠⭐
+
+
+
+
+
+ Video and stream quality check
+
+
+
+
+
+
Bitrate (kbps)
+ 0
+
+
+
+
+
Buffer delay (ms)
+ 0
+
+
+
+
+
Packet Loss (%)
+ 0
+
+
+
+
+
+
+
+ Testing location:
+
+
+
+
+
+
+
diff --git a/codecs.html b/codecs.html
new file mode 100644
index 0000000..62caa7c
--- /dev/null
+++ b/codecs.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/comms.html b/comms.html
new file mode 100644
index 0000000..788ea0c
--- /dev/null
+++ b/comms.html
@@ -0,0 +1,2163 @@
+
+
+ Comms app
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💬
+
+
x
+
+
+ Welcome to the Comms app! You can send text messages to everyone in the room from here.
+
+
+
+
+
+
+
+
+
+
Comms
multi-group audio chat
+
+
+
+ Generate a random room name
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/control.html b/control.html
new file mode 100644
index 0000000..976f36e
--- /dev/null
+++ b/control.html
@@ -0,0 +1,121 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/convert.html b/convert.html
index 8b04665..c1708c3 100644
--- a/convert.html
+++ b/convert.html
@@ -1,157 +1,285 @@
-
-
-
-
-
-
-
-
-
Web-based Media Conversion Tools
-
-
Transcodes WebM files to MP4 files with a fixed 1280x720 resolution. (very slow!)
-
This tool performs the following action in your browser: fmpeg -i input.webm -vf scale=1280:720 output.mp4
-
-
-
-
Remuxes MKV files to MP4 files without transcoding.
WebM (or MKV/FLV) to MP4 (fixed 1280x720 resolution) (very slow!)
+
+ The same as: fmpeg -i input.webm -vf scale="1280:720" output.mp4
+
+
+
+
+
WebM to MP4 files (no transcoding, *attempts* to force high resolutions)
+
+ The same as: ffmpeg.exe -i concat:"cap.webm|input.webm" -safe 0 -c copy -avoid_negative_ts 1 -strict experimental output.mp4
+
+
+
+
+
WebM to Audio-only files (opus or wav)
+
+ The same as: fmpeg -i input.webm -vn -acodec copy output.wav
+
+
+
+
+
MKV (or FLV/WebM) to MP4 (no transcoding)
+
+ The same as: fmpeg -i INPUTFILE -vcodec copy -acodec copy output.mp4
+
+
+
+
+
Having problems?
+
+ For larger files, over 2-gigabytes in size, the browser may not be able to properly process the video in memory.
+
+
+ Please consider using FFmpeg [get it free here] to run these processes from the command-line instead. The corresponding commands are provided above, where you need to replace input.webm with your own file.
+
+
+ Other users who find FFmpeg too challenging have had luck using the graphical Handbrake application instead.
+
diff --git a/dock.html b/dock.html
index 2c910f0..df0ff58 100644
--- a/dock.html
+++ b/dock.html
@@ -163,7 +163,7 @@ function generateInvite(){
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.
+ var salt = location.hostname; // "vdo.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){
diff --git a/electron.html b/electron.html
index b021e7a..a749d01 100644
--- a/electron.html
+++ b/electron.html
@@ -1,393 +1,587 @@
-
-
-
-
-
-
OBS.Ninja
-
-
-
✨ Great News! OBS v26.1.2 now supports OBS.Ninja without needing the Electron Capture app! 🥳
+
+
+
\ No newline at end of file
diff --git a/examples/obs_remote/thirdparty/obs-websocket.min.js b/examples/obs_remote/thirdparty/obs-websocket.min.js
new file mode 100644
index 0000000..7c390d8
--- /dev/null
+++ b/examples/obs_remote/thirdparty/obs-websocket.min.js
@@ -0,0 +1,10 @@
+/*!
+ * OBS WebSocket Javascript API (obs-websocket-js) v4.0.2
+ * Author: Brendan Hagan (haganbmj)
+ * License: MIT
+ * Repository: https://github.com/haganbmj/obs-websocket-js
+ * Build Timestamp: 2020-09-24 01:45:11+00:00
+ * Built from Commit: https://github.com/haganbmj/obs-websocket-js/commit/7a89c8ae9d02e9edaa0f878e0d93aa934e422cfe
+ */
+(function(e,t){'object'==typeof exports&&'object'==typeof module?module.exports=t():'function'==typeof define&&define.amd?define([],t):'object'==typeof exports?exports.OBSWebSocket=t():e.OBSWebSocket=t()})(window,function(){var t=Math.abs,n=Math.floor,o=Math.pow,e=Math.min;return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){'undefined'!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:'Module'}),Object.defineProperty(e,'__esModule',{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&'object'==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,'default',{enumerable:!0,value:e}),2&n&&'string'!=typeof e)for(var r in e)t.d(o,r,function(t){return e[t]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e['default']}:function(){return e};return t.d(n,'a',n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p='',t(t.s=0)}([function(e,t,n){function o(){return l++ +''}const r=n(1),s=n(14),i=n(15)('obs-websocket-js:Core');let l=0;e.exports=class extends r{send(e,t={}){return t=t||{},new Promise((n,r)=>{const l=o();let a;if(e||(a=s.REQUEST_TYPE_NOT_SPECIFIED),this._connected||(a=s.NOT_CONNECTED),this.once(`obs:internal:message:id-${l}`,(e,t)=>{e?(i('[send:reject] %o',e),r(e)):(i('[send:resolve] %o',t),n(t))}),!a){t['request-type']=e,t['message-id']=l,i('[send] %s %s %o',l,e,t);try{this._socket.send(JSON.stringify(t))}catch(e){a=s.SOCKET_EXCEPTION}}a&&this.emit(`obs:internal:message:id-${l}`,a)})}sendCallback(e,t={},n){n===void 0&&'function'==typeof t&&(n=t,t={}),this.send(e,t).then((...e)=>{n(null,...e)}).catch((e)=>{n(e)})}}},function(e,t,n){const o=n(2),r=n(4),s=n(5),i=n(14),l=n(15)('obs-websocket-js:Socket'),a=n(19),u=n(20);e.exports=class extends r{constructor(){super(),this._connected=!1,this._socket=void 0;const e=this.emit;this.emit=function(...t){l('[emit] %s err: %o data: %o',...t),e.apply(this,t)}}async connect(e={}){e=e||{};const t=e.address||'localhost:4444';if(this._socket)try{this._socket.close()}catch(e){l('Failed to close previous WebSocket:',e.message)}return new Promise(async(n,o)=>{try{await this._connect(t,!!e.secure),await this._authenticate(e.password),n()}catch(e){this._socket.close(),this._connected=!1,a(l,'Connection failed:',e),o(e)}})}async _connect(e,t){return new Promise((n,r)=>{let s=!1;l('Attempting to connect to: %s (secure: %s)',e,t),this._socket=new o((t?'wss://':'ws://')+e),this._socket.onerror=(e)=>{return s?(a(l,'Unknown Socket Error',e),void this.emit('error',e)):void(s=!0,a(l,'Websocket Connection failed:',e),r(i.CONNECTION_ERROR))},this._socket.onopen=()=>{s||(this._connected=!0,s=!0,l('Connection opened: %s',e),this.emit('ConnectionOpened'),n())},this._socket.onclose=()=>{this._connected=!1,l('Connection closed: %s',e),this.emit('ConnectionClosed')},this._socket.onmessage=(e)=>{l('[OnMessage]: %o',e);const t=u(JSON.parse(e.data));let n,o;'error'===t.status?n=t:o=t,t.messageId?this.emit(`obs:internal:message:id-${t.messageId}`,n,o):t.updateType?this.emit(t.updateType,o):(a(l,'Unrecognized Socket Message:',t),this.emit('message',t))}})}async _authenticate(e=''){if(!this._connected)throw i.NOT_CONNECTED;const t=await this.send('GetAuthRequired');if(!t.authRequired)return l('Authentication not Required'),this.emit('AuthenticationSuccess'),i.AUTH_NOT_REQUIRED;try{await this.send('Authenticate',{auth:s(t.salt,t.challenge,e)})}catch(t){throw l('Authentication Failure %o',t),this.emit('AuthenticationFailure'),t}l('Authentication Success'),this.emit('AuthenticationSuccess')}disconnect(){l('Disconnect requested.'),this._socket&&this._socket.close()}}},function(e,t,n){(function(t){var n=null;'undefined'==typeof WebSocket?'undefined'==typeof MozWebSocket?'undefined'==typeof t?'undefined'==typeof window?'undefined'!=typeof self&&(n=self.WebSocket||self.MozWebSocket):n=window.WebSocket||window.MozWebSocket:n=t.WebSocket||t.MozWebSocket:n=MozWebSocket:n=WebSocket,e.exports=n}).call(this,n(3))},function(e){var t=function(){return this}();try{t=t||new Function('return this')()}catch(n){'object'==typeof window&&(t=window)}e.exports=t},function(e){'use strict';function t(e){console&&console.warn&&console.warn(e)}function n(){n.init.call(this)}function o(e){return void 0===e._maxListeners?n.defaultMaxListeners:e._maxListeners}function r(e,n,r,s){var i,l,a;if('function'!=typeof r)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof r);if(l=e._events,void 0===l?(l=e._events=Object.create(null),e._eventsCount=0):(void 0!==l.newListener&&(e.emit('newListener',n,r.listener?r.listener:r),l=e._events),a=l[n]),void 0===a)a=l[n]=r,++e._eventsCount;else if('function'==typeof a?a=l[n]=s?[r,a]:[a,r]:s?a.unshift(r):a.push(r),i=o(e),0i&&!a.warned){a.warned=!0;var u=new Error('Possible EventEmitter memory leak detected. '+a.length+' '+(n+' listeners added. Use emitter.setMaxListeners() to increase limit'));u.name='MaxListenersExceededWarning',u.emitter=e,u.type=n,u.count=a.length,t(u)}return e}function s(){for(var e=[],t=0;te||h(e))throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received '+e+'.');_=e}}),n.init=function(){(this._events===void 0||this._events===Object.getPrototypeOf(this)._events)&&(this._events=Object.create(null),this._eventsCount=0),this._maxListeners=this._maxListeners||void 0},n.prototype.setMaxListeners=function(e){if('number'!=typeof e||0>e||h(e))throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received '+e+'.');return this._maxListeners=e,this},n.prototype.getMaxListeners=function(){return o(this)},n.prototype.emit=function(e){for(var t=[],n=1;nr)return this;0===r?n.shift():p(n,r),1===n.length&&(o[e]=n[0]),void 0!==o.removeListener&&this.emit('removeListener',e,i||t)}return this},n.prototype.off=n.prototype.removeListener,n.prototype.removeAllListeners=function(e){var t,n,o;if(n=this._events,void 0===n)return this;if(void 0===n.removeListener)return 0===arguments.length?(this._events=Object.create(null),this._eventsCount=0):void 0!==n[e]&&(0==--this._eventsCount?this._events=Object.create(null):delete n[e]),this;if(0===arguments.length){var r,s=Object.keys(n);for(o=0;o>>2|e<<30)^(e>>>13|e<<19)^(e>>>22|e<<10)}function l(e){return(e>>>6|e<<26)^(e>>>11|e<<21)^(e>>>25|e<<7)}function a(e){return(e>>>7|e<<25)^(e>>>18|e<<14)^e>>>3}function u(e){return(e>>>17|e<<15)^(e>>>19|e<<13)^e>>>10}var p=n(7),d=n(8),c=n(9).Buffer,_=[1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298],f=Array(64);p(o,d),o.prototype.init=function(){return this._a=1779033703,this._b=3144134277,this._c=1013904242,this._d=2773480762,this._e=1359893119,this._f=2600822924,this._g=528734635,this._h=1541459225,this},o.prototype._update=function(t){for(var n=this._w,o=0|this._a,p=0|this._b,m=0|this._c,c=0|this._d,d=0|this._e,e=0|this._f,f=0|this._g,g=0|this._h,h=0;16>h;++h)n[h]=t.readInt32BE(4*h);for(;64>h;++h)n[h]=0|u(n[h-2])+n[h-7]+a(n[h-15])+n[h-16];for(var y=0;64>y;++y){var C=0|g+l(d)+r(d,e,f)+_[y]+n[y],b=0|i(o)+s(o,p,m);g=f,f=e,e=d,d=0|c+C,c=m,m=p,p=o,o=0|C+b}this._a=0|o+this._a,this._b=0|p+this._b,this._c=0|m+this._c,this._d=0|c+this._d,this._e=0|d+this._e,this._f=0|e+this._f,this._g=0|f+this._g,this._h=0|g+this._h},o.prototype._hash=function(){var e=c.allocUnsafe(32);return e.writeInt32BE(this._a,0),e.writeInt32BE(this._b,4),e.writeInt32BE(this._c,8),e.writeInt32BE(this._d,12),e.writeInt32BE(this._e,16),e.writeInt32BE(this._f,20),e.writeInt32BE(this._g,24),e.writeInt32BE(this._h,28),e},e.exports=o},function(e){e.exports='function'==typeof Object.create?function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:function(e,t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}},function(t,n,o){function r(e,t){this._block=s.alloc(e),this._finalSize=t,this._blockSize=e,this._len=0}var s=o(9).Buffer;r.prototype.update=function(t,n){'string'==typeof t&&(n=n||'utf8',t=s.from(t,n));for(var o=this._block,r=this._blockSize,l=t.length,a=this._len,u=0;u=this._finalSize&&(this._update(this._block),this._block.fill(0));var n=8*this._len;if(4294967295>=n)this._block.writeUInt32BE(n,this._blockSize-4);else{var o=(4294967295&n)>>>0;this._block.writeUInt32BE((n-o)/4294967296,this._blockSize-8),this._block.writeUInt32BE(o,this._blockSize-4)}this._update(this._block);var r=this._hash();return e?r.toString(e):r},r.prototype._update=function(){throw new Error('_update must be implemented by subclass')},t.exports=r},function(e,t,n){function o(e,t){for(var n in e)t[n]=e[n]}function r(e,t,n){return i(e,t,n)}var s=n(10),i=s.Buffer;i.from&&i.alloc&&i.allocUnsafe&&i.allocUnsafeSlow?e.exports=s:(o(s,t),t.Buffer=r),o(i,r),r.from=function(e,t,n){if('number'==typeof e)throw new TypeError('Argument must not be a number');return i(e,t,n)},r.alloc=function(e,t,n){if('number'!=typeof e)throw new TypeError('Argument must be a number');var o=i(e);return void 0===t?o.fill(0):'string'==typeof n?o.fill(t,n):o.fill(t),o},r.allocUnsafe=function(e){if('number'!=typeof e)throw new TypeError('Argument must be a number');return i(e)},r.allocUnsafeSlow=function(e){if('number'!=typeof e)throw new TypeError('Argument must be a number');return s.SlowBuffer(e)}},function(t,r,s){'use strict';(function(t){function i(){return u.TYPED_ARRAY_SUPPORT?2147483647:1073741823}function l(e,t){if(i()e)throw new RangeError('"size" argument must not be negative')}function d(e,t,n,o){return p(t),0>=t?l(e,t):void 0===n?l(e,t):'string'==typeof o?l(e,t).fill(n,o):l(e,t).fill(n)}function c(e,t){if(p(t),e=l(e,0>t?0:0|m(t)),!u.TYPED_ARRAY_SUPPORT)for(var n=0;nt.length?0:0|m(t.length);e=l(e,n);for(var o=0;on||t.byteLength=i())throw new RangeError('Attempt to allocate Buffer larger than maximum size: 0x'+i().toString(16)+' bytes');return 0|e}function y(e,t){if(u.isBuffer(e))return e.length;if('undefined'!=typeof ArrayBuffer&&'function'==typeof ArrayBuffer.isView&&(ArrayBuffer.isView(e)||e instanceof ArrayBuffer))return e.byteLength;'string'!=typeof e&&(e=''+e);var n=e.length;if(0===n)return 0;for(var o=!1;;)switch(t){case'ascii':case'latin1':case'binary':return n;case'utf8':case'utf-8':case void 0:return Q(e).length;case'ucs2':case'ucs-2':case'utf16le':case'utf-16le':return 2*n;case'hex':return n>>>1;case'base64':return H(e).length;default:if(o)return Q(e).length;t=(''+t).toLowerCase(),o=!0;}}function C(e,t,n){var o=!1;if((void 0===t||0>t)&&(t=0),t>this.length)return'';if((void 0===n||n>this.length)&&(n=this.length),0>=n)return'';if(n>>>=0,t>>>=0,n<=t)return'';for(e||(e='utf8');;)switch(e){case'hex':return x(this,t,n);case'utf8':case'utf-8':return k(this,t,n);case'ascii':return L(this,t,n);case'latin1':case'binary':return I(this,t,n);case'base64':return S(this,t,n);case'ucs2':case'ucs-2':case'utf16le':case'utf-16le':return O(this,t,n);default:if(o)throw new TypeError('Unknown encoding: '+e);e=(e+'').toLowerCase(),o=!0;}}function b(e,t,n){var o=e[t];e[t]=e[n],e[n]=o}function E(e,t,n,o,r){if(0===e.length)return-1;if('string'==typeof n?(o=n,n=0):2147483647n&&(n=-2147483648),n=+n,isNaN(n)&&(n=r?0:e.length-1),0>n&&(n=e.length+n),n>=e.length){if(r)return-1;n=e.length-1}else if(0>n)if(r)n=0;else return-1;if('string'==typeof t&&(t=u.from(t,o)),u.isBuffer(t))return 0===t.length?-1:A(e,t,n,o,r);if('number'==typeof t)return t&=255,u.TYPED_ARRAY_SUPPORT&&'function'==typeof Uint8Array.prototype.indexOf?r?Uint8Array.prototype.indexOf.call(e,t,n):Uint8Array.prototype.lastIndexOf.call(e,t,n):A(e,[t],n,o,r);throw new TypeError('val must be string, number or Buffer')}function A(e,t,n,o,r){function s(e,t){return 1==l?e[t]:e.readUInt16BE(t*l)}var l=1,a=e.length,u=t.length;if(void 0!==o&&(o=(o+'').toLowerCase(),'ucs2'===o||'ucs-2'===o||'utf16le'===o||'utf-16le'===o)){if(2>e.length||2>t.length)return-1;l=2,a/=2,u/=2,n/=2}var p;if(r){var i=-1;for(p=n;pa&&(n=a-u),p=n;0<=p;p--){for(var d=!0,c=0;cr&&(o=r)):o=r;var s=t.length;if(0!=s%2)throw new TypeError('Invalid hex string');o>s/2&&(o=s/2);for(var l,a=0;ai&&(l=i):2==a?(u=t[s+1],128==(192&u)&&(c=(31&i)<<6|63&u,127c||57343c&&(l=c))):void 0}null===l?(l=65533,a=1):65535>>10),l=56320|1023&l),r.push(l),s+=a}return B(r)}function B(e){var t=e.length;if(t<=ne)return J.apply(String,e);for(var n='',o=0;ot)&&(t=0),(!n||0>n||n>o)&&(n=o);for(var r='',s=t;se)throw new RangeError('offset is not uint');if(e+t>n)throw new RangeError('Trying to access beyond buffer length')}function Y(e,t,n,o,r,s){if(!u.isBuffer(e))throw new TypeError('"buffer" argument must be a Buffer instance');if(t>r||te.length)throw new RangeError('Index out of range')}function D(t,n,o,r){0>n&&(n=65535+n+1);for(var s=0,i=e(t.length-o,2);s>>8*(r?s:1-s)}function N(t,n,o,r){0>n&&(n=4294967295+n+1);for(var s=0,i=e(t.length-o,4);s>>8*(r?s:3-s)}function z(e,t,n,o){if(n+o>e.length)throw new RangeError('Index out of range');if(0>n)throw new RangeError('Index out of range')}function j(e,t,n,o,r){return r||z(e,t,n,4,3.4028234663852886e38,-3.4028234663852886e38),ee.write(e,t,n,o,23,4),n+4}function M(e,t,n,o,r){return r||z(e,t,n,8,1.7976931348623157e308,-1.7976931348623157e308),ee.write(e,t,n,o,52,8),n+8}function W(e){if(e=q(e).replace(oe,''),2>e.length)return'';for(;0!=e.length%4;)e+='=';return e}function q(e){return e.trim?e.trim():e.replace(/^\s+|\s+$/g,'')}function K(e){return 16>e?'0'+e.toString(16):e.toString(16)}function Q(e,t){t=t||Infinity;for(var n,o=e.length,r=null,s=[],l=0;ln){if(!r){if(56319n){-1<(t-=3)&&s.push(239,191,189),r=n;continue}n=(r-55296<<10|n-56320)+65536}else r&&-1<(t-=3)&&s.push(239,191,189);if(r=null,128>n){if(0>(t-=1))break;s.push(n)}else if(2048>n){if(0>(t-=2))break;s.push(192|n>>6,128|63&n)}else if(65536>n){if(0>(t-=3))break;s.push(224|n>>12,128|63&n>>6,128|63&n)}else if(1114112>n){if(0>(t-=4))break;s.push(240|n>>18,128|63&n>>12,128|63&n>>6,128|63&n)}else throw new Error('Invalid code point')}return s}function X(e){for(var t=[],n=0;n(t-=2));++l)n=e.charCodeAt(l),o=n>>8,r=n%256,s.push(r),s.push(o);return s}function H(e){return Z.toByteArray(W(e))}function G(e,t,n,o){for(var r=0;r=t.length||r>=e.length);++r)t[r+n]=e[r];return r}function $(e){return e!==e}var J=String.fromCharCode,Z=s(11),ee=s(12),te=s(13);r.Buffer=u,r.SlowBuffer=function(e){return+e!=e&&(e=0),u.alloc(+e)},r.INSPECT_MAX_BYTES=50,u.TYPED_ARRAY_SUPPORT=t.TYPED_ARRAY_SUPPORT===void 0?function(){try{var e=new Uint8Array(1);return e.__proto__={__proto__:Uint8Array.prototype,foo:function(){return 42}},42===e.foo()&&'function'==typeof e.subarray&&0===e.subarray(1,1).byteLength}catch(t){return!1}}():t.TYPED_ARRAY_SUPPORT,r.kMaxLength=i(),u.poolSize=8192,u._augment=function(e){return e.__proto__=u.prototype,e},u.from=function(e,t,n){return a(null,e,t,n)},u.TYPED_ARRAY_SUPPORT&&(u.prototype.__proto__=Uint8Array.prototype,u.__proto__=Uint8Array,'undefined'!=typeof Symbol&&Symbol.species&&u[Symbol.species]===u&&Object.defineProperty(u,Symbol.species,{value:null,configurable:!0})),u.alloc=function(e,t,n){return d(null,e,t,n)},u.allocUnsafe=function(e){return c(null,e)},u.allocUnsafeSlow=function(e){return c(null,e)},u.isBuffer=function(e){return!!(null!=e&&e._isBuffer)},u.compare=function(t,n){if(!u.isBuffer(t)||!u.isBuffer(n))throw new TypeError('Arguments must be Buffers');if(t===n)return 0;for(var o=t.length,r=n.length,s=0,i=e(o,r);st&&(e+=' ... ')),''},u.prototype.compare=function(t,n,o,r,s){if(!u.isBuffer(t))throw new TypeError('Argument must be a Buffer');if(void 0===n&&(n=0),void 0===o&&(o=t?t.length:0),void 0===r&&(r=0),void 0===s&&(s=this.length),0>n||o>t.length||0>r||s>this.length)throw new RangeError('out of range index');if(r>=s&&n>=o)return 0;if(r>=s)return-1;if(n>=o)return 1;if(n>>>=0,o>>>=0,r>>>=0,s>>>=0,this===t)return 0;for(var l=s-r,a=o-n,p=e(l,a),d=this.slice(r,s),c=t.slice(n,o),f=0;fr)&&(n=r),0n||0>t)||t>this.length)throw new RangeError('Attempt to write outside buffer bounds');o||(o='utf8');for(var s=!1;;)switch(o){case'hex':return w(this,e,t,n);case'utf8':case'utf-8':return P(this,e,t,n);case'ascii':return F(this,e,t,n);case'latin1':case'binary':return R(this,e,t,n);case'base64':return v(this,e,t,n);case'ucs2':case'ucs-2':case'utf16le':case'utf-16le':return T(this,e,t,n);default:if(s)throw new TypeError('Unknown encoding: '+o);o=(''+o).toLowerCase(),s=!0;}},u.prototype.toJSON=function(){return{type:'Buffer',data:Array.prototype.slice.call(this._arr||this,0)}};var ne=4096;u.prototype.slice=function(e,t){var n=this.length;e=~~e,t=t===void 0?n:~~t,0>e?(e+=n,0>e&&(e=0)):e>n&&(e=n),0>t?(t+=n,0>t&&(t=0)):t>n&&(t=n),t=s&&(r-=o(2,8*t)),r},u.prototype.readIntBE=function(e,t,n){e|=0,t|=0,n||U(e,t,this.length);for(var r=t,s=1,i=this[e+--r];0=s&&(i-=o(2,8*t)),i},u.prototype.readInt8=function(e,t){return t||U(e,1,this.length),128&this[e]?-1*(255-this[e]+1):this[e]},u.prototype.readInt16LE=function(e,t){t||U(e,2,this.length);var n=this[e]|this[e+1]<<8;return 32768&n?4294901760|n:n},u.prototype.readInt16BE=function(e,t){t||U(e,2,this.length);var n=this[e+1]|this[e]<<8;return 32768&n?4294901760|n:n},u.prototype.readInt32LE=function(e,t){return t||U(e,4,this.length),this[e]|this[e+1]<<8|this[e+2]<<16|this[e+3]<<24},u.prototype.readInt32BE=function(e,t){return t||U(e,4,this.length),this[e]<<24|this[e+1]<<16|this[e+2]<<8|this[e+3]},u.prototype.readFloatLE=function(e,t){return t||U(e,4,this.length),ee.read(this,e,!0,23,4)},u.prototype.readFloatBE=function(e,t){return t||U(e,4,this.length),ee.read(this,e,!1,23,4)},u.prototype.readDoubleLE=function(e,t){return t||U(e,8,this.length),ee.read(this,e,!0,52,8)},u.prototype.readDoubleBE=function(e,t){return t||U(e,8,this.length),ee.read(this,e,!1,52,8)},u.prototype.writeUIntLE=function(e,t,n,r){if(e=+e,t|=0,n|=0,!r){var s=o(2,8*n)-1;Y(this,e,t,n,s,0)}var l=1,a=0;for(this[t]=255&e;++a>>8):D(this,e,t,!0),t+2},u.prototype.writeUInt16BE=function(e,t,n){return e=+e,t|=0,n||Y(this,e,t,2,65535,0),u.TYPED_ARRAY_SUPPORT?(this[t]=e>>>8,this[t+1]=255&e):D(this,e,t,!1),t+2},u.prototype.writeUInt32LE=function(e,t,n){return e=+e,t|=0,n||Y(this,e,t,4,4294967295,0),u.TYPED_ARRAY_SUPPORT?(this[t+3]=e>>>24,this[t+2]=e>>>16,this[t+1]=e>>>8,this[t]=255&e):N(this,e,t,!0),t+4},u.prototype.writeUInt32BE=function(e,t,n){return e=+e,t|=0,n||Y(this,e,t,4,4294967295,0),u.TYPED_ARRAY_SUPPORT?(this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e):N(this,e,t,!1),t+4},u.prototype.writeIntLE=function(e,t,n,r){if(e=+e,t|=0,!r){var s=o(2,8*n-1);Y(this,e,t,n,s-1,-s)}var l=0,i=1,a=0;for(this[t]=255&e;++le&&0==a&&0!==this[t+l-1]&&(a=1),this[t+l]=255&(e/i>>0)-a;return t+n},u.prototype.writeIntBE=function(e,t,n,r){if(e=+e,t|=0,!r){var s=o(2,8*n-1);Y(this,e,t,n,s-1,-s)}var l=n-1,i=1,a=0;for(this[t+l]=255&e;0<=--l&&(i*=256);)0>e&&0==a&&0!==this[t+l+1]&&(a=1),this[t+l]=255&(e/i>>0)-a;return t+n},u.prototype.writeInt8=function(e,t,o){return e=+e,t|=0,o||Y(this,e,t,1,127,-128),u.TYPED_ARRAY_SUPPORT||(e=n(e)),0>e&&(e=255+e+1),this[t]=255&e,t+1},u.prototype.writeInt16LE=function(e,t,n){return e=+e,t|=0,n||Y(this,e,t,2,32767,-32768),u.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8):D(this,e,t,!0),t+2},u.prototype.writeInt16BE=function(e,t,n){return e=+e,t|=0,n||Y(this,e,t,2,32767,-32768),u.TYPED_ARRAY_SUPPORT?(this[t]=e>>>8,this[t+1]=255&e):D(this,e,t,!1),t+2},u.prototype.writeInt32LE=function(e,t,n){return e=+e,t|=0,n||Y(this,e,t,4,2147483647,-2147483648),u.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8,this[t+2]=e>>>16,this[t+3]=e>>>24):N(this,e,t,!0),t+4},u.prototype.writeInt32BE=function(e,t,n){return e=+e,t|=0,n||Y(this,e,t,4,2147483647,-2147483648),0>e&&(e=4294967295+e+1),u.TYPED_ARRAY_SUPPORT?(this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e):N(this,e,t,!1),t+4},u.prototype.writeFloatLE=function(e,t,n){return j(this,e,t,!0,n)},u.prototype.writeFloatBE=function(e,t,n){return j(this,e,t,!1,n)},u.prototype.writeDoubleLE=function(e,t,n){return M(this,e,t,!0,n)},u.prototype.writeDoubleBE=function(e,t,n){return M(this,e,t,!1,n)},u.prototype.copy=function(e,t,n,o){if(n||(n=0),o||0===o||(o=this.length),t>=e.length&&(t=e.length),t||(t=0),0t)throw new RangeError('targetStart out of bounds');if(0>n||n>=this.length)throw new RangeError('sourceStart out of bounds');if(0>o)throw new RangeError('sourceEnd out of bounds');o>this.length&&(o=this.length),e.length-ts||!u.TYPED_ARRAY_SUPPORT)for(r=0;rr&&(e=r)}if(void 0!==o&&'string'!=typeof o)throw new TypeError('encoding must be a string');if('string'==typeof o&&!u.isEncoding(o))throw new TypeError('Unknown encoding: '+o)}else'number'==typeof e&&(e&=255);if(0>t||this.length>>=0,n=n===void 0?this.length:n>>>0,e||(e=0);var s;if('number'==typeof e)for(s=t;s>18]+l[63&e>>12]+l[63&e>>6]+l[63&e]}function s(e,t,n){for(var o,s=[],l=t;l>16,p[d++]=255&t>>8,p[d++]=255&t;return 2===l&&(t=a[e.charCodeAt(r)]<<2|a[e.charCodeAt(r+1)]>>4,p[d++]=255&t),1===l&&(t=a[e.charCodeAt(r)]<<10|a[e.charCodeAt(r+1)]<<4|a[e.charCodeAt(r+2)]>>2,p[d++]=255&t>>8,p[d++]=255&t),p},t.fromByteArray=function(e){for(var t,n=e.length,o=n%3,r=[],a=16383,u=0,i=n-o;ui?i:u+a));return 1==o?(t=e[n-1],r.push(l[t>>2]+l[63&t<<4]+'==')):2==o&&(t=(e[n-2]<<8)+e[n-1],r.push(l[t>>10]+l[63&t>>4]+l[63&t<<2]+'=')),r.join('')};for(var l=[],a=[],u='undefined'==typeof Uint8Array?Array:Uint8Array,p='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',d=0,i=p.length;d>1,g=-7,h=r?a-1:0,i=r?-1:1,d=t[n+h];for(h+=i,u=d&(1<<-g)-1,d>>=-g,g+=p;0>=-g,g+=l;0>1,C=23===p?5.960464477539063e-8-6.617444900424222e-24:0,b=u?0:f-1,i=u?1:-1,d=0>l||0===l&&0>1/l?1:0;for(l=t(l),isNaN(l)||l===Infinity?(h=isNaN(l)?1:0,g=m):(g=n(Math.log(l)/Math.LN2),1>l*(_=o(2,-g))&&(g--,_*=2),l+=1<=g+y?C/_:C*o(2,1-y),2<=l*_&&(g++,_/=2),g+y>=m?(h=0,g=m):1<=g+y?(h=(l*_-1)*o(2,p),g+=y):(h=l*o(2,y-1)*o(2,p),g=0));8<=p;r[a+b]=255&h,b+=i,h/=256,p-=8);for(g=g<{'%%'===e||(o++,'%c'===e&&(r=o))}),t.splice(r,0,n)},t.save=function(e){try{e?t.storage.setItem('debug',e):t.storage.removeItem('debug')}catch(e){}},t.load=function(){let e;try{e=t.storage.getItem('debug')}catch(e){}return!e&&'undefined'!=typeof o&&'env'in o&&(e=o.env.DEBUG),e},t.useColors=function(){return'undefined'!=typeof window&&window.process&&('renderer'===window.process.type||window.process.__nwjs)||('undefined'!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/)?!1:'undefined'!=typeof document&&document.documentElement&&document.documentElement.style&&document.documentElement.style.WebkitAppearance||'undefined'!=typeof window&&window.console&&(window.console.firebug||window.console.exception&&window.console.table)||'undefined'!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&31<=parseInt(RegExp.$1,10)||'undefined'!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/))},t.storage=function(){try{return localStorage}catch(e){}}(),t.colors=['#0000CC','#0000FF','#0033CC','#0033FF','#0066CC','#0066FF','#0099CC','#0099FF','#00CC00','#00CC33','#00CC66','#00CC99','#00CCCC','#00CCFF','#3300CC','#3300FF','#3333CC','#3333FF','#3366CC','#3366FF','#3399CC','#3399FF','#33CC00','#33CC33','#33CC66','#33CC99','#33CCCC','#33CCFF','#6600CC','#6600FF','#6633CC','#6633FF','#66CC00','#66CC33','#9900CC','#9900FF','#9933CC','#9933FF','#99CC00','#99CC33','#CC0000','#CC0033','#CC0066','#CC0099','#CC00CC','#CC00FF','#CC3300','#CC3333','#CC3366','#CC3399','#CC33CC','#CC33FF','#CC6600','#CC6633','#CC9900','#CC9933','#CCCC00','#CCCC33','#FF0000','#FF0033','#FF0066','#FF0099','#FF00CC','#FF00FF','#FF3300','#FF3333','#FF3366','#FF3399','#FF33CC','#FF33FF','#FF6600','#FF6633','#FF9900','#FF9933','#FFCC00','#FFCC33'],e.exports=n(17)(t);const{formatters:r}=e.exports;r.j=function(e){try{return JSON.stringify(e)}catch(e){return'[UnexpectedJSONParseError]: '+e.message}}}).call(this,n(16))},function(e){function t(){throw new Error('setTimeout has not been defined')}function n(){throw new Error('clearTimeout has not been defined')}function o(e){if(u===setTimeout)return setTimeout(e,0);if((u===t||!u)&&setTimeout)return u=setTimeout,setTimeout(e,0);try{return u(e,0)}catch(t){try{return u.call(null,e,0)}catch(t){return u.call(this,e,0)}}}function r(e){if(p===clearTimeout)return clearTimeout(e);if((p===n||!p)&&clearTimeout)return p=clearTimeout,clearTimeout(e);try{return p(e)}catch(t){try{return p.call(null,e)}catch(t){return p.call(this,e)}}}function s(){g&&c&&(g=!1,c.length?f=c.concat(f):h=-1,f.length&&l())}function l(){if(!g){var e=o(s);g=!0;for(var t=f.length;t;){for(c=f,f=[];++h{if('%%'===t)return t;l++;const s=r.formatters[o];if('function'==typeof s){const o=e[l];t=s.call(n,o),e.splice(l,1),l--}return t}),r.formatArgs.call(n,e);const a=n.log||r.log;a.apply(n,e)}let o;return t.namespace=e,t.enabled=r.enabled(e),t.useColors=r.useColors(),t.color=n(e),t.destroy=s,t.extend=i,'function'==typeof r.init&&r.init(t),r.instances.push(t),t}function s(){const e=r.instances.indexOf(this);return-1!==e&&(r.instances.splice(e,1),!0)}function i(e,t){const n=r(this.namespace+('undefined'==typeof t?':':t)+e);return n.log=this.log,n}function l(e){return e.toString().substring(2,e.toString().length-2).replace(/\.\*\?$/,'*')}return r.debug=r,r.default=r,r.coerce=function(e){return e instanceof Error?e.stack||e.message:e},r.disable=function(){const e=[...r.names.map(l),...r.skips.map(l).map((e)=>'-'+e)].join(',');return r.enable(''),e},r.enable=function(e){r.save(e),r.names=[],r.skips=[];let t;const n=('string'==typeof e?e:'').split(/[\s,]+/),o=n.length;for(t=0;t{r[t]=e[t]}),r.instances=[],r.names=[],r.skips=[],r.formatters={},r.selectColor=n,r.enable(r.load()),r}},function(e){function n(e){if(e+='',!(100=p?l(e/p)+'d':n>=u?l(e/u)+'h':n>=s?l(e/s)+'m':n>=a?l(e/a)+'s':e+'ms'}function r(e){var n=t(e);return n>=p?i(e,n,p,'day'):n>=u?i(e,n,u,'hour'):n>=s?i(e,n,s,'minute'):n>=a?i(e,n,a,'second'):e+' ms'}function i(e,t,o,n){return l(e/o)+' '+n+(t>=1.5*o?'s':'')}var l=Math.round,a=1e3,s=60*a,u=60*s,p=24*u,d=7*p,c=365.25*p;e.exports=function(e,t){t=t||{};var s=typeof e;if('string'==s&&0{return t.toUpperCase()});e[n]=e[t]}return e}}])});
+//# sourceMappingURL=obs-websocket.min.js.map
\ No newline at end of file
diff --git a/examples/p2p.html b/examples/p2p.html
new file mode 100644
index 0000000..36b6989
--- /dev/null
+++ b/examples/p2p.html
@@ -0,0 +1,69 @@
+
+
+
+ starting...
+
+
+
+
\ No newline at end of file
diff --git a/examples/readme.md b/examples/readme.md
new file mode 100644
index 0000000..e46702f
--- /dev/null
+++ b/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
diff --git a/examples/remoteapi.html b/examples/remoteapi.html
new file mode 100644
index 0000000..7af07a0
--- /dev/null
+++ b/examples/remoteapi.html
@@ -0,0 +1,477 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/sensoroverlay.html b/examples/sensoroverlay.html
new file mode 100644
index 0000000..9531806
--- /dev/null
+++ b/examples/sensoroverlay.html
@@ -0,0 +1,266 @@
+
+Video with sensor overlayed data
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/sensors.html b/examples/sensors.html
new file mode 100644
index 0000000..9265939
--- /dev/null
+++ b/examples/sensors.html
@@ -0,0 +1,280 @@
+
+Sensor and video stream access example
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+ onclick="submitDebugLog();"
+ style="cursor: pointer; visibility: hidden; display:none;z-index:3;"
+ >
+ onclick="warnUser('For support, please browse https://reddit.com/r/vdoninja or join the live chat on Discord at https://discord.vdo.ninja.\n\nThe Docs also contains many help guides and advanced settings, located at https://docs.vdo.ninja.\n\nTo access the video stats menu, hold CTRL (command) and Left-Click on a video. Most video issues can be fixed by using Wired Internet instead of Wi-Fi.')"
+ style="cursor: pointer; display:none;"
+ alt="How to Use This with OBS"
+ >
-
+
-
-
+
+
+
Create a Room
@@ -194,24 +257,38 @@
-
+
Room Name:
-
-
+
+
+
+
+ Room Name:
+
+
+
+
-
+
Password:
-
-
+
+
+
+
+
+ Password:
+
+
+
@@ -220,16 +297,16 @@
- Guests can only see the Director's Video
+ The guests can see the director, but not other guests' videos
-
+
- Director will also be a performer
+ The director will be performing as well, appearing in group scenes
@@ -248,32 +325,37 @@
-
-
-
-
-
-
-
-
-
+
+
+
-
-
- Important Tips:
-
-
Disabling video sharing between guests will improve performance
-
Invite only guests to the room that you trust.
-
The "Recording" option is considered experimental.
- If you have "pixel smearing" or corrupted video, try adding &codec=h264 or &codec=vp9 to the OBS view link. Using Wi-Fi will make the issue worse.
+ If the video fails to load in OBS Studio, where the browser source remains blank, try disabling hardware-acceleration or
+ refer to this help guide for more.
- A list of less common issues can be found here.
+ Samsung smartphones (A-series) may fail to publish video with some mobile browsers; try using Firefox Mobile or the native Android app in these cases.
+
+
+ Some devices that use hardware encoding can experience video issues; switching to VP8 or VP9 as a codec may help.
-
- 👓🔆 Site Updated on April 20th: v17 Release Notes. The previous version can be found at https://obs.ninja/v164/ if you are having issues with this minor update.
-
+
+ Welcome to VDO Ninja! We've rebranded! Nothing else is changing and we're staying 100% free.
+
LINKS (GUEST INVITES & SCENES)
-
+ Click Here for a quick overview and help
-
+ Welcome. This is the director's control-room for the group-chat.
You can host a group chat with friends using a room. Share the blue link to invite guests who will join the chat automatically.
- Known Limitations with Group Rooms:
+ Known Limitations with Group Rooms:
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 disable video sharing between guests. Using &broadcast, &roombitrate=0 or &novideo are options there.
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.
@@ -771,58 +936,56 @@
Adding &showonly=SOME_OBS_VIRTUALCAM to the guest invite links allows for only a single video to be seen by the guests; this can be output of the OBS Virtual Camera for example
- For advanced URL options and parameters, see the Wiki.
-
+ For advanced URL options and parameters, see the Wiki.
+
-
-
INVITE A GUEST
+
INVITE A GUEST
Guests can use the link to join the group room
-
+
-
+
- Guests hear others
+ Guests hear others
-
-
+
+
-
-
+
+
CAPTURE A GROUP SCENE
Use in OBS or other studio software to capture the group video mix
-
+
-
+
- Auto-add guests
+ Auto-add guests
-
-
+
+
-
-
+
-
+
⚠This can cause guests to be too quiet or cause feedback issuesPro-audio mode
+ ⚠This can cause guests to be too quiet or have feedback/echo issuesPro-audio mode
-
+
- ⚠This can cause video playback to lag 1080p60 Video if Available
+ ⚠This can cause video playback to lag1080p60 Video if Available Auto-select default camera
+
+ Compatibility mode
+ Hide settings button
-
- Mini self-preview
-
- ⚠Uses more CPU and freezes the video if the guest doesn't keep the tab visible.Virtual backgrounds
+ ⚠Uses more CPU and freezes the video if the guest doesn't keep the tab visible.Virtual backgrounds
+
+
+
+ Disable animations
+
+
+
+ ⚠Pretty experimental and limited browser support, though relatively low CPU usage.
+ P2P Chunked-mode
+
+
-
+
- ⚠Only use with powerful computers and small groups!!Guests see HD video
+ ⚠Only use with powerful computers and small groups!!Guests see HD video Enable equalizer as option
-
-
-
+
+
+
+ ⚠Uses a server to restream data, rather than p2p.
+ Stream via server
+
+
+
+ Mini self-preview
+
+
+
+ Show rule-of-thirds grid
+
- Mute microphone by default
+ Muted; guest can unmute
+
+
+ Muted; director can unmute Guest joins with no camera
-
- Unmute by director only
-
-
-
-
- ⚠This can cause audio clicking issues
- Pro-audio mode
-
-
- 💉Can reduce packet loss video corruption in OBS on PC
- Use H264 codec
-
-
+
+
-
-
+
Show active speakers
+
+
+
+ Green background
+
+
+
+ Fade-in videos
+
+
+
+ Animate mixing
+
+ /// If wanting to fully-self-host, uncomment the following and deploy your own websocket server; good for air-gapped deployments
+ // session.wss = "wss://wss.yourdomainhere.com:443"; // https://github.com/steveseguin/websocket_server
+ // session.customWSS = true;
+ //////
+
+ ///// The following lets you set the defaults
+
+ // session.webcamonly // true,false
+ // session.stereo // 0,1,2,3,4,5
+ // session.audiobitrate // int in kbps
+ // session.view // "xxxx" ; the stream ID or a list of Stream IDs to Connect to. Not the same as &noaudio/&novideo. Set to "" (empty) if you don't wish to connect to any.
+ // session.remote // See docs, but allows for remote stats monitoring and remote focus/zoom control
+ // session.optimize // Whether to optimize invisible scenes in OBS. See docs.vdo.ninja. Setting to 0 will pause the video/audio when not visible in OBS
+ // session.disableOBS // If true, will disable any OBS-specific events/functions.
+ // session.noaudio // False by default, otherwise specify a list [] of stream IDs to allow. Listing none allows no incoming audio streams
+ // session.novideo // False by default, otherwise specify a list [] of stream IDs to allow. Listing none allows no incoming video streams
+ // session.forceios // If true, will allow iOS devices to send H264 video to other guests in a room
+ // session.nocursor // hides the cursor using CSS
+ // session.codec // default codec; maybe h264 is useful? the default is up to the browser normally
+ // session.scale // By default, scale is self-optimizing, but you can set a value of 1 to 100 to choose the playback scale of all incoming video streams
+ // session.bitrate // int in kbps -- you can set the default max target bitrate here
+ // session.totalRoomBitrate = 500; // int, kbps -- you can set the default quality of the group room here
+ // session.height // int ; height to publish a video stream at. Will fail if not supported by the camera
+ // session.width // int ; see above
+ // session.quality // int -- if setting == 0, then than the default resolution will be 1080p, instead of 720p60 (q=1) , while q=2 = 360p30.
+ // session.sink // Output device to playback audio to. see the docs
+ // session.offsetChannel // int
+ // session.audioChannels // int
+ // session.security // true to disable the wss connection after the first peer connection is made
+ // session.frameRate // int ; publishing frame rate. will fail if camera does not support it.
+ // session.sync // see the docs
+ // session.buffer // int in milliseconds ; see the docs
+ // session.roomid // "yyyy" -- the room name to use. alphanumeric.
+ // session.scene // the scene name. Scene 0, 1, ... 8, or any custom scene name is supported. STRING value. Needed to have a clean view link of a guest stream
+ // session.title // "zzzz" ; sets the title of the browser page.
+ // session.introOnClean = true; // this will load the page with the webcam selection screen if &push or &room is in the URL; no need to use &webcam.
+ // session.lowBitrateCutoff = 300; // Set a minimum bitrate (in kbps) before the stream is hidden. Useful for IRL streams maybe
+ // session.apiserver = "wss://api.vdo.ninja:443"; // specifiy a custom websocket API URL.
+ // session.darkmode = false; // enable or disable the dark style theme as the default
+ // session.defaultBackgroundImages = ["./media/bg_sample1.webp", "./media/bg_sample2.webp"]; // for &effects=5 (virtual backgrounds)
+ // session.hidehome = true; // If used, 'hide home' will make the landing page inaccessible, along with hiding a few go-home elements.
+
+
-
-
+ -->
+
diff --git a/install.md b/install.md
index 0aef0ea..4ad2ec1 100644
--- a/install.md
+++ b/install.md
@@ -1,47 +1,45 @@
-Deploying this code. A guide. (INITIAL DRAFT VERSION)
+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.
+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; deploying a private TURN server; or running VDO.Ninja without internet on a private LAN.
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://chromicam.com
- https://invite.cam (via URL obfuscation option)
-- https://ltt.ninja
-- https://obsn.me
-- https://rtc.ninja
-- https://vmix.ninja
-- https://webrtc.party
-- https://callin.ninja
-- https://auxiliary.live (backup hosted)
-- https://backup.obs.ninja (fully backup hosted)
+- https://backup.vdo.ninja (fully backup hosted)
-There is also an isolated version specificly designed for use in mainland China, hosted at https://insecure.cam in Hong Kong AWS.
+There's also the Github-hosted version, which mirrors the master branch of the code repo. https://steveseguin.github.io/vdo.ninja/ You can use this hosted version or fork VDO.Ninja and host it yourself in the same way via Github Pages; it's free and can be done within minutes. I provide a video guide on how to do this here, https://www.youtube.com/watch?v=uYLKkX2_flY, and it's what I recommend for most users looking to deploy their own version of VDO.Ninja.
-You can also point your domain to the OBS.Ninja IP address (provided on request), which will also rebrand the site automatically to match your domain name. (Requires Cloudflare as DNS server and proxy, Flexible SSL cert on, and HTTPs always on - all free.)
+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.
-For those wanting a private TURN server setup, you can load the settings for those via the URL parameters. If infrequently needing a private TURN, this is a great solution. You can also use URL forwarding services to load up a customized link to OBS.Ninja, with URL parameters already included, such as https://invite.mypersonaldomain.com , which might secretly resolve to https://obs.ninja/?room=myRoom&hash=3423&label or such.
+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.
-OBS.Ninja also supports IFRAMES, so you can embed OBS.Ninja into your website and customize it via both URL parameters, but also via the IFRAME API. You can insert custom CSS styles with this method, giving OBS.Ninja quite a bit of flare.
+See more on IFRAMES here: https://docs.vdo.ninja/guides/iframe-api-documentation
-See more on IFRAMES here: https://github.com/steveseguin/obsninja/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.
-Understanding clearly why you need to deploy any code or server is important. Maintaining updated deployed code can be quite hard, as OBS.Ninja updates frequently, so there are good reasons to consider an IFRAME approach instead. Feature requests there are welcomed.
+That all aside, please continue for instructions for hosting on your own webserver, turn relay server, and more.
-That all aside, please continue:
+### Deploy to GitHub pages: the quick and simple method
-### SETUP
+For a very simple method on how to deploy VDO.Ninja, there's a detailed video guide here: https://www.youtube.com/watch?v=uYLKkX2_flY
-There's a community-created video tutorial on setting up here; https://youtu.be/8sDMwBIlgwE Otherwise, read on.
+Most users might find the Github Pages deployment option easiest and quickest.
-I use Cloudflare with Flexible SSL enabled and HTTP Rewrites. If you do not use Cloudflare, you will need to deploy SSL certificates onto your website. You will also have to have Cloudflare or whatever DNS provider you have, point your domain name to the IP address of your webserver. OBS.Ninja REQUIRES a domain name and SSL.
+### Deplying to a NGINX web server
-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.
+For advanced users, NGINX might be more appropriate than using Github Pages, so find written directions below. There's also a community-created video tutorial on setting up on AWS + Nginx here; https://youtu.be/8sDMwBIlgwE, but it's not an official install guide.
+
+Please consider the below directions just loose guidelines; you may need to change things up depending on factors like firewalls, operating system versions, and other factors. This NGINX install guide makes some assumptions that you know the basics of NGINX, running Linux servers, domain name setup, and code deployments. Most users getting stuck do because of the SSL requirement, or because of overly complicated firewall/VPS setups.
+
+Please note, VDO.Ninja REQUIRES a domain name and SSL, unless you modify all browsers being used to support otherwise. (More on this in the [Internet-free section](#internet-free-deployments) below) As a result, getting VDO.Ninja working can be quite challenging, as setting up domain names and SSL can be tricky for some.
+
+The following commands will setup NGINX, assuming you are running on a standard Ubuntu server.
```
sudo apt-get update
apt-get install nginx -y
@@ -49,52 +47,110 @@ 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
+If you need to download the code for VDO.Ninja, the basic idea is something like this:
+
+```
+sudo apt-get install git -y
+cd /var/www/html
+git clone https://github.com/steveseguin/vdo.ninja
+```
+
+To keep things easy, Steve generally recommends using Cloudflare to provide caching and SSL, but you can google `Certbot` for another free SSL option. The below NGINX config assumes you are using Cloudflare's flexible SSL option, which is the simpliest way to get started. You'll need to also add the VDO.Ninja code to the /var/www/html/vdo.ninja folder (or whatever you set it to) and modify the port/SSL/domain-name settings as needed.
```server {
listen 80;
listen [::]:80;
- server_name obs.ninja;
+ server_name vdo.ninja;
- root /var/www/html/obs.ninja;
+ root /var/www/html/vdo.ninja;
index index.html;
location ~ ^/([^/]+)/([^/?]+)$ {
- root /var/www/html/obs.ninja;
+ root /var/www/html/vdo.ninja;
try_files /$1/$2 /$1/$2.html /$1/$2/ /$2 /$2/ /$1/index.html;
add_header Access-Control-Allow-Origin *;
}
location / {
- if ($request_uri ~ ^/(.*)\.html$) {
- return 302 /$1;
- }
- try_files $uri $uri.html $uri/ /index.html;
- add_header Access-Control-Allow-Origin *;
+ if ($request_uri ~ ^/(.*)\.html$) {
+ return 302 /$1;
+ }
+ try_files $uri $uri.html $uri/ /index.html;
+ add_header Access-Control-Allow-Origin *;
}
}
```
-You'll want to deploy (copy/clone) the GitHub OBS.Ninja files into your NGINX web folder, that is specified in your NGINX config file. Update the NGINX config file to match your domain and and folder, etc. Restart NGINX after.
+
+`sudo systemctl reload nginx` will reload the settings after making changes.
+
+At this point, if you've managed to make it this far, you should have VDO.Ninja's web code hosted and accessible via yuor domain name.
+
+You can find many settings for VDO.Ninja at the bottom of the `index.html` file, including settings for specifiying TURN servers and default values.
-As for the TURN server, it can run on a single or dual-core computer. It doesn't take much to host many users -- it mainly just needs a good internet connection. Most users will not need a TURN server, but since OBS.Ninja handles many different types of users, the TURN server is there as a failsafe for those occasional problem users. I'm assuming you know why you need and want a TURN server -- if not, you may not actually need one.
+### Deploying your own media relay TURN Server
+
+As for the TURN relay server, a basic one can run on a single or dual-core computer; 2GB of RAM or more recommended though. It doesn't take much of a server to host a few users -- it mainly just needs a good internet connection. Most users will not need a TURN server, but since VDO.Ninja handles many different types of users, the TURN server is there as a failsafe for those occasional problem users. I'm assuming you know why you need and want a TURN server -- if not, you may not actually need one.
A guide and sample config file for the turn server is here:
-https://github.com/steveseguin/obsninja/blob/master/turnserver.md
+https://github.com/steveseguin/vdo.ninja/blob/master/turnserver.md
-If deploying to GCP or AWS, you might need to make some tweaks to the IP address values to include the internet local IP as well as the external. Please see online guides no setting up a TURN server for your particular setup. Setups will vary.
+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, especially if you need a TURN server that has TLS, IPv6 support, or token-based auth support.
-Once you have your TURN server setup, you can update the index.html of the OBS.Ninja code. Nightly or official releases should be fine to pull. You probably will want to uncomment the lines linked below once deployed, adjusting the default values to your liking and updating the server location address and credentials of your TURN server (if you deployed one that is). Unless your TURN server also provides STUN capabilities, you may want to also use the Google STUN servers, so uncomment that stuff too.
+Once you have your TURN server setup, you can update the index.html of the VDO.Ninja code (near the bottom) with your TURN/STUN settings.
-https://github.com/steveseguin/obsninja/blob/df6c147311b9e7d19659ddbb1799d6598f59aa0d/index.html#L644
+https://github.com/steveseguin/vdo.ninja/blob/df6c147311b9e7d19659ddbb1799d6598f59aa0d/index.html#L644
-A newly deployed code deployment should work without any changes to the index.html file. The code needs to be constantly kept up to date though, as after a few months it may become deprecated and stop working. This is the reality of deploying OBS.Ninja -- you will need to update it every few months for it to continue to function well. Keep this in mind when making changes to the OBS.Ninja source code, as heavy custom changes will make updating harder to do. The fewer the changes the better.
+Also note: There are third-party providers offering TURN services, if you would like a managed third party provider, although they are often quite expensive. Some example code on using Twillio as a TURN provider, with auth logic, can be found in the main.js file.
-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.
+### Further customization of the website code
-Final note: I haven't provided here instructions on deploying STUN services or a private handshake server; the OBS.Ninja handshake server code is currently not provided, but access to it as a service is freely accessible for private deployments.
+A new deployment of VDO.Ninja should work without any changes to the index.html file, although you'll want to change it to support your own TURN server and perhaps branding. The VDO.Ninja code needs to be constantly kept up to date though; this is the reality of deploying VDO.Ninja -- you should update it every few months at the very least. As a result, 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 to extensive editing? 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 hosting option, you'll need to deploy your own handshake server. You may not need to deploy a TURN / STUN server if using things just on a LAN.
+
+I've created an install script, and also am providing a Raspberry Pi image, for those looking for a simple working example of how to do it all.
+See it here: https://github.com/steveseguin/offline_deployment
+
+Note, if doing things yourself, since you will be using a private handshake server, don't forget that you'll need to specify that in the VDO.Ninja index.html file.
+
+Lastly, SSL self-signed certificates will be a haunting issue for those not experienced. See below for a bit of direction on options there.
+
+#### Dealing with no SSL scenarios
+
+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 without Internet, you'll need to create and use a private ceriticate that get added to your system's trusted certificate key chain.
+
+On Mac, you open the Keychain Access and add the cert to the Certificates section, allowing it always. It's a bit more work on PC, but Google is your friend there. There's also plenty of guides on using openssl to create a self-signed certiificates als.
+
+If you can't figure out how to do private SSL issuance, these SSL restrictions can be somewhat disabled at the browser's command-line or for localhost via the Chrome://flags settings. VDO.Ninja may complain about the lack of security if you take this approach though, but you can edit out those lines of code which trigger those warnings as needed. You may still need to issue an SSL certificate, self-signed or what not, but with these flags enabled it doesn't at least need to be valid.
+
+Setting it via command line on Windows,
+```
+"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --ignore-certificate-errors
+```
+and on macOS
+```
+/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --ignore-certificate-errors --ignore-urlfetcher-cert-requests &> /dev/null
+```
+and if you intend to only access it as a localhost,
+```
+chrome://flags/#allow-insecure-localhost
+```
+
+
+### Hand-shake server deployment
+
+Finally, there is a handshake server hosting option available; advanced users can host their own personal handshake server, which is useful for air-gapped private deployments of the service. Some basic documentation with instructions on setting it up are included here: https://github.com/steveseguin/websocket_server. Just be sure that your SSL-certifcates are valid or that you modify your browser to support invalid SSL certificates, else it will not work. From there, you just need to modify a couple ilnes in the index.html file of VDO.Ninja to configure things.
+
+Please note that despite how simple the provided handshake server appears, it does work quite well. VDO.Ninja was designed to be as serverless and agnostic as possible, so it will work with 3rd-party signaling services as well, such as piesocket.com, and even certain blockchain networks, IRC, and more (with a bit of added tweaking at course).
+
+WebRTC is very prickly about security, so if you run into issues with things not working, double check your SSL settings first.
Regards,
Steve
diff --git a/lib.js b/lib.js
new file mode 100644
index 0000000..b775679
--- /dev/null
+++ b/lib.js
@@ -0,0 +1,32261 @@
+/*
+* Copyright (c) 2022 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.
+*
+*/
+/*jshint esversion: 6 */
+
+
+var formSubmitting = true;
+var activatedPreview = false;
+var screensharesupport = true;
+
+var Callbacks = [];
+var CtrlPressed = false; // global
+var AltPressed = false;
+var KeyPressedTimeout = 0;
+var PPTKeyPressed = false;
+
+var translation = false;
+
+
+var miscTranslations = {
+ "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": "You are not the director of this room. You will have limited to no control. See &codirector on how to become a co-director.",
+ "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\nGuests will be prompted to accept unless they are using &consent",
+ "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?",
+ "enter-new-codirector-password": "Enter a co-director password to use",
+ "control-room-co-director": "Control Room: Co-Director",
+ "volume-control": "Volume control for local playback only",
+ "signal-meter": "Video packet loss indicator of video preview; green is good, red is bad. Flame implies CPU is overloaded. May not reflect the packet loss seen by scenes or other guests.",
+ "waiting-for-the-stream": "Waiting for the stream. Tip: Adding &cleanoutput to the URL will hide this spinner, or click to retry, which will also hide it.",
+ "main-director": "Main Director",
+ "share-a-screen": "Share a screen",
+ "stop-screen-sharing": "Stop screen sharing",
+ "you-have-been-transferred": "You've been transferred to a different room",
+ "you-are-no-longer-a-co-director": "You are no longer a co-director as you were transferred.",
+ "transferred": "Transferred",
+ "room-changed": "Your room has changed",
+ "headphones-tip": "Tip: Use headphones to avoid audio echo issues.",
+ "camera-tip-c922": "Tip: To achieve 60-fps with a C922 webcam, low-light compensation needs to be turned off, exposure set to auto, and 720p used.",
+ "camera-tip-camlink": "Tip: A Cam Link may glitch green/purple if accessed elsewhere while already in use.",
+ "samsung-a-series": "Samsung A-series phones may have issues with Chrome; if so, try Firefox Mobile instead or switch video codecs.",
+ "screen-permissions-denied": "Permission to capture denied. Ensure your browser has screen record system permissions\n\n1.On your Mac, choose Apple menu > System Preferences, click Security & Privacy , then click Privacy.\n2.Select Screen Recording.\n3.Select the checkbox next to your browser to allow it to record your screen.",
+ "change-audio-output-device": "Audio could not be captured. Please make sure you have an audio output device available.\n\nSome gaming headsets (ie: Corsair) may need to be set to 2-channel output to work, as surround sound drivers may cause problems.",
+ "prompt-access-request": " is trying to view your stream. Allow them?",
+ "confirm-reload-user": "Are you sure you wish to reload this user's browser?",
+ "webrtc-is-blocked": "⚠ This browser has either blocked WebRTC or does not support it.\n\nThis site will not work without it.\n\nDisable any browser extensions or privacy settings that may be blocking WebRTC, or try a different browser.",
+ "not-clean-session": "Video effects or canvas rendering failed.\n\nCheck to ensure any remotely hosted images are cross-origin allowed.",
+ "ios-no-screen-share": "Sorry, but your iOS browser does not support screen-sharing.\n\nPlease see this guide for an alternative method to do so.",
+ "android-no-screen-share": "Sorry, your mobile browser does not support screen-sharing.\n\nThe Android native app does offer basic support for it though.",
+ "no-screen-share-supported": "Sorry, your browser does not support screen-sharing.\n\nPlease use the desktop versions of Firefox or Chrome instead.",
+ "speech-not-suppoted": "⚠ Speech Recognition is not supported by this browser",
+ "blue-yeti-tip": "Tip: Blue Yeti microphones may experience issues being overly loud. Please see here for a solution or disable auto-gain in VDO.Ninja.",
+ "site-not-responsive": "
Notice: The system cannot be accessed or is currently slow to respond.
\nIf a routing issue, try adding &proxy to the URL; you can also try https://proxy.vdo.ninja or a VPN if the service is blocked in your country.\n\nIf the main service is down, a backup version is also available here: https://backup.vdo.ninja\n\nContact steve@seguin.email for added help.\n\nThis service requires the use of Websockets over port 443.",
+ "no-audio-source-detected": "No Audio Source was detected.\n\nIf you were wanting to capture an Application's Audio, please see:\nhttps://docs.vdo.ninja/help/guides-and-how-tos#audio for some guides.",
+ "viewer-count": "Total outbound p2p connections of this remote stream"
+};
+
+// function log(msg){ // uncomment to enable logging.
+ // console.log(msg);
+// }
+// function warnlog(msg, url=false, lineNumber=false){
+ // onsole.warn(msg);
+ // if (lineNumber){
+ // console.warn(lineNumber);
+ // }
+// }
+// function errorlog(msg, url=false, lineNumber=false){
+ // console.error(msg);
+ // if (lineNumber){
+ // console.error(lineNumber);
+ // }
+// }
+
+if (typeof session === 'undefined') { // make sure to init the WebRTC if not exists.
+ var session = WebRTC.Media;
+ session.streamID = session.generateStreamID();
+ errorlog("Serious error: WebRTC session didn't load in time");
+}
+
+(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(/\&/, "?");
+var urlParams = new URLSearchParams(urlEdited);
+
+if (urlParams.has("invite") || urlParams.has("i") || urlParams.has("code")){
+ session.decodeInvite(urlParams.get("invite") || urlParams.get("i") || urlParams.get("code"));
+}
+
+if (session.decrypted){
+ session.decrypted = session.decrypted + urlEdited.replace("?","&");
+ session.decrypted = session.decrypted.replace(/\?/g, "&");
+ session.decrypted = session.decrypted.replace(/\&/, "?");
+ urlParams = new URLSearchParams(session.decrypted);
+ //session.decrypted = true;
+} else {
+ if (urlEdited !== window.location.search){
+ warnlog(window.location.search + " changed to " + urlEdited);
+ window.history.pushState({path: urlEdited.toString()}, '', urlEdited.toString());
+ }
+}
+delete urlEdited;
+
+var isIFrame = false;
+if ( parent && (window.location !== window.parent.location )) {
+ isIFrame = true;
+}
+
+function mapToAll(targets, callback, parentElement = document) { // js helper
+ if (!targets) {
+ return;
+ }
+ if (!parentElement) {
+ return;
+ }
+ const target = parentElement.querySelectorAll(targets);
+ for (let i = 0; i < target.length; i++) {
+ callback(target[i]);
+ }
+}
+
+function changeParam(url, paramName, paramValue) {
+ paramName = paramName.replace("?", "");
+ var qind = url.indexOf('?');
+ url = url.replace("?", "&");
+ var params = url.substring(qind + 1).split('&');
+ var query = '';
+ var match = false;
+ for (var i = 0; i < params.length; i++) {
+ var tokens = params[i].split('=');
+ var name = tokens[0];
+ var value = "";
+ if (tokens.length > 1 && tokens[1] !== '') {
+ value = tokens[1];
+ }
+
+ if (name == paramName) {
+ if (match) {
+ continue;
+ } // already matched the first time.
+ match = true;
+ value = paramValue;
+ }
+ if (value !== "") {
+ value = '=' + value;
+ }
+
+ if (query == '') {
+ query = "?" + name + value;
+ } else {
+ query = query + '&' + name + value;
+ }
+ }
+ return url.substring(0, qind) + query;
+}
+
+function saveRoom(ele){
+ //this.title = "Quick load settings stored locally";
+ session.sticky = true;
+ ele.parentNode.removeChild(ele);
+ setStorage("permission", "yes");
+ setStorage("settings", encodeURI(window.location.href), 999);
+}
+
+function updateURL(param, force = false, cleanUrl = false) {
+ if (session.decrypted){return;}
+
+ param = param.replace("?", "");
+ var para = param.split('=');
+ if (cleanUrl) {
+ if (history.pushState) {
+ var href = new URL(cleanUrl);
+ if (para.length == 1) {
+ href = changeParam(cleanUrl, para[0], "");
+ } else {
+ href = changeParam(cleanUrl, para[0], para[1]);
+ }
+ log("--" + href.toString());
+ window.history.pushState({path: href.toString()}, '', href.toString());
+ }
+ } else if (!(urlParams.has(para[0]))) { // don't need to replace as it doesn't exist.
+ if (history.pushState) {
+ var href = window.location.href;
+ href = href.replace("??", "?");
+ var arr = href.split('?');
+ var newurl;
+ if (arr.length > 1 && arr[1] !== '') {
+ newurl = href + '&' + param;
+ } else {
+ newurl = href + '?' + param;
+ }
+
+ window.history.pushState({path: newurl.toString()}, '', newurl.toString());
+ }
+ } else if (force) {
+ if (history.pushState) {
+ var href = new URL(window.location.href);
+ if (para.length == 1) {
+ href = changeParam(window.location.href, para[0], "");
+ } else {
+ href = changeParam(window.location.href, para[0], para[1]);
+ }
+ log("---" + href.toString());
+ window.history.pushState({path: href.toString()}, '', href.toString());
+ }
+ }
+ if (session.sticky) {
+ setStorage("settings", encodeURI(window.location.href), 999);
+ }
+ urlParams = new URLSearchParams(window.location.search);
+}
+
+/* function changeGuestSettings(ele){
+ var eles = ele.querySelectorAll('[data-param]');
+ var UUID = ele.dataset.UUID;
+ var settings = {};
+ for (var i = 0;i< eles.length; i++){
+ if (eles[i].tagName.toLowerCase() == "input"){
+ if (eles[i].checked===true){
+ settings[eles[i].dataset.param] = true;
+ } else if (eles[i].checked===false){
+ settings[eles[i].dataset.param] = false;
+ } else {
+ settings[eles[i].dataset.param] = eles[i].value;
+ }
+ }
+ }
+ warnlog(settings);
+
+ if (!settings.changepassword){
+ delete settings.password;
+ }
+
+ delete settings.changepassword;
+
+ if (!settings.changeroom){
+ // send Migration message
+ delete settings.roomid;
+ }
+ delete settings.roomid;
+ delete settings.changeroom;
+
+ warnlog(UUID);
+ var msg = {};
+ msg.changeParams = settings;
+ session.sendRequest(msg, UUID);
+ closeModal();
+} */
+
+// proper room migration needs to happen; in sync.
+// updateMixer after settings changed
+// password needs to be special cased
+// room shouldn't be sent
+
+function applyNewParams(changeParams){
+ for (var key in changeParams){
+ session[key] = changeParams[key];
+ log(key);
+ }
+ log(changeParams);
+ updateMixer();
+}
+
+function submitDebugLog(msg){
+ try {
+ appendDebugLog({"connection_type": session.stats.network_type});
+ if (navigator.userAgent){
+ var _, userAgent = navigator.userAgent;
+ appendDebugLog({"userAgent": userAgent});
+ }
+ if (navigator.platform){
+ appendDebugLog({"userAgent": navigator.platform});
+ }
+ } catch(e){}
+ window.focus();
+ var res = confirm(miscTranslations["submit-error-report"]);
+ if (res){
+ var request = new XMLHttpRequest();
+ request.open('POST', "https://reports.vdo.ninja/"); // php, well, whatever.
+ request.send(JSON.stringify(errorReport));
+ errorReport = [];
+ if (document.getElementById("reportbutton")){
+ getById("reportbutton").style.visibility = "hidden";
+ }
+ }
+}
+
+function detectGPUSupport() {
+ try {
+ const gl = document.createElement('canvas').getContext('webgl');
+
+ if (!gl) {
+ return false;
+ }
+
+ if (!Firefox){
+ try {
+ const debugInfo = gl.getExtension('WEBGL_debug_renderer_info'); // chrome
+ if (debugInfo){
+ return gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+ }
+ } catch(e){}
+ }
+
+ try {
+ return gl.getParameter(gl.RENDERER) || false; // firefox
+ } catch(e){}
+
+ } catch(e){}
+ return false;
+}
+
+function isOperaGX(){
+ return (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/75') >= 0;
+}
+
+function isSamsungASeries(){
+ return navigator.userAgent.includes("; SM-A") || false;
+}
+
+function getChromeVersion() {
+ var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
+ return raw ? parseInt(raw[2], 10) : false;
+}
+
+function safariVersion() {
+ var ver = 0;
+ try {
+ ver = navigator.appVersion.split("Version/");
+ if (ver.length > 1) {
+ ver = ver[1].split(" Safari");
+ }
+ if (ver.length > 1) {
+ ver = ver[0].split(".");
+ }
+ if (ver.length > 1) {
+ ver = parseInt(ver[0]);
+ } else {
+ ver = 0;
+ }
+ } catch (e) {
+ return 0;
+ }
+ return ver;
+}
+
+try{
+ var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); // used by main.js also
+ var iPad = (navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform));
+ var macOS = navigator.userAgent.indexOf('Mac OS X') != -1;
+ macOS = macOS && !(iOS || iPad);
+ var Firefox = navigator.userAgent.indexOf("Firefox")>=0;
+ var Android = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile");
+ var ChromeVersion = getChromeVersion();
+ var OperaGx = isOperaGX();
+ var SafariVersion = safariVersion();
+ var SamsungASeries = isSamsungASeries();
+} catch(e){errorlog(e);}
+
+var gpgpuSupport = detectGPUSupport();
+log(gpgpuSupport);
+
+
+
+
+function isAlphaNumeric(str) {
+ var code, i, len;
+ for (i = 0, len = str.length; i < len; i++) {
+ code = str.charCodeAt(i);
+ if (!(code > 47 && code < 58) && // numeric (0-9)
+ !(code > 64 && code < 91) && // upper alpha (A-Z)
+ !(code > 96 && code < 123)) { // lower alpha (a-z)
+ return false;
+ }
+ }
+ return true;
+}
+
+function convertStringToArrayBufferView(str){
+ var bytes = new Uint8Array(str.length);
+ for (var iii = 0; iii < str.length; iii++){
+ bytes[iii] = str.charCodeAt(iii);
+ }
+ return bytes;
+}
+
+function toHexString(byteArray){
+ return Array.prototype.map.call(byteArray, function(byte){
+ return ('0' + (byte & 0xFF).toString(16)).slice(-2);
+ }).join('');
+}
+function toByteArray(hexString){
+ var result = [];
+ for (var i = 0; i < hexString.length; i += 2){
+ result.push(parseInt(hexString.substr(i, 2), 16));
+ }
+ return new Uint8Array(result);
+}
+
+function playAllVideos(){
+
+ if (session.firstPlayTriggered && (session.audioCtx.state == "suspended")){ // added oct 9th 2022
+ try {
+ session.audioCtx.resume();
+ } catch(e){warnlog(e);}
+ }
+
+ for (var i in session.rpcs){
+ try{
+ if (session.rpcs[i].videoElement){
+ log("I: "+i);
+ if (session.rpcs[i].videoElement.paused){
+ setTimeout(function(UUID){
+ session.rpcs[UUID].videoElement.play().then(_ => {
+ log("playing 3 ");
+ if ((session.audioEffects===true) || session.pushLoudness){
+ log("updateIncomingAudioElement('"+UUID+"')");
+ updateIncomingAudioElement(UUID);
+ }
+ }).catch(errorlog);
+ },0,i);
+ } else if ((session.audioEffects===true) || session.pushLoudness){
+ updateIncomingAudioElement(i);
+ log("updateIncomingAudioElement('"+i+"')");
+ }
+
+ }
+ } catch(e){
+ errorlog(e);
+ }
+ }
+}
+
+var videoElements = Array.from(document.querySelectorAll("video"));
+var audioElements = Array.from(document.querySelectorAll("audio"));
+var mediaStreamCounter = 0;
+
+
+function createMediaStream(){
+ mediaStreamCounter+=1;
+ return new MediaStream();
+}
+
+function deleteOldMedia(){
+ log("CHECKING FOR OLD MEDIA");
+ var i = videoElements.length;
+ while (i--) {
+ //if ((videoElements[i].id == "videosource") || (videoElements[i].id == "previewWebcam")){continue;} // exclude this one, for safety reasons. (Also, iOS safari blanks the video if streams are detached and moved between video elements)
+ if (videoElements[i].isConnected === false){
+ if ((videoElements[i].srcObject==null) || (videoElements[i].srcObject && videoElements[i].srcObject.active === false)){
+ if (videoElements[i].dataset && videoElements[i].dataset.UUID){
+ if (videoElements[i].dataset.UUID in session.rpcs){continue;} // still active, so lets not delete it.
+ }
+ videoElements[i].pause();
+ videoElements[i].removeAttribute("id");
+ videoElements[i].removeAttribute('src'); // empty source
+ videoElements[i].load();
+ videoElements[i].remove();
+ videoElements[i] = null;
+ videoElements.splice(i, 1);
+ }
+ }
+ }
+ i = audioElements.length;
+ while (i--) {
+ if (audioElements[i].isConnected === false){
+ if ((audioElements[i].srcObject==null) || (audioElements[i].srcObject && audioElements[i].srcObject.active === false)){
+ if (audioElements[i].dataset && audioElements[i].dataset.UUID){
+ if (audioElements[i].dataset.UUID in session.rpcs){continue;} // still active, so lets not delete it.
+ }
+ audioElements[i].pause();
+ audioElements[i].id = null;
+ audioElements[i].removeAttribute('src'); // empty source
+ audioElements[i].load();
+ audioElements[i].remove();
+ audioElements[i] = null;
+ audioElements.splice(i, 1);
+ }
+ }
+ }
+}
+
+function createAudioElement(){
+ try{
+ deleteOldMedia();
+ } catch(e){errorlog(e);}
+ var a = document.createElement("audio");
+ audioElements.push(a);
+ return a;
+}
+
+function compare_deltas( a, b ) {
+ var aa = a.delta || 0;
+ var bb = b.delta || 0;
+ if ( aa > bb ){
+ return 1;
+ }
+ if ( aa < bb ){
+ return -1;
+ }
+ return 0;
+}
+
+async function fetchWithTimeout(URL, timeout=8000){ // ref: https://dmitripavlutin.com/timeout-fetch-request/
+ try {
+ const controller = new AbortController();
+ const timeout_id = setTimeout(() => controller.abort(), timeout);
+ const response = await fetch(URL, {...{timeout:timeout}, signal: controller.signal});
+ clearTimeout(timeout_id);
+ return response;
+ } catch(e){
+ errorlog(e);
+ return await fetch(URL); // iOS 11.x/12.0
+ }
+}
+
+function createVideoElement(){
+ try{
+ deleteOldMedia();
+ } catch(e){errorlog(e);}
+ var v = document.createElement("video");
+ videoElements.push(v);
+ if (session.volume!==false){
+ v.volume = session.volume; // setting default volume
+ log("setting volume to manual");
+ }
+ return v;
+}
+
+function getTimezone(){
+ if (session.tz!==false){
+ return session.tz;
+ }
+ const stdTimezoneOffset = () => {
+ var jan = new Date(0, 1);
+ var jul = new Date(6, 1);
+ return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
+ }
+ var today = new Date();
+ const isDstObserved = (today) => {
+ return today.getTimezoneOffset() < stdTimezoneOffset();
+ }
+ if (isDstObserved(today)) {
+ return today.getTimezoneOffset()+60;
+ } else {
+ return today.getTimezoneOffset();
+ }
+}
+
+function promptUser(eleId, UUID=null){
+ if (session.beepToNotify){
+ playtone();
+ }
+ if (document.getElementById("modalBackdrop")){
+ getById("promptModal").innerHTML = ''; // Delete modal
+ getById("promptModal").remove();
+ getById("modalBackdrop").innerHTML = ''; // Delete modal
+ getById("modalBackdrop").remove();
+ }
+
+ zindex = 30 + document.querySelectorAll('#promptModal').length;
+ modalTemplate =
+ `
+
+ ×
+
+
+
+ `;
+ document.body.insertAdjacentHTML("beforeend", modalTemplate); // Insert modal at body end
+
+ getById("promptModalMessage").innerHTML = getById(eleId).innerHTML;
+ if (UUID){
+ getById("promptModalMessage").dataset.UUID = UUID;
+ }
+
+ document.getElementById("modalBackdrop").addEventListener("click", closeModal);
+
+ getById("promptModal").addEventListener("click", function(e) {
+ e.stopPropagation();
+ return false;
+ });
+}
+
+async function delay(ms) {
+ return await new Promise((resolve, reject) => {
+ setTimeout(resolve, ms);
+ });
+}
+
+var Prompts = {};
+async function promptAlt(inputText, block=false, asterix=false, value=false){
+ var result = null;
+ if (session.beepToNotify){
+ playtone();
+ }
+ await new Promise((resolve, reject) => {
+ var promptID = "pid_"+Math.random().toString(36).substr(2, 9);
+ Prompts[promptID] = {};
+ Prompts[promptID].resolve = resolve;
+ Prompts[promptID].reject = reject;
+
+ var zindex = 30 + document.querySelectorAll('.promptModal').length;
+
+ if (block){
+ var backdropClass = "opaqueBackdrop";
+ } else {
+ var backdropClass = "modalBackdrop";
+ }
+
+ inputText = ""+inputText.replace("\n"," ")+"";
+ inputText = inputText.replace(/\n/g," ");
+ var type = "text";
+ if (asterix){
+ type = "password";
+ }
+
+
+ modalTemplate =
+ `
\
+ ";
+
+ container.innerHTML = buttons;
+
+ var oldGroups = [];
+ document.querySelectorAll("#groups [data-action-type='toggle-group'][data-group]:not(.green)").forEach(ee=>{
+ oldGroups.push(ee.dataset.group);
+ });
+ getById("groups").remove();
+
+ if (session.hidesololinks==false){ // won't be updating the solo link to a view-only one ever, since director is always expected to be in a room
+ controls.innerHTML += "
\
+ " + sanitizeChat(soloLink) + "\
+ \
+
\
+ ";
+ if (session.directorUUID){
+ controls.innerHTML += "
This is you, a co-director. You are also a performer.
";
+ } else {
+ controls.innerHTML += "
This is you, the director. You are also a performer.
";
+
+ if (session.hidesololinks==false){
+ controls.innerHTML += "
\
+ " + sanitizeChat(soloLink) + "\
+ \
+
";
+ }
+
+ controls.innerHTML += "\
+
";
+
+ controls.querySelectorAll('[data-action-type]').forEach((ele) => { // give action buttons some self-reference
+ ele.dataset.UUID = UUID;
+ ele.dataset.sid = streamID;
+ });
+
+ var buttons = "";
+ if (session.slotmode){
+ var slots = document.querySelectorAll("div.slotsbar[data-slot]");
+ var biggestSlot=0;
+ if (session.slotmode==1){
+ for (var i=0;ibiggestSlot){
+ biggestSlot = parseInt(slots[i].dataset.slot);
+ }
+ }
+ biggestSlot+=1;
+ }
+ var slotName = "slot: "+biggestSlot;
+ if (!biggestSlot){
+ slotName = "unset";
+ }
+ buttons += "
\
+
";
+
+ }
+ buttons += "
ID: " + streamID + "\
+ \
+ \
+
";
+
+ container.innerHTML = buttons;
+ updateLockedElements();
+
+ var videoContainerControlBox = document.createElement("div");
+ videoContainerControlBox.className = "controlVideoBox";
+ container.containerControlBox = videoContainerControlBox
+
+ container.appendChild(videoContainerControlBox);
+ videoContainerControlBox.appendChild(videoContainer);
+
+ if (session.signalMeter){
+ if (!session.rpcs[UUID].signalMeter){
+ session.rpcs[UUID].signalMeter = getById("signalMeterTemplate").cloneNode(true);
+ session.rpcs[UUID].signalMeter.id = "signalMeter_" + UUID;
+ session.rpcs[UUID].signalMeter.dataset.level = 0;
+ session.rpcs[UUID].signalMeter.classList.remove("hidden");
+ session.rpcs[UUID].signalMeter.dataset.UUID = UUID;
+ session.rpcs[UUID].signalMeter.title = miscTranslations["signal-meter"];
+
+ if (session.rpcs[UUID].stats.info && session.rpcs[UUID].stats.info.cpuLimited){ // was quality_limitation_reason
+ session.rpcs[UUID].signalMeter.dataset.cpu = "1";
+ }
+ session.rpcs[UUID].signalMeter.addEventListener('click', function(e) { // show stats of video if double clicked
+ log("clicked signal meter");
+ try {
+ e.preventDefault();
+ var uid = e.currentTarget.dataset.UUID;
+ if ("stats" in session.rpcs[uid]){
+
+ var [menu, innerMenu] = statsMenuCreator();
+
+ printViewStats(innerMenu, uid );
+
+ menu.interval = setInterval(printViewStats, session.statsInterval, innerMenu, uid);
+
+ }
+ e.stopPropagation();
+ return false;
+
+ } catch(e){errorlog(e);}
+ });
+ }
+ videoContainer.appendChild(session.rpcs[UUID].signalMeter);
+
+ ////////
+ if (!session.rpcs[UUID].batteryMeter){
+ session.rpcs[UUID].batteryMeter = getById("batteryMeterTemplate").cloneNode(true);
+ session.rpcs[UUID].batteryMeter.id = "batteryMeter_" + UUID;
+ if (session.rpcs[UUID].stats.info && (session.rpcs[UUID].stats.info.power_level!==null)){
+ var level = session.rpcs[UUID].batteryMeter.querySelector(".battery-level");
+ if (level){
+ var value = session.rpcs[UUID].stats.info.power_level;
+ if (value > 100){value = 100;}
+ else if (value < 0){ value = 0;}
+ level.style.height = parseInt(value)+"%";
+ if (value<10){
+ session.rpcs[UUID].batteryMeter.classList.add("alert");
+ } else if (value<25){
+ session.rpcs[UUID].batteryMeter.classList.add("warn");
+ }
+ if (value<100){
+ session.rpcs[UUID].batteryMeter.classList.remove("hidden");
+ }
+ session.rpcs[UUID].batteryMeter.title = value+"% battery remaining";
+ }
+ }
+ if (session.rpcs[UUID].stats.info && ("plugged_in" in session.rpcs[UUID].stats.info) && (session.rpcs[UUID].stats.info.plugged_in===false)){
+ session.rpcs[UUID].batteryMeter.dataset.plugged = "0";
+ session.rpcs[UUID].batteryMeter.classList.remove("hidden");
+ } else {
+ session.rpcs[UUID].batteryMeter.dataset.plugged = "1";
+ }
+ }
+ videoContainer.appendChild(session.rpcs[UUID].batteryMeter);
+ }
+
+ if (session.showConnections){
+ if (!session.rpcs[UUID].connectionDetails){
+ createConnectionDetailsEle(UUID);
+ }
+ videoContainer.appendChild(session.rpcs[UUID].connectionDetails);
+ }
+
+ videoContainer.appendChild(session.rpcs[UUID].voiceMeter);
+ videoContainer.appendChild(session.rpcs[UUID].remoteMuteElement);
+ videoContainer.appendChild(session.rpcs[UUID].remoteVideoMuteElement);
+ videoContainer.appendChild(session.rpcs[UUID].remoteRaisedHandElement);
+ videoContainer.appendChild(iframeDetails);
+ container.appendChild(controls);
+
+ session.group.forEach(group=>{
+ var ele = controls.querySelector('[data-action-type="toggle-group"][data--u-u-i-d="'+UUID+'"][data-group="'+group+'"]');
+ if (!ele){
+ var newGroup = htmlToElement('');
+
+ var added = false;
+ container.querySelectorAll('.customGroup>[data-group]').forEach(ele=>{
+ log(ele);
+ if (!added && ele.dataset.group>group+""){
+ ele.parentNode.insertBefore(newGroup, ele);
+ added = true;
+ }
+ });
+ if (!added){
+ var newGroupCon = container.querySelector(".customGroup");
+ if (!newGroupCon){
+ newGroupCon = document.createElement("div");
+ newGroupCon.classList.add("customGroup");
+ container.appendChild(newGroupCon);
+ }
+ newGroupCon.appendChild(newGroup);
+ }
+ }
+ });
+
+ initSceneList(UUID);
+ syncSceneState(streamID);
+ syncOtherState(streamID);
+
+ pokeIframeAPI("control-box", true, UUID);
+ if (session.slotmode){
+ pokeIframeAPI("slot-updated", biggestSlot, UUID); // need to support self-director
+ }
+}
+
+function cycleCameras(){
+ if (session.screenShareState) {
+ warnUser("Stop the screen-share first.");
+ return;
+ }
+ var videoSelect = document.querySelector("select#videoSource3").options;
+ // don't show flip option if only one camera.
+ // don't show if not a mobile device
+ // don't show if AD=0
+
+
+ var matched = false;
+ var maxIndex = parseInt(getById("flipcamerabutton").dataset.maxIndex) || parseInt(videoSelect.length);
+ if (maxIndex > parseInt(videoSelect.length)){
+ maxIndex = parseInt(videoSelect.length);
+ }
+
+ for(var i = 0; i < maxIndex; i++){
+ var selOption = videoSelect[i];
+ if (selOption.selected) {
+ matched=true;
+ } else if (matched){
+ if (getById("flipcamerabutton").classList.contains("flip")){
+ getById("flipcamerabutton").classList.remove("flip");
+ getById("flipcamerabutton").classList.add("flip2");
+ } else {
+ getById("flipcamerabutton").classList.remove("flip2");
+ getById("flipcamerabutton").classList.add("flip");
+ }
+ document.querySelector("select#videoSource3").value = selOption.value;
+ activatedPreview = false;
+ grabVideo(session.quality, "videosource", "select#videoSource3");
+ return;
+ }
+ }
+ for(var i = 0; i < maxIndex; i++){
+ var selOption = videoSelect[i];
+ if (selOption.selected) {
+ return; // do nothing; the camera that is selected is the only camera available it seems.
+ } else {
+ if (getById("flipcamerabutton").classList.contains("flip")){
+ getById("flipcamerabutton").classList.remove("flip");
+ getById("flipcamerabutton").classList.add("flip2");
+ } else {
+ getById("flipcamerabutton").classList.remove("flip2");
+ getById("flipcamerabutton").classList.add("flip");
+ }
+ document.querySelector("select#videoSource3").value = selOption.value;
+ activatedPreview = false;
+ grabVideo(session.quality, "videosource", "select#videoSource3");
+ return;
+ }
+ }
+}
+
+
+
+function addToGoogleCalendar(){
+ var title = "Live Stream";
+ //var dates = "20180512T230000Z/20180513T030000Z";
+ var linkout = getById("director_block_1").innerText;
+ var details = "Join the live stream as a performer at the following link:
===> "+linkout+"
To test your connection and camera ahead of time, please visit https://vdo.ninja/speedtest
Do not share the details of this invite with others, unless explicitly told to.";
+ details = details.split(' ').join('+');
+ details = details.split('&').join('%26');
+ var linkToOpen = "https://calendar.google.com/calendar/r/eventedit?text="+title+"&details="+details;
+ //https://calendar.google.com/calendar/r/eventedit?text=My+Custom+Event&dates=20180512T230000Z/20180513T030000Z&details=For+details,+link+here:+https://example.com/tickets-43251101208&location=Garage+Boston+-+20+Linden+Street+-+Allston,+MA+02134
+
+ window.open(linkToOpen);
+
+}
+
+function addToOutlookCalendar(){
+ var title = "Live Stream";
+ var linkout = getById("director_block_1").innerText;
+ var details = "Join the live stream as a performer at the following link:
===> "+linkout+"
To test your connection and camera ahead of time, please visit https://vdo.ninja/speedtest
Do not share the details of this invite with others, unless explicitly told to.";
+ details = details.split(' ').join('%20');
+ details = details.split('&').join('%26');
+
+
+ var linkToOpen = "https://outlook.live.com/owa/?path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&subject="+title+"&body="+details;
+ //https://calendar.google.com/calendar/r/eventedit?text=My+Custom+Event&dates=20180512T230000Z/20180513T030000Z&details=For+details,+link+here:+https://example.com/tickets-43251101208&location=Garage+Boston+-+20+Linden+Street+-+Allston,+MA+02134
+
+ window.open(linkToOpen);
+}
+
+function addToYahooCalendar(){
+ var title = "Live Stream";
+ var linkout = getById("director_block_1").innerText;
+ var details = "Join the live stream as a performer at the following link:
===> "+linkout+"
To test your connection and camera ahead of time, please visit https://vdo.ninja/speedtest
Do not share the details of this invite with others, unless explicitly told to.";
+ details = details.split(' ').join('%20');
+ details = details.split('&').join('%26');
+ var linkToOpen = "https://calendar.yahoo.com?v60&title="+title+"&desc="+details;
+ //https://calendar.google.com/calendar/r/eventedit?text=My+Custom+Event&dates=20180512T230000Z/20180513T030000Z&details=For+details,+link+here:+https://example.com/tickets-43251101208&location=Garage+Boston+-+20+Linden+Street+-+Allston,+MA+02134
+
+ window.open(linkToOpen);
+}
+
+function toggle(ele, tog = false, inline = true) {
+ var x = ele;
+ if (x.style.display === "none") {
+ if (inline) {
+ x.style.display = "inline-block";
+ } else {
+ x.style.display = "block";
+ }
+ } else {
+ x.style.display = "none";
+ }
+ if (tog) {
+ if (tog.dataset.saved) {
+ tog.innerHTML = tog.dataset.saved;
+ delete(tog.dataset.saved);
+ } else {
+ tog.dataset.saved = tog.innerHTML;
+ tog.innerHTML = "Hide This";
+ }
+ }
+}
+
+function toggleByDataset(filter) {
+ var elements = document.querySelectorAll('[data-cluster="'+filter+'"]'); // ie: .cluster1
+ for (var i = 0; i < elements.length; i++) {
+ elements[i].classList.toggle('hidden');
+ }
+}
+
+
+var SelectedAudioOutputDevices = false; // session.sink
+var SelectedAudioInputDevices = []; // ..
+var SelectedVideoInputDevices = []; // ..
+
+async function enumerateDevices() {
+
+ log("enumerated start");
+
+ if (typeof navigator.enumerateDevices === "function") {
+ log("enumerated failed 1");
+ return await navigator.enumerateDevices();
+ } else if (typeof navigator.mediaDevices === "object" && typeof navigator.mediaDevices.enumerateDevices === "function") {
+ return await navigator.mediaDevices.enumerateDevices();
+ } else {
+ return await new Promise((resolve, reject) => {
+ try {
+ if (window.MediaStreamTrack == null || window.MediaStreamTrack.getSources == null) {
+ throw new Error();
+ }
+ window.MediaStreamTrack.getSources((devices) => {
+ resolve(devices
+ .filter(device => {
+ return device.kind.toLowerCase() === "video" || device.kind.toLowerCase() === "videoinput";
+ })
+ .map(device => {
+ return {
+ deviceId: device.deviceId != null ? device.deviceId : ""
+ , groupId: device.groupId
+ , kind: "videoinput"
+ , label: device.label
+ , toJSON: /* istanbul ignore next */ function() {
+ return this;
+ }
+ };
+ }));
+ });
+ } catch (e) {
+ errorlog(e);
+ }
+ });
+ }
+}
+
+function requestOutputAudioStream() {
+ try {
+ //warnlog("GET USER MEDIA");
+ return navigator.mediaDevices.getUserMedia({
+ audio: true
+ , video: false
+ }).then(function(stream1) { // Apple needs thi to happen before I can access EnumerateDevices.
+ log("get media sources; request audio stream");
+ return enumerateDevices().then(function(deviceInfos) {
+ stream1.getTracks().forEach(function(track) { // We don't want to keep it without audio; so we are going to try to add audio now.
+ track.stop(); // I need to do this after the enumeration step, else it breaks firefox's labels
+ });
+ const audioOutputSelect = getById('outputSourceScreenshare');
+ audioOutputSelect.remove(0);
+ audioOutputSelect.removeAttribute("onclick");
+
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ const deviceInfo = deviceInfos[i];
+ if (deviceInfo == null) {
+ continue;
+ }
+ const option = document.createElement('option');
+ option.value = deviceInfo.deviceId;
+ if (deviceInfo.kind === 'audiooutput') {
+ const option = document.createElement('option');
+ if (audioOutputSelect.length === 0) {
+ option.dataset.default = true;
+ } else {
+ option.dataset.default = false;
+ }
+ option.value = deviceInfo.deviceId || "default";
+ if (option.value == session.sink) {
+ option.selected = "true";
+ }
+ option.text = deviceInfo.label || `Speaker ${audioOutputSelect.length + 1}`;
+ audioOutputSelect.appendChild(option);
+ } else {
+ log('Some other kind of source/device: ', deviceInfo);
+ }
+ }
+ });
+ });
+ } catch (e) {
+ if (!(session.cleanOutput)) {
+ if (window.isSecureContext) {
+ warnUser("An error has occured when trying to access the default audio device. The reason is not known.");
+ } else if ((iOS) || (iPad)) {
+ warnUser("iOS version 13.4 and up is generally recommended; older than iOS 11 is not supported.");
+ } else {
+ warnUser("Error acessing the default audio device.\n\nThe website may be loaded in an insecure context.\n\nPlease see: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia");
+ }
+ }
+ }
+}
+
+
+function requestAudioStream() {
+ try {
+ //warnlog("GET USER MEDIA");
+ return navigator.mediaDevices.getUserMedia({
+ audio: true
+ , video: false
+ }).then(function(stream1) { // Apple needs thi to happen before I can access EnumerateDevices.
+ log("get media sources; request audio stream");
+ return enumerateDevices().then(function(deviceInfos) {
+ stream1.getTracks().forEach(function(track) { // We don't want to keep it without audio; so we are going to try to add audio now.
+ track.stop(); // I need to do this after the enumeration step, else it breaks firefox's labels
+ });
+ log("updating audio");
+ const audioInputSelect = getById('audioSourceScreenshare');
+ audioInputSelect.remove(1);
+ audioInputSelect.removeAttribute("onchange");
+
+
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ const deviceInfo = deviceInfos[i];
+ if (deviceInfo == null) {
+ continue;
+ }
+ const option = document.createElement('option');
+ option.value = deviceInfo.deviceId;
+ if (deviceInfo.kind === 'audioinput') {
+ option.text = deviceInfo.label || `Microphone ${audioInputSelect.length + 1}`;
+ audioInputSelect.appendChild(option);
+ } else {
+ log('Some other kind of source/device: ', deviceInfo);
+ }
+ }
+ audioInputSelect.style.minHeight = ((audioInputSelect.childElementCount + 1) * 1.15 * 16) + 'px';
+ audioInputSelect.style.minWidth = "342px";
+ });
+ });
+ } catch (e) {
+ if (!(session.cleanOutput)) {
+ if (window.isSecureContext) {
+ warnUser("An error has occured when trying to access the default audio device. The reason is not known.");
+ } else if ((iOS) || (iPad)) {
+ warnUser("iOS version 13.4 and up is generally recommended; older than iOS 11 is not supported.");
+ } else {
+ warnUser("Error acessing the default audio device.\n\nThe website may be loaded in an insecure context.\n\nPlease see: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia");
+ }
+ }
+ }
+}
+
+function saveSettings(){
+ if (session.store){
+ try {
+ var tmp = {};
+ tmp.SelectedAudioInputDevices = SelectedAudioInputDevices;
+ if (session.sink && (session.sink!="default")){
+ tmp.SelectedAudioOutputDevices = session.sink;
+ } else if (!session.sink && SelectedAudioOutputDevices && (SelectedAudioOutputDevices!="default")){
+ tmp.SelectedAudioOutputDevices = SelectedAudioOutputDevices;
+ }
+ tmp.SelectedVideoInputDevices = SelectedVideoInputDevices;
+ setStorage("session_store", JSON.stringify(tmp));
+ log("Saving settings");
+ } catch(e){errorlog(e);}
+ }
+}
+
+function loadSettings(){
+ if (session.store){
+ try {
+ session.store = getStorage("session_store");
+ if (session.store){
+ session.store = JSON.parse(session.store);
+ } else {
+ session.store = {};
+ }
+ log("Loading saved settings");
+ log(session.store);
+
+ if (session.store && session.store.SelectedAudioOutputDevices){
+ if (typeof session.store.SelectedAudioOutputDevices == "string"){
+ SelectedAudioOutputDevices = session.store.SelectedAudioOutputDevices;
+ } else if (typeof session.store.SelectedAudioOutputDevices == "object"){
+ if (session.store.SelectedAudioOutputDevices.length){
+ SelectedAudioOutputDevices = session.store.SelectedAudioOutputDevices[0];
+ }
+ }
+ }
+ if (session.store && session.store.SelectedAudioInputDevices){
+ SelectedAudioInputDevices = session.store.SelectedAudioInputDevices;
+ }
+ if (session.store && session.store.SelectedVideoInputDevices){
+ SelectedVideoInputDevices = session.store.SelectedVideoInputDevices;
+ }
+ } catch(e){}
+ }
+}
+
+function gotDevices(deviceInfos) {
+
+ log("got devices!1");
+ log(deviceInfos);
+ try {
+ const audioInputSelect = document.getElementById('audioSource') || document.getElementById('audioSource3');
+ const videoSelect = document.getElementById('videoSourceSelect') || document.getElementById('videoSource3');
+ const audioOutputSelect = document.getElementById('outputSource') || document.getElementById('outputSource3');
+ const multiselectTrigger = document.getElementById('multiselect-trigger') || document.getElementById('multiselect-trigger3');
+ const multiselect2 = document.getElementById('multiselect2') || document.getElementById('multiselect2a');
+
+
+ var option = document.createElement('input');
+ option.type = "checkbox";
+ option.value = "ZZZ";
+ option.name = "multiselect1";
+ option.id = "multiselect1";
+ option.style.display = "none";
+ option.checked = true;
+
+
+ var label = document.createElement('label');
+ label.for = option.name;
+ label.innerHTML = ' No Audio';
+
+ var listele = document.createElement('li');
+ listele.appendChild(option);
+ listele.appendChild(label);
+
+ //return;
+
+ audioInputSelect.innerHTML = "";
+ audioInputSelect.appendChild(listele);
+
+ audioOutputSelect.innerHTML = "";
+
+
+
+ option.onchange = function(event) { // make sure to clear 'no audio option' if anything else is selected
+ if (!(getById("multiselect1").checked)) {
+ getById("multiselect1").checked = true;
+
+ if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {} else {
+ SelectedAudioInputDevices.push(event.currentTarget.value);
+ }
+
+ log("CHECKED 1");
+ } else {
+ var list = audioInputSelect.querySelectorAll("li>input");
+ for (var i = 0; i < list.length; i++) {
+ if (list[i].id !== "multiselect1") {
+ list[i].checked = false;
+ }
+ }
+
+ while (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {
+ SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(event.currentTarget.value), 1);
+ }
+ }
+ saveSettings();
+ };
+
+ multiselectTrigger.dataset.state = '0';
+ multiselectTrigger.classList.add('closed');
+ multiselectTrigger.classList.remove('open');
+ getById('chevarrow1').classList.add('bottom');
+
+
+ const selectors = [videoSelect];
+
+ const values = selectors.map(select => select.value);
+ selectors.forEach(select => {
+ while (select.firstChild) {
+ select.removeChild(select.firstChild);
+ }
+ });
+
+
+ function comp(a, b) {
+ if (a.kind === 'audioinput') {
+ return 0;
+ } else if (a.kind === 'audiooutput') {
+ return 0;
+ }
+ const labelA = a.label.toUpperCase();
+ const labelB = b.label.toUpperCase();
+ if (labelA > labelB) {
+ return 1;
+ } else if (labelA < labelB) {
+ return -1;
+ }
+ return 0;
+ }
+ //deviceInfos.sort(comp); // I like this idea, but it messes with the defaults. I just don't know what it will do.
+ var deviceInfo;
+
+ // This is to hide NDI from default device. NDI Tools fucks up.
+ var tmp = [];
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ deviceInfo = deviceInfos[i];
+ if (!((deviceInfo.kind === 'videoinput') && (deviceInfo.label.toLowerCase().startsWith("ndi") || deviceInfo.label.toLowerCase().startsWith("newtek")))) {
+ tmp.push(deviceInfo);
+ }
+ }
+
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ deviceInfo = deviceInfos[i];
+ if ((deviceInfo.kind === 'videoinput') && (deviceInfo.label.toLowerCase().startsWith("ndi") || deviceInfo.label.toLowerCase().startsWith("newtek"))) {
+ tmp.push(deviceInfo);
+ log("V DEVICE FOUND = " + deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase());
+ }
+ }
+ deviceInfos = tmp;
+
+ if (typeof session.audioDevice == "object") { // this sorts according to users's manual selection
+ var tmp = [];
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ deviceInfo = deviceInfos[i];
+ if ((deviceInfo.kind === 'audioinput') && session.audioDevice.filter(ele => deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes(ele)).length) {
+ tmp.push(deviceInfo);
+ log("A DEVICE FOUND = " + deviceInfo.label);
+ } else if ((deviceInfo.kind === 'audioinput') && session.audioDevice.includes(deviceInfo.deviceId)) {
+ tmp.push(deviceInfo);
+ log("EXACT A DEVICE FOUND: "+session.audioDevice);
+ }
+ }
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ deviceInfo = deviceInfos[i];
+ if (!((deviceInfo.kind === 'audioinput') && session.audioDevice.filter(ele => deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes(ele)).length)) { // opposite of previous loop
+ if (!(((deviceInfo.kind === 'audioinput') && session.audioDevice.includes(deviceInfo.deviceId)))){ // ditto
+ tmp.push(deviceInfo);
+ }
+ }
+ }
+ deviceInfos = tmp;
+ } else if (session.store && session.store.SelectedAudioInputDevices){
+ var matched = [];
+ var notmatch = [];
+ for (let i = 0; i < deviceInfos.length; ++i) {
+ deviceInfo = deviceInfos[i];
+ if (session.store.SelectedAudioInputDevices.includes(deviceInfo.deviceId)){
+ matched.push(deviceInfo);
+ log("EXACT V DEVICE FOUND -- from saved session");
+ } else {
+ notmatch.push(deviceInfo);
+ }
+ }
+
+ deviceInfos = matched.concat(notmatch);
+ delete session.store.SelectedAudioInputDevices;
+ }
+
+
+ if (session.sink || SelectedAudioOutputDevices) { // this sorts according to users's manual selection
+ var matched = [];
+ var notmatch = [];
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ deviceInfo = deviceInfos[i];
+ if ((deviceInfo.kind === 'audiooutput') && (deviceInfo.deviceId === session.sink)){
+ matched.push(deviceInfo);
+ } else if (!session.sink && (deviceInfo.kind === 'audiooutput') && (deviceInfo.deviceId === SelectedAudioOutputDevices)){
+ matched.push(deviceInfo);
+ } else {
+ notmatch.push(deviceInfo);
+ }
+ }
+ deviceInfos = matched.concat(notmatch);
+ }
+
+
+
+ if ((session.videoDevice) && (session.videoDevice !== 1)){ // this sorts according to users's manual selection
+ var tmp = [];
+ var tmp2 = [];
+ var tmp3 = [];
+
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ deviceInfo = deviceInfos[i];
+ if ((deviceInfo.kind === 'videoinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().startsWith(session.videoDevice))) {
+ tmp.push(deviceInfo);
+ log("Starts With V DEVICE FOUND");
+ } else if (deviceInfo.deviceId === session.videoDevice){
+ tmp.push(deviceInfo);
+ log("EXACT V DEVICE FOUND");
+ } else if ((deviceInfo.kind === 'videoinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes(session.videoDevice))) {
+ tmp2.push(deviceInfo);
+ log("Includes With V DEVICE FOUND");
+ } else {
+ tmp3.push(deviceInfo);
+ }
+ }
+
+ if (tmp2.length){
+ tmp = tmp.concat(tmp2);
+ }
+ if (tmp3.length){
+ tmp = tmp.concat(tmp3);
+ }
+
+ deviceInfos = tmp;
+ log("VDECICE:" + session.videoDevice);
+ log(deviceInfos);
+ } else if ((session.videoDevice===false) && session.facingMode){
+ var tmp = [];
+ if (session.facingMode=="environment"){
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ deviceInfo = deviceInfos[i];
+ if ((deviceInfo.kind === 'videoinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes("back"))) {
+ tmp.push(deviceInfo);
+ log("V DEVICE FOUND = " + deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase());
+ } else if ((deviceInfo.kind === 'videoinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes("rear"))) {
+ tmp.push(deviceInfo);
+ log("V DEVICE FOUND = " + deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase());
+ }
+ }
+ } else if (session.facingMode=="user"){
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ deviceInfo = deviceInfos[i];
+ if ((deviceInfo.kind === 'videoinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes("front"))) {
+ tmp.push(deviceInfo);
+ log("V DEVICE FOUND = " + deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase());
+ }
+ }
+ }
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ deviceInfo = deviceInfos[i];
+ if (!((deviceInfo.kind === 'videoinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes(session.videoDevice)))) {
+ if (deviceInfo.deviceId !== session.videoDevice){
+ tmp.push(deviceInfo);
+ }
+ }
+ }
+ deviceInfos = tmp;
+ log("VDECICE:" + session.videoDevice);
+ log(deviceInfos);
+ } else if (session.store && session.store.SelectedVideoInputDevices){
+ var matched = [];
+ var notmatch = [];
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ deviceInfo = deviceInfos[i];
+ if (session.store.SelectedVideoInputDevices.includes(deviceInfo.deviceId)){
+ matched.push(deviceInfo);
+ log("EXACT V DEVICE FOUND -- from saved session");
+ } else {
+ notmatch.push(deviceInfo);
+ }
+ }
+ deviceInfos = matched.concat(notmatch);
+ delete session.store.SelectedVideoInputDevices;
+ }
+ var adMatch = session.audioDevice;
+ var counter = 1;
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ const deviceInfo = deviceInfos[i];
+ if (deviceInfo == null) {
+ continue;
+ }
+
+ if (deviceInfo.kind === 'audioinput') {
+ option = document.createElement('input');
+ option.type = "checkbox";
+ counter++;
+ listele = document.createElement('li');
+ listele.style.display = "none";
+
+ if (typeof adMatch == "object"){
+ for (var j = 0;j -1) {
+ SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(item.value), 1);
+ }
+
+ } else {
+ item.checked = true;
+ if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {} else {
+ SelectedAudioInputDevices.push(event.currentTarget.value);
+ }
+ if (session.mobile && (!(iOS || iPad)) && (event.currentTarget.label === "USB audio") && !session.cleanOutput){
+ warnUser("Notice: USB audio devices may not work on all mobile devices.\n\nConsider using FireFox mobile instead, as it tends to work with USB audio devices more often.");
+ }
+ }
+ });
+ }
+ saveSettings();
+ };
+
+ if (deviceInfo.label.includes("Yeti ")) {
+ if (!session.cleanOutput){
+ getById("audioTipContext1").innerHTML = miscTranslations["blue-yeti-tip"];
+ getById("audioTip1").classList.remove("hidden");
+ }
+ }
+
+ } else if (deviceInfo.kind === 'videoinput') {
+ option = document.createElement('option');
+ option.value = deviceInfo.deviceId || "default";
+ option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
+ videoSelect.appendChild(option);
+ } else if (deviceInfo.kind === 'audiooutput') {
+ option = document.createElement('option');
+ if (audioOutputSelect.length === 0) {
+ option.dataset.default = true;
+ } else {
+ option.dataset.default = false;
+ }
+ option.value = deviceInfo.deviceId || "default";
+ if (option.value == session.sink) {
+ option.selected = "true";
+ } else if (!session.sink && SelectedAudioOutputDevices && (SelectedAudioOutputDevices == option.value)){
+ option.selected = "true";
+ }
+ option.text = deviceInfo.label || `Speaker ${audioOutputSelect.length + 1}`;
+ audioOutputSelect.appendChild(option);
+ } else {
+ log('Some other kind of source/device: ', deviceInfo);
+ }
+ }
+
+ if (Firefox && !session.mobile){
+ var option = document.createElement('option');
+ option.value = "others";
+ option.text = "Show more options";
+ audioOutputSelect.appendChild(option);
+ }
+
+ if (audioOutputSelect.childNodes.length == 0) {
+ option = document.createElement('option');
+ option.value = "default";
+ option.text = "System Default";
+ audioOutputSelect.appendChild(option);
+ }
+
+ option = document.createElement('option');
+ option.text = "Disable Video";
+ option.value = "ZZZ";
+ videoSelect.appendChild(option); // NO AUDIO OPTION
+
+ selectors.forEach((select, selectorIndex) => {
+ if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
+ select.value = values[selectorIndex];
+ }
+ });
+
+ } catch (e) {
+ errorlog(e);
+ }
+}
+
+
+function getUserMediaVideoParams(resolutionFallbackLevel, isSafariBrowser) {
+ switch (resolutionFallbackLevel) {
+ case -1:
+ return {};
+ case 0:
+ if (isSafariBrowser) {
+ return {
+ width: {
+ min: 360
+ , ideal: 1920
+ , max: 1920
+ }
+ , height: {
+ min: 360
+ , ideal: 1080
+ , max: 1080
+ }
+ };
+ } else if (Firefox){
+ return {
+ width: {
+ ideal: 1920
+ }
+ , height: {
+ ideal: 1080
+ }
+ };
+ } else {
+ return {
+ width: {
+ min: 720
+ , ideal: 1920
+ , max: 1920
+ }
+ , height: {
+ min: 720
+ , ideal: 1080
+ , max: 1920
+ }
+ };
+ }
+ case 1:
+ if (isSafariBrowser) {
+ return {
+ width: {
+ min: 360
+ , ideal: 1280
+ , max: 1280
+ }
+ , height: {
+ min: 360
+ , ideal: 720
+ , max: 720
+ }
+ };
+ } else if (Firefox){
+ return {
+ width: {
+ ideal: 1280
+ }
+ , height: {
+ ideal: 720
+ }
+ };
+ } else {
+ return {
+ width: {
+ min: 720
+ , ideal: 1280
+ , max: 1280
+ }
+ , height: {
+ min: 720
+ , ideal: 720
+ , max: 1280
+ }
+ };
+ }
+ case 2:
+ if (isSafariBrowser) {
+ return {
+ width: {
+ min: 640
+ }
+ , height: {
+ min: 360
+ }
+ };
+ } else if (Firefox){
+ return {
+ width: {
+ ideal: 640
+ }
+ , height: {
+ ideal: 360
+ }
+ };
+ } else {
+ return {
+ width: {
+ min: 240
+ , ideal: 640
+ , max: 1280
+ }
+ , height: {
+ min: 240
+ , ideal: 360
+ , max: 1280
+ }
+ };
+ }
+ case 3:
+ if (isSafariBrowser) {
+ return {
+ width: {
+ min: 360
+ , ideal: 1280
+ , max: 1440
+ }
+ };
+ } else {
+ return {
+ width: {
+ min: 360
+ , ideal: 1280
+ , max: 1440
+ }
+ };
+ }
+ case 4:
+ if (isSafariBrowser) {
+ return {
+ height: {
+ min: 360
+ , ideal: 720
+ , max: 960
+ }
+ };
+ } else {
+ return {
+ height: {
+ ideal: 720
+ , max: 960
+ }
+ };
+ }
+ case 5:
+ if (isSafariBrowser) {
+ return {
+ width: {
+ min: 360
+ , ideal: 640
+ , max: 1440
+ }
+ , height: {
+ min: 360
+ , ideal: 360
+ , max: 720
+ }
+ };
+ } else {
+ return {
+ width: {
+ ideal: 640
+ , max: 1920
+ }
+ , height: {
+ ideal: 360
+ , max: 1920
+ }
+ }; // same as default, but I didn't want to mess with frameRates until I gave it all a try first
+ }
+ case 6:
+ if (isSafariBrowser) {
+ return {}; // iphone users probably don't need to wait any longer, so let them just get to it
+ } else {
+ return {
+ width: {
+ min: 360
+ , ideal: 640
+ , max: 3840
+ }
+ , height: {
+ min: 360
+ , ideal: 360
+ , max: 2160
+ }
+ };
+
+ }
+ case 7:
+ return { // If the camera is recording in low-light, it may have a low frameRate. It coudl also be recording at a very high resolution.
+ width: {
+ min: 360
+ , ideal: 640
+ }
+ , height: {
+ min: 360
+ , ideal: 360
+ }
+ , };
+
+ case 8:
+ return {
+ width: {
+ min: 360
+ }
+ , height: {
+ min: 360
+ }
+ , frameRate: 10
+ }; // same as default, but I didn't want to mess with frameRates until I gave it all a try first
+ case 9:
+ return {
+ frameRate: 0
+ }; // Some Samsung Devices report they can only support a frameRate of 0.
+ case 10:
+ return {}
+ default:
+ return {};
+ }
+}
+
+function addScreenDevices(device) {
+ if (device.kind == "audio") {
+ const audioInputSelect = getById('audioSource3');
+ const listele = document.createElement('li');
+ listele.style.display = "block";
+
+ const option = document.createElement('input');
+ option.type = "checkbox";
+ option.checked = true;
+
+ if (getById('multiselect-trigger3').dataset.state == 0) {
+ option.style.display = "none";
+ }
+
+ option.value = device.id;
+ option.name = device.label;
+ option.dataset.type = "screen";
+ option.label = device.label;
+
+ const label = document.createElement('label');
+ label.for = option.name;
+ label.innerHTML = " " + device.label;
+ listele.appendChild(option);
+ listele.appendChild(label);
+
+ option.onchange = function(event) { // make sure to clear 'no audio option' if anything else is selected
+ log("change 4644");
+ if (!(CtrlPressed)) {
+ document.querySelectorAll("#audioSource3 input[type='checkbox']").forEach(function(item) {
+ if (event.currentTarget.value !== item.value) { // this shoulnd't happen, but if it does.
+
+ item.checked = false;
+
+ if (item.dataset.type == "screen") {
+ item.parentElement.parentElement.removeChild(item.parentElement);
+ }
+
+ while (SelectedAudioInputDevices.indexOf(item.value) > -1) {
+ SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(item.value), 1);
+ }
+
+ activatedPreview = false;
+ grabAudio("#audioSource3"); // exclude item.id
+
+ } else {
+ if (SelectedAudioInputDevices.indexOf(item.value) > -1) {} else {
+ SelectedAudioInputDevices.push(item.value);
+ }
+
+ item.checked = true;
+ activatedPreview = false;
+ grabAudio("#audioSource3", item.value); // exclude item.id. we will reconnect, even if already connected, as a way to 'reset' a device if it isn't working.
+ }
+ });
+ }
+ saveSettings();
+ event.stopPropagation();
+ return false;
+ };
+ audioInputSelect.appendChild(listele);
+ getById("audioSourceNoAudio2").checked = false;
+
+ } else if (device.kind == "video") {
+ const videoSelect = getById('videoSource3');
+ //const selectors = [ videoSelect];
+ //const values = selectors.map(select => select.value);
+ const option = document.createElement('option');
+ option.value = device.id;
+ option.text = device.label;
+ option.selected = "true";
+ option.label = device.label;
+ videoSelect.appendChild(option);
+ }
+}
+
+var gotDevices2AlreadyRan = false;
+function gotDevices2(deviceInfos) {
+ gotDevices2AlreadyRan=true;
+ log("got devices!2");
+ log(deviceInfos);
+ getById("multiselect-trigger3").dataset.state = "0";
+ getById("multiselect-trigger3").classList.add('closed');
+ getById("multiselect-trigger3").classList.remove('open');
+ getById("chevarrow2").classList.add('bottom');
+
+ if (!session.streamSrc){
+ checkBasicStreamsExist();
+ }
+
+ var knownTrack = false;
+
+ try {
+ const audioInputSelect = getById('audioSource3');
+ const videoSelect = getById('videoSource3');
+ const audioOutputSelect = getById('outputSource3');
+ const selectors = [videoSelect];
+
+ [audioInputSelect].forEach(select => {
+ while (select.firstChild) {
+ select.removeChild(select.firstChild);
+ }
+ });
+
+ const values = selectors.map(select => select.value);
+ selectors.forEach(select => {
+ while (select.firstChild) {
+ select.removeChild(select.firstChild);
+ }
+ });
+
+ [audioOutputSelect].forEach(select => {
+ while (select.firstChild) {
+ select.removeChild(select.firstChild);
+ }
+ });
+
+ var counter = 0;
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ const deviceInfo = deviceInfos[i];
+ if (deviceInfo == null) {
+ continue;
+ }
+
+ if (deviceInfo.kind === 'audioinput') {
+ var option = document.createElement('input');
+ option.type = "checkbox";
+ counter++;
+ var listele = document.createElement('li');
+ listele.style.display = "none";
+
+ session.streamSrc.getAudioTracks().forEach(function(track) {
+ if (deviceInfo.label == track.label) {
+ option.checked = true;
+ listele.style.display = "inherit";
+ }
+ });
+
+ option.style.display = "none"
+ option.value = deviceInfo.deviceId || "default";
+ option.name = "multiselecta" + counter;
+ option.id = "multiselecta" + counter;
+ option.dataset.label = deviceInfo.label || ("microphone " + ((audioInputSelect.length || 0) + 1));
+
+ var label = document.createElement('label');
+ label.for = option.name;
+
+ label.innerHTML = " " + (deviceInfo.label || ("microphone " + ((audioInputSelect.length || 0) + 1)));
+
+ listele.appendChild(option);
+ listele.appendChild(label);
+ audioInputSelect.appendChild(listele);
+
+ option.onchange = function(event) { // make sure to clear 'no audio option' if anything else is selected
+ log("change 4768");
+ if (!(CtrlPressed)) {
+ document.querySelectorAll("#audioSource3 input[type='checkbox']").forEach(function(item) {
+ if (event.currentTarget.value !== item.value) {
+ item.checked = false;
+ if (item.dataset.type == "screen") {
+ item.parentElement.parentElement.removeChild(item.parentElement);
+ }
+ while (SelectedAudioInputDevices.indexOf(item.value) > -1) {
+ SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(item.value), 1);
+ }
+ } else {
+ item.checked = true;
+ if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {} else {
+ SelectedAudioInputDevices.push(event.currentTarget.value);
+ }
+ }
+ });
+ } else {
+
+ if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {} else {
+ SelectedAudioInputDevices.push(event.currentTarget.value);
+ }
+
+ getById("audioSourceNoAudio2").checked = false;
+ }
+ saveSettings();
+ };
+
+ } else if (deviceInfo.kind === 'videoinput') {
+ var option = document.createElement('option');
+ option.value = deviceInfo.deviceId || "default";
+ option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
+ try {
+ if (!knownTrack && session.canvasSource){
+ session.canvasSource.srcObject.getVideoTracks().forEach(function(track) {
+ if (option.text == track.label) {
+ option.selected = "true";
+ knownTrack = true;
+ }
+ });
+
+ }
+ if (!knownTrack && session.streamSrc){
+ session.streamSrc.getVideoTracks().forEach(function(track) {
+ if (option.text == track.label) {
+ option.selected = "true";
+ knownTrack = true;
+ }
+ });
+ }
+ } catch (e) {
+ errorlog(e);
+ }
+ videoSelect.appendChild(option);
+
+ } else if (deviceInfo.kind === 'audiooutput') {
+ var option = document.createElement('option');
+ if (audioOutputSelect.length === 0) {
+ option.dataset.default = true;
+ } else {
+ option.dataset.default = false;
+ }
+ option.value = deviceInfo.deviceId || "default";
+ if (option.value == session.sink) {
+ option.selected = "true";
+ } else if (!session.sink && SelectedAudioOutputDevices && (SelectedAudioOutputDevices == option.value)){
+ option.selected = "true";
+ session.sink = option.value; // added 8-dec-22, as the director's saved mic wasn't applying otherwise.
+ }
+ option.text = deviceInfo.label || `Speaker ${audioOutputSelect.length + 1}`;
+ audioOutputSelect.appendChild(option);
+
+ } else {
+ log('Some other kind of source/device: ', deviceInfo);
+ }
+ }
+
+ if (Firefox && !session.mobile){
+ var option = document.createElement('option');
+ option.value = "others";
+ option.text = "Show more options";
+ audioOutputSelect.appendChild(option);
+ }
+
+
+ if (audioOutputSelect.childNodes.length == 0) {
+ var option = document.createElement('option');
+ option.value = "default";
+ option.text = "System Default";
+ audioOutputSelect.appendChild(option);
+ }
+
+ if (videoSelect.childNodes.length <= 1) {
+ getById("flipcamerabutton").style.display = "none"; // don't show the camera cycle button
+ getById("flipcamerabutton").dataset.maxndex = videoSelect.childNodes.length;
+ } else {
+ getById("flipcamerabutton").style.display = "unset";
+ getById("flipcamerabutton").dataset.maxIndex = videoSelect.childNodes.length;
+ }
+
+ ////////////
+ session.streamSrc.getAudioTracks().forEach(function(track) { // add active ScreenShare audio tracks to the list
+ log("Checking for screenshare audio");
+ var matched = false;
+ for (var i = 0; i !== deviceInfos.length; ++i) {
+ var deviceInfo = deviceInfos[i];
+ if (deviceInfo == null) {
+ continue;
+ }
+ log("---");
+ if (track.label == deviceInfo.label) {
+ matched = true;
+ continue;
+ }
+ }
+ if (matched == false) { // Not a gUM device
+ var listele = document.createElement('li');
+ listele.style.display = "block";
+ var option = document.createElement('input');
+ option.type = "checkbox";
+ option.value = track.id;
+ option.checked = true;
+ option.style.display = "none";
+ option.name = track.label;
+ option.label = track.label;
+ option.dataset.type = "screen";
+ var label = document.createElement('label');
+ label.for = option.name;
+ label.innerHTML = " " + track.label;
+ listele.appendChild(option);
+ listele.appendChild(label);
+ option.onchange = function(event) { // make sure to clear 'no audio option' if anything else is selected
+ log("change 4873");
+ var trackid = null;
+ if (!(CtrlPressed)) {
+
+ document.querySelectorAll("#audioSource3 input[type='checkbox']").forEach(function(item) {
+ if (event.currentTarget.value !== item.value) { // this shoulnd't happen, but if it does.
+ item.checked = false;
+ if (item.dataset.type == "screen") {
+ item.parentElement.parentElement.removeChild(item.parentElement);
+ }
+ } else {
+ event.currentTarget.checked = true;
+ trackid = item.value;
+ }
+ });
+ } else {
+ //getById("audioSourceNoAudio2").checked=false;
+ if (event.currentTarget.dataset.type == "screen") {
+ event.currentTarget.parentElement.parentElement.removeChild(event.currentTarget.parentElement);
+ }
+ }
+ activatedPreview = false;
+ grabAudio("#audioSource3", trackid); // exclude item.id.
+ event.stopPropagation();
+ return false;
+ };
+ audioInputSelect.appendChild(listele);
+ }
+ });
+
+ /////////// no video option
+ var optionss = false;
+ if (screensharesupport) {
+ optionss = document.createElement('option');
+ optionss.text = "Screen Share (replace camera)";
+ optionss.value = "XXX";
+ videoSelect.appendChild(optionss); // NO AUDIO OPTION
+ }
+
+ var option = document.createElement('option'); // no video
+ option.text = "Disable Video";
+ option.value = "ZZZ";
+ videoSelect.appendChild(option);
+
+ if (session.streamSrc.getVideoTracks().length == 0) {
+ option.selected = "true";
+ } else if (knownTrack == false) {
+ var option = document.createElement('option'); // no video
+ option.text = session.streamSrc.getVideoTracks()[0].label;
+ option.value = "YYY";
+ videoSelect.appendChild(option);
+ option.selected = "true";
+ }
+
+ if (optionss) {
+ optionss.lastSelected = videoSelect.selectedIndex;
+ }
+
+
+ videoSelect.onchange = function(event) {
+ try {
+ if (event.target.options[event.target.options.selectedIndex].value === "XXX") {
+
+ videoSelect.selectedIndex = event.target.options[event.target.options.selectedIndex].lastSelected;
+ if (session.screenShareState == false) {
+ toggleScreenShare();
+ } else {
+ toggleScreenShare(true);
+ }
+ return;
+ }
+ } catch (e) {}
+ activatedPreview = false;
+ grabVideo(session.quality, "videosource", "select#videoSource3");
+
+ if (!(getById('audioSource3').querySelectorAll("input[data-type='screen']").length)){
+ if (session.screenShareState){
+ session.screenShareState = false;
+ pokeIframeAPI("screen-share-state", false);
+
+ notifyOfScreenShare();
+ //session.refreshScale();
+ }
+ getById("screensharebutton").classList.add("float");
+ getById("screensharebutton").classList.remove("float2");
+ }
+
+ };
+
+ ///////////// /// NO AUDIO appended option
+
+
+ var option = document.createElement('input');
+ option.type = "checkbox";
+ option.value = "ZZZ";
+ option.style.display = "none"
+ option.id = "audioSourceNoAudio2";
+
+ var label = document.createElement('label');
+ label.for = option.name;
+ label.innerHTML = " No Audio";
+ var listele = document.createElement('li');
+
+ if (session.streamSrc.getAudioTracks().length == 0) {
+ option.checked = true;
+ } else {
+ listele.style.display = "none";
+ option.checked = false;
+ }
+ option.onchange = function(event) { // make sure to clear 'no audio option' if anything else is selected
+ log("change 4938");
+ if (!(CtrlPressed)) {
+ document.querySelectorAll("#audioSource3 input[type='checkbox']").forEach(function(item) {
+ if (event.currentTarget.value !== item.value) {
+ item.checked = false;
+ if (item.dataset.type == "screen") {
+ item.parentElement.parentElement.removeChild(item.parentElement);
+ }
+
+ while (SelectedAudioInputDevices.indexOf(item.value) > -1) {
+ SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(item.value), 1);
+ }
+ } else {
+ item.checked = true;
+ if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {
+ //
+ } else {
+ SelectedAudioInputDevices.push(event.currentTarget.value);
+ }
+ }
+ });
+ } else {
+ document.querySelectorAll("#audioSource3 input[type='checkbox']").forEach(function(item) {
+ if (event.currentTarget.value === item.value) {
+ event.currentTarget.checked = true;
+ if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {} else {
+ SelectedAudioInputDevices.push(event.currentTarget.value);
+ }
+ } else {
+ item.checked = false;
+ if (item.dataset.type == "screen") {
+ item.parentElement.parentElement.removeChild(item.parentElement);
+ }
+ while (SelectedAudioInputDevices.indexOf(item.value) > -1) {
+ SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(item.value), 1);
+ }
+ }
+
+ });
+ }
+ saveSettings();
+ };
+ listele.appendChild(option);
+ listele.appendChild(label);
+ audioInputSelect.appendChild(listele);
+
+ ////////////
+
+
+ //selectors.forEach((select, selectorIndex) => {
+ // if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
+ // select.value = values[selectorIndex];
+ // }
+ //});
+
+ audioInputSelect.onchange = function() {
+ log("Audio OPTION HAS CHANGED? 2");
+ activatedPreview = false;
+ setTimeout(function(){
+ grabAudio("#audioSource3");
+ },10)
+ };
+
+ getById("refreshVideoButton").onclick = function() {
+ refreshVideoDevice();
+ };
+
+ if (Firefox && !session.mobile){
+ audioOutputSelect.onclick = function() {
+ log("audioOutputSelect.onclick = function() {");
+ if (audioOutputSelect.options[audioOutputSelect.selectedIndex].value === "others"){
+ log("Trying to increase the output device list");
+ navigator.mediaDevices.selectAudioOutput().then((device) => {
+
+ if (device.kind == "audiooutput"){
+ session.sink = device.deviceId;
+
+ try {
+ var matched = false;
+ audioOutputSelect.childNodes.forEach(ele =>{
+ if (ele.value === device.deviceId){
+ matched = true;
+ ele.selected = true;
+ }
+ })
+ if (!matched){
+ var option = document.createElement('option');
+ option.value = device.deviceId;
+ option.text = device.label;
+ audioOutputSelect.appendChild(option);
+ option.selected = true;
+ }
+
+ saveSettings(); // we're saving because there was an explicit action to change devices
+ } catch(e){errorlog(e);}
+
+ if (!session.sink){return;} // Not sure this would ever happen, but whatever.
+
+ resetupAudioOut(); // we'll probalby use session.sink, since outputSelect3 doesn't exist.
+ }
+
+ });
+ }
+ }
+ }
+
+ audioOutputSelect.onchange = function() {
+ log("audioOutputSelect.onchange = function() {");
+
+ if ((iOS) || (iPad)) {
+ return;
+ }
+
+ if (Firefox && !session.mobile){
+ if (audioOutputSelect.options[audioOutputSelect.selectedIndex].value === "others"){ // we handle this elsewhere
+ return;
+ }
+ }
+
+ try {
+ session.sink = audioOutputSelect.options[audioOutputSelect.selectedIndex].value;
+ saveSettings();
+ } catch (e) {
+ errorlog(e);
+ }
+ if (!session.sink){return;}
+
+ resetupAudioOut();
+
+ log("done audioOutputSelect.onchange = function() {");
+ }
+
+ } catch (e) {
+ errorlog(e);
+ }
+}
+
+function refreshVideoDevice(){
+ if (session.screenShareState) {
+ log("can't refresh a screenshare");
+ return;
+ }
+ log("video source changed");
+ activatedPreview = false;
+ grabVideo(session.quality, "videosource", "select#videoSource3");
+}
+
+function gotDevicesRemote(deviceInfos, UUID) {
+
+ try {
+ if (document.getElementById("remoteVideoSelect_"+UUID)){
+ var videoSelect = document.getElementById("remoteVideoSelect_"+UUID);
+ var length = videoSelect.options.length;
+ for (i = length-1; i >= 0; i--) {
+ videoSelect.options[i] = null;
+ }
+ } else {
+ var videoSelect = document.createElement("select");
+ videoSelect.id = "remoteVideoSelect_"+UUID;
+ videoSelect.style = "max-width:170px;font-size: 70% !important; margin: 5px 5px 5px 0; padding:2px;";
+
+
+
+ videoSelect.onchange = function(){
+ if (session.rpcs[UUID].stats.info && session.rpcs[UUID].stats.info.consent){
+ getById("requestVideoDevice_"+UUID).innerHTML = ' apply';
+ getById("requestVideoDevice_"+UUID).title = "This will update the remote device to the selected one";
+ } else {
+ getById("requestVideoDevice_"+UUID).innerHTML = ' request';
+ getById("requestVideoDevice_"+UUID).title = "This will ask the remote guest for permission to change";
+ }
+ }
+
+ var buttonGO = document.createElement("button");
+ buttonGO.innerHTML = ' refresh';
+ buttonGO.style = "padding: 5px;";
+ buttonGO.title = "This will refresh the current device";
+ buttonGO.id = "requestVideoDevice_"+UUID;
+ buttonGO.onclick = function(){
+ var data = {}
+ data.changeCamera = videoSelect.value;
+ data.UUID = UUID;
+ session.sendRequest(data, UUID); // Viewer is requesting the PUBLISHER
+ };
+
+ var videoSelectDiv = document.createElement("div");
+ getById("advanced_video_director_" + UUID).appendChild(videoSelectDiv);
+ videoSelectDiv.appendChild(videoSelect);
+ videoSelectDiv.appendChild(buttonGO);
+ }
+
+ if (document.getElementById("remoteAudioSelect_"+UUID)){
+ log("remoteAudioSelect_ ");
+ var audioSelect = document.getElementById("remoteAudioSelect_"+UUID);
+ var length = audioSelect.options.length;
+ for (i = length-1; i >= 0; i--) {
+ audioSelect.options[i] = null;
+ }
+ } else {
+ var audioSelect = document.createElement("select");
+ audioSelect.id = "remoteAudioSelect_"+UUID;
+ audioSelect.style = "max-width:170px;font-size: 70% !important; margin: 5px 5px 5px 0; padding:2px;";
+
+
+ audioSelect.onchange = function(){
+ log("ON CHANGE");
+ if (session.rpcs[UUID].stats.info && session.rpcs[UUID].stats.info.consent){
+ getById("requestAudioDevice_"+UUID).innerHTML = ' apply';
+ getById("requestAudioDevice_"+UUID).title = "This will update the remote device to the selected one";
+ } else {
+ getById("requestAudioDevice_"+UUID).innerHTML = ' request';
+ getById("requestAudioDevice_"+UUID).title = "This will ask the remote guest for permission to change";
+ }
+ }
+
+ var buttonGO = document.createElement("button");
+ buttonGO.innerHTML = ' refresh';
+ buttonGO.style = "padding: 5px;";
+ buttonGO.title = "This will refresh the current device";
+ buttonGO.id = "requestAudioDevice_"+UUID;
+
+ buttonGO.onclick = function(){
+ var data = {}
+ data.changeMicrophone = audioSelect.value;
+ data.UUID = UUID;
+ session.sendRequest(data, UUID); // Viewer is requesting the PUBLISHER
+ }
+ var audioSelectDiv = document.createElement("div");
+ getById("advanced_audio_director_" + UUID).appendChild(audioSelectDiv);
+ audioSelectDiv.appendChild(audioSelect);
+ audioSelectDiv.appendChild(buttonGO);
+
+ }
+
+ if (document.getElementById("remoteAudioOutputSelect_"+UUID)){
+ var audioOutputSelect = document.getElementById("remoteAudioOutputSelect_"+UUID);
+ var length = audioOutputSelect.options.length;
+ for (i = length-1; i >= 0; i--) {
+ audioOutputSelect.options[i] = null;
+ }
+ } else {
+ var audioOutputSelect = document.createElement("select");
+ audioOutputSelect.id = "remoteAudioOutputSelect_"+UUID;
+ audioOutputSelect.style = "max-width:170px;font-size: 70% !important; margin: 5px 5px 5px 0; padding:2px;";
+
+ audioOutputSelect.onchange = function(){
+ if (session.rpcs[UUID].stats.info && session.rpcs[UUID].stats.info.consent){
+ getById("requestAudioOutputDevice_"+UUID).innerHTML = ' apply';
+ getById("requestAudioOutputDevice_"+UUID).title = "This will update the remote device to the selected one";
+ } else {
+ getById("requestAudioOutputDevice_"+UUID).innerHTML = ' request';
+ getById("requestAudioOutputDevice_"+UUID).title = "This will ask the remote guest for permission to change";
+ }
+ }
+
+ var buttonGO = document.createElement("button");
+ buttonGO.innerHTML = ' refresh';
+ buttonGO.style = "padding: 5px;";
+ buttonGO.title = "This will refresh the current device";
+ buttonGO.id = "requestAudioOutputDevice_"+UUID;
+ buttonGO.onclick = function(){
+ var data = {}
+ data.changeSpeaker = audioOutputSelect.value;
+ data.UUID = UUID;
+ session.sendRequest(data, UUID); // Viewer is requesting the PUBLISHER
+ }
+
+ var audioOutputSelectContainer = document.createElement("div");
+ getById("advanced_audio_director_" + UUID).appendChild(audioOutputSelectContainer);
+ audioOutputSelectContainer.appendChild(audioOutputSelect);
+ audioOutputSelectContainer.appendChild(buttonGO);
+ }
+
+ var matched = false;
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ const deviceInfo = deviceInfos[i];
+ if (deviceInfo == null) {
+ continue;
+ }
+ if (deviceInfo.kind === 'videoinput'){
+ const option = document.createElement('option');
+ option.value = deviceInfo.deviceId || "default";
+ option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
+ if (getById("remoteVideoLabel_"+UUID).innerText == option.text){
+ option.selected = "true";
+ matched = true;
+ }
+ videoSelect.appendChild(option);
+
+ } else if (deviceInfo.kind === 'audioinput'){
+ const option = document.createElement('option');
+ option.value = deviceInfo.deviceId || "default";
+ option.text = deviceInfo.label || `microphone ${audioSelect.length + 1}`;
+ if (getById("remoteAudioLabel_"+UUID).innerText == option.text){
+ option.selected = "true";
+ }
+ audioSelect.appendChild(option);
+
+ } else if (deviceInfo.kind === 'audiooutput'){
+ const option = document.createElement('option');
+ option.value = deviceInfo.deviceId || "default";
+ option.text = deviceInfo.label || `microphone ${audioOutputSelect.length + 1}`;
+ if (getById("remoteAudioOutputSelect_"+UUID).innerText == option.text){
+ option.selected = "true";
+ }
+ audioOutputSelect.appendChild(option);
+ }
+ }
+
+
+ if (!matched){
+ getById("requestVideoDevice_"+UUID).innerHTML = ' request';
+ getById("requestVideoDevice_"+UUID).title = "This will ask the remote guest for permission to change";
+ } else {
+ getById("requestVideoDevice_"+UUID).innerHTML = ' refresh';
+ getById("requestVideoDevice_"+UUID).title = "This will reconnect the guest's active video source.";
+ }
+
+
+ } catch(e){errorlog(e);}
+
+ pokeIframeAPI("remote-devices-info", deviceInfos, UUID);
+}
+
+var timeoutTone = false;
+function playtone(screen = false, tonename="testtone") {
+ if (timeoutTone){return;}
+ setTimeout(function(){
+ timeoutTone = false;
+ },500);
+ timeoutTone = true;
+
+ if ((iOS) || (iPad)) {
+ // try{
+ // session.audioContext.resume();
+ // } catch(e){errorlog(e);}
+ var toneEle = document.getElementById(tonename);
+ if (toneEle) {
+ toneEle.mute
+ toneEle.play();
+ }
+ return;
+ }
+
+ if (screen) {
+ try{
+ var outputSelect = getById('outputSourceScreenshare');
+ if (outputSelect){
+ session.sink = outputSelect.options[outputSelect.selectedIndex].value;
+ saveSettings();
+ }
+ } catch(e){errorlog(e);}
+ }
+
+ var toneEle = document.getElementById(tonename);
+ if (toneEle) {
+ if (session.sink) {
+ try {
+ toneEle.setSinkId(session.sink).then(() => { // TODO: iOS doens't support sink. Needs to bypass if IOS
+ log("changing audio sink:" + session.sink);
+ toneEle.play();
+ }).catch(error => {
+ errorlog(error);
+ });
+ } catch (e) {
+ warnlog(e); // firefox?
+ toneEle.play();
+ }
+ } else {
+ toneEle.play();
+ }
+ }
+}
+
+function showNotification(title, body="") {
+ if (!Notification){return;}
+ if (Notification.permission !== 'granted') {
+ Notification.requestPermission();
+ } else {
+ let icon = '/media/old_icon.png'; //this is a large image may take more time to show notifiction, replace with small size icon
+
+ let notification = new Notification(title, { body, icon });
+
+ notification.onclick = () => {
+ notification.close();
+ window.parent.focus();
+ }
+
+ }
+}
+
+async function getAudioOnly(selector, trackid = null, override = false) {
+ var audioSelect = document.querySelector(selector).querySelectorAll("input");
+ var audioList = [];
+ var streams = [];
+ log("getAudioOnly()");
+ for (var i = 0; i < audioSelect.length; i++) {
+ if (audioSelect[i].value == "ZZZ") {
+ continue;
+ } else if (trackid == audioSelect[i].value) { // skip already excluded
+ continue;
+ } else if ("screen" == audioSelect[i].dataset.type) { // skip already excluded ---------- !!!!!! DOES THIS MAKE SENSE? TODO: CHECK
+ continue;
+ } else if (audioSelect[i].checked) {
+ log(audioSelect[i]);
+ audioList.push(audioSelect[i]);
+ }
+ }
+ for (var i = 0; i < audioList.length; i++) {
+
+ if ((session.echoCancellation !== false) && (session.autoGainControl !== false) && (session.noiseSuppression !== false)) {
+ var constraint = {
+ audio: {
+ deviceId: {
+ exact: audioList[i].value
+ }
+ }
+ };
+ } else { // Just trying to avoid problems with some systems that don't support these features
+ var constraint = {
+ audio: {
+ deviceId: {
+ exact: audioList[i].value
+ }
+ }
+ };
+ if (session.echoCancellation === false) {
+ constraint.audio.echoCancellation = false;
+ } else {
+ constraint.audio.echoCancellation = true;
+ }
+ if (session.autoGainControl === false) {
+ constraint.audio.autoGainControl = false;
+ } else {
+ constraint.audio.autoGainControl = true;
+ }
+ if (session.noiseSuppression === false) {
+ constraint.audio.noiseSuppression = false;
+ } else {
+ constraint.audio.noiseSuppression = true;
+ }
+ }
+ constraint.video = false;
+ if (override !== false) {
+ if (override.audio && override.audio.deviceId){
+ if (audioList[i].value == override.audio.deviceId){
+ constraint = override;
+ } else {
+ // not the device we want to hack.
+ }
+ } else {
+ constraint = override;
+ }
+ //errorlog(audioList[i]);
+ //errorlog(override);
+ //try {
+ // if (override.audio && override.audio.deviceId && override.audio.deviceId.exact && override.audio.deviceId.exact == audioList[i].value) {
+ // constraint = override;
+ // }
+ //} catch (e) {}
+ }
+
+ if (session.audioInputChannels) {
+ if (constraint.audio === true) {
+ constraint.audio = {};
+ constraint.audio.channelCount = session.audioInputChannels;
+ } else if (constraint.audio) {
+ constraint.audio.channelCount = session.audioInputChannels;
+ }
+ }
+
+
+ if (session.micSampleRate){
+ if (constraint.audio === true) {
+ constraint.audio = {};
+ constraint.audio.sampleRate = parseInt(session.micSampleRate);
+ } else if (constraint.audio) {
+ constraint.audio.sampleRate = parseInt(session.micSampleRate);
+ }
+ }
+
+ log("CONSTRAINT");
+ log(constraint);
+ var stream = await navigator.mediaDevices.getUserMedia(constraint).then(function(stream2) {
+ pokeIframeAPI("local-microphone-event");
+ return stream2;
+ }).catch(function(err) {
+ warnlog(err);
+ if (!(session.cleanOutput)) {
+ if (override !== false) {
+ if (err.name) {
+ if (err.constraint) {
+ warnUser(err['name'] + ": " + err['constraint']);
+ }
+ }
+ }
+ }
+ }); // More error reporting maybe?
+ if (stream) {
+ streams.push(stream);
+ }
+ }
+
+ return streams;
+}
+
+function applyMirror(mirror) { // true unmirrors as its already mirrored
+ if (!session.videoElement){return;}
+ try {
+ var transFlip = "";
+ var transNorm = "";
+ if (document.getElementById('videosource') && (session.windowed)) {
+ transFlip = " translate(0, 50%)";
+ transNorm = " translate(0, -50%)";
+ }
+
+ if (session.mirrored == 2) {
+ mirror = true;
+ } else if (session.mirrored === 0) {
+ mirror = true;
+ }
+
+ if (!session.videoElement.style){
+ session.videoElement.style = "";
+ }
+
+ if (mirror) {
+ if (session.mirrored && session.flipped) {
+ session.videoElement.style.transform = "scaleX(-1) scaleY(-1)" + transFlip;
+ session.videoElement.classList.add("mirrorControl");
+ } else if (session.mirrored) {
+ session.videoElement.style.transform = "scaleX(-1)" + transNorm;
+ session.videoElement.classList.add("mirrorControl");
+ } else if (session.flipped) {
+ session.videoElement.style.transform = "scaleY(-1) scaleX(1)" + transFlip;
+ session.videoElement.classList.remove("mirrorControl");
+ } else {
+ session.videoElement.style.transform = "scaleX(1)" + transNorm;
+ session.videoElement.classList.remove("mirrorControl");
+ }
+ } else {
+ if (session.mirrored && session.flipped) {
+ session.videoElement.style.transform = "scaleX(1) scaleY(-1)" + transFlip;
+ session.videoElement.classList.remove("mirrorControl");
+ } else if (session.mirrored) {
+ session.videoElement.style.transform = "scaleX(1)" + transNorm;
+ session.videoElement.classList.remove("mirrorControl");
+ } else if (session.flipped) {
+ session.videoElement.style.transform = "scaleY(-1) scaleX(-1)" + transFlip;
+ session.videoElement.classList.add("mirrorControl");
+ } else {
+ session.videoElement.style.transform = "scaleX(-1)" + transNorm;
+ session.videoElement.classList.add("mirrorControl");
+ }
+ }
+
+ var rotate = 0;
+ if (session.forceRotate!==false){
+ if (session.rotate){
+ rotate = (session.forceRotate * -1) + parseInt(session.rotate);
+ } else {
+ rotate = session.forceRotate * -1;
+ }
+ if (session.forceRotate){
+ rotate+=180;
+ }
+ } else {
+ rotate = session.rotate;
+ }
+
+ if (rotate && (rotate>=360)){
+ rotate-=360;
+ }
+
+ session.videoElement.rotated = rotate;
+
+ if (document.getElementById("previewWebcam") || document.getElementById('videosource')){
+ var eleName = document.getElementById("previewWebcam") || document.getElementById('videosource');
+ if (rotate){
+ if (eleName.style.transform){
+ eleName.style.transform += " rotate("+rotate+"deg)";
+ } else {
+ eleName.style.transform = "rotate("+rotate+"deg)";
+ }
+ eleName.classList.add("rotate");
+ } else {
+ eleName.classList.remove("rotate");
+ }
+ } else if (document.getElementById("container")){
+ if (rotate==0){
+ document.getElementById("container").classList.remove("rotate");
+ document.getElementById("container").style.transform = "unset";
+ document.getElementById("container").style.transformOrigin = "unset";
+ } else {
+ document.getElementById("container").style.transform = "rotate("+rotate+"deg)";
+ }
+ } else if (document.getElementById("minipreview")){
+ var eleName = document.getElementById("minipreview");
+ if (rotate==90 ){
+ eleName.style.transform = "rotate(90deg)";
+ eleName.style.transformOrigin = "50% 100%";
+ eleName.style.height = eleName.style.width;
+ eleName.style.width = "unset";
+ } else if (session.videoElement.rotated==270){
+ eleName.style.transform = "rotate(270deg)";
+ eleName.style.transformOrigin = "50% 100%";
+ eleName.style.width = "unset";
+ eleName.style.height = eleName.style.width;
+ } else if (session.videoElement.rotated==180){
+ eleName.style.transform = "rotate(180deg)";
+ eleName.style.transformOrigin = "unset";
+ } else {
+ eleName.classList.remove("rotate");
+ eleName.style.transform = "unset";
+ eleName.style.transformOrigin = "unset";
+ }
+ }
+ // if not one of these, then it's going to be handled by the automixer automatically for us.
+
+ } catch(e){errorlog(e);}
+}
+
+
+function applyMirrorGuest(mirror, videoElement) { // true unmirrors as its already mirrored
+ try {
+ if (mirror) {
+ videoElement.style.transform = "scaleX(-1)";
+ videoElement.classList.add("mirrorControl");
+ } else {
+ videoElement.style.transform = "scaleX(1)";
+ videoElement.classList.remove("mirrorControl");
+ }
+ } catch(e){errorlog(e);}
+}
+
+function cleanupMediaTracks() {
+ getUserMediaRequestID += 1;
+ try {
+ if (session.streamSrc) {
+ session.streamSrc.getTracks().forEach(function(track) {
+ session.streamSrc.removeTrack(track);
+ track.stop();
+ log("stopping old track");
+ });
+ } else {
+ checkBasicStreamsExist();
+ }
+ if (session.videoElement && session.videoElement.srcObject) {
+ session.videoElement.srcObject.getTracks().forEach(function(track) {
+ session.videoElement.srcObject.removeTrack(track);
+ track.stop();
+ log("stopping old track");
+ });
+ } else {
+ session.videoElement.srcObject = createMediaStream();
+ }
+ activatedPreview = false;
+ } catch (e) {
+ errorlog(e);
+ }
+}
+
+/// Detect system changes; handle change or use for debugging
+var lastAudioDevice = null;
+var lastVideoDevice = null;
+var lastPlaybackDevice = null;
+
+var audioReconnectTimeout = null;
+var videoReconnectTimeout = null;
+var grabDevicesTimeout = null;
+var playbackReconnectTimeout = null;
+
+function reconnectDevices(event) { /// TODO: Perhaps change this to only if there is a DISCONNECT; rather than ON NEW DEVICE?
+
+ try {
+ if (session.firstPlayTriggered && (session.audioCtx.state == "suspended")){
+ session.audioCtx.resume();
+ }
+ } catch(e){warnlog("session.audioCtx.resume(); failed");}
+
+ warnlog("A media device has changed");
+
+ if ((iOS) || (iPad)) { // consider adding this back, but if no problem, whatever.
+ return;
+ }
+
+ if (document.getElementById("previewWebcam")) { // rest of the code isn't setup to support pre-connection setup.
+ clearTimeout(playbackReconnectTimeout);
+ playbackReconnectTimeout = setTimeout(function(){
+ if (document.getElementById("previewWebcam")){
+ enumerateDevices().then(gotDevices).then(function(){
+ if (document.getElementById("previewWebcam")){
+ resetupAudioOut(document.getElementById("previewWebcam"));
+ }
+ });
+ }
+ }, 1000);
+ return;
+ }
+
+ try {
+ if (!session.streamSrc){
+ checkBasicStreamsExist();
+ } else {
+ session.streamSrc.getTracks().forEach(function(track) {
+ if (track.readyState == "ended") {
+ if (track.kind == "audio") {
+ lastAudioDevice = track.label;
+ } else if (track.kind == "video") {
+ lastVideoDevice = track.label;
+ }
+ session.streamSrc.removeTrack(track);
+ log("remove ended old track");
+ }
+ });
+ if (session.videoElement.srcObject){
+ session.videoElement.srcObject.getTracks().forEach(function(track) {
+ if (track.readyState == "ended") {
+ session.videoElement.srcObject.removeTrack(track);
+ log("remove ended old track");
+ }
+ });
+ }
+ }
+ /* } else {
+ clearTimeout(playbackReconnectTimeout);
+ playbackReconnectTimeout = setTimeout(function() {
+ enumerateDevices().then(gotDevices2).then(function() {
+ resetupAudioOut();
+ });
+ }, 1000);
+ return;
+ } */
+ } catch (e) {
+ errorlog(e);
+ }
+
+ clearTimeout(audioReconnectTimeout);
+ audioReconnectTimeout = null;
+ if (lastAudioDevice) {
+ audioReconnectTimeout = setTimeout(function() { // only reconnect same audio device. If reconnected, clear the disconnected flag.
+ enumerateDevices().then(gotDevices2).then(function() {
+ // TODO: check to see if any audio is connected?
+ var streamConnected = false;
+ var audioSelect = getById("audioSource3").querySelectorAll("input");
+ for (var i = 0; i < audioSelect.length; i++) {
+ if (audioSelect[i].value == "ZZZ") {
+ continue;
+ } else if (audioSelect[i].checked) {
+ log("checked");
+ streamConnected = true;
+ break;
+ }
+ }
+
+ if (!streamConnected) {
+ for (var i = 0; i < audioSelect.length; i++) {
+ if (audioSelect[i].value == "ZZZ") {
+ continue;
+ }
+ if (lastAudioDevice == audioSelect[i].dataset.label) { // if the last disconnected device matches.
+ audioSelect[i].checked = true;
+ streamConnected = true;
+ lastAudioDevice = null;
+ warnlog("DISCONNECTED AUDIO DEVICE RECONNECTED");
+ break;
+ }
+ }
+ }
+ activatedPreview = false;
+ grabAudio("#audioSource3");
+ setTimeout(function() {
+ enumerateDevices().then(gotDevices2).then(function() {
+ });
+ }, 1000);
+ });
+ }, 2000);
+ }
+
+ clearTimeout(videoReconnectTimeout); // only reconnect same video device.
+ videoReconnectTimeout = null;
+ if (lastVideoDevice) {
+ videoReconnectTimeout = setTimeout(function() {
+ enumerateDevices().then(gotDevices2).then(function() {
+ var streamConnected = false;
+ var videoSelect = getById("videoSource3");
+ errorlog(videoSelect.value);
+
+ if (videoSelect.value == "ZZZ") {
+ for (var i = 0; i < videoSelect.options.length; i++) {
+ try {
+ if (videoSelect.options[i].innerHTML == lastVideoDevice) {
+ videoSelect.options[i].selected = "true";
+ streamConnected = true;
+ lastVideoDevice = null;
+ break;
+ }
+ } catch (e) {
+ errorlog(e);
+ }
+ }
+ }
+
+ if (streamConnected) {
+ activatedPreview = false;
+ grabVideo(session.quality, "videosource", "select#videoSource3");
+ setTimeout(function() {
+ enumerateDevices().then(gotDevices2).then(function() {});
+ }, 1000);
+ }
+
+ });
+ }, 2000);
+ }
+ clearTimeout(playbackReconnectTimeout);
+ playbackReconnectTimeout = setTimeout(function() {
+ enumerateDevices().then(gotDevices2).then(function() {
+ resetupAudioOut();
+ });
+ }, 1000);
+}
+
+var vingesterFixed = false;
+function resetupAudioOut(ele=false, forceReset=false) { // this re-sets ALL output devices / sources
+ log("resetupAudioOut");
+ if (iOS || iPad || SafariVersion || (ChromeVersion && session.mobile)) { // TODO : TEST TO SEE IF THIS WORKS WITH SAFARI? it might.
+ if (ele){return;}
+ for (var UUID in session.rpcs) {
+ if (session.rpcs[UUID].videoElement){
+ try{
+ session.rpcs[UUID].videoElement.pause().then(() => {
+ setTimeout(function(uuid) {
+ log("win");
+ try{
+ session.rpcs[uuid].videoElement.play().then(() => {
+ // updateIncomingAudioElement(uuid); // DO NOT DO THIS; it would cause a loop, as this updateIncomingAudioElement calls reseet
+ log("toggle pause/play");
+ });
+ } catch(e){errorlog(e);}
+ }, 0, UUID);
+ }).catch(errorlog);
+ } catch(e){warnlog(e);}
+ }
+ }
+ return;
+ }
+
+ var outputSelect = document.getElementById("outputSource") || document.getElementById("outputSource3") || false;
+ var sinkSet = false;
+
+ try { // function tries to get vingester working, by listening for its first tweak.
+ if (!session.sink && !vingesterFixed && document.getElementById("testtone") && document.getElementById("testtone").sinkId && (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1)){
+ vingesterFixed = true; // only set the session.sink one time, as vingester on should be needing to set it one time.
+ session.sink = document.getElementById("testtone").sinkId;
+ }
+ } catch(e){
+ errorlog(e);
+ }
+
+ if (outputSelect && outputSelect.options && outputSelect.options.length){
+ for (var i = 0; i < outputSelect.options.length; i++) {
+ if (outputSelect.options[i].value == session.sink) {
+ outputSelect.options[i].selected = "true";
+ sinkSet = true;
+ }
+ }
+ if (sinkSet == false) {
+ if (outputSelect.options[0]) {
+ outputSelect.options[0].selected = "true";
+ sinkSet = outputSelect.value;
+ }
+ } else {
+ sinkSet = session.sink;
+ }
+ } else {
+ sinkSet = session.sink;
+ }
+
+ if (ele){
+ try {
+ var eleSink = sinkSet;
+ if (ele.manualSink){
+ eleSink = ele.manualSink;
+ log("Manual Sink Identified");
+ }
+ if (eleSink){
+ if (forceReset){
+ ele.setSinkId("default").then(() => {
+ ele.setSinkId(eleSink).then(() => {
+ log("New Output Device");
+ }).catch(error => {
+ if (!Firefox){
+ errorlog(error);
+ }
+ // TODO: If error, then see if I need to add mic support, and grab it if needed.
+ });
+ }).catch(error => {
+ if (!Firefox){
+ errorlog(error);
+ }
+ ele.setSinkId(eleSink).then(() => {
+ log("New Output Device");
+ }).catch(error => {
+ if (!Firefox){
+ errorlog(error);
+ }
+ // TODO: If error, then see if I need to add mic support, and grab it if needed.
+ });
+ });
+ }
+
+ ele.setSinkId(eleSink).then(() => {
+ log("New Output Device for self-preview");
+ }).catch(error => {
+ if (!Firefox){
+ warnlog("Need to add mic support, and grab it if needed.");
+ warnlog(error);
+ }
+ // TODO: If error, then see if I need to add mic support, and grab it if needed.
+ });
+ }
+ } catch(e){warnlog("can't use setsink");}
+ log("audio sink: "+eleSink);
+ return;
+ }
+
+ if (session.videoElement){ // this would be a preview or videosource
+ try {
+ var eleSink = sinkSet;
+ if (session.videoElement.manualSink){
+ eleSink = session.videoElement.manualSink;
+ }
+ if (eleSink){
+ session.videoElement.setSinkId(eleSink).then(() => {
+ log("New Output Device for self-preview");
+ }).catch(error => {
+ if (!Firefox){
+ errorlog(error);
+ }
+ // TODO: If error, then see if I need to add mic support, and grab it if needed.
+ });
+ }
+ } catch(e){warnlog("can't use setsink");}
+ }
+
+ for (UUID in session.rpcs) {
+ try{
+ if (session.rpcs[UUID].videoElement){
+ var eleSink = sinkSet;
+ if (session.rpcs[UUID].videoElement.manualSink){
+ eleSink = session.rpcs[UUID].videoElement.manualSink;
+ }
+ if (eleSink){
+ session.rpcs[UUID].videoElement.setSinkId(eleSink).then(() => {
+ log("New Output Device for: " + UUID);
+ }).catch(error => {
+ if (!Firefox){
+ errorlog(error);
+ }
+ // TODO: If error, then see if I need to add mic support, and grab it if needed.
+ });
+ }
+ }
+ } catch(e){warnlog(e);}
+ }
+ log("audio sink 2: "+eleSink);
+}
+
+
+function lyraDecode(receiver){ // WIP. does not work
+ warnlog("lyraDecode");
+ const receiverStreams = receiver.createEncodedStreams();
+ var xx = receiverStreams.readable;
+ xx.pipeThrough(new TransformStream());
+ xx.pipeTo(receiverStreams.writable);
+}
+function lyraEncode(UUID){ // WIP. does not work
+ warnlog("lyraEncode");
+ var senders = getSenders2(UUID);
+ senders.forEach((sender) => {
+ if (!sender.track){return;}
+ if (sender.track.kind === "audio") {
+ try {
+ var senderStreams = sender.createEncodedStreams();
+ senderStreams.readable.pipeThrough(new TransformStream()).pipeTo(senderStreams.writable);
+ } catch (e){
+ errorlog(e);
+ }
+ }
+ });
+}
+
+///////// WIP. does not work ////////////
+// function encodeFunctionLyra(encodedFrame, controller) { // Snippet is Apache 2.0 licenced. Source: https://github.com/Flash-Meeting/lyra-webrtc
+ // const inputDataArray = new Uint8Array(encodedFrame.data);
+
+ // const inputBufferPtr = session.lyraCodecModule._malloc(encodedFrame.data.byteLength);
+ // const encodedBufferPtr = session.lyraCodecModule._malloc(1024);
+
+ // session.lyraCodecModule.HEAPU8.set(inputDataArray, inputBufferPtr);
+ // const length = session.lyraCodecModule.encode(inputBufferPtr, inputDataArray.length, 16000, encodedBufferPtr);
+
+ // const newData = new ArrayBuffer(length);
+ // if (length > 0){
+ // const newDataArray = new Uint8Array(newData);
+ // newDataArray.set(session.lyraCodecModule.HEAPU8.subarray(encodedBufferPtr, encodedBufferPtr + length));
+ // }
+ // session.lyraCodecModule._free(inputBufferPtr);
+ // session.lyraCodecModule._free(encodedBufferPtr);
+ // encodedFrame.data = newData;
+ // controller.enqueue(encodedFrame);
+// }
+// function decodeFunctionLyra(encodedFrame, controller) { // Apache 2.0 licenced. Source: https://github.com/Flash-Meeting/lyra-webrtc
+ // const newData = new ArrayBuffer(16000 * 0.02 * 2);
+ // if (encodedFrame.data.byteLength > 0) {
+ // const inputDataArray = new Uint8Array(encodedFrame.data);
+ // const inputBufferPtr = session.lyraCodecModule._malloc(encodedFrame.data.byteLength);
+ // const outputBufferPtr = session.lyraCodecModule._malloc(2048);
+ // session.lyraCodecModule.HEAPU8.set(inputDataArray, inputBufferPtr);
+ // const length = session.lyraCodecModule.decode(inputBufferPtr,
+ // inputDataArray.length, 16000,
+ // outputBufferPtr);
+ // const newDataArray = new Uint8Array(newData);
+ // newDataArray.set(session.lyraCodecModule.HEAPU8.subarray(outputBufferPtr, outputBufferPtr + length));
+ // session.lyraCodecModule._free(inputBufferPtr);
+ // session.lyraCodecModule._free(outputBufferPtr);
+ // }
+ // encodedFrame.data = newData;
+ // controller.enqueue(encodedFrame);
+// }
+//////////
+
+function obfuscateURL(input) {
+ if (input.startsWith("https://obs.ninja/")) {
+ input = input.replace('https://obs.ninja/', 'obs.ninja/');
+ } else if (input.startsWith("http://obs.ninja/")) {
+ input = input.replace('http://obs.ninja/', 'obs.ninja/');
+ } else if (input.startsWith("obs.ninja/")) {
+ input = input.replace('obs.ninja/', 'obs.ninja/');
+ } else if (input.startsWith("https://vdo.ninja/")) {
+ input = input.replace('https://vdo.ninja/', 'vdo.ninja/');
+ } else if (input.startsWith("http://vdo.ninja/")) {
+ input = input.replace('http://vdo.ninja/', 'vdo.ninja/');
+ } else if (input.startsWith("vdo.ninja/")) {
+ input = input.replace('vdo.ninja/', 'vdo.ninja/');
+ }
+
+ input = input.replace('&view=', '&v=');
+ input = input.replace('&view&', '&v&');
+ input = input.replace('?view&', '?v&');
+ input = input.replace('?view=', '?v=');
+
+ input = input.replace('&videobitrate=', '&vb=');
+ input = input.replace('?videobitrate=', '?vb=');
+ input = input.replace('&bitrate=', '&vb=');
+ input = input.replace('?bitrate=', '?vb=');
+
+ input = input.replace('?audiodevice=', '?ad=');
+ input = input.replace('&audiodevice=', '&ad=');
+
+ input = input.replace('?label=', '?l=');
+ input = input.replace('&label=', '&l=');
+
+ input = input.replace('?stereo=', '?s=');
+ input = input.replace('&stereo=', '&s=');
+ input = input.replace('&stereo&', '&s&');
+ input = input.replace('?stereo&', '?s&');
+
+ input = input.replace('?webcam&', '?wc&');
+ input = input.replace('&webcam&', '&wc&');
+
+ input = input.replace('?remote=', '?rm=');
+ input = input.replace('&remote=', '&rm=');
+
+ input = input.replace('?password=', '?p=');
+ input = input.replace('&password=', '&p=');
+
+ input = input.replace('&maxvideobitrate=', '&mvb=');
+ input = input.replace('?maxvideobitrate=', '?mvb=');
+
+ input = input.replace('&maxbitrate=', '&mvb=');
+ input = input.replace('?maxbitrate=', '?mvb=');
+
+ input = input.replace('&height=', '&h=');
+ input = input.replace('?height=', '?h=');
+
+ input = input.replace('&width=', '&w=');
+ input = input.replace('?width=', '?w=');
+
+ input = input.replace('&quality=', '&q=');
+ input = input.replace('?quality=', '?q=');
+
+ input = input.replace('&cleanoutput=', '&clean=');
+ input = input.replace('?cleanoutput=', '?clean=');
+
+ input = input.replace('&maxviewers=', '&clean=');
+ input = input.replace('?maxviewers=', '?clean=');
+
+ input = input.replace('&frameRate=', '&fr=');
+ input = input.replace('?frameRate=', '?fr=');
+
+ input = input.replace('&fps=', '&fr=');
+ input = input.replace('?fps=', '?fr=');
+
+ input = input.replace('&permaid=', '&push=');
+ input = input.replace('?permaid=', '?push=');
+
+ input = input.replace('&roomid=', '&r=');
+ input = input.replace('?roomid=', '?r=');
+
+ input = input.replace('&room=', '&r=');
+ input = input.replace('?room=', '?r=');
+
+ log(input);
+ var key = "OBSNINJAFORLIFE";
+ var encrypted = CryptoJS.AES.encrypt(input, key);
+ var output = "https://invite.cam/" + encrypted.toString();
+ return output;
+}
+
+function notifyOfScreenShare(){
+ if (session.notifyScreenShare){
+ var data = {};
+ data.screenShareState = session.screenShareState;
+ session.sendMessage(data);
+ }
+}
+
+var beforeScreenShare = null; // video
+var screenShareAudioTrack = null;
+async function toggleScreenShare(reload = false) { ////////////////////////////
+
+ var quality = session.quality_ss;
+
+ if (quality === false){
+ quality = session.quality_wb;
+ }
+
+ if (session.quality !== false){
+ quality = session.quality;
+ }
+ if (session.screensharequality!==false){
+ quality = session.screensharequality;
+ }
+
+ if (reload) { // quality = 0, audio = true, videoOnEnd = false) {
+ await grabScreen(quality, true, true).then(res => {
+ if (res != false) {
+ session.screenShareState = true;
+
+ notifyOfScreenShare();
+
+
+ getById("screensharebutton").classList.add("float2");
+ getById("screensharebutton").classList.remove("float");
+ enumerateDevices().then(gotDevices2).then(function() {});
+
+ pokeIframeAPI("screen-share-state", true);
+ }
+
+ });
+ return;
+ }
+ if (session.screenShareState == false) { // adding a screen
+ await grabScreen(quality, true, true).then(res => {
+ if (res != false) {
+ session.screenShareState = true;
+
+ notifyOfScreenShare();
+
+ //session.refreshScale();
+
+ getById("screensharebutton").classList.add("float2");
+ getById("screensharebutton").classList.remove("float");
+ enumerateDevices().then(gotDevices2).then(function() {});
+
+ //if (session.videoElement.readyState!==4){
+ session.videoElement.play().then(() => {
+ log("start play doublecheck");
+ });
+ //}
+ updateMixer();
+ pokeIframeAPI("screen-share-state", true);
+ }
+ });
+
+ } else { // removing a screen . session.screenShareState already true true /////////////////////////////////
+
+ session.screenShareState = false;
+ pokeIframeAPI("screen-share-state", false);
+
+ notifyOfScreenShare();
+
+ if (!session.streamSrc){
+ checkBasicStreamsExist();
+ }
+
+ if (screenShareAudioTrack){
+ session.videoElement.srcObject.getAudioTracks().forEach(function(track) { // previous video track; saving it. Must remove the track at some point.
+ if (screenShareAudioTrack.id == track.id) { // since there are more than one audio track, lets see if we can remove JUST the audio track for the screen share.
+ session.videoElement.srcObject.removeTrack(track);
+ track.stop();
+ }
+ });
+
+ session.streamSrc.getAudioTracks().forEach(function(track) { // previous video track; saving it. Must remove the track at some point.
+ if (screenShareAudioTrack.id == track.id) { // since there are more than one audio track, lets see if we can remove JUST the audio track for the screen share.
+ session.streamSrc.removeTrack(track);
+ track.stop();
+ }
+ });
+
+ session.videoElement.srcObject = outboundAudioPipeline(); // updateREnderOoutput is just for video if videoElement is already activated.
+ screenShareAudioTrack=null;
+ senderAudioUpdate();
+ }
+
+ var addedAlready = false;
+ session.streamSrc.getVideoTracks().forEach(function(track) {
+ if (beforeScreenShare && (track.id == beforeScreenShare.id)){
+ addedAlready=true;
+ } else {
+ session.streamSrc.removeTrack(track);
+ track.stop();
+ }
+ });
+ if (session.videoElement.srcObject){
+ session.videoElement.srcObject.getVideoTracks().forEach(function(track) {
+ if (beforeScreenShare && (track.id == beforeScreenShare.id)){
+ addedAlready=true;
+ } else {
+ session.videoElement.srcObject.removeTrack(track);
+ track.stop();
+ }
+ });
+ }
+
+ getById("screensharebutton").classList.add("float"); // disable the button after we know the tracks are disabled
+ getById("screensharebutton").classList.remove("float2");
+
+ if (beforeScreenShare){
+ if (addedAlready==false){
+ session.streamSrc.addTrack(beforeScreenShare); // add back in the video track we had before we started screen sharing. It should be NULL if we changed the video track else where (such as via the settings). #TODO:
+ }
+ }
+
+ beforeScreenShare = null;
+ updateRenderOutpipe(); // this syncs the video
+
+ toggleSettings(true); // forceShow
+ updateMixer();
+ }
+}
+var ipcRenderer = false;
+var ElectronDesktopCapture = false;
+if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) { // this enables Screen Capture in Electron
+ try {
+ if (!ipcRenderer){
+ ipcRenderer = require('electron').ipcRenderer;
+ }
+ window.navigator.mediaDevices.getDisplayMedia = (constraints=false) => {
+ return new Promise(async (resolve, reject) => {
+ try {
+
+ if (session.autostart){
+ session.autostart = false;
+ if (parseInt(session.screenshare)+"" === session.screenshare){
+ var sscid = parseInt(session.screenshare)-1;
+ if (sscid<0){sscid=0;}
+ //ipcRenderer.sendSync('prompt', {title, val});
+ const sources = await ipcRenderer.sendSync('getSources',{types: ['screen']});
+
+ var new_constraints = {
+ audio:{
+ mandatory: {
+ chromeMediaSource: 'desktop',
+ chromeMediaSourceId: sources[sscid].id
+ }
+ },
+ video: {
+ mandatory: {
+ chromeMediaSource: 'desktop',
+ chromeMediaSourceId: sources[sscid].id
+ }
+ }
+ };
+ if (session.audioDevice===0){
+ new_constraints.audio = false;
+ }
+ try {
+ if (constraints.video.width.ideal){
+ new_constraints.video.mandatory.maxWidth = constraints.video.width.ideal;
+ }
+ } catch(e){}
+ try {
+ if (constraints.video.height.ideal){
+ new_constraints.video.mandatory.maxHeight = constraints.video.height.ideal;
+ }
+ } catch(e){}
+ try {
+ if (constraints.video.frameRate.ideal){
+ new_constraints.video.mandatory.maxFrameRate = constraints.video.frameRate.ideal;
+ }
+ } catch(e){}
+ ///
+ const stream = await window.navigator.mediaDevices.getUserMedia(new_constraints);
+ resolve(stream);
+ } else if (session.screenshare!==true){
+ var sscid=null;
+ const sources = await ipcRenderer.sendSync('getSources',{types: ['window']});
+ for (var i=0; i
+
This invite link and OBS ingestion link are reusable.
\
+
Only one person may use a specific invite at a time.
\
+
The stream ID can be changed manually to something else; keep it unique and alphanumeric.
\
+
Nothing is stored server-side; links do not expire, nor is there anything to delete.
\
+
\
+ ';
+
+ var qrcode = new QRCode(getById("qrcode"), {
+ width: 300
+ , height: 300
+ , colorDark: "#000000"
+ , colorLight: "#FFFFFF"
+ , useSVG: false
+ });
+ qrcode.makeCode(sendstr);
+ getById("qrcode").title = "";
+ setTimeout(function() {
+ getById("qrcode").title = "";
+ if (getById("qrcode").getElementsByTagName('img').length) {
+ getById("qrcode").getElementsByTagName('img')[0].style.cursor = "none";
+ }
+ }, 100); // i really hate the title overlay that the qrcode function makes
+
+ } catch (e) {
+ errorlog(e);
+ }
+}
+
+
+function initSceneList(UUID){
+ Object.keys(session.sceneList).forEach((scene, index) => {
+ if (getById("container_" + UUID).querySelectorAll('[data-scene="'+scene+'"]').length){return;} // already exists.
+ var newScene = document.createElement("div");
+ newScene.innerHTML = '';
+ newScene.classList.add("customScene");
+
+ var added = false;
+ getById("container_" + UUID).querySelectorAll('.customScene>[data-scene]').forEach(ele=>{
+ log(ele);
+ if (!added && ele.dataset.scene>scene+""){
+ ele.parentNode.parentNode.insertBefore(newScene, ele.parentNode);
+ added = true;
+ }
+ });
+ if (!added){
+ getById("container_" + UUID).appendChild(newScene);
+ }
+ });
+}
+
+function updateSceneList(scene){
+ if (!session.director){return;}
+ if (scene in session.sceneList){return;}
+ if ((parseInt(scene)+"")===scene){
+ if ((parseInt(scene)>=0) && (parseInt(scene)<=8)){
+ return;
+ }
+ }
+ session.sceneList[scene] = true;
+ for (var UUID in session.rpcs){
+ var newScene = document.createElement("div");
+ newScene.innerHTML = '';
+ newScene.classList.add("customScene");
+ var added = false;
+ getById("container_" + UUID).querySelectorAll('.customScene>[data-scene]').forEach(ele=>{
+ log(ele);
+ if (!added && ele.dataset.scene>scene+""){
+ ele.parentNode.parentNode.insertBefore(newScene, ele.parentNode);
+ added = true;
+ }
+ });
+ if (!added){
+ getById("container_" + UUID).appendChild(newScene);
+ }
+ }
+
+
+ if (session.showDirector){
+ if (document.getElementById("container_director")){
+ var newScene = document.createElement("div");
+ newScene.innerHTML = '';
+ newScene.classList.add("customScene");
+ //getById("container_director").appendChild(newScene);
+
+ var added = false;
+ getById("container_director").querySelectorAll('.customScene>[data-scene]').forEach(ele=>{
+ if (!added && ele.dataset.scene>scene+""){
+ ele.parentNode.parentNode.insertBefore(newScene, ele.parentNode);
+ added = true;
+ }
+ });
+ if (!added){
+ getById("container_director").appendChild(newScene);
+ }
+ }
+ }
+}
+
+var vis = (function() {
+ var stateKey, eventKey, keys = {
+ hidden: "visibilitychange"
+ , webkitHidden: "webkitvisibilitychange"
+ , mozHidden: "mozvisibilitychange"
+ , msHidden: "msvisibilitychange"
+ };
+ for (stateKey in keys) {
+ if (stateKey in document) {
+ eventKey = keys[stateKey];
+ break;
+ }
+ }
+ return function(c) {
+ if (c) {
+ document.addEventListener(eventKey, c);
+ //document.addEventListener("blur", c);
+ //document.addEventListener("focus", c);
+ }
+ return !document[stateKey];
+ };
+})();
+
+function unPauseVideo(videoEle, update=true){
+ try {
+ if (!videoEle){return;}
+ else if (!(videoEle.dataset.UUID in session.rpcs)){return;}
+ else if (!("prePausedBandwidth" in session.rpcs[videoEle.dataset.UUID])){return;} // not paused; useless to have, but might as well
+ session.rpcs[videoEle.dataset.UUID].manualBandwidth = false;
+ //session.rpcs[videoEle.dataset.UUID].manualAudioBandwidth = false;
+
+ if (session.rpcs[videoEle.dataset.UUID].videoElement){
+ session.rpcs[videoEle.dataset.UUID].videoElement.play();
+ }
+
+ delete(session.rpcs[videoEle.dataset.UUID].prePausedBandwidth);
+ session.requestRateLimit(false, videoEle.dataset.UUID, false); // passing a bitrate of false forces the saved existing bitrate to be requested.
+ videoEle.classList.remove("paused");
+ videoEle.classList.remove("partialFadeout");
+ if (update){
+ updateMixer();
+ }
+ }catch(e){errorlog(e);}
+}
+
+function pauseVideo(videoEle, update=true){
+ if (!videoEle){return;}
+ else if (!(videoEle.dataset.UUID in session.rpcs)){return;}
+ session.rpcs[videoEle.dataset.UUID].prePausedBandwidth = session.rpcs[videoEle.dataset.UUID].manualBandwidth; // useless, but whatever
+ session.rpcs[videoEle.dataset.UUID].manualBandwidth = 0;
+
+ if (session.rpcs[videoEle.dataset.UUID].videoElement){
+ session.rpcs[videoEle.dataset.UUID].videoElement.pause();
+ }
+ //session.rpcs[videoEle.dataset.UUID].manualAudioBandwidth = 0;
+ session.requestRateLimit(false, videoEle.dataset.UUID, true); // passing a bitrate of false forces the saved existing bitrate to be requested.
+ videoEle.classList.add("paused");
+ videoEle.classList.add("partialFadeout");
+ if (update){
+ updateMixer();
+ }
+}
+
+(function rightclickmenuthing() { // right click menu
+ "use strict";
+
+ function clickInsideElement(e, value="menu") {
+
+ var el = e.srcElement || e.target;
+ if (el.dataset && (value in el.dataset)) {
+ return el;
+ } else {
+ while (el = el.parentNode) {
+ if (el.dataset && (value in el.dataset)) {
+ return el;
+ }
+ }
+ }
+ return false;
+ }
+
+ function getPosition(event2) {
+ var posx = 0;
+ var posy = 0;
+
+ if (!event2){var event = window.event;}
+
+ if (event2.pageX || event2.pageY){
+ posx = event2.pageX;
+ posy = event2.pageY;
+ } else if (event2.clientX || event2.clientY) {
+ posx = event2.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+ posy = event2.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+ }
+
+ return {x: posx, y: posy};
+ }
+
+ var taskItemInContext;
+ var clickCoordsX;
+ var clickCoordsY;
+ var menu;
+ var menuState = 0;
+ var lastMenu= false;
+ var menuWidth;
+ var menuHeight;
+ var windowWidth;
+ var windowHeight;
+
+ function contextListener() {
+ document.addEventListener("contextmenu", function(e) {
+
+ if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1){
+ if (e && (!e.ctrlKey && !e.metaKey)){return;}
+ } else if (e && (e.ctrlKey || e.metaKey)){return;} // allow for development ease
+
+ taskItemInContext = clickInsideElement(e, "menu");
+ if (taskItemInContext) {
+ e.preventDefault();
+ e.stopPropagation();
+ if (taskItemInContext.dataset && taskItemInContext.dataset.menu){
+ toggleMenuOn(taskItemInContext.dataset.menu, taskItemInContext);
+ } else {
+ toggleMenuOn();
+ }
+ positionMenu(e);
+ return false;
+ } else {
+ taskItemInContext = null;
+ toggleMenuOff();
+ }
+ });
+ }
+
+ function menuClickListener(e) {
+ var clickeElIsLink = clickInsideElement(e, "action");
+ if (clickeElIsLink) {
+ e.preventDefault();
+ e.stopPropagation();
+ menuItemListener(clickeElIsLink);
+ return false;
+ } else {
+ var button = e.which || e.button;
+ if (button === 1) {
+ toggleMenuOff();
+ }
+ }
+ }
+
+ function toggleMenuOn(menutype=false, ele=false) {
+ if (lastMenu && (lastMenu !== menutype)){
+ try {
+ menuState = 0;
+ getById(lastMenu).classList.remove("context-menu--active");
+
+ document.removeEventListener("click", menuClickListener);
+ } catch(e){}
+ }
+ menu = getById(menutype || "context-menu");
+ menuItemSyncState(menu);
+ if (menuState !== 1) {
+ menuState = 1;
+ menu.classList.add("context-menu--active");
+ document.addEventListener("click", menuClickListener);
+ }
+
+ if (ele && ele.classOptions){
+ menu.classList.add(ele.classOptions);
+ }
+ lastMenu = menutype || "context-menu";
+
+ }
+
+ function toggleMenuOff() {
+ if (menuState !== 0) {
+ menuState = 0;
+ menu.classList.remove("context-menu--active");
+ document.removeEventListener("click", menuClickListener);
+ }
+ lastMenu = false;
+ }
+
+ function positionMenu(e) {
+ var clickCoords = getPosition(e);
+ clickCoordsX = clickCoords.x;
+ clickCoordsY = clickCoords.y;
+
+ menuWidth = menu.offsetWidth + 4;
+ menuHeight = menu.offsetHeight + 4;
+
+ windowWidth = window.innerWidth;
+ windowHeight = window.innerHeight;
+
+ if ((windowWidth - clickCoordsX) < menuWidth) {
+ menu.style.left = windowWidth - menuWidth + "px";
+ } else {
+ menu.style.left = clickCoordsX + "px";
+ }
+
+ if ((windowHeight - clickCoordsY) < menuHeight) {
+ menu.style.top = windowHeight - menuHeight + "px";
+ } else {
+ menu.style.top = clickCoordsY + "px";
+ }
+ }
+
+ async function menuItemListener(link) {
+ if (link.getAttribute("data-action") === "Open") {
+ window.open(taskItemInContext.href);
+ } else if (link.getAttribute("data-action") === "Copy") {
+ copyFunction(taskItemInContext.href);
+ } else if (link.getAttribute("data-action") === "Mirror") {
+ if ((taskItemInContext.id == "videosource") || (taskItemInContext.id == "previewWebcam")){
+ session.mirrored = !session.mirrored;
+ applyMirror(false, taskItemInContext);
+ log("session.mirrored");
+ } else {
+ if ("mirror" in taskItemInContext){
+ taskItemInContext.mirror = !taskItemInContext.mirror;
+ applyMirrorGuest(taskItemInContext.mirror, taskItemInContext);
+ } else {
+ taskItemInContext.mirror = true;
+ applyMirrorGuest(taskItemInContext.mirror, taskItemInContext);
+ }
+ }
+ } else if (link.getAttribute("data-action") === "FullWindow") {
+ if ((taskItemInContext.id == "videosource") || (taskItemInContext.id == "previewWebcam")){
+ session.infocus=true;
+ } else {
+ session.infocus = taskItemInContext.dataset.UUID;
+ }
+ updateMixer();
+ } else if (link.getAttribute("data-action") === "ShrinkWindow") {
+ session.infocus=false;
+ updateMixer();
+ } else if (link.getAttribute("data-action") === "Pause") {
+ pauseVideo(taskItemInContext);
+ } else if (link.getAttribute("data-action") === "UnPause") {
+ unPauseVideo(taskItemInContext);
+ } else if (link.getAttribute("data-action") === "PiP") {
+ togglePictureInPicture(taskItemInContext);
+ } else if (link.getAttribute("data-action") === "Record") {
+ if (taskItemInContext.stopWriter || taskItemInContext.recording){
+
+ } else if (taskItemInContext.startWriter){
+ taskItemInContext.startWriter();
+ } else {
+ recordLocalVideo(null, 4000, taskItemInContext)
+ }
+ } else if (link.getAttribute("data-action") === "StopRecording") {
+ if (taskItemInContext.stopWriter){
+ taskItemInContext.stopWriter();
+ } else if (taskItemInContext.recording){
+ recordLocalVideo("stop", null, taskItemInContext);
+ }
+ } else if (link.getAttribute("data-action") === "Cast") {
+ //copyFunction(taskItemInContext.href);
+ } else if (link.getAttribute("data-action") === "Controls") {
+ taskItemInContext.controls = true;
+ } else if (link.getAttribute("data-action") === "HideControls") {
+ taskItemInContext.controls = false;
+ } else if (link.getAttribute("data-action") === "Edit") {
+ //copyFunction(taskItemInContext.href);
+ var response = await promptAlt("Please note, manual edits to the URL may conflict with the toggles", false, false, taskItemInContext.href);
+ if (response){
+ taskItemInContext.href = response;
+ taskItemInContext.dataset.raw = response;
+ taskItemInContext.innerHTML = response;
+
+ }
+ } else if (link.getAttribute("data-action") === "QRCode") {
+ warnUser("Loading QR Code");
+ loadQR(function tt(url){
+ getById("alertModalMessage").innerHTML = "";
+ var qrcode = new QRCode(getById("alertModalMessage"), {
+ width: 300
+ , height: 300
+ , colorDark: "#000000"
+ , colorLight: "#FFFFFF"
+ , useSVG: false
+ });
+ qrcode.makeCode(url);
+ getById("alertModalMessage").title = "";
+ setTimeout(function() {
+ getById("alertModalMessage").title = "";
+ if (getById("alertModalMessage").getElementsByTagName('img').length) {
+ getById("alertModalMessage").getElementsByTagName('img')[0].style.cursor = "none";
+ }
+ }, 100);
+ }, taskItemInContext.href);
+ } else if (link.getAttribute("data-action") === "ShowStats"){
+ if ((taskItemInContext.id == "videosource") || (taskItemInContext.id == "previewWebcam")){
+ var [menu, innerMenu] = statsMenuCreator();
+ menu.interval = setInterval(printMyStats,session.statsInterval, innerMenu);
+ printMyStats(innerMenu);
+ } else if (taskItemInContext.dataset.UUID && (taskItemInContext.dataset.UUID in session.rpcs)){
+ var [menu, innerMenu] = statsMenuCreator();
+ printViewStats(innerMenu, taskItemInContext.dataset.UUID );
+ menu.interval = setInterval(printViewStats, session.statsInterval, innerMenu, taskItemInContext.dataset.UUID);
+ }
+ } else if (link.getAttribute("data-action") === "OutputAudio"){
+ enumerateDevices().then(function(deviceInfo){
+ var ele = getById(taskItemInContext.id);
+
+ var deviceListElement = gotDevices3(deviceInfo, ele);
+ if (deviceListElement){
+ warnUser("Select the audio playback destination for this media:\n\n");
+ getById("alertModalMessage").appendChild(deviceListElement);
+ } else {
+ warnUser("No output devices available");
+ }
+ });
+
+ //
+ } else if (link.getAttribute("data-action") === "RemoteHangup") {
+ if (session.rpcs[taskItemInContext.dataset.UUID] && session.rpcs[taskItemInContext.dataset.UUID].stats.info && ("remote" in session.rpcs[taskItemInContext.dataset.UUID].stats.info) && session.rpcs[taskItemInContext.dataset.UUID].stats.info.remote){
+ var confirmHangup = confirm(miscTranslations["confirm-disconnect-user"]);
+ if (confirmHangup) {
+ var msg = {};
+ msg.hangup = true;
+ msg.remote = session.remote;
+ msg = await session.encodeRemote(msg);
+ session.sendRequest(msg, taskItemInContext.dataset.UUID);
+ pokeIframeAPI("hungup", "remote", taskItemInContext.dataset.UUID);
+ }
+ }
+ } else if (link.getAttribute("data-action") === "RemoteReload") {
+ if (session.rpcs[taskItemInContext.dataset.UUID] && session.rpcs[taskItemInContext.dataset.UUID].stats.info && ("remote" in session.rpcs[taskItemInContext.dataset.UUID].stats.info) && session.rpcs[taskItemInContext.dataset.UUID].stats.info.remote){
+ var confirmReload = confirm(miscTranslations["confirm-reload-user"]);
+ if (confirmReload) {
+ var msg = {};
+ msg.reload = true;
+ msg.remote = session.remote;
+ msg = await session.encodeRemote(msg);
+ session.sendRequest(msg, taskItemInContext.dataset.UUID);
+ pokeIframeAPI("reload", "remote", taskItemInContext.dataset.UUID);
+ }
+ }
+ } else if (link.getAttribute("data-action") === "SSNewTab") {
+ var URL = "https://"+window.location.hostname+location.pathname+createScreenShareURL(false);
+ log(URL);
+ window.open(URL, '_blank').focus();
+ } else if (link.getAttribute("data-action") === "pip-clock") {
+ popOutClock(taskItemInContext.children[0]);
+ }
+
+ log("Task ID - " + taskItemInContext + ", Task action - " + link.getAttribute("data-action"));
+ toggleMenuOff();
+ }
+
+ function menuItemSyncState(menu) {
+ var items = menu.querySelectorAll("[data-action]");
+ for (var i=0;i -1){
+ items[i].parentNode.classList.add("hidden");
+ } else {
+ items[i].parentNode.classList.remove("hidden");
+ }
+ }
+ }
+ }
+ contextListener();
+
+})();
+
+
+function gotDevices3(deviceInfos, vid){
+ var audioEle = document.createElement("select");
+ log(deviceInfos);
+ if (!deviceInfos.length) {
+ return false;
+ }
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ if (deviceInfos[i].kind === 'audiooutput') {
+ var opt = document.createElement("option");
+ opt.innerText = deviceInfos[i].label;
+ opt.value = deviceInfos[i].deviceId;
+ audioEle.appendChild(opt);
+ audioEle.videoTarget = vid;
+ if (vid.sinkId){
+ if (vid.sinkId == deviceInfos[i].deviceId){
+ opt.selected = true;
+ }
+ } else if (vid.manualSink){
+ if (vid.manualSink == deviceInfos[i].deviceId){
+ opt.selected = true;
+ }
+ } else if (session.sink){
+ if (session.sink == deviceInfos[i].deviceId){
+ opt.selected = true;
+ }
+ }
+ }
+ }
+ audioEle.onchange = function(){
+ vid.manualSink = this.options[this.selectedIndex].value;
+ if (this.videoTarget && this.videoTarget.dataset.UUID){
+ session.audioEffects = true;
+ updateIncomingAudioElement(this.videoTarget.dataset.UUID);
+ }
+ resetupAudioOut(this.videoTarget);
+ }
+ return audioEle;
+}
+
+function popupMessage(e, message = "Copied to Clipboard") { // right click menu
+
+ var posx = 0;
+ var posy = 0;
+
+ if (!e) var e = window.event;
+
+ if (e.pageX || e.pageY) {
+ posx = e.pageX;
+ posy = e.pageY;
+ } else if (e.clientX || e.clientY) {
+ posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+ posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+ }
+
+ posx += 10;
+
+
+ var menu = getById("messagePopup");
+ menu.innerHTML = "
" + message + "
";
+ var menuState = 0;
+ var menuWidth;
+ var menuHeight;
+ var menuPosition;
+ var menuPositionX;
+ var menuPositionY;
+
+ var windowWidth;
+ var windowHeight;
+
+ if (menuState !== 1) {
+ menuState = 1;
+ menu.classList.add("context-menu--active");
+ }
+
+ menuWidth = menu.offsetWidth + 4;
+ menuHeight = menu.offsetHeight + 4;
+
+ windowWidth = window.innerWidth;
+ windowHeight = window.innerHeight;
+
+ if ((windowWidth - posx) < menuWidth) {
+ menu.style.left = windowWidth - menuWidth + "px";
+ } else {
+ menu.style.left = posx + "px";
+ }
+
+ if ((windowHeight - posy) < menuHeight) {
+ menu.style.top = windowHeight - menuHeight + "px";
+ } else {
+ menu.style.top = posy + "px";
+ }
+
+
+ function toggleMenuOff() {
+ if (menuState !== 0) {
+ menuState = 0;
+ menu.classList.remove("context-menu--active");
+ }
+ }
+ menu.classList.remove("fadeout");
+
+ setTimeout(function() {
+ menu.classList.add("fadeout");
+ }, 500);
+
+ setTimeout(function() {
+ toggleMenuOff();
+ }, 1500);
+}
+
+function timeSince(date) {
+
+ var seconds = Math.floor((new Date() - date) / 1000);
+
+ var interval = seconds / 31536000;
+
+ if (interval > 1) {
+ return Math.floor(interval) + " years";
+ }
+ interval = seconds / 2592000;
+ if (interval > 1) {
+ return Math.floor(interval) + " months";
+ }
+ interval = seconds / 86400;
+ if (interval > 1) {
+ return Math.floor(interval) + " days";
+ }
+ interval = seconds / 3600;
+ if (interval > 1) {
+ return Math.floor(interval) + " hours";
+ }
+ interval = seconds / 60;
+ if (interval > 1) {
+ return Math.floor(interval) + " minutes";
+ }
+ return "Seconds ago";
+}
+
+var messageList = []
+function sendChatMessage(chatMsg = false, bc = false) { // filtered + visual
+ var data = {};
+ if (chatMsg === false) {
+ var msg = document.getElementById('chatInput').value;
+ } else {
+ var msg = chatMsg;
+ }
+ //msg = sanitizeChat(msg);
+ if (msg == "") {
+ return false;
+ }
+
+ msg = convertShortcodes(msg);
+
+ var label = "";
+ if (session.label){
+ if (session.director){
+ label = "" + session.label + ": ";
+ } else {
+ label = "" + session.label + ": ";
+ }
+ } else if (session.director){
+ label = "Director: ";
+ }
+
+ if (msg.trim()==="/list"){
+ var listMsg = null;
+ for (var UUID in session.rpcs){
+ if (session.rpcs[UUID].label){
+ listMsg = UUID+": "+session.rpcs[UUID].label
+ } else if (session.directorList.indexOf(UUID)>=0){
+ listMsg = UUID+": Director";
+ } else {
+ listMsg = UUID+": Unknown User";
+ }
+ var data = {};
+ data.msg = listMsg;
+ data.label = false;
+ data.type = "alert";
+ data.time = Date.now();
+ messageList.push(data);
+ }
+ for (var UUID in session.pcs){
+ if (UUID in session.rpcs){continue;}
+ if (session.pcs[UUID].label){
+ listMsg = UUID+"; "+session.pcs[UUID].label
+ } else if (session.directorList.indexOf(UUID)>=0){
+ listMsg = UUID+"; Director";
+ } else {
+ listMsg = UUID+"; Unknown User";
+ }
+ var data = {};
+ data.msg = listMsg;
+ data.label = false;
+ data.type = "alert";
+ data.time = Date.now();
+ messageList.push(data);
+ }
+ if (listMsg===null){
+ data.msg = "No other users are connected to you";
+ data.label = false;
+ data.type = "alert";
+ data.time = Date.now();
+ messageList.push(data);
+ }
+ } else if (msg.startsWith("\/msg ")){
+ var msg = msg.split("\/msg ")[1];
+ msg = msg.split(" ");
+ uid = msg.shift().toLowerCase();
+ msg = msg.join(" ");
+ if (msg == ""){return false;}
+ var sent = false;
+ for (var UUID in session.rpcs){
+ if (UUID.startsWith(uid)){
+ sendChat(msg, UUID); // send message to peers
+ var data = {};
+ data.time = Date.now();
+ data.msg = sanitizeChat(msg); // this is what the other person should see
+ data.label = label;
+ data.type = "sent";
+ messageList.push(data);
+ sent=true;
+ } else if (session.rpcs[UUID].label && session.rpcs[UUID].label.toLowerCase().startsWith(uid)){
+ sendChat(msg, UUID); // send message to peers
+ var data = {};
+ data.time = Date.now();
+ data.msg = sanitizeChat(msg); // this is what the other person should see
+ data.label = label;
+ data.type = "sent";
+ messageList.push(data);
+ sent=true;
+ } else if ((session.directorList.indexOf(UUID)>=0) && "director".startsWith(uid)){
+ sendChat(msg, UUID); // send message to peers
+ var data = {};
+ data.time = Date.now();
+ data.msg = sanitizeChat(msg); // this is what the other person should see
+ data.label = label;
+ data.type = "sent";
+ messageList.push(data);
+ sent=true;
+ }
+ }
+ for (var UUID in session.pcs){
+ if (UUID in session.rpcs){continue;}
+ if (UUID.startsWith(uid)){
+ sendChat(msg, UUID); // send message to peers
+ var data = {};
+ data.time = Date.now();
+ data.msg = sanitizeChat(msg); // this is what the other person should see
+ data.label = label;
+ data.type = "sent";
+ messageList.push(data);
+ sent=true;
+ } else if (session.pcs[UUID].label && session.pcs[UUID].label.toLowerCase().startsWith(uid)){
+ sendChat(msg, UUID); // send message to peers
+ var data = {};
+ data.time = Date.now();
+ data.msg = sanitizeChat(msg); // this is what the other person should see
+ data.label = label;
+ data.type = "sent";
+ messageList.push(data);
+ sent=true;
+ } else if ((session.directorList.indexOf(UUID)>=0) && "director".startsWith(uid)){
+ sendChat(msg, UUID); // send message to peers
+ var data = {};
+ data.time = Date.now();
+ data.msg = sanitizeChat(msg); // this is what the other person should see
+ data.label = label;
+ data.type = "sent";
+ messageList.push(data);
+ sent=true;
+ }
+ }
+ if (sent == false){
+ var data = {};
+ data.msg = "No user found. Message not sent.";
+ data.label = false;
+ data.type = "alert";
+ data.time = Date.now();
+ messageList.push(data);
+ updateMessages();
+ return false;
+ }
+ } else if (msg.startsWith("\/")){
+ data.msg = "Unknown command. Try '/list' or '/msg username message'.";
+ data.label = false;
+ data.type = "alert";
+ data.time = Date.now();
+ messageList.push(data);
+ updateMessages();
+ return false;
+ } else if (session.directorChat===true){
+ if (session.directorList.length){
+ for (var i = 0;i/g, ">").replace(/["']/g, ""); // try to sanitize things, just in case.
+
+ var punc = "";
+ while (url[url.length-1] === "."){
+ url = url.slice(0,-1);
+ punc += ".";
+ }
+ while (url[url.length-1] === ";"){
+ url = url.slice(0,-1);
+ punc += ";";
+ }
+ while (url[url.length-1] === ","){
+ url = url.slice(0,-1);
+ punc += ",";
+ }
+ while (url[url.length-1] === "!"){
+ url = url.slice(0,-1);
+ punc += "!";
+ }
+ while (url[url.length-1] === ":"){
+ url = url.slice(0,-1);
+ punc += ":";
+ }
+ while (url[url.length-1] === "*"){
+ url = url.slice(0,-1);
+ punc += "*";
+ }
+ while (url[url.length-1] === ")"){
+ url = url.slice(0,-1);
+ punc += ")";
+ }
+ while (url[url.length-1] === "?"){
+ url = url.slice(0,-1);
+ punc += "?";
+ }
+
+ var hyperlink = url;
+ if (!hyperlink.match('^https?:\/\/')) {
+ hyperlink = 'http://' + hyperlink;
+ }
+ if (url.length>35){
+ url = url.substring(0, 35)+"...";
+ }
+ return '' + url + ''+punc;
+ });
+}
+
+function getChatMessage(msg, label = false, director = false, overlay = false) {
+
+ msg = sanitizeChat(msg); // keep it clean.
+ if (msg == "") {
+ return;
+ }
+
+ if (label) {
+ label = sanitizeLabel(label);
+ }
+
+ data = {};
+ data.time = Date.now();
+ data.msg = msg;
+ if (label) {
+ data.label = label;
+ if (director) {
+ data.label = "" + data.label + ": ";
+ } else {
+ data.label = "" + data.label + ": ";
+ }
+ label = ""+label+":"; // label+":";
+ } else if (director) {
+ data.label = "Director: ";
+ label = "Director:";
+ } else {
+ if (session.director){
+ data.label = "Someone: ";
+ } else {
+ data.label = "";
+ }
+ label = "";
+ }
+ data.type = "recv";
+
+ if (overlay) {
+ if (!(session.cleanOutput && session.cleanish==false)){
+ var textOverlay = getById("overlayMsgs");
+ if (textOverlay) {
+ var spanOverlay = document.createElement("span");
+ spanOverlay.innerHTML = "" + label + " " + msg + " ";
+ textOverlay.appendChild(spanOverlay);
+ textOverlay.style.display = "block";
+ var showtime = msg.length * 200 + 3000;
+ if (showtime > 8000) {
+ showtime = 8000;
+ }
+ setTimeout(function(ele) {
+ ele.parentNode.removeChild(ele);
+ }, showtime, spanOverlay);
+ }
+ }
+ }
+
+ if (isIFrame) {
+ parent.postMessage({
+ "gotChat": data
+ }, session.iframetarget);
+ }
+
+ if (session.chatbutton===false){return;} // messages can still appear as overlays ^
+
+ messageList.push(data);
+ messageList = messageList.slice(-100);
+
+ if (session.beepToNotify) {
+ playtone();
+ showNotification("new message", msg);
+ }
+ updateMessages();
+
+ if (session.chat == false) {
+ getById("chattoggle").className = "las la-comments my-float toggleSize puslate";
+ getById("chatbutton").className = "float";
+
+ if (getById("chatNotification").value) {
+ getById("chatNotification").value = getById("chatNotification").value + 1;
+ } else {
+ getById("chatNotification").value = 1;
+ }
+ getById("chatNotification").classList.add("notification");
+ }
+
+
+ if (session.broadcastChannel !== false) {
+ session.broadcastChannel.postMessage(data); /* send */
+ }
+
+}
+
+function updateClosedCaptions(msg, label, UUID) {
+ msg.counter = parseInt(msg.counter);
+ var temp = document.createElement('div');
+ temp.innerText = msg.transcript;
+ temp.innerText = temp.innerHTML;
+ var transcript = temp.textContent || temp.innerText || "";
+
+ if (transcript == "") {
+ return;
+ }
+
+ transcript = transcript.charAt(0).toUpperCase() + transcript.slice(1);
+ //transcript = transcript.substr(-1, 5000); // keep it from being too long
+
+
+ if (label && (!(session.view && !session.view_set))) {
+ label = sanitizeLabel(label);
+ label = "" + label + ": ";
+ } else {
+ label = "";
+ }
+
+ var textOverlay = getById("overlayMsgs");
+ if (textOverlay) {
+ if (document.getElementById(UUID + "_" + msg.counter)) {
+ var spanOverlay = document.getElementById(UUID + "_" + msg.counter);
+ } else {
+ var spanOverlay = document.createElement("span");
+ spanOverlay.id = UUID + "_" + msg.counter;
+ textOverlay.appendChild(spanOverlay);
+ textOverlay.style.height = "unset";
+ textOverlay.style.textAlign = "left";
+ textOverlay.style.display = "block";
+ textOverlay.style.position = "fixed";
+ textOverlay.style.bottom = "0";
+
+ }
+ spanOverlay.innerHTML = label + transcript + " ";
+ spanOverlay.style.fontSize = (parseInt(session.labelsize || 100) / 100.0 * 4.5) + "vh";
+ spanOverlay.style.lineHeight = (parseInt(session.labelsize || 100) / 100 * 6) + "vh";
+ spanOverlay.style.margin = (parseInt(session.labelsize || 100) / 100.0 * 0.75) + "vh";
+
+ if (msg.isFinal) {
+ var showtime = 3000;
+ clearTimeout(spanOverlay.timeout);
+ spanOverlay.timeout = setTimeout(function(ele) {
+ ele.parentNode.removeChild(ele);
+ }, showtime, spanOverlay);
+ } else {
+ clearTimeout(spanOverlay.timeout);
+ spanOverlay.timeout = setTimeout(function(ele) {
+ ele.parentNode.removeChild(ele);
+ }, 30000, spanOverlay);
+ }
+
+ }
+}
+
+var chatUpdateTimeout = null;
+function updateMessages(){
+ if (session.chatbutton===false){return;}
+ document.getElementById("chatBody").innerHTML = "";
+ for (var i in messageList) {
+
+ var time = timeSince(messageList[i].time) || "";
+ time = " - "+time+"";
+ var msg = document.createElement("div");
+ var message = replaceURLs(messageList[i].msg);
+
+ if (messageList[i].type == "sent") {
+ msg.innerHTML = message + "" + time + "";
+ msg.classList.add("outMessage");
+ } else if ((messageList[i].type == "recv") || (messageList[i].type == "action")) {
+ var label = "";
+ if (messageList[i].label) {
+ label = messageList[i].label;
+ }
+ msg.innerHTML = label + message + "" + time + "";
+ msg.classList.add("inMessage");
+ } else if (messageList[i].type == "alert") {
+ msg.innerHTML = message + "" + time + "";
+ msg.classList.add("inMessage");
+ } else {
+ msg.innerHTML = message;
+ msg.classList.add("outMessage");
+ }
+
+ document.getElementById("chatBody").appendChild(msg);
+ }
+ showDownloadLinks();
+ for (var i in msgTransferList) {
+ var time = timeSince(msgTransferList[i].time) || "";
+ time = " - "+time+"";
+
+ var msg = document.createElement("div");
+ if ("idx" in msgTransferList[i]){
+ msg.id = "transfer_"+msgTransferList[i].idx;
+ }
+ if (msgTransferList[i].type == "sent") {
+ msg.innerHTML = msgTransferList[i].msg + "" + time + "";
+ msg.classList.add("outMessage");
+ } else if ((msgTransferList[i].type == "recv") || (msgTransferList[i].type == "action")) {
+ var label = "";
+ if (msgTransferList[i].label) {
+ label = msgTransferList[i].label;
+ }
+ msg.innerHTML = label + msgTransferList[i].msg + "" + time + "";
+ msg.classList.add("inMessage");
+ } else if (msgTransferList[i].type == "alert") {
+ msg.innerHTML = msgTransferList[i].msg + "" + time + "";
+ msg.classList.add("inMessage");
+ } else {
+ msg.innerHTML = msgTransferList[i].msg;
+ msg.classList.add("outMessage");
+ }
+ document.getElementById("chatBody").appendChild(msg);
+ }
+ if (chatUpdateTimeout) {
+ clearInterval(chatUpdateTimeout);
+ }
+ document.getElementById("chatBody").scrollTop = document.getElementById("chatBody").scrollHeight;
+ chatUpdateTimeout = setTimeout(function() {
+ updateMessages();
+ }, 60000);
+}
+
+function EnterButtonChat(event) {
+ // Number 13 is the "Enter" key on the keyboard
+ var key = event.which || event.keyCode;
+ if (key === 13) {
+ // Cancel the default action, if needed
+ event.preventDefault();
+ // Trigger the button element with a click
+ sendChatMessage();
+ }
+}
+
+function showCustomizer(arg, ele) {
+ //getById("directorLinksButton").innerHTML=' LINKS (GUEST INVITES & SCENES)'
+ getById("showCustomizerButton1").style.backgroundColor = "";
+ getById("showCustomizerButton2").style.backgroundColor = "";
+ getById("showCustomizerButton3").style.backgroundColor = "";
+ getById("showCustomizerButton4").style.backgroundColor = "";
+ getById("showCustomizerButton1").style.boxShadow = "";
+ getById("showCustomizerButton2").style.boxShadow = "";
+ getById("showCustomizerButton3").style.boxShadow = "";
+ getById("showCustomizerButton4").style.boxShadow = "";
+
+
+ if (getById("customizeLinks" + arg).style.display != "none") {
+ getById("customizeLinks").style.display = "none";
+ getById("customizeLinks" + arg).style.display = "none";
+ } else {
+ //directorLinks").style.display="none";
+ getById("showCustomizerButton" + arg).style.backgroundColor = "#1e0000";
+ getById("showCustomizerButton" + arg).style.boxShadow = "inset 0px 0px 1px #b90000";
+ getById("customizeLinks1").style.display = "none";
+ getById("customizeLinks3").style.display = "none";
+ getById("customizeLinks").style.display = "block";
+ getById("customizeLinks" + arg).style.display = "block";
+ }
+}
+
+var PPTHotkey = getStorage("PPTHotkey") || false;
+if (PPTHotkey){
+ var key = "";
+ if (PPTHotkey.ctrl){
+ key += "Control";
+ }
+ if (PPTHotkey.meta){
+ if (key){
+ key += " + ";
+ }
+ key += "Meta";
+ }
+ if (PPTHotkey.alt){
+ if (key){
+ key += " + ";
+ }
+ key += "Alt";
+ }
+
+ if (PPTHotkey.key=="Control"){
+ //
+ } else if (PPTHotkey.key=="Alt"){
+ //
+ } else if (PPTHotkey.key=="Meta"){
+ //
+ } else if (PPTHotkey.key !== false){
+ if (key){
+ key += " + ";
+ }
+ if (PPTHotkey.key === " "){
+ key += "Space"
+ } else {
+ key += PPTHotkey.key;
+ }
+ } else if (key && (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1)){
+ getById("pptHotKey").title = "Note: Global hot-keys can't simply be Control, Alt, or Meta keys.";
+ }
+ getById("pptHotKey").value = key;
+
+ try {
+ if (window.electronApi && window.electronApi.updatePPT){
+ window.electronApi.updatePPT(PPTHotkey);
+ } else if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) {
+ if (!ipcRenderer){
+ ipcRenderer = require('electron').ipcRenderer;
+ }
+ if (ipcRenderer){
+ ipcRenderer.send('PPTHotkey', PPTHotkey);
+ }
+ }
+ } catch(e){errorlog(e);}
+}
+
+function setHotKey(keyinput=true){
+ if (!keyinput){ // clears if false
+ getById("pptHotKey").value = "";
+ PPTHotkey = false;
+ removeStorage("PPTHotkey");
+
+ try {
+ if (window.electronApi && window.electronApi.updatePPT){
+ window.electronApi.updatePPT(PPTHotkey);
+ } else if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) {
+ if (!ipcRenderer){
+ ipcRenderer = require('electron').ipcRenderer;
+ }
+ if (ipcRenderer){
+ ipcRenderer.send('PPTHotkey', PPTHotkey);
+ }
+ }
+ } catch(e){errorlog(e);}
+
+ return;
+ }
+
+ PPTHotkey = {
+ ctrl:false,
+ alt: false,
+ meta: false,
+ key: false
+ };
+
+ log(event);
+ var key = "";
+ if (event.ctrlKey){
+ key += "Control";
+ PPTHotkey.ctrl = true;
+ }
+ if (event.metaKey){
+ if (key){
+ key += " + ";
+ }
+ key += "Meta";
+ PPTHotkey.meta = true;
+ }
+ if (event.altKey){
+ if (key){
+ key += " + ";
+ }
+ key += "Alt";
+ PPTHotkey.alt = true;
+ }
+
+ if (event.key=="Control"){
+ //
+ } else if (event.key=="Alt"){
+ //
+ } else if (event.key=="Meta"){
+ //
+ } else if (event.key || (event.key === " " || (event.key===0))){
+ if (key){
+ key += " + ";
+ }
+ if (event.key === " "){
+ key += "Space"
+ } else {
+ key += event.key;
+ }
+ PPTHotkey.key = event.key;
+ }
+ setStorage("PPTHotkey", PPTHotkey, 99999);
+ event.target.value = key;
+
+ try {
+ if (window.electronApi && window.electronApi.updatePPT){
+ window.electronApi.updatePPT(PPTHotkey);
+ } else if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) {
+ if (!ipcRenderer){
+ ipcRenderer = require('electron').ipcRenderer;
+ }
+ if (ipcRenderer){
+ ipcRenderer.send('PPTHotkey', PPTHotkey);
+ }
+ }
+ } catch(e){errorlog(e);}
+
+ event.preventDefault();
+ event.stopPropagation();
+ return false;
+}
+
+var recordingBitratePromise = false;
+var defaultRecordingBitrate = false;
+async function recordVideo(target, event = null, videoKbps = false) { // event.currentTarget,this.parentNode.parentNode.dataset.UUID
+
+ var UUID = target.dataset.UUID;
+
+ if (!UUID){return;}
+
+ var video = session.rpcs[UUID].videoElement;
+
+ if (!video){return;}
+
+ if (video.stopWriter){
+ video.stopWriter();
+ updateLocalRecordButton(UUID, -1);
+ return;
+ } else if (video.startWriter){
+ await video.startWriter();
+ updateLocalRecordButton(UUID, 0);
+ return;
+ }
+
+
+ var audioKbps = false;
+
+ if (event === null) {
+ if (defaultRecordingBitrate === null) {
+ updateLocalRecordButton(UUID, -1);
+ return;
+ }
+ } else if ((event.ctrlKey) || (event.metaKey)) {
+ updateLocalRecordButton(UUID, -3);
+ Callbacks.push([recordVideo, target, null, false]);
+ log("Record Video queued");
+ defaultRecordingBitrate = false;
+ recordingBitratePromise = false;
+ return;
+ } else {
+ defaultRecordingBitrate = false;
+ recordingBitratePromise = false;
+ }
+
+ log("Record Video Clicked");
+ if ("recording" in video) {
+ log("ALREADY RECORDING!");
+ updateLocalRecordButton(UUID, -2);
+ video.recorder.stop();
+ session.requestRateLimit(35, UUID); // 100kbps
+ if (session.audiobitrate===false){
+ session.requestAudioRateLimit(-1,UUID);
+ }
+
+ var elements = document.querySelectorAll('[data-action-type="change-quality2"][data--u-u-i-d="' + UUID + '"]');
+ if (elements[0]) {
+ elements[0].classList.add("pressed");
+ }
+ var elements = document.querySelectorAll('[data-action-type="change-quality1"][data--u-u-i-d="' + UUID + '"]');
+ if (elements[0]) {
+ elements[0].classList.remove("pressed");
+ }
+ var elements = document.querySelectorAll('[data-action-type="change-quality3"][data--u-u-i-d="' + UUID + '"]');
+ if (elements[0]) {
+ elements[0].classList.remove("pressed");
+ }
+ return;
+ } else {
+ updateLocalRecordButton(UUID, 0);
+ //target.style.backgroundColor = "#FCC";
+ //target.innerHTML = " Download";
+ video.recording = true;
+ }
+
+ video.recorder = {};
+
+ if (videoKbps == false) {
+ if (defaultRecordingBitrate == false) {
+ videoKbps = 4000; // 4mbps recording bitrate
+
+ if (!recordingBitratePromise){
+ window.focus();
+ recordingBitratePromise = promptAlt(miscTranslations["press-ok-to-record"], false, false, videoKbps);
+ }
+ videoKbps = await recordingBitratePromise;
+ log("videoKbps: "+videoKbps+", UUID:"+UUID);
+ if (videoKbps === null) {
+ //target.style.backgroundColor = null;
+ //target.innerHTML = ' record local';
+ updateLocalRecordButton(UUID, -1);
+ target.style.backgroundColor = "";
+ delete(video.recorder);
+ delete(video.recording);
+ defaultRecordingBitrate = null;
+ return;
+ }
+ videoKbps = parseInt(videoKbps);
+ defaultRecordingBitrate = videoKbps;
+ } else {
+ videoKbps = defaultRecordingBitrate;
+ }
+ }
+
+ if (videoKbps <= 0) {
+ audioKbps = videoKbps * (-1);
+ videoKbps = false;
+ if (session.audiobitrate===false){
+ if ((audioKbps>0) && (audioKbps>=128)){
+ session.requestAudioRateLimit(128,UUID); // no point going higher
+ } else if (audioKbps==0){
+ session.requestAudioRateLimit(256,UUID); // PCM
+ } else {
+ session.requestAudioRateLimit(parseInt(audioKbps),UUID); // exact? sure. why not.
+ }
+ }
+ } else if (videoKbps < 50) { // this just makes sure you can't set 0 on the record bitrate.
+ videoKbps = 50;
+ session.requestRateLimit(parseInt(videoKbps * 0.8), UUID); // 3200kbps transfer bitrate. Less than the recording bitrate, to avoid waste.
+ } else {
+ session.requestRateLimit(parseInt(videoKbps * 0.8), UUID); // 3200kbps transfer bitrate. Less than the recording bitrate, to avoid waste.
+
+ if (videoKbps>4000){
+ if (session.audiobitrate===false){
+ if (session.pcm){
+ session.requestAudioRateLimit(256,UUID);
+ } else {
+ session.requestAudioRateLimit(128,UUID);
+ }
+ }
+ } else if (videoKbps>2500){
+ if (session.audiobitrate===false){
+ if (session.pcm){
+ session.requestAudioRateLimit(256,UUID);
+ } else {
+ session.requestAudioRateLimit(80,UUID);
+ }
+ }
+ }
+
+ }
+
+ var timestamp = Date.now();
+ var filename = "";
+ if (session.rpcs[UUID].label || session.rpcs[UUID].streamID) {
+ filename = session.rpcs[UUID].label || session.rpcs[UUID].streamID;
+ filename = filename.replace(/[\W]+/g, "_");
+ filename = filename.substring(0, 200);
+ }
+
+ filename += "_" + timestamp.toString();
+
+ var cancell = false;
+ if (typeof video.srcObject === "undefined" || !video.srcObject) {
+ return;
+ }
+
+ video.recorder.stop = function(restart = false, notify = false) {
+ if (!video.recording) {
+ errorlog("ALREADY STOPPED");
+ updateLocalRecordButton(UUID, -1);
+ return;
+ }
+
+ if (notify){
+ if (!session.cleanOutput){
+ warnUser("A local recording has stopped unexpectedly.");
+ }
+ if (session.beepToNotify){
+ playtone();
+
+ }
+ target.classList.remove("shake");
+ setTimeout(function(target){target.classList.add("shake");},10, target);
+ }
+
+ video.recording = false;
+ updateLocalRecordButton(UUID, -2);
+ try {
+ if (video.recorder.mediaRecorder.state !== "inactive") {
+ video.recorder.mediaRecorder.stop();
+ }
+ } catch (e) {
+ errorlog(e);
+ }
+
+ session.requestRateLimit(35, UUID); // 100kbps
+ if (session.audiobitrate===false){
+ session.requestAudioRateLimit(-1,UUID);
+ }
+ var elements = document.querySelectorAll('[data-action-type="change-quality2"][data--u-u-i-d="' + UUID + '"]');
+ if (elements[0]) {
+ elements[0].classList.add("pressed");
+ }
+ var elements = document.querySelectorAll('[data-action-type="change-quality1"][data--u-u-i-d="' + UUID + '"]');
+ if (elements[0]) {
+ elements[0].classList.remove("pressed");
+ }
+ var elements = document.querySelectorAll('[data-action-type="change-quality3"][data--u-u-i-d="' + UUID + '"]');
+ if (elements[0]) {
+ elements[0].classList.remove("pressed");
+ }
+
+ cancell = true;
+ // log('Recorded Blobs: ', recordedBlobs);
+ // download();
+ setTimeout((writer1,UUID1,video1) => {
+ try{
+ writer1.close();
+ } catch(e){}
+ updateLocalRecordButton(UUID1, -1);
+ delete(video1.recorder);
+ delete(video1.recording);
+ }, 1200, writer, UUID, video);
+ };
+
+ const {readable, writable} = new TransformStream({
+ transform: (chunk, ctrl) => chunk.arrayBuffer().then(b => ctrl.enqueue(new Uint8Array(b)))
+ });
+ var writer = writable.getWriter();
+ readable.pipeTo(streamSaver.createWriteStream(filename.toString() + '.webm', video.recorder.stop));
+ video.recorder.writer = writer;
+ pokeIframeAPI("recording-started");
+
+ let options = {};
+
+ if (videoKbps) {
+ var tryCodec = false;
+ if (session.recordingVideoCodec){
+ tryCodec = session.recordingVideoCodec;
+ }
+ if (tryCodec && MediaRecorder.isTypeSupported('video/webm;codecs='+tryCodec)) {
+ if (!session.cleanOutput){
+ warnUser("The browser 'says' it supports "+tryCodec);
+ }
+ options.mimeType = 'video/webm;codecs='+tryCodec;
+ if (session.pcm){
+ if (MediaRecorder.isTypeSupported('video/webm;codecs="'+tryCodec+', pcm"')){
+ options.mimeType = 'video/webm;codecs="'+tryCodec+', pcm"';
+ } else {
+ options.mimeType = "video/webm;codecs=pcm";
+ }
+ }
+ } else {
+ if (session.pcm){
+ if (MediaRecorder.isTypeSupported("video/webm;codecs=pcm")) {
+ options.mimeType = "video/webm;codecs=pcm";
+ } else {
+ options.mimeType = "video/webm";
+ }
+ } else {
+ options.mimeType = "video/webm";
+ }
+ }
+ if (videoKbps < 1000) {
+ options.videoBitsPerSecond = parseInt(videoKbps * 1024); // 100 kbps audio
+ } else {
+ options.bitsPerSecond = parseInt(videoKbps * 1024); // 100 to 132 kbps audio
+ }
+ video.recorder.mediaRecorder = new MediaRecorder(video.srcObject, options);
+ } else {
+ options.mimeType = 'audio/webm';
+ if (audioKbps == 0) {
+ if (MediaRecorder.isTypeSupported("audio/webm;codecs=pcm")) {
+ options.mimeType = "audio/webm;codecs=pcm";
+ }
+ } else {
+ options.bitsPerSecond = parseInt(audioKbps * 1024);
+ }
+ var stream = createMediaStream();
+ video.srcObject.getAudioTracks().forEach((track) => {
+ stream.addTrack(track, video.srcObject);
+ });
+ video.recorder.mediaRecorder = new MediaRecorder(stream, options);
+ }
+ log(options);
+
+ function download() {
+ const blob = new Blob(recordedBlobs, {
+ type: "video/webm"
+ });
+ const url = window.URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.style.display = 'none';
+ a.href = url;
+ a.download = filename + ".webm";
+ document.body.appendChild(a);
+ a.click();
+ setTimeout(function(uu,aa){
+ document.body.removeChild(aa);
+ window.URL.revokeObjectURL(uu);
+ }, 100, url,a);
+ }
+
+ function handleDataAvailable(event) {
+ if (event.data && event.data.size > 0) {
+ //recordedBlobs.push(event.data);
+ try{
+ writer.write(event.data); ////////////
+ if (video.recording) {
+ updateLocalRecordButton(UUID, (parseInt((Date.now() - timestamp) / 1000) || 0));
+ }
+ } catch(e){warnlog("Stream recording error or ended");}
+ }
+ }
+
+ video.recorder.mediaRecorder.ondataavailable = handleDataAvailable;
+
+ video.recorder.mediaRecorder.onerror = function(event) {
+ errorlog(event);
+ video.recorder.stop();
+ session.requestRateLimit(35, UUID);
+ if (!(session.cleanOutput)) {
+ setTimeout(function() {
+ warnUser("an error occured with the media recorder; stopping recording");
+ }, 1);
+ }
+ };
+
+ video.srcObject.ended = function(event) {
+ video.recorder.stop();
+ session.requestRateLimit(35, UUID);
+ if (!(session.cleanOutput)) {
+ setTimeout(function() {
+ warnUser("stream ended! stopping recording");
+ }, 1);
+ }
+ };
+
+
+ setTimeout(function(v) {
+ v.recorder.mediaRecorder.start(1000);
+ }, 500, video); // 100ms chunks
+
+ return;
+}
+
+function updateRemoteRecordButton(UUID, recorder) {
+ var elements = document.querySelectorAll('[data-action-type="recorder-remote"][data--u-u-i-d="' + UUID + '"]');
+ if (elements[0]) {
+ var time = parseInt(recorder) || 0;
+ if (time == -4) {
+ if (!session.cleanOutput){
+ warnUser("A remote recording has stopped unexpectedly.\n\nDid a user cancel the file downlaod?");
+ }
+ if (session.beepToNotify){
+ playtone();
+ }
+ elements[0].classList.add("pressed");
+ elements[0].classList.remove("shake");
+ elements[0].innerHTML = ' stopping...';
+ setTimeout(function(ele){ele.classList.add("shake");},10,elements[0]);
+ } else if (time == -3) {
+ elements[0].classList.remove("pressed");
+ elements[0].disabled = true;
+ elements[0].innerHTML = ' Not Supported';
+ if (!(session.cleanOutput)) {
+ setTimeout(function() {
+ warnUser('The remote browser does not support recording.\n\nPerhaps try local recording instead.');
+ }, 0);
+ }
+ } else if (time == -5) {
+ if (!(session.cleanOutput)) {
+ setTimeout(function() {
+ warnUser('The remote browser has only experimental support for media recording.\n\nAlso, when this download stops, the remote user may be asked to download the file for it to save.');
+ }, 0);
+ }
+ } else if (time == -2) {
+ elements[0].classList.add("pressed");
+ elements[0].innerHTML = ' stopping...';
+ } else if (time == -1) {
+ elements[0].classList.remove("pressed");
+ elements[0].innerHTML = ' Record Remote';
+ } else {
+ var minutes = Math.floor(time / 60);
+ var seconds = time - minutes * 60;
+ elements[0].classList.add("pressed");
+ elements[0].innerHTML = ' ' + (minutes) + "m : " + zpadTime(seconds) + "s";
+ }
+ }
+}
+
+function updateLocalRecordButton(UUID, recorder) {
+ var elements = document.querySelectorAll('[data-action-type="recorder-local"][data--u-u-i-d="' + UUID + '"]');
+ if (elements[0]) {
+ var time = parseInt(recorder) || 0;
+
+ //target.innerHTML = ' ARMED';
+ //
+ if (time == -3) {
+ elements[0].classList.add("pressed");
+ elements[0].innerHTML = ' ARMED';
+ elements[0].style.backgroundColor = "#BF3F3F";
+ } else if (time == -2) {
+ elements[0].classList.add("pressed");
+ elements[0].innerHTML = ' stopping...';
+ elements[0].style.backgroundColor = "";
+ } else if (time == -1) {
+ elements[0].classList.remove("pressed");
+ elements[0].innerHTML = ' Record Local';
+ elements[0].style.backgroundColor = "";
+ } else {
+ var minutes = Math.floor(time / 60);
+ var seconds = time - minutes * 60;
+ elements[0].classList.add("pressed");
+ elements[0].innerHTML = ' ' + (minutes) + "m : " + zpadTime(seconds) + "s";
+ elements[0].style.backgroundColor = "";
+ }
+ }
+}
+
+function recordLocalVideoToggle() {
+ if (!session.videoElement){return;}
+ log("recordLocalVideoToggle()");
+
+ var ele = getById("recordLocalbutton");
+ if (ele.dataset.state == "0") {
+ ele.dataset.state = "1";
+ ele.style.backgroundColor = "red";
+ ele.innerHTML = '';
+ if ("recording" in session.videoElement) {
+
+ } else {
+ recordLocalVideo("start");
+ }
+
+ if (session.director){
+ var elements = document.querySelectorAll('[data-action-type="recorder-local"][data-sid="' + session.streamID + '"]');
+ if (elements[0]) {
+ elements[0].classList.add("pressed");
+ elements[0].innerHTML = ' Record';
+ }
+ }
+ return true;
+ } else {
+ if ("recording" in session.videoElement) {
+ recordLocalVideo("stop");
+ }
+ ele.dataset.state = "0";
+ ele.style.backgroundColor = "";
+ ele.innerHTML = '';
+
+ if (session.director){
+ var elements = document.querySelectorAll('[data-action-type="recorder-local"][data-sid="' + session.streamID + '"]');
+ if (elements[0]) {
+ elements[0].classList.remove("pressed");
+ elements[0].innerHTML = ' Record';
+ }
+ }
+ return false;
+ }
+}
+
+function setupSensorData(pollrate = 30) {
+ session.sensors = {};
+ session.sensors.data = {};
+
+ if (window.Accelerometer && session.sensorDataFilter.includes("acc")) {
+ session.sensors.data.acc = {};
+ session.sensors.Accelerometer = new Accelerometer({
+ frequency: pollrate
+ });
+ session.sensors.Accelerometer.addEventListener('reading', e => {
+ session.sensors.data.acc.x = session.sensors.Accelerometer.x.toFixed(5);
+ session.sensors.data.acc.y = session.sensors.Accelerometer.y.toFixed(5);
+ session.sensors.data.acc.z = session.sensors.Accelerometer.z.toFixed(5);
+ session.sensors.data.acc.t = parseInt(Math.round(session.sensors.Accelerometer.timestamp));
+ });
+ session.sensors.Accelerometer.start();
+ }
+ if (window.Gyroscope && session.sensorDataFilter.includes("gyro")) {
+ session.sensors.data.gyro = {};
+ session.sensors.Gyroscope = new Gyroscope({
+ frequency: pollrate
+ });
+ session.sensors.Gyroscope.addEventListener('reading', e => {
+ session.sensors.data.gyro.x = session.sensors.Gyroscope.x.toFixed(5);
+ session.sensors.data.gyro.y = session.sensors.Gyroscope.y.toFixed(5);
+ session.sensors.data.gyro.z = session.sensors.Gyroscope.z.toFixed(5);
+ session.sensors.data.gyro.t = parseInt(Math.round(session.sensors.Gyroscope.timestamp));
+ });
+ session.sensors.Gyroscope.start();
+ }
+ if (window.Magnetometer && session.sensorDataFilter.includes("mag")) {
+ session.sensors.data.mag = {};
+ session.sensors.Magnetometer = new Magnetometer({
+ frequency: pollrate
+ });
+ session.sensors.Magnetometer.addEventListener('reading', e => {
+ session.sensors.data.mag.x = session.sensors.Magnetometer.x.toFixed(5);
+ session.sensors.data.mag.y = session.sensors.Magnetometer.y.toFixed(5);
+ session.sensors.data.mag.z = session.sensors.Magnetometer.z.toFixed(5);
+ session.sensors.data.mag.t = parseInt(Math.round(session.sensors.Magnetometer.timestamp));
+
+ });
+ session.sensors.Magnetometer.start();
+ session.sensors.deviceorientation = false;
+ } else if (session.sensorDataFilter.includes("ori")){
+ try{
+ window.addEventListener('deviceorientation', e => {
+ session.sensors.data.ori = {};
+ try{
+ session.sensors.data.ori.d = e.absolute;
+ } catch(event){}
+ session.sensors.data.ori.a = e.alpha.toFixed(5);
+ session.sensors.data.ori.b = e.beta.toFixed(5);
+ session.sensors.data.ori.g = e.gamma.toFixed(5);
+ session.sensors.data.ori.t = parseInt(Math.round(e.timestamp)) || Date.now();
+ });
+ session.sensors.deviceorientation = true;
+ } catch(e){
+ session.sensors.deviceorientation = false;
+ }
+ }
+ if (window.LinearAccelerationSensor && session.sensorDataFilter.includes("lin")) {
+ session.sensors.data.lin = {};
+ session.sensors.LinearAccelerationSensor = new LinearAccelerationSensor({
+ frequency: pollrate
+ });
+ session.sensors.LinearAccelerationSensor.addEventListener('reading', e => {
+ session.sensors.data.lin.x = session.sensors.LinearAccelerationSensor.x.toFixed(5);
+ session.sensors.data.lin.y = session.sensors.LinearAccelerationSensor.y.toFixed(5);
+ session.sensors.data.lin.z = session.sensors.LinearAccelerationSensor.z.toFixed(5);
+ session.sensors.data.lin.t = parseInt(Math.round(session.sensors.LinearAccelerationSensor.timestamp));
+ });
+ session.sensors.LinearAccelerationSensor.start();
+ }
+
+ if (navigator.geolocation && session.sensorDataFilter.includes("pos")){
+ navigator.geolocation.watchPosition(function(pos){
+ try {
+ session.sensors.data.pos = {};
+ session.sensors.data.pos.speed = pos.coords.speed.toFixed(3);
+ session.sensors.data.pos.alt = pos.coords.altitude.toFixed(3);
+ session.sensors.data.pos.t = pos.timestamp;
+ }catch(e){}
+ }, errorlog, {
+ enableHighAccuracy: true,
+ timeout: 5000,
+ maximumAge: 0
+ });
+ }
+
+ setInterval(function() {
+ session.sendMessage({sensors: session.sensors.data});
+ }, parseInt(1000 / pollrate));
+}
+
+
+function recordLocalVideo(action = null, videoKbps = 6000, remote=false) { // event.currentTarget,this.parentNode.parentNode.dataset.UUID
+ var audioKbps = false;
+ if (remote){
+ var video = remote;
+ if (remote.id === "videosource"){
+ remote = false;
+ }
+ } else {
+ var video = session.videoElement;
+ }
+ log(video.id);
+
+ if (!video){return;}
+
+ if ("recording" in video) {
+ if (action == "estop") {
+ video.recorder.eStop();
+ log("EMERGENCY Stopping RECORDING!");
+ video.recorder.stop();
+ delete(video.recorder);
+ delete(video.recording);
+ return;
+ } else if (action == "stop") {
+ log("Stopping RECORDING!");
+ video.recorder.stop();
+ delete(video.recorder);
+ delete(video.recording);
+ return;
+ } else if (action == "start") {
+ log("ALREADY RECORDING!");
+ if (remote){
+ getById("recordLocalbutton").dataset.state = "1";
+ getById("recordLocalbutton").style.backgroundColor = "red";
+ getById("recordLocalbutton").innerHTML = '';
+ }
+ return;
+ } else {
+ log("STOPPING RECORDING by default toggle!");
+ video.recorder.stop();
+ return;
+ }
+ return;
+ } else if (action == "start") {
+ if (!MediaRecorder) {
+ var msg = {};
+ msg.recorder = -3;
+ for (var i = 0;i {
+ try {
+ writer.close();
+ } catch(e){}
+ pokeIframeAPI("recording-stopped");
+ if (!remote){
+ try {
+ if (session.directorUUID) {
+ var msg = {};
+ msg.recorder = -1;
+ for (var i = 0;i chunk.arrayBuffer().then(b => ctrl.enqueue(new Uint8Array(b)))
+ });
+ var writer = writable.getWriter();
+ readable.pipeTo(streamSaver.createWriteStream(filename.toString() + '.webm', video.recorder.stop));
+ video.recorder.writer = writer;
+ pokeIframeAPI("recording-started");
+
+ let options = {};
+
+ if (videoKbps) {
+ var tryCodec = false;
+ if (session.recordingVideoCodec){
+ tryCodec = session.recordingVideoCodec;
+ }
+ if (tryCodec && MediaRecorder.isTypeSupported('video/webm;codecs='+tryCodec)) {
+ if (!session.cleanOutput){
+ warnUser("The browser 'says' it supports "+tryCodec);
+ }
+ options.mimeType = 'video/webm;codecs='+tryCodec;
+ if (session.pcm){
+ if (MediaRecorder.isTypeSupported('video/webm;codecs="'+tryCodec+', pcm"')){
+ options.mimeType = 'video/webm;codecs="'+tryCodec+', pcm"';
+ } else {
+ options.mimeType = "video/webm;codecs=pcm";
+ }
+ }
+ } else {
+ if (session.pcm){
+ if (MediaRecorder.isTypeSupported("video/webm;codecs=pcm")) {
+ options.mimeType = "video/webm;codecs=pcm";
+ } else {
+ options.mimeType = "video/webm";
+ }
+ } else {
+ options.mimeType = "video/webm";
+ }
+ }
+ if (videoKbps < 1000) {
+ options.videoBitsPerSecond = parseInt(videoKbps * 1024); // 100 kbps audio
+ } else {
+ options.bitsPerSecond = parseInt(videoKbps * 1024); // 100 to 132 kbps audio
+ }
+ try {
+ video.recorder.mediaRecorder = new MediaRecorder(video.srcObject, options);
+ } catch(e){
+ warnlog(e);
+ try {
+ video.recorder.mediaRecorder = new MediaRecorder(video.srcObject);
+ } catch(e){
+ errorlog(e);
+ errorlog("Failing the recording");
+ var msg = {};
+ msg.recorder = -3;
+ for (var i = 0;i {
+ stream.addTrack(track, video.srcObject);
+ });
+ video.recorder.mediaRecorder = new MediaRecorder(stream, options);
+ }
+ log(options);
+
+ function handleDataAvailable(event) {
+ if (event.data && event.data.size > 0) {
+ writer.write(event.data);
+ if (session.directorList.length) {
+ if (video.recording) {
+ var msg = {};
+ msg.recorder = parseInt((Date.now() - timestamp) / 1000) || 0;
+ for (var i =0;i{
+ var added = false;
+ tracks.forEach(trk2 =>{
+ if (trk2.id == trk.id){
+ added=true;
+ }
+ });
+ if (!added){
+ session.rpcs[UUID].videoElement.srcObject.getVideoTracks().forEach((trk2)=>{ // make sure only one video track is added at a time.
+ session.rpcs[UUID].videoElement.srcObject.removeTrack(trk2);
+ });
+
+ if (trk.muted && (trk.kind=="video") && session.director){
+ trk.onunmute = function(e){
+ if (!session.rpcs[UUID]){return;}
+ this.onunmute = null;
+ warnlog("ON UN-MUTE");
+ updateIncomingVideoElement(UUID, true, false);
+ };
+ } else {
+ if (session.rpcs[UUID].videoElement.controls){
+ session.rpcs[UUID].videoElement.controls = session.showControls || false;
+ setTimeout(function(ele){
+ if (ele){
+ ele.controls=true;
+ }
+ },500, session.rpcs[UUID].videoElement);
+ }
+ session.rpcs[UUID].videoElement.srcObject.addTrack(trk);
+ }
+ }
+ });
+ }
+ if (audio){
+ updateIncomingAudioElement(UUID) // do the same for audio now.
+ }
+}
+
+function updateIncomingAudioElement(UUID){ // this can be called when turning on/off inbound audio processing.
+ if (!session.rpcs[UUID] || !session.rpcs[UUID].videoElement || !session.rpcs[UUID].streamSrc){return;}
+
+ if (!session.rpcs[UUID].videoElement.srcObject) {
+ session.rpcs[UUID].videoElement.srcObject = createMediaStream();
+ }
+
+ log("updateIncomingAudioElement: "+UUID);
+ if ((session.audioEffects===true) || session.pushLoudness){
+ var tracks = session.rpcs[UUID].streamSrc.getAudioTracks();
+ if (tracks.length){
+ var track = tracks[0];
+ track = addAudioPipeline(UUID, track);
+ log(track);
+ var added = false;
+ var tracks2 = session.rpcs[UUID].videoElement.srcObject.getAudioTracks();
+ log(tracks2);
+ tracks2.forEach(trk2 =>{
+ if (trk2.label && (trk2.label == "MediaStreamAudioDestinationNode")){ // an old morphed node; delete it.
+ session.rpcs[UUID].videoElement.srcObject.removeTrack(trk2);
+ } else if (track.id == trk2.id){ // maybe it didn't morph; already added either way
+ added = true;
+ } else if ((trk2.id == tracks[0].id) && (track.id != tracks[0].id)){ // remove original audio track that is now morphed
+ session.rpcs[UUID].videoElement.srcObject.removeTrack(trk2);
+ }
+ });
+ if (!added){
+ session.rpcs[UUID].videoElement.srcObject.addTrack(track);
+ }
+
+ } else {
+ session.rpcs[UUID].videoElement.srcObject.getAudioTracks().forEach(trk=>{ // make sure to remove all tracks.
+ session.rpcs[UUID].videoElement.srcObject.remove(trk);
+ });
+ }
+ } else {
+ var expected = [];
+ tracks = session.rpcs[UUID].videoElement.srcObject.getAudioTracks(); // add audio tracks
+ session.rpcs[UUID].streamSrc.getAudioTracks().forEach((trk)=>{
+ var added = false;
+ tracks.forEach(trk2 =>{
+ if (trk2.id == trk.id){
+ added=true;
+ expected.push(trk2); //
+ }
+ });
+ if (!added){
+ session.rpcs[UUID].videoElement.srcObject.addTrack(trk);
+ }
+ });
+ tracks.forEach((trk)=>{
+ var added = false;
+ expected.forEach((trk2)=>{
+ if (trk2.id == trk.id){
+ added=true;
+ }
+ });
+ if (!added){ // not expected. so lets delete.
+ warnlog("this shouldn't happen that often, audio track orphaned. removing it");
+ session.rpcs[UUID].videoElement.srcObject.removeTrack(trk);
+ }
+ });
+ }
+
+
+ if (session.mixMinus){
+ stream = mixMinusAudio(UUID); // only works with p2p; no chunked mode.
+ }
+
+}
+
+
+function cycleStyleOptions(){
+ session.style +=1;
+ if (session.style >6 ){
+ session.style = 1;
+ } else if (session.style == 4 ){
+ session.style = 5;
+ }
+
+ for (var UUID in session.rpcs){
+ if (session.rpcs[UUID].canvas){
+ try{
+ if (session.rpcs[UUID].canvas){
+ session.rpcs[UUID].canvas.remove();
+ }
+ } catch(e){}
+ session.rpcs[UUID].canvas = null;
+ }
+ updateIncomingAudioElement(UUID);
+ }
+ updateMixer();
+}
+
+function addAudioPipeline(UUID, track){ // INBOUND AUDIO EFFECTS ; audio tracks only
+ try{
+
+ if (session.disableViewerWebAudioPipeline){
+ log("ignoring addAudioPipeline - disableViewerWebAudioPipeline is enabled (noap)");
+ return track;
+ }
+
+ log("Triggered webaudio effects path");
+
+ for (var tid in session.rpcs[UUID].inboundAudioPipeline){
+ delete session.rpcs[UUID].inboundAudioPipeline[tid]; // get rid of old nodes.
+ }
+ var trackid = track.id; // this is an audio track, or should be.
+
+ session.rpcs[UUID].inboundAudioPipeline[trackid] = {};
+
+ session.rpcs[UUID].inboundAudioPipeline[trackid].mediaStream = createMediaStream();
+ session.rpcs[UUID].inboundAudioPipeline[trackid].mediaStream.addTrack(track);
+
+ if (ChromeVersion && session.audioEffects){ // I'm going to deprecate this.
+ session.rpcs[UUID].inboundAudioPipeline[trackid].mutedAudio = createAudioElement(); // TODO: I don't know if this mutedAudio thing matters any more, in recent versions of Chrome, since it won't play even if muted.
+ session.rpcs[UUID].inboundAudioPipeline[trackid].mutedAudio.muted = true;
+ session.rpcs[UUID].inboundAudioPipeline[trackid].mutedAudio.playsinline = true; // ## Added Oct 9th 2022. Not sure it's does anything, but might help with iPhones?
+ session.rpcs[UUID].inboundAudioPipeline[trackid].mutedAudio.srcObject = session.rpcs[UUID].inboundAudioPipeline[trackid].mediaStream; // needs to be added as an streamed element to be usable, even if its hidden
+ session.rpcs[UUID].inboundAudioPipeline[trackid].mutedAudio.muted = true;
+ //session.rpcs[UUID].inboundAudioPipeline[trackid].mutedAudio.volume = 0.01;
+ session.rpcs[UUID].inboundAudioPipeline[trackid].mutedAudio.play().then(_ => {
+ //session.rpcs[UUID].inboundAudioPipeline[trackid].mutedAudio.muted = false;
+ log("playing 1");
+ }).catch(warnlog);
+ }
+
+ // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamTrackSource
+ var source = session.audioCtx.createMediaStreamSource(session.rpcs[UUID].inboundAudioPipeline[trackid].mediaStream);
+
+ //////////////////
+
+ var screwedUp = false;
+ session.rpcs[UUID].inboundAudioPipeline[trackid].destination = false;
+
+ if (session.sync!==false){
+ log("adding a delay node to audio");
+ source = addDelayNode( source, UUID, trackid);
+ screwedUp = true;
+ }
+ if (session.style===2){
+ log("adding a fftwave node to audio");
+ try {
+ if (session.rpcs[UUID].inboundAudioPipeline[trackid]){ // clear audioMeterGuest, if active.
+ clearTimeout(session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.interval);
+ }
+ } catch(e){ }
+ source = fftWaveform( source, UUID, trackid);
+ } else if (session.style===3 || session.meterStyle){
+ log("adding a loudness meter node to audio");
+ source = audioMeterGuest(source, UUID, trackid);
+ } else if (session.audioMeterGuest){
+ log("adding a loudness meter node to audio");
+ source = audioMeterGuest(source, UUID, trackid);
+ } else if (session.activeSpeaker){
+ log("adding a loudness meter node to audio");
+ source = audioMeterGuest(source, UUID, trackid);
+ } else if (session.quietOthers){
+ log("adding a loudness meter node to audio");
+ source = audioMeterGuest(source, UUID, trackid);
+ } else if (session.pushLoudness){
+ source = audioMeterGuest(source, UUID, trackid);
+ } else {
+ try {
+ if (session.rpcs[UUID].inboundAudioPipeline[trackid]){ // nothign active, so clear
+ clearTimeout(session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.interval);
+ }
+ } catch(e){ }
+ }
+
+ if (session.rpcs[UUID].channelOffset !== false){
+ log("custom offset set");
+ session.rpcs[UUID].inboundAudioPipeline[trackid].destination = session.audioCtx.createMediaStreamDestination();
+ source = offsetChannel( session.rpcs[UUID].inboundAudioPipeline[trackid].destination, source, session.rpcs[UUID].channelOffset, session.rpcs[UUID].channelWidth);
+ screwedUp = true;
+ } else if (session.offsetChannel !== false){ // proably better to do this last.
+ log("adding offset channels");
+ session.rpcs[UUID].inboundAudioPipeline[trackid].destination = session.audioCtx.createMediaStreamDestination();
+ source = offsetChannel( session.rpcs[UUID].inboundAudioPipeline[trackid].destination, source, session.offsetChannel, session.channelWidth);
+ screwedUp = true;
+ } else if (session.panning !== false){ // proably better to do this last.
+ log("adding offset channels");
+ session.rpcs[UUID].inboundAudioPipeline[trackid].destination = session.audioCtx.createMediaStreamDestination();
+ source = stereoPanning( source, UUID, trackid, session.panning);
+ screwedUp = true;
+ } else if (session.rpcs[UUID].videoElement && session.rpcs[UUID].videoElement.manualSink){
+ screwedUp = true; // added June-3-22 to allow for custom outputs to different audio output destinations.
+ }
+
+ if (screwedUp){
+ warnlog("screwedUp mode activated. dun dun");
+ if (session.rpcs[UUID].inboundAudioPipeline[trackid].destination===false){
+ session.rpcs[UUID].inboundAudioPipeline[trackid].destination = session.audioCtx.createMediaStreamDestination();
+ }
+ source.connect(session.rpcs[UUID].inboundAudioPipeline[trackid].destination);
+
+ try {
+ if (session.firstPlayTriggered && (session.audioCtx.state == "suspended")){
+ log("trying to resume..");
+ session.audioCtx.resume();
+ }
+ } catch(e){warnlog("session.audioCtx.resume(); failed");}
+
+ return session.rpcs[UUID].inboundAudioPipeline[trackid].destination.stream.getAudioTracks()[0];
+ }
+
+ try {
+ if (session.firstPlayTriggered && (session.audioCtx.state == "suspended")){
+ session.audioCtx.resume();
+ }
+ } catch(e){warnlog("session.audioCtx.resume(); failed 2");}
+
+ return track;
+ } catch(e) {errorlog(e);}
+ return track;
+}
+
+
+function changeGroupDirector(ele, state=null){
+ var group = ele.dataset.group;
+
+ var index = session.group.indexOf(group);
+
+ if (state===true){
+ ele.classList.add("pressed");
+ if (index === -1){
+ session.group.push(group);
+ }
+ } else if (state === false){
+ ele.classList.remove("pressed");
+ if (index > -1){
+ session.group.splice(index, 1);
+ }
+ } else if (ele.classList.contains("pressed")){
+ ele.classList.remove("pressed");
+ if (index > -1){
+ session.group.splice(index, 1);
+ }
+ } else {
+ ele.classList.add("pressed");
+ if (index === -1){
+ session.group.push(group);
+ }
+ }
+
+ if (session.group.length || session.allowNoGroup){
+ session.sendMessage({"group":session.group.join(",")});
+ } else {
+ session.sendMessage({"group":false});
+ }
+
+ if (session.group.indexOf(group)===-1){
+ return false;
+ } else {
+ return true;
+ }
+}
+
+function changeGroupDirectorAPI(group, state=null, update=true){
+ log("changeGroupDirectorAPI()");
+ group = sanitizeLabel(group);
+
+ if (document.getElementById("container_director")){
+ var ele = getById("container_director").querySelector('[data-action-type="toggle-group"][data-group="'+group+'"]');
+ if (ele){
+ if (update){
+ ele.click();
+ } else if (state===true){
+ ele.classList.add("pressed");
+ }
+ if (session.group.indexOf(group)===-1){
+ return false;
+ } else {
+ return true;
+ }
+ }
+ }
+
+ var index = session.group.indexOf(group);
+
+ var eleGroup = getById("groups");
+ eleGroup.classList.remove("hidden");
+ var ele = eleGroup.querySelector('[data-action-type="toggle-group"][data-group="'+group+'"');
+
+ if (eleGroup.showDirector){
+ if (!ele){
+ ele = htmlToElement('');
+
+ var added = false;
+ eleGroup.querySelectorAll('[data-group]').forEach(ele2=>{
+ log(ele2);
+ if (!added && ele2.dataset.group>group+""){
+ ele2.parentNode.insertBefore(ele, ele2);
+ added = true;
+ }
+ });
+ if (!added){
+ eleGroup.appendChild(ele);
+ }
+ }
+ } else if (!ele){
+ ele = document.createElement("div");
+ ele.dataset.actionType = "toggle-group";
+ ele.dataset.group = group;
+ ele.classList.add('float');
+ ele.style.display = "inline-block";
+ ele.role = "button";
+ ele.innerHTML = ' '+group;
+ eleGroup.appendChild(ele);
+ ele.onclick = function(){
+ changeGroupDirectorAPI(this.dataset.group);
+ }
+ }
+
+ if (state===true){
+ if (eleGroup.showDirector){
+ ele.classList.add("pressed");
+ } else {
+ ele.classList.add("green");
+ }
+ if (index === -1){
+ session.group.push(group);
+ }
+ } else if (state === false){
+ if (eleGroup.showDirector){
+ ele.classList.remove("pressed");
+ } else {
+ ele.classList.remove("green");
+ }
+ if (index > -1){
+ session.group.splice(index, 1);
+ }
+ } else if (ele.classList.contains("green")){
+ if (eleGroup.showDirector){
+ ele.classList.remove("pressed");
+ } else {
+ ele.classList.remove("green");
+ }
+ if (index > -1){
+ session.group.splice(index, 1);
+ }
+ } else {
+ if (eleGroup.showDirector){
+ ele.classList.add("pressed");
+ } else {
+ ele.classList.add("green");
+ }
+ if (index === -1){
+ session.group.push(group);
+ }
+ }
+ if (update){
+ if (session.group.length || session.allowNoGroup){
+ session.sendMessage({"group":session.group.join(",")});
+ } else {
+ session.sendMessage({"group":false});
+ }
+ }
+ if (session.group.indexOf(group)===-1){
+ return false;
+ } else {
+ return true;
+ }
+}
+
+
+function changeGroup(ele, state=null){
+
+ var group = ele.dataset.group;
+
+ var index = session.rpcs[ele.dataset.UUID].group.indexOf(group);
+
+ if (state===true){
+ ele.classList.add("pressed");
+ if (index === -1){
+ session.rpcs[ele.dataset.UUID].group.push(group);
+ }
+ } else if (state === false){
+ ele.classList.remove("pressed");
+ if (index > -1){
+ session.rpcs[ele.dataset.UUID].group.splice(index, 1);
+ }
+ } else if (ele.classList.contains("pressed")){
+ ele.classList.remove("pressed");
+ if (index > -1){
+ session.rpcs[ele.dataset.UUID].group.splice(index, 1);
+ }
+ } else {
+ ele.classList.add("pressed");
+ if (index === -1){
+ session.rpcs[ele.dataset.UUID].group.push(group);
+ }
+ }
+ if (session.rpcs[ele.dataset.UUID].group.length){
+ session.sendRequest({"group":session.rpcs[ele.dataset.UUID].group.join(",")}, ele.dataset.UUID);
+ } else {
+ session.sendRequest({"group":false}, ele.dataset.UUID);
+ }
+ syncDirectorState(ele);
+
+ if (session.rpcs[ele.dataset.UUID].group.indexOf(group)===-1){
+ return false;
+ } else {
+ return true;
+ }
+}
+
+function changeChannelOffset(UUID, channel){
+ var ele = document.querySelectorAll('[data-action-type="add-channel"][data--u-u-i-d="' + UUID + '"]');
+ for (var i=0;i1){value=1;}
+ }
+ //// some reverb logic goes here...
+ ///var reverbNode = session.audioCtx.createStereoPanner();
+ ///session.rpcs[UUID].inboundAudioPipeline[trackid].reverbNode = reverbNode;
+ ////
+
+ source.connect(reverbNode);
+ return reverbNode;
+}
+
+function stereoPanning(source, UUID, trackid, value){
+ if (parseInt(value) === -1){
+ value = Math.random() * (Math.random()*2-1);
+ warnlog(value);
+ } else if (value === false){
+ return source;
+ } else if (value === true){
+ value = 90;
+ } else {
+ value = parseFloat(value/90) -1 || 0;
+ if (value<-1){value=-1;}
+ if (value>1){value=1;}
+ }
+
+ var gainNode = session.audioCtx.createGain();
+ session.rpcs[UUID].inboundAudioPipeline[trackid].gainPanNode = gainNode;
+ gainNode.value = (1-Math.abs(value)/2); // the stereo panner seems to make things extra loud, so they clip. REDUCE IT.
+ source.connect(gainNode);
+
+ var panNode = session.audioCtx.createStereoPanner();
+ session.rpcs[UUID].inboundAudioPipeline[trackid].panNode = panNode;
+ panNode.pan.value = value;
+ gainNode.connect(panNode);
+ return panNode;
+}
+
+function adjustPan(UUID, value){
+
+ if (value === true){
+ value = Math.random() * (Math.random()*2-1);
+ } else if (value === false){
+ value=0;
+ } else {
+ value = parseFloat(value/90) -1 || 0;
+ if (value<-1){value=-1;}
+ if (value>1){value=1;}
+ }
+
+ for (var trackid in session.rpcs[UUID].inboundAudioPipeline){
+ if ("panNode" in session.rpcs[UUID].inboundAudioPipeline[trackid]){
+ session.rpcs[UUID].inboundAudioPipeline[trackid].panNode.pan.setValueAtTime(value, session.audioCtx.currentTime);
+ }
+ if ("gainPanNode" in session.rpcs[UUID].inboundAudioPipeline[trackid]){
+ session.rpcs[UUID].inboundAudioPipeline[trackid].gainPanNode.setValueAtTime((1-Math.abs(value)/2), session.audioCtx.currentTime);
+ }
+ }
+}
+
+function addDelayNode(source, UUID, trackid){ // append the delay Node to the track??? WOULD THIS WORK?
+
+ var delay = parseFloat(session.sync) || 0;
+ if (delay<0){delay=0;}
+
+ if (session.buffer && (session.buffer>0)){
+ delay += parseFloat(session.buffer);
+ }
+
+ delay = delay/1000;
+
+ session.rpcs[UUID].inboundAudioPipeline[trackid].delayNode = session.audioCtx.createDelay(delay+5);// 5 seconds additionally added for the purpose of flexibility
+
+ session.rpcs[UUID].inboundAudioPipeline[trackid].delayNode.delayTime.value = delay; // delayTime takes it in seconds.
+ source.connect(session.rpcs[UUID].inboundAudioPipeline[trackid].delayNode);
+ log("added new delay node");
+ return session.rpcs[UUID].inboundAudioPipeline[trackid].delayNode;
+}
+
+
+function createStyleCanvas(UUID){ // append the delay Node to the track??? WOULD THIS WORK?
+ if (!session.rpcs[UUID].canvas){ // just make sure that if using &effects or something, to null the canvas after use, else this won't trigger.
+ session.rpcs[UUID].canvas = document.createElement("canvas");
+ session.rpcs[UUID].canvas.dataset.UUID = UUID
+ if (session.rpcs[UUID].streamID){
+ session.rpcs[UUID].canvas.dataset.sid = session.rpcs[UUID].streamID;
+ }
+ session.rpcs[UUID].canvas.style.pointerEvents = "auto";
+ session.rpcs[UUID].canvasCtx = session.rpcs[UUID].canvas.getContext('2d', { alpha: session.alpha });
+ //
+ session.rpcs[UUID].canvas.addEventListener('click', function(e) { // show stats of video if double clicked
+ log("clicked");
+ try {
+ var uid = e.currentTarget.dataset.UUID;
+ if ((e.ctrlKey)||(e.metaKey)){
+ e.preventDefault();
+
+ if ("stats" in session.rpcs[uid]){
+ var [menu, innerMenu] = statsMenuCreator();
+ printViewStats(innerMenu, uid );
+ menu.interval = setInterval(printViewStats, session.statsInterval, innerMenu, uid);
+ }
+ e.stopPropagation();
+ return false;
+ } else if ("prePausedBandwidth" in session.rpcs[uid]){
+ unPauseVideo(e.currentTarget);
+ }
+
+ } catch(e){errorlog(e);}
+ });
+
+ if (session.statsMenu){
+ if ("stats" in session.rpcs[UUID]){
+ var [menu, innerMenu] = statsMenuCreator();
+ printViewStats(innerMenu, UUID );
+ menu.interval = setInterval(printViewStats, session.statsInterval, innerMenu, UUID);
+ }
+ }
+
+ if (session.aspectRatio){
+ if (session.aspectRatio==1){
+ session.rpcs[UUID].canvas.width="720";
+ session.rpcs[UUID].canvas.height="1280";
+ } else if (session.aspectRatio==2){
+ session.rpcs[UUID].canvas.width="960";
+ session.rpcs[UUID].canvas.height="960";
+ } else if (session.aspectRatio==3){
+ session.rpcs[UUID].canvas.width="1280";
+ session.rpcs[UUID].canvas.height="960";
+ }
+ } else {
+ session.rpcs[UUID].canvas.width="1280";
+ session.rpcs[UUID].canvas.height="720";
+ }
+
+ updateMixer();
+ return true;
+ } else {
+ return false;
+ }
+}
+
+
+function applyStyleEffect(UUID){
+ if (!session.rpcs[UUID].canvas || !session.rpcs[UUID].canvasCtx){return;}
+
+ /* session.rpcs[UUID].canvasContainer = document.createElement("div");
+ session.rpcs[UUID].canvasContainer.appendChild(session.rpcs[UUID].canvas);
+ session.rpcs[UUID].canvas.style = "width:100%;height:100%;display:block;";
+ session.rpcs[UUID].canvasContainer.appendChild(session.rpcs[UUID].videoElement); */
+
+ if (session.style==3){ // black
+ session.rpcs[UUID].canvasCtx.fillStyle = "rgb(0, 0, 0)";
+ session.rpcs[UUID].canvasCtx.fillRect(0, 0, session.rpcs[UUID].canvas.width, session.rpcs[UUID].canvas.height);
+ } else if (session.style==4){
+ session.rpcs[UUID].canvasCtx.fillStyle = "rgb(0, 0, 0)";
+ session.rpcs[UUID].canvasCtx.fillRect(0, 0, session.rpcs[UUID].canvas.width, session.rpcs[UUID].canvas.height);
+ } else if (session.style==5){
+ var r = Math.random()*255;
+ var g = Math.random()*255;
+ var b = Math.random()*255;
+ session.rpcs[UUID].canvasCtx.fillStyle = "rgb("+r+", "+g+", "+b+")";
+ session.rpcs[UUID].canvasCtx.fillRect(0, 0, session.rpcs[UUID].canvas.width, session.rpcs[UUID].canvas.height);
+ } else if (session.style==6){
+
+ session.rpcs[UUID].canvasCtx.fillStyle = "rgb(0,0,0)";
+ session.rpcs[UUID].canvasCtx.fillRect(0, 0, session.rpcs[UUID].canvas.width, session.rpcs[UUID].canvas.height);
+
+ var r = Math.random()*150+50;
+ var g = Math.random()*150+50;
+ var b = Math.random()*150+50;
+ session.rpcs[UUID].canvasCtx.fillStyle = "rgb("+r+", "+g+", "+b+")";
+ session.rpcs[UUID].canvasCtx.beginPath();
+ session.rpcs[UUID].canvasCtx.arc(parseInt(session.rpcs[UUID].canvas.width/2), parseInt(session.rpcs[UUID].canvas.height/2), parseInt(session.rpcs[UUID].canvas.height/4), 0, 2 * Math.PI, false);
+ session.rpcs[UUID].canvasCtx.fill();
+
+ if (session.rpcs[UUID].label){
+ session.rpcs[UUID].canvasCtx.fillStyle = "rgb(0,0,0)";
+ session.rpcs[UUID].canvasCtx.textAlign = "center";
+ session.rpcs[UUID].canvasCtx.font = parseInt(session.rpcs[UUID].canvas.height/2.11)+"px Arial";
+ session.rpcs[UUID].canvasCtx.fillText(session.rpcs[UUID].label[0].toUpperCase(), parseInt(session.rpcs[UUID].canvas.width/2), parseInt(session.rpcs[UUID].canvas.height*2/3));
+ } else {
+ var tmp = getComputedStyle(document.querySelector(':root')).getPropertyValue('--video-background-image').split('"');
+ if (tmp.length===3){
+ var img = new Image();
+ img.onload = function() {
+ session.rpcs[UUID].canvasCtx.fillStyle = "rgb(25,0,0)";
+ session.rpcs[UUID].canvasCtx.drawImage(img, parseInt(session.rpcs[UUID].canvas.width/2-110), parseInt(session.rpcs[UUID].canvas.height/2-110),220,220);
+ }
+ img.src = tmp[1];
+ }
+ }
+ }
+}
+
+function capitalizeFirstLetter(string) {
+ return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function fftWaveform( source, UUID, trackid){ // append the delay Node to the track??? WOULD THIS WORK?
+ // https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
+ session.rpcs[UUID].inboundAudioPipeline[trackid].analyser = session.audioCtx.createAnalyser();
+ session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.fftSize = 512;
+ var bufferLength = session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.frequencyBinCount;
+ var dataArray = new Uint8Array(bufferLength);
+ session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.getByteTimeDomainData(dataArray);
+ // analyser.getByteTimeDomainData(dataArray);
+ source.connect(session.rpcs[UUID].inboundAudioPipeline[trackid].analyser);
+
+ createStyleCanvas(UUID);
+ clearInterval(session.rpcs[UUID].canvasIntervalAction);
+ var canvasIntervalAction = setInterval(function(uuid){
+
+ if (session.style!==2){
+ clearInterval(canvasIntervalAction); // this is FFT only, so okay to kill.
+ return;
+ }
+
+ try{
+ session.rpcs[uuid].inboundAudioPipeline[trackid].analyser.getByteTimeDomainData(dataArray);
+ session.rpcs[uuid].canvasCtx.fillStyle = "rgba(0, 0, 0, 0.1)";
+ session.rpcs[uuid].canvasCtx.fillRect(0, 0, session.rpcs[uuid].canvas.width, session.rpcs[uuid].canvas.height);
+ session.rpcs[uuid].canvasCtx.lineWidth = 10;
+ session.rpcs[uuid].canvasCtx.strokeStyle = "rgb(111, 255, 111)";
+
+ var sliceWidth = session.rpcs[uuid].canvas.width * 1.0 / bufferLength;
+
+ var loudness = dataArray;
+ var Squares = loudness.map((val) => ((val-128.0)*(val-128.0)));
+ var Sum = Squares.reduce((acum, val) => (acum + val));
+ var Mean = Sum/loudness.length;
+ loudness = Math.sqrt(Mean)*10;
+ session.rpcs[uuid].stats.Audio_Loudness = parseInt(loudness);
+
+ if (session.pushLoudness==true){
+ var loudnessObj = {};
+ loudnessObj[session.rpcs[uuid].streamID] = session.rpcs[uuid].stats.Audio_Loudness;
+
+ if (isIFrame){
+ parent.postMessage({"loudness": loudnessObj, "action":"loudness", "value":loudness, "UUID":uuid}, session.iframetarget);
+ }
+ }
+
+ if (loudness<2){return;}
+
+ //log(bufferLength);
+ session.rpcs[uuid].canvasCtx.beginPath();
+ var m = session.rpcs[uuid].canvas.height / 256.0;
+ session.rpcs[uuid].canvasCtx.moveTo(0, dataArray[0]*m);
+ var x = 0;
+ for (var i = 1; i < bufferLength; i++){
+ var y = dataArray[i] * m;
+ session.rpcs[uuid].canvasCtx.lineTo(x, y);
+ x += sliceWidth;
+ }
+ session.rpcs[uuid].canvasCtx.lineTo(session.rpcs[uuid].canvas.width, session.rpcs[uuid].canvas.height / 2);
+ session.rpcs[uuid].canvasCtx.stroke();
+ } catch(e){
+ warnlog(e);
+ warnlog("Did the remote source disconnect?");
+ clearInterval(canvasIntervalAction);
+ warnlog(session.rpcs[uuid]);
+ }
+ },50, UUID);
+ session.rpcs[UUID].canvasIntervalAction = canvasIntervalAction;
+ return session.rpcs[UUID].inboundAudioPipeline[trackid].analyser;
+}
+
+function audioMeterGuest(mediaStreamSource, UUID, trackid){
+ log("audioMeterGuest started");
+ session.rpcs[UUID].inboundAudioPipeline[trackid].analyser = session.audioCtx.createAnalyser();
+ mediaStreamSource.connect(session.rpcs[UUID].inboundAudioPipeline[trackid].analyser);
+ session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.fftSize = 256;
+ session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.smoothingTimeConstant = 0.05;
+
+ var bufferLength = session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.frequencyBinCount;
+ var dataArray = new Uint8Array(bufferLength);
+
+ function updateLevels() {
+
+ if (!session.rpcs || !(UUID in session.rpcs)){return;}
+ try {
+ session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.getByteFrequencyData(dataArray);
+ var total = 0;
+ for (var i = 0; i < dataArray.length; i++){
+ total += dataArray[i];
+ }
+ total = total/100;
+ session.rpcs[UUID].stats.Audio_Loudness = parseInt(total);
+
+ if (session.pushLoudness==true){
+ var loudnessObj = {};
+ loudnessObj[session.rpcs[UUID].streamID] = session.rpcs[UUID].stats.Audio_Loudness;
+
+ if (isIFrame){
+ parent.postMessage({"loudness": loudnessObj, "action":"loudness", "value":session.rpcs[UUID].stats.Audio_Loudness, "UUID":UUID}, session.iframetarget);
+ }
+ }
+
+ try{
+ clearTimeout(session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.interval);
+ session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.interval = setTimeout(function(){updateLevels();},100);
+ } catch(e){
+ log("closing old inaudio pipeline");
+ }
+
+ if (session.style==3 || session.meterStyle){ // overrides style
+ // continue
+ } else if (session.scene!==false){ // if a scene, cancel
+ return;
+ } else if (session.audioMeterGuest===false){ // don't show if we just want the volume levels
+ return;
+ }
+
+ if (session.rpcs[UUID].voiceMeter){
+ session.rpcs[UUID].voiceMeter.dataset.level = total;
+ if (session.meterStyle==1){
+ session.rpcs[UUID].voiceMeter.style.height = Math.min(total,100) + "%";
+ if (total>75){
+ total = Math.min(100,(total - 75)*4);
+ var R = parseInt((255 * total) / 100).toString(16).padStart(2, '0');
+ var G = parseInt(255 * (100 - total) / 100).toString(16).padStart(2, '0');
+ session.rpcs[UUID].voiceMeter.style.backgroundColor = "#" + R + G + "00";
+ } else {
+ session.rpcs[UUID].voiceMeter.style.backgroundColor = "#00FF00";
+ }
+ } else {
+ if (total>15){
+ session.rpcs[UUID].voiceMeter.style.opacity = 100; // temporary
+ } else {
+ session.rpcs[UUID].voiceMeter.style.opacity = 0; // temporary
+ }
+ }
+
+ } else {
+ session.rpcs[UUID].voiceMeter = document.createElement("div");
+ session.rpcs[UUID].voiceMeter.id = "voiceMeter_"+UUID;
+ session.rpcs[UUID].voiceMeter.dataset.level = total;
+ if (session.meterStyle==1){
+ session.rpcs[UUID].voiceMeter.classList.add("video-meter2");
+ } else {
+ if (total>15){
+ session.rpcs[UUID].voiceMeter.style.opacity = 100; // temporary
+ } else {
+ session.rpcs[UUID].voiceMeter.style.opacity = 0; // temporary
+ }
+ if (session.meterStyle==2){
+ session.rpcs[UUID].voiceMeter.classList.add("video-meter-2");
+ } else {
+ session.rpcs[UUID].voiceMeter.classList.add("video-meter");
+ }
+ }
+ updateMixer();
+ }
+
+ } catch(e){
+ warnlog(e);
+ return;
+ }
+ };
+ clearTimeout(session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.interval);
+ session.rpcs[UUID].inboundAudioPipeline[trackid].analyser.interval = setTimeout(function(){updateLevels();},100);
+ return session.rpcs[UUID].inboundAudioPipeline[trackid].analyser;
+}
+
+function effectsDynamicallyUpdate(event, ele){
+ log("effectsDynamicallyUpdate");
+ session.effect = ele.options[ele.selectedIndex].value;
+
+ getById("selectImageTFLITE").style.display = "none";
+ getById("selectImageTFLITE3").style.display = "none";
+ getById("selectEffectAmount").style.display = "none";
+ getById("selectEffectAmount3").style.display = "none";
+
+ if (session.effect === "1"){
+ updateRenderOutpipe();
+ return;
+ }
+
+ if (session.effect === "7"){
+ getById("selectEffectAmount").style.display = "block";
+ getById("selectEffectAmount3").style.display = "block";
+ session.effectValue = 1.0;
+ getById("selectEffectAmountInput").min = 1;
+ getById("selectEffectAmountInput").max = 1.99;
+ getById("selectEffectAmountInput").step = 0.01
+ getById("selectEffectAmountInput3").min = 1;
+ getById("selectEffectAmountInput3").max = 1.99;
+ getById("selectEffectAmountInput3").step = 0.01
+
+ getById("selectEffectAmountInput").value = session.effectValue;
+ getById("selectEffectAmountInput3").value = session.effectValue;
+ updateRenderOutpipe();
+ return;
+ }
+
+ if (session.effect == "3a"){
+ session.effect = "3";
+ session.effectValue = 5;
+ }
+ if ((session.effectValue_default===false) && (session.effect=="3")){
+ session.effectValue = 2;
+ } else {
+ session.effectValue = session.effectValue_default;
+ }
+
+ if (session.effect == "0" || !session.effect){
+ updateRenderOutpipe();
+ return;
+ } else if (session.effect === "3" || session.effect === "4"){
+ attemptTFLiteJsFileLoad();
+ if (!session.tfliteModule.looping){
+ updateRenderOutpipe();
+ }
+ if ((session.effect === "3") && (session.effectValue_default==false)){
+ getById("selectEffectAmount").style.display = "block";
+ getById("selectEffectAmount3").style.display = "block";
+
+ getById("selectEffectAmountInput").min = 0;
+ getById("selectEffectAmountInput").max = 20;
+ getById("selectEffectAmountInput").step = 1;
+ getById("selectEffectAmountInput3").min = 0;
+ getById("selectEffectAmountInput3").max = 20;
+ getById("selectEffectAmountInput3").step = 1;
+
+ getById("selectEffectAmountInput").value = session.effectValue;
+ getById("selectEffectAmountInput3").value = session.effectValue;
+ }
+ } else if (session.effect === "5"){
+ attemptTFLiteJsFileLoad();
+ if (!session.tfliteModule.looping){
+ updateRenderOutpipe();
+ }
+ loadTFLITEImages();
+ } else if (session.effect === "6"){
+ if (!gpgpuSupport){
+ if (!session.cleanOutput){
+ warnUser("Hardware acceleration isn't detected.
This effect will not work",4000,false);
+ return;
+ }
+ } else if (gpgpuSupport == "Google SwiftShader"){
+ if (!session.cleanOutput){
+ warnUser("Hardware acceleration isn't detected.
Please enable it for this effect to work correctly.
Please use the Electron Capture app if there are further problems or if you wish to use StreamLabs on macOS still.
\
+ You can bypass this error message by refreshing, Clicking Here, or by adding &streamlabs to the URL, but it may still not actually work.\
+ \
+ Please report this problem to steve@seguin.email if you feel it is an error.\
+
";
+ }
+ }
+ }
+
+ //if (navigator.userAgent.indexOf('Mac OS X') != -1) {
+ // session.codec = "h264"; // default the codec to h264 if OBS is on macOS (that's all it supports with hardware) // oct 2021, OBS now supports vp8 and actually breaks with h264 android devices.
+ //}
+
+ if (session.disableOBS===false){
+ if (typeof document.visibilityState !== "undefined"){
+ session.obsState.visibility = document.visibilityState==="visible";
+ }
+
+ getOBSDetails();
+
+ window.addEventListener("obsSourceVisibleChanged", obsSourceVisibleChanged);
+ window.addEventListener("obsSourceActiveChanged", obsSourceActiveChanged);
+ window.addEventListener("obsSceneChanged", obsSceneChanged);
+ window.addEventListener("obsStreamingStarted", obsStreamingStarted);
+ window.addEventListener("obsStreamingStopped", obsStreamingStopped);
+ window.addEventListener("obsRecordingStarted", obsRecordingStarted);
+ window.addEventListener("obsRecordingStopped", obsRecordingStopped);
+ window.addEventListener("obsVirtualcamStarted", obsVirtualcamStarted);
+ window.addEventListener("obsVirtualcamStopped", obsVirtualcamStopped);
+ }
+
+ } catch (e) {
+ errorlog(e);
+ }
+ }
+
+ if (urlParams.has('chroma')) {
+ log("Chroma ENABLED");
+ getById("main").style.backgroundColor = "#" + (urlParams.get('chroma') || "0F0");
+ } // else if (window.obsstudio || (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1)){
+ // getById("main").style.backgroundColor = "rgba(0,0,0,0)";
+ //}
+
+ //if (urlParams.has('bgimg')){
+ //
+ // getById("main").style.background = "#" + (urlParams.get('chroma') || "0F0");
+ //}
+
+ if (urlParams.has('margin')) {
+ try {
+ session.videoMargin = urlParams.get('margin') || 10;
+ session.videoMargin = parseInt(session.videoMargin);
+ //document.querySelector(':root').style.setProperty('--video-margin', session.videoMargin+"px");
+ } catch(e){errorlog("variable css failed");}
+ }
+
+ if (urlParams.has('rounded') || urlParams.has('round')) {
+ try {
+ session.borderRadius = urlParams.get('rounded') || urlParams.get('round') || 50;
+ session.borderRadius = parseInt(session.borderRadius);
+ document.querySelector(':root').style.setProperty('--video-rounded', session.borderRadius+"px");
+ } catch(e){errorlog("variable css failed");}
+
+ }
+
+ if (urlParams.has('border')) {
+ try {
+ var videoBorder = urlParams.get('border') || 10;
+ videoBorder = parseInt(videoBorder);
+ session.border = videoBorder;
+ videoBorder+="px";
+ document.querySelector(':root').style.setProperty('--video-border-color', "#000");
+ document.querySelector(':root').style.setProperty('--video-border', videoBorder);
+
+ } catch(e){errorlog("variable css failed");}
+
+ }
+
+ if (urlParams.has('bordercolor')) {
+ try {
+ session.borderColor = urlParams.get('bordercolor') || "#000";
+ document.querySelector(':root').style.setProperty('--video-border-color', session.borderColor);
+ } catch(e){errorlog("variable css failed");}
+ }
+
+
+
+ if (urlParams.has('retry')) {
+ session.forceRetry = parseInt(urlParams.get('retry')) || 30;
+ }
+
+ if (session.forceRetry){
+ setTimeout(function(){
+ try {
+ session.retryWatchInterval();
+ } catch(e){
+ warnlog(e);
+ clearTimeout(this);
+ }
+ },30000);
+ }
+
+ try {
+ if (urlParams.has("darkmode") || urlParams.has("nightmode")){
+ session.darkmode = urlParams.get("darkmode") || urlParams.get("nightmode") || null;
+ if ((session.darkmode===null) || (session.darkmode === "")){
+ session.darkmode=true;
+ } else if ((darkmode=="false") || (darkmode == "0") || (darkmode == 0) || (darkmode == "off")){
+ session.darkmode=false;
+ }
+ } else if (urlParams.has("lightmode") || urlParams.has("lightmode")){
+ session.darkmode = false;
+ } else {
+ session.darkmode = getComputedStyle(document.querySelector(':root')).getPropertyValue('--color-mode').trim();
+ if (session.darkmode == "dark"){
+ session.darkmode = true;
+ } else {
+ session.darkmode = false;
+ }
+ }
+ if (session.darkmode){
+ document.body.classList.add("darktheme");
+ document.querySelector(':root').style.setProperty('--background-color',"#02050c" );
+ } else {
+ document.body.classList.remove("darktheme");
+ //document.querySelector(':root').style.setProperty('--background-color',"#141926" ); // already set as default.
+ }
+ } catch(e){errorlog(e);}
+
+ if (urlParams.has("videodevice") || urlParams.has("vdevice") || urlParams.has('vd') || urlParams.has('device') || urlParams.has('d') || urlParams.has('vdo')) {
+
+ session.videoDevice = urlParams.get("videodevice") || urlParams.get("vdevice") || urlParams.get("vd") || urlParams.get("device") || urlParams.get("d") || urlParams.get("vdo");
+
+ if (session.videoDevice === null) {
+ session.videoDevice = "1";
+ } else if (session.videoDevice) {
+ session.videoDevice = session.videoDevice.toLowerCase().replace(/[\W]+/g, "_");
+ }
+ if (session.videoDevice == "false") {
+ session.videoDevice = 0;
+ } else if (session.videoDevice == "0") {
+ session.videoDevice = 0;
+ } else if (session.videoDevice == "no") {
+ session.videoDevice = 0;
+ } else if (session.videoDevice == "off") {
+ session.videoDevice = 0;
+ } else if (session.videoDevice == "snapcam") {
+ session.videoDevice = "snap_camera";
+ } else if (session.videoDevice == "canon") {
+ session.videoDevice = "eos";
+ } else if (session.videoDevice == "camlink") {
+ session.videoDevice = "cam_link";
+ } else if (session.videoDevice == "ndi") {
+ session.videoDevice = "newtek_ndi_video";
+ } else if (session.videoDevice == "") {
+ session.videoDevice = 1;
+ } else if (session.videoDevice == "1") {
+ session.videoDevice = 1;
+ } else if (session.videoDevice == "default") {
+ session.videoDevice = 1;
+ } else {
+ // whatever the user entered I guess, santitized.
+ session.videoDevice = session.videoDevice.replace(/[\W]+/g, "_").toLowerCase();
+ }
+
+ if (!urlParams.has('vdo')){
+ getById("videoMenu").style.display = "none";
+ }
+ log("session.videoDevice:" + session.videoDevice);
+ }
+
+
+ // audioDevice
+ if (urlParams.has('audiodevice') || urlParams.has('adevice') || urlParams.has('ad') || urlParams.has('device') || urlParams.has('d')) {
+
+ session.audioDevice = urlParams.get("audiodevice") || urlParams.get("adevice") || urlParams.get("ad") || urlParams.get("device") || urlParams.get("d");
+
+ if (session.audioDevice === null) {
+ session.audioDevice = "1";
+ } //else if (session.audioDevice) {
+ // session.audioDevice = session.audioDevice.toLowerCase().replace(/[\W]+/g, "_");
+ //}
+
+ if (session.audioDevice == "false") {
+ session.audioDevice = 0;
+ } else if (session.audioDevice == "0") {
+ session.audioDevice = 0;
+ } else if (session.audioDevice == "no") {
+ session.audioDevice = 0;
+ } else if (session.audioDevice == "off") {
+ session.audioDevice = 0;
+ } else if (session.audioDevice == "") {
+ session.audioDevice = 1;
+ } else if (session.audioDevice == "1") {
+ session.audioDevice = 1;
+ } else if (session.audioDevice == "default") {
+ session.audioDevice = 1;
+ } else if (session.audioDevice == "ndi") {
+ session.audioDevice = ["line_newtek_ndi_audio"];
+ } else {
+ // whatever the user entered I guess
+ session.audioDevice = session.audioDevice.split(",");
+ for (var i =0;i 300) {
- session.minptime = 300;
- }
-}
-
-if (urlParams.has('maxptime')) {
- session.maxptime = parseInt(urlParams.get('maxptime')) || 60;
- if (session.maxptime < 10) {
- session.maxptime = 10;
- }
- if (session.maxptime > 300) {
- session.maxptime = 300;
- }
-}
-
-if (urlParams.has('ptime')) {
- session.ptime = parseInt(urlParams.get('ptime')) || 20;
- if (session.minptime < 10) {
- session.ptime = 10;
- }
- if (session.minptime > 300) {
- session.ptime = 300;
- }
-}
-
-
-if (urlParams.has('codec')) {
- log("CODEC CHANGED");
- session.codec = urlParams.get('codec').toLowerCase();
- if (session.codec=="webp"){
- session.webp = true;
- session.codec = false;
- }
-} //else if (window.obsstudio){
-//if (session.obsfix===false){
-// session.codec = "h264"; // H264 --- It's too laggy for many!!!
-//}
-//}
-
-if (urlParams.has('nonacks')){ // disables error control / throttling.
- session.noNacks = true;
-}
-if (urlParams.has('nopli')){ // disables error control / throttling.
- session.noPLIs = true;
-}
-if (urlParams.has('noremb')){ // disables error control / throttling.
- session.noREMB = true;
-}
-
-if (urlParams.has('scale')) {
- if (urlParams.get('scale') == "false") {} else if (urlParams.get('scale') == "0") {} else if (urlParams.get('scale') == "no") {} else if (urlParams.get('scale') == "off") {} else {
- log("Resolution scale requested");
- session.scale = parseInt(urlParams.get('scale')) || 100;
- }
- session.dynamicScale = false; // default true
-}
-
-var ConfigSettings = getById("main-js");
-var ln_template = false;
-var translation = false;
-try {
- if (ConfigSettings) {
- ln_template = ConfigSettings.getAttribute('data-translation'); // Translations
- if (typeof ln_template === "undefined") {
- ln_template = false;
- } else if (ln_template === null) {
- ln_template = false;
+ if (urlParams.has('minptime')) {
+ session.minptime = parseInt(urlParams.get('minptime')) || 10;
+ if (session.minptime < 10) {
+ session.minptime = 10;
+ }
+ if (session.minptime > 300) {
+ session.minptime = 300;
}
}
- if (urlParams.has('ln')) {
- ln_template = urlParams.get('ln');
- }
-} catch (e) {
- errorlog(e);
-}
-
-if (ln_template) { // checking if manual lanuage override enabled
- try {
- log("Template: " + ln_template);
- fetch("./translations/" + ln_template + '.json').then(function(response) {
- if (response.status !== 200) {
- log('Looks like there was a problem. Status Code: ' +
- response.status);
- return;
- }
- response.json().then(function(data) {
- log(data);
- translation = data;
- var trans = data.innerHTML;
- var allItems = document.querySelectorAll('[data-translate]');
- allItems.forEach(function(ele) {
- if (ele.dataset.translate in trans) {
- ele.innerHTML = trans[ele.dataset.translate];
- }
- });
- trans = data.titles;
- var allTitles = document.querySelectorAll('[title]');
- allTitles.forEach(function(ele) {
- var key = ele.title.replace(/[\W]+/g, "-").toLowerCase();
- if (key in trans) {
- ele.title = trans[key];
- }
- });
- trans = data.placeholders;
- var allPlaceholders = document.querySelectorAll('[placeholder]');
- allPlaceholders.forEach(function(ele) {
- var key = ele.placeholder.replace(/[\W]+/g, "-").toLowerCase();
- if (key in trans) {
- ele.placeholder = trans[key];
- }
- });
-
-
- getById("mainmenu").style.opacity = 1;
- }).catch(function(err) {
- errorlog(err);
- getById("mainmenu").style.opacity = 1;
- });
- }).catch(function(err) {
- errorlog(err);
- getById("mainmenu").style.opacity = 1;
- });
-
- } catch (error) {
- errorlog(error);
- getById("mainmenu").style.opacity = 1;
- }
-} else if (location.hostname !== "obs.ninja") {
- if (location.hostname === "rtc.ninja") {
- try {
- if (session.label === false) {
- document.title = "";
- }
- getById("qos").innerHTML = "";
- getById("logoname").innerHTML = "";
- getById("helpbutton").style.display = "none";
- getById("helpbutton").style.opacity = 0;
- getById("reportbutton").style.display = "none";
- getById("reportbutton").style.opacity = 0;
- getById("mainmenu").style.opacity = 1;
- getById("mainmenu").style.margin = "30px 0";
- getById("translateButton").style.display = "none";
- getById("translateButton").style.opacity = 0;
- getById("info").style.display = "none";
- getById("info").style.opacity = 0;
- getById("chatBody").innerHTML = "";
- } catch (e) {}
- }
- try {
- fetch("./translations/blank.json").then(function(response) {
- if (response.status !== 200) {
- log('Looks like there was a problem. Status Code: ' +
- response.status);
- return;
- }
- response.json().then(function(data) {
- log(data);
-
- var trans = data.innerHTML;
- var allItems = document.querySelectorAll('[data-translate]');
- allItems.forEach(function(ele) {
- if (ele.dataset.translate in trans) {
- ele.innerHTML = trans[ele.dataset.translate];
- }
- });
- trans = data.titles;
- var allTitles = document.querySelectorAll('[title]');
- allTitles.forEach(function(ele) {
- var key = ele.title.replace(/[\W]+/g, "-").toLowerCase();
- if (key in trans) {
- ele.title = trans[key];
- }
- });
- trans = data.placeholders;
- var allPlaceholders = document.querySelectorAll('[placeholder]');
- allPlaceholders.forEach(function(ele) {
- var key = ele.placeholder.replace(/[\W]+/g, "-").toLowerCase();
- if (key in trans) {
- ele.placeholder = trans[key];
- }
- });
-
- if (session.label === false) {
- document.title = location.hostname;
- }
- getById("qos").innerHTML = location.hostname;
- getById("logoname").innerHTML = getById("qos").outerHTML;
- getById("helpbutton").style.display = "none";
- getById("reportbutton").style.display = "none";
- getById("mainmenu").style.opacity = 1;
- }).catch(function(err) {
- errorlog(err);
- getById("mainmenu").style.opacity = 1;
- });
- }).catch(function(err) {
- errorlog(err);
- getById("mainmenu").style.opacity = 1;
- });
- if (session.label === false) {
- document.title = location.hostname;
+ if (urlParams.has('maxptime')) {
+ session.maxptime = parseInt(urlParams.get('maxptime')) || 60;
+ if (session.maxptime < 10) {
+ session.maxptime = 10;
}
- getById("qos").innerHTML = location.hostname;
- getById("logoname").innerHTML = getById("qos").outerHTML;
- getById("helpbutton").style.display = "none";
- getById("reportbutton").style.display = "none";
- getById("chatBody").innerHTML = "";
- } catch (error) {
- errorlog(error);
- }
-} else { // check if automatic language translation is available
- getById("mainmenu").style.opacity = 1;
-}
-
-try {
- if (location.hostname === "rtc.ninja") { // an extra-brand-free version of OBS.Ninja
- if (session.label === false) {
- document.title = "";
+ if (session.maxptime > 300) {
+ session.maxptime = 300;
}
- getById("qos").innerHTML = "";
- getById("logoname").innerHTML = "";
+ }
+
+ if (urlParams.has('contenthint') || urlParams.has('contenttype') || urlParams.has('content') || urlParams.has('hint')) {
+ session.contentHint = urlParams.get('contenthint') || urlParams.get('contenttype') || urlParams.get('content') || urlParams.get('hint') || "detail";
+ }
+
+ if (urlParams.has('audiocontenthint') || urlParams.has('audiocontenttype') || urlParams.has('audiocontent') || urlParams.has('audiohint')) {
+ session.audioContentHint = urlParams.get('audiocontenthint') || urlParams.get('audiocontenttype') || urlParams.get('audiocontent') || urlParams.get('audiohint') || "music";
+ }
+
+ if (urlParams.has('screensharecontenthint') || urlParams.has('sscontenthint') || urlParams.has('screensharecontenttype') || urlParams.has('sscontent') || urlParams.has('sshint')) {
+ session.screenshareContentHint = urlParams.get('screensharecontenthint') || urlParams.get('sscontenthint') || urlParams.get('screensharecontenttype') || urlParams.get('sscontent') || urlParams.get('sshint') || "detail";
+ }
+
+
+ if (urlParams.has('codec')) {
+ log("CODEC CHANGED");
+ session.codec = urlParams.get('codec') || false;
+ if (session.codec){
+ session.codec = session.codec.toLowerCase();
+ }
+ } else if (OperaGx){
+ session.codec = "vp8";
+ warnlog("Defaulting to VP8 manually, as H264 with remote iOS devices is not supported");
+ }
+
+ if (urlParams.has('audiocodec')) {
+ log("CODEC CHANGED");
+ session.audioCodec = urlParams.get('audiocodec') || false;
+ if (session.audioCodec){
+ session.audioCodec = session.audioCodec.toLowerCase();
+ }
+ }
+
+ if (urlParams.has('scenelinkcodec')){ // this is mainly for a niche iframe API use
+ log("codecGroupFlag CHANGED");
+ session.codecGroupFlag = urlParams.get('scenelinkcodec') || false;
+ if (session.codecGroupFlag){
+ session.codecGroupFlag = "&codec="+session.codecGroupFlag.toLowerCase();
+ }
+ }
+ if (urlParams.has('scenelinkbitrate')){ // this is mainly for a niche iframe API use
+ log("bitrateGroupFlag CHANGED");
+ session.bitrateGroupFlag = urlParams.get('scenelinkbitrate') || false;
+ if (session.bitrateGroupFlag){
+ session.bitrateGroupFlag = "&totalbitrate="+parseInt(session.bitrateGroupFlag);
+ }
+ }
+
+
+ if (urlParams.has('h264profile')) {
+ session.h264profile = urlParams.get('h264profile') || "42e01f"; // 42001f
+ session.h264profile = session.h264profile.substring(0, 6);
+ session.h264profile = session.h264profile.toLowerCase();
+ if (session.h264profile=="0"){
+ session.h264profile = false;
+ } else if (session.h264profile=="off"){
+ session.h264profile = false;
+ } else if (session.h264profile=="disabl"){
+ session.h264profile = false;
+ } else if (session.h264profile=="defaul"){
+ session.h264profile = false;
+ } else if (session.h264profile=="false"){
+ session.h264profile = false;
+ }
+ } else if ((session.codec==="hardware") && Android){ // same as &h264profile, but easier for me to remember. I'll try to automate this in the future.
+ session.codec = "h264";
+ session.h264profile = "42e01f";
+ }
+
+ if (urlParams.has('nofec')){ // disables error control / throttling -- currently on audio
+ session.noFEC = true;
+ }
+ if (urlParams.has('nonacks')){ // disables error control / throttling.
+ session.noNacks = true;
+ }
+ if (urlParams.has('nopli')){ // disables error control / throttling.
+ session.noPLIs = true;
+ }
+ if (urlParams.has('noremb')){ // disables error control / throttling.
+ session.noREMB = true;
+ }
+
+ if (urlParams.has('scale')) {
+ if (urlParams.get('scale') == "false") {} else if (urlParams.get('scale') == "0") {} else if (urlParams.get('scale') == "no") {} else if (urlParams.get('scale') == "off") {} else {
+ log("Resolution scale requested");
+ session.scale = parseFloat(urlParams.get('scale')) || 100;
+ }
+ session.dynamicScale = false; // default true
+ } else {
+ if (urlParams.has('viewwidth') || urlParams.has('vw')) {
+ session.viewwidth = urlParams.get('viewwidth') || urlParams.get('vw') ||false;
+ session.dynamicScale = false; // default true
+ }
+ if (urlParams.has('viewheight') || urlParams.has('vh')) {
+ session.viewheight = urlParams.get('viewheight') || urlParams.get('vh') ||false;
+ session.dynamicScale = false; // default true
+ }
+ }
+
+ if (urlParams.has('sharperscreen')) { // sets scale to 100 for inbound screenshares only
+ session.sharperScreen = true;
+ }
+
+ if (urlParams.has('mcscale') || urlParams.has('meshcastscale')) {
+ session.meshcastScale = parseFloat(urlParams.get('mcscale')) || parseFloat(urlParams.get('meshcastscale')) || 100;
+ }
+
+
+ if (isIFrame) {
getById("helpbutton").style.display = "none";
getById("helpbutton").style.opacity = 0;
getById("reportbutton").style.display = "none";
getById("reportbutton").style.opacity = 0;
- getById("mainmenu").style.opacity = 1;
- getById("mainmenu").style.margin = "30px 0";
- getById("translateButton").style.display = "none";
- getById("translateButton").style.opacity = 0;
- getById("info").style.display = "none";
- getById("info").style.opacity = 0;
+ getById("calendarButton").style.display = "none";
+ getById("calendarButton").style.opacity = 0;
getById("chatBody").innerHTML = "";
- } else if (location.hostname !== "obs.ninja") {
- if (session.label === false) {
- document.title = location.hostname;
+ }
+
+ if (urlParams.has('beep') || urlParams.has('notify') || urlParams.has('tone')) {
+ session.beepToNotify = true;
+ var addtone = createAudioElement();
+ addtone.id = "jointone";
+ addtone.src = "./media/join.mp3";
+ getById("testtone").parentNode.insertBefore(addtone, getById("testtone").nextSibling)
+ var addtone = createAudioElement();
+ addtone.id = "leavetone";
+ addtone.src = "./media/leave.mp3";
+ getById("testtone").parentNode.insertBefore(addtone, getById("testtone").nextSibling)
+
+ if (!Notification) {
+ warnlog('Desktop notifications are not available in your browser.');
+ } else if (Notification.permission !== 'granted') {
+ Notification.requestPermission();
}
- getById("qos").innerHTML = sanitizeLabel(location.hostname);
- getById("logoname").innerHTML = getById("qos").outerHTML;
- getById("helpbutton").style.display = "none";
- getById("reportbutton").style.display = "none";
+
}
-
-} catch (e) {}
-
-if (isIFrame) {
- getById("helpbutton").style.display = "none";
- getById("helpbutton").style.opacity = 0;
- getById("reportbutton").style.display = "none";
- getById("reportbutton").style.opacity = 0;
- getById("chatBody").innerHTML = "";
-}
-
-function miniTranslate(ele, ident = false) {
- if (ident) {
- ele.dataset.translate = ident;
- } else {
- ident = ele.dataset.translate;
+ if (urlParams.has('r2d2')) {
+ /* var addtone = createAudioElement();
+ addtone.id = "jointone";
+ addtone.src = "./media/join.mp3";
+ getById("testtone").parentNode.insertBefore(addtone, getById("testtone").nextSibling)
+ var addtone = createAudioElement();
+ addtone.id = "leavetone";
+ addtone.src = "./media/leave.mp3";
+ getById("testtone").parentNode.insertBefore(addtone, getById("testtone").nextSibling) */
+ getById("testtone").innerHTML = "";
+ getById("testtone").src = "./media/robot.mp3";
+ session.beepToNotify = true;
}
- try {
- if (ident in translation.innerHTML) {
- ele.innerHTML = translation.innerHTML[ident];
- }
- } catch (e) {}
-}
-
-function changeLg(lang) {
- fetch("./translations/" + lang + '.json').then(function(response) {
- if (response.status !== 200) {
- logerror('Language translation file not found.' + response.status);
- return;
- }
- response.json().then(function(data) {
- log(data);
- translation = data; // translation.innerHTML[ele.dataset.translate]
- var trans = data.innerHTML;
- var allItems = document.querySelectorAll('[data-translate]');
- allItems.forEach(function(ele) {
- if (ele.dataset.translate in trans) {
- ele.innerHTML = trans[ele.dataset.translate];
- }
- });
- trans = data.titles;
- var allTitles = document.querySelectorAll('[title]');
- allTitles.forEach(function(ele) {
- var key = ele.title.replace(/[\W]+/g, "-").toLowerCase();
- if (key in trans) {
- ele.title = trans[key];
- }
- });
- trans = data.placeholders;
- var allPlaceholders = document.querySelectorAll('[placeholder]');
- allPlaceholders.forEach(function(ele) {
- var key = ele.placeholder.replace(/[\W]+/g, "-").toLowerCase();
- if (key in trans) {
- ele.placeholder = trans[key];
- }
- });
- });
- }).catch(function(err) {
- errorlog(err);
- });
-}
-
-if (urlParams.has('beep') || urlParams.has('notify') || urlParams.has('tone')) {
- session.beepToNotify = true;
-}
-
-if (urlParams.has('r2d2')) {
- getById("testtone").innerHTML = "";
- getById("testtone").src = "./media/robot.mp3";
- session.beepToNotify = true;
-}
-
-if (urlParams.has('videobitrate') || urlParams.has('bitrate') || urlParams.has('vb')) {
- session.bitrate = urlParams.get('videobitrate') || urlParams.get('bitrate') || urlParams.get('vb');
- if (session.bitrate) {
- if ((session.view_set) && (session.bitrate.split(",").length > 1)) {
- session.bitrate_set = session.bitrate.split(",");
- session.bitrate = parseInt(session.bitrate_set[0]);
- } else {
- session.bitrate = parseInt(session.bitrate);
- }
- if (session.bitrate < 1) {
- session.bitrate = false;
- }
- log("BITRATE ENABLED");
- log(session.bitrate);
-
- }
-}
-
-if (urlParams.has('maxvideobitrate') || urlParams.has('maxbitrate') || urlParams.has('mvb')) {
- session.maxvideobitrate = urlParams.get('maxvideobitrate') || urlParams.get('maxbitrate') || urlParams.get('mvb');
- session.maxvideobitrate = parseInt(session.maxvideobitrate);
-
- if (session.maxvideobitrate < 1) {
- session.maxvideobitrate = false;
- }
- log("maxvideobitrate ENABLED");
- log(session.maxvideobitrate);
-}
-
-if (urlParams.has('totalroombitrate') || urlParams.has('totalroomvideobitrate') || urlParams.has('trb')) {
- session.totalRoomBitrate = urlParams.get('totalroombitrate') || urlParams.get('totalroomvideobitrate') || urlParams.get('trb');
- session.totalRoomBitrate = parseInt(session.totalRoomBitrate);
-
- if (session.totalRoomBitrate < 1) {
- session.totalRoomBitrate = false;
- }
- log("totalRoomBitrate ENABLED");
- log(session.totalRoomBitrate);
-}
-
-
-if (urlParams.has('height') || urlParams.has('h')) {
- session.height = urlParams.get('height') || urlParams.get('h');
- session.height = parseInt(session.height);
-}
-
-if (urlParams.has('width') || urlParams.has('w')) {
- session.width = urlParams.get('width') || urlParams.get('w');
- session.width = parseInt(session.width);
-}
-
-if (urlParams.has('quality') || urlParams.has('q')) {
- try {
- session.quality = urlParams.get('quality') || urlParams.get('q') || 0;
- session.quality = parseInt(session.quality);
- getById("gear_screen").parentNode.removeChild(getById("gear_screen"));
- getById("gear_webcam").parentNode.removeChild(getById("gear_webcam"));
- } catch (e) {
- errorlog(e);
- }
-}
-
-if (urlParams.has('sink')) {
- session.sink = urlParams.get('sink');
-} else if (urlParams.has('outputdevice') || urlParams.has('od') || urlParams.has('audiooutput')) {
- session.outputDevice = urlParams.get('outputdevice') || urlParams.get('od') || urlParams.get('audiooutput') || null;
- if (session.outputDevice) {
- session.outputDevice = session.outputDevice.toLowerCase().replace(/[\W]+/g, "_");
- } else {
- session.outputDevice = null;
- getById("headphonesDiv3").style.display = "none"; //
+ if (urlParams.has('easyexit') || urlParams.has('ee')) {
+ session.noExitPrompt = true;
+ }
+
+ if (urlParams.has('entrymsg') || urlParams.has('welcome')) {
+ session.welcomeMessage = urlParams.get('entrymsg') || urlParams.get('welcome');
+ session.welcomeMessage = decodeURIComponent(session.welcomeMessage);
+ }
+
+ if (urlParams.has('welcomeimage') || urlParams.has('welcomeimg')) {
+ session.welcomeImage = urlParams.get('welcomeimage') || urlParams.get('welcomeimg');
+ session.welcomeImage = decodeURIComponent(session.welcomeImage);
}
- if (session.outputDevice) {
+ if (urlParams.has('mixminus')){
+ session.mixMinus = true;
+ }
+
+ if (urlParams.has('clearstorage') || urlParams.has('clear')){
+ clearStorage();
+ }
+
+ if (urlParams.has('videobitrate') || urlParams.has('bitrate') || urlParams.has('vb')) {
+ session.bitrate = urlParams.get('videobitrate') || urlParams.get('bitrate') || urlParams.get('vb');
+ if (session.bitrate) {
+ if ((session.view_set) && (session.bitrate.split(",").length > 1)) {
+ session.bitrate_set = session.bitrate.split(",");
+ session.bitrate = parseInt(session.bitrate_set[0]);
+ } else {
+ session.bitrate = parseInt(session.bitrate);
+ }
+ if (session.bitrate < 1) {
+ session.bitrate = false;
+ }
+ log("BITRATE ENABLED");
+ log(session.bitrate);
+
+ }
+ }
+
+ if (urlParams.has('maxvideobitrate') || urlParams.has('maxbitrate') || urlParams.has('mvb')) {
+ session.maxvideobitrate = urlParams.get('maxvideobitrate') || urlParams.get('maxbitrate') || urlParams.get('mvb');
+ session.maxvideobitrate = parseInt(session.maxvideobitrate);
+
+ if (session.maxvideobitrate < 1) {
+ session.maxvideobitrate = false;
+ }
+ log("maxvideobitrate ENABLED");
+ log(session.maxvideobitrate);
+ }
+
+ if (urlParams.has('totalroombitrate') || urlParams.has('totalroomvideobitrate') || urlParams.has('trb') || urlParams.has('totalbitrate') || urlParams.has('tb')) {
+ session.totalRoomBitrate = urlParams.get('totalroombitrate') || urlParams.get('totalroomvideobitrate') || urlParams.get('trb') || urlParams.get('totalbitrate') || urlParams.get('tb') || 0;
+ session.totalRoomBitrate = parseInt(session.totalRoomBitrate);
+
+ if (session.totalRoomBitrate < 1) {
+ session.totalRoomBitrate = 0;
+ }
+ log("totalRoomBitrate ENABLED");
+ log(session.totalRoomBitrate);
+ }
+
+ if (session.totalRoomBitrate===false){
+ session.totalRoomBitrate = session.bitrate || session.totalRoomBitrate_default; // sneaky sneaky
+ } else {
+ session.totalRoomBitrate_default = session.totalRoomBitrate; // trb_default doesn't change dynamically, but trb can (per director I guess)
+ }
+
+ if (session.totalRoomBitrate_default>4000){
+ getById("trbSettingInput").max = Math.ceil(session.totalRoomBitrate_default);
+ }
+
+ if (urlParams.has('maxtotalscenebitrate') || urlParams.has('totalscenebitrate') || urlParams.has('mtsb') || urlParams.has('tsb') || urlParams.has('totalbitrate') || urlParams.has('tb')) {
+ session.totalSceneBitrate = urlParams.get('maxtotalscenebitrate') || urlParams.get('totalscenebitrate') || urlParams.get('mtsb') || urlParams.get('tsb') || urlParams.get('totalbitrate') || urlParams.get('tb') || false;
+ if (session.totalSceneBitrate){
+ session.totalSceneBitrate = parseInt(session.totalSceneBitrate);
+ }
+ }
+
+
+ if (urlParams.has('limittotalbitrate') || urlParams.has('ltb')){
+ session.limitTotalBitrate = urlParams.get('limittotalbitrate') || urlParams.get('ltb') || 2500;
+ session.limitTotalBitrate = parseInt(session.limitTotalBitrate);
+ }
+
+ if (urlParams.has('mcb') || urlParams.has('mcbitrate') || urlParams.has('meshcastbitrate')){
+ session.meshcastBitrate = urlParams.get('mcb') || urlParams.get('mcbitrate') || urlParams.get('meshcastbitrate') || 2500;
+ session.meshcastBitrate = parseInt(session.meshcastBitrate);
+ }
+
+ if (urlParams.has('mcscreensharebitrate') || urlParams.has('mcssbitrate')){
+ session.meshcastScreenShareBitrate = urlParams.get('mcscreensharebitrate') || urlParams.get('mcssbitrate') || 2500;
+ session.meshcastScreenShareBitrate = parseInt(session.meshcastScreenShareBitrate);
+ }
+
+ if (urlParams.has('mcscreensharecodec') || urlParams.has('mcsscodec')){
+ session.meshcastScreenShareCodec = urlParams.get('mcscreensharecodec') || urlParams.get('mcsscodec') || false;
+ }
+ if (session.meshcastScreenShareCodec){
+ session.meshcastScreenShareCodec = session.meshcastScreenShareCodec.toLowerCase();
+ }
+
+ if (urlParams.has('mcab') || urlParams.has('mcaudiobitrate') || urlParams.has('meshcastab') || urlParams.has('meshcastaudiobitrate ')){
+ session.meshcastAudioBitrate = urlParams.get('mcab') || urlParams.get('mcaudiobitrate') || urlParams.get('meshcastab') || urlParams.get('meshcastaudiobitrate ') || 32;
+ session.meshcastAudioBitrate = parseInt(session.meshcastAudioBitrate);
+ }
+
+ if (urlParams.has('mccodec') || urlParams.has('meshcastcodec')){
+ session.meshcastCodec = urlParams.get('mccodec') || urlParams.get('meshcastcodec') || false;
+ }
+
+ if (session.meshcastCodec){
+ session.meshcastCodec = session.meshcastCodec.toLowerCase();
+ if (session.meshcastCodec == "h264"){
+ if (Firefox){
+ session.meshcastCodec = false;
+ }
+ }
+ }
+
+ if (urlParams.has('height') || urlParams.has('h')) {
+ session.height = urlParams.get('height') || urlParams.get('h');
+ session.height = parseInt(session.height);
+ }
+
+ if (urlParams.has('width') || urlParams.has('w')) {
+ session.width = urlParams.get('width') || urlParams.get('w');
+ session.width = parseInt(session.width);
+ }
+
+ if (urlParams.has('quality') || urlParams.has('q')) {
try {
+ session.quality = urlParams.get('quality') || urlParams.get('q') || 0;
+ session.quality = parseInt(session.quality);
+ getById("gear_screen").parentNode.removeChild(getById("gear_screen"));
+ getById("gear_webcam").parentNode.removeChild(getById("gear_webcam"));
+ } catch (e) {
+ errorlog(e);
+ }
+ }
+
+ if (urlParams.has('sink')) {
+ session.sink = urlParams.get('sink');
+ } else if (urlParams.has('outputdevice') || urlParams.has('od') || urlParams.has('audiooutput')) {
+ session.outputDevice = urlParams.get('outputdevice') || urlParams.get('od') || urlParams.get('audiooutput') || null;
+
+ if (session.outputDevice) {
+ session.outputDevice = session.outputDevice.toLowerCase().replace(/[\W]+/g, "_");
+ } else {
+ session.outputDevice = null;
+ getById("headphonesDiv3").style.display = "none"; //
+ }
+
+ if (session.outputDevice) {
+ try {
+ enumerateDevices().then(function(deviceInfos) {
+ for (let i = 0; i !== deviceInfos.length; ++i) {
+ if (deviceInfos[i].kind === 'audiooutput') {
+ if (deviceInfos[i].label.replace(/[\W]+/g, "_").toLowerCase().includes(session.outputDevice)) {
+ session.sink = deviceInfos[i].deviceId;
+ log("AUDIO OUT DEVICE: " + deviceInfos[i].deviceId);
+ break;
+ }
+ }
+ }
+ });
+ } catch (e) {}
+ }
+
+ getById("headphonesDiv").style.display = "none";
+ getById("headphonesDiv2").style.display = "none";
+ } else if (session.sink){
+ if (session.sink == "default"){session.sink = false;}
+ else {
enumerateDevices().then(function(deviceInfos) {
+ var matched = false;
for (let i = 0; i !== deviceInfos.length; ++i) {
if (deviceInfos[i].kind === 'audiooutput') {
- if (deviceInfos[i].label.replace(/[\W]+/g, "_").toLowerCase().includes(session.outputDevice)) {
- session.sink = deviceInfos[i].deviceId;
- log("AUDIO OUT DEVICE: " + deviceInfos[i].deviceId);
+ if (deviceInfos[i].deviceId == session.sink) {
+ matched = true;
break;
}
}
}
- });
- } catch (e) {}
- }
-
- getById("headphonesDiv").style.display = "none";
- getById("headphonesDiv2").style.display = "none";
-}
-
-if (urlParams.has('fullscreen')) {
- session.fullscreen = true;
-}
-if (urlParams.has('stats')) {
- session.statsMenu = true;
-}
-
-
-if (urlParams.has('cleandirector') || urlParams.has('cdv')) {
- session.cleanDirector = true;
-}
-
-
-if (urlParams.has('cleanoutput') || urlParams.has('clean') || urlParams.has('cleanish')) {
- session.cleanOutput = true;
- getById("translateButton").style.display = "none";
- getById("credits").style.display = "none";
- getById("header").style.display = "none";
- getById("controlButtons").style.display = "none";
- var style = document.createElement('style');
- style.innerHTML = `
- video {
- background-image: none;
- }
- `;
- document.head.appendChild(style);
-}
-
-if (urlParams.has('cleanish')) {
- session.cleanish = true;
-}
-
-if (urlParams.has('channels')) { // must be loaded before channelOffset
- session.audioChannels = parseInt(urlParams.get('channels'));
- session.offsetChannel = 0;
- log("max channels is 32; channels offset");
- session.audioEffects = true;
-}
-if (urlParams.has('channeloffset')) {
- session.offsetChannel = parseInt(urlParams.get('channeloffset'));
- log("max channels is 32; channels offset");
- session.audioEffects = true;
-}
-
-
-
-if (urlParams.has('enhance')) {
- //if (parseInt(urlParams.get('enhance')>0){
- session.enhance = true; //parseInt(urlParams.get('enhance'));
- //}
-}
-
-if (urlParams.has('maxviewers') || urlParams.has('mv')) {
-
- session.maxviewers = urlParams.get('maxviewers') || urlParams.get('mv');
- if (session.maxviewers.length == 0) {
- session.maxviewers = 1;
- } else {
- session.maxviewers = parseInt(session.maxviewers);
- }
- log("maxviewers set");
-}
-
-if (urlParams.has('maxpublishers') || urlParams.has('mp')) {
-
- session.maxpublishers = urlParams.get('maxpublishers') || urlParams.get('mp');
- if (session.maxpublishers.length == 0) {
- session.maxpublishers = 1;
- } else {
- session.maxpublishers = parseInt(session.maxpublishers);
- }
- log("maxpublishers set");
-}
-
-if (urlParams.has('maxconnections') || urlParams.has('mc')) {
-
- session.maxconnections = urlParams.get('maxconnections') || urlParams.get('maxconnections');
- if (session.maxconnections.length == 0) {
- session.maxconnections = 1;
- } else {
- session.maxconnections = parseInt(session.maxconnections);
- }
-
- log("maxconnections set");
-}
-
-
-if (urlParams.has('secure')) {
- session.security = true;
- if (!(session.cleanOutput)) {
- setTimeout(function() {
- warnUser("Enhanced Security Mode Enabled.");
- }, 100);
- }
-}
-
-if (urlParams.has('random') || urlParams.has('randomize')) {
- session.randomize = true;
-}
-
-if (urlParams.has('framerate') || urlParams.has('fr') || urlParams.has('fps')) {
- session.framerate = urlParams.get('framerate') || urlParams.get('fr') || urlParams.get('fps');
- session.framerate = parseInt(session.framerate);
- log("framerate Changed");
- log(session.framerate);
-}
-
-if (urlParams.has('maxframerate') || urlParams.has('mfr') || urlParams.has('mfps')) {
- session.maxframerate = urlParams.get('maxframerate') || urlParams.get('mfr') || urlParams.get('mfps');
- session.maxframerate = parseInt(session.maxframerate);
- log("max framerate assigned");
- log(session.maxframerate);
-}
-
-if (urlParams.has('buffer')) { // needs to be before sync
- session.buffer = parseFloat(urlParams.get('buffer')) || 0;
- log("buffer Changed: " + session.buffer);
- session.sync = 0;
- session.audioEffects = true;
-}
-
-if (urlParams.has('sync')) {
- session.sync = parseFloat(urlParams.get('sync'));
- log("sync Changed; in milliseconds. If not set, defaults to auto.");
- log(session.sync);
- session.audioEffects = true;
- if (session.buffer === false) {
- session.buffer = 0;
- }
-}
-
-if (urlParams.has('mirror')) {
- if (urlParams.get('mirror') == "3") {
- getById("main").classList.add("mirror");
- } else if (urlParams.get('mirror') == "2") {
- session.mirrored = 2;
- } else if (urlParams.get('mirror') == "0") {
- session.mirrored = 0;
- } else if (urlParams.get('mirror') == "false") {
- session.mirrored = 0;
- } else if (urlParams.get('mirror') == "off") {
- session.mirrored = 0;
- } else {
- session.mirrored = 1;
- }
-}
-
-if (urlParams.has('flip')) {
- if (urlParams.get('flip') == "0") {
- session.flipped = false;
- } else if (urlParams.get('flip') == "false") {
- session.flipped = false;
- } else if (urlParams.get('flip') == "off") {
- session.flipped = false;
- } else {
- session.flipped = true;
- }
-}
-
-if ((session.mirrored) && (session.flipped)) {
- try {
- log("Mirror all videos");
- var mirrorStyle = document.createElement('style');
- mirrorStyle.innerHTML = "video {transform: scaleX(-1) scaleY(-1); }";
- document.getElementsByTagName("head")[0].appendChild(mirrorStyle);
- } catch (e) {
- errorlog(e);
- }
-} else if (session.mirrored) { // mirror the video horizontally
- try {
- log("Mirror all videos");
- var mirrorStyle = document.createElement('style');
- mirrorStyle.innerHTML = "video {transform: scaleX(-1);}";
- document.getElementsByTagName("head")[0].appendChild(mirrorStyle);
- } catch (e) {
- errorlog(e);
- }
-} else if (session.flipped) { // mirror the video vertically
- try {
- log("Mirror all videos");
- var mirrorStyle = document.createElement('style');
- mirrorStyle.innerHTML = "video {transform: scaleY(-1);}";
- document.getElementsByTagName("head")[0].appendChild(mirrorStyle);
- } catch (e) {
- errorlog(e);
- }
-}
-
-
-if (urlParams.has('icefilter')) {
- log("ICE FILTER ENABLED");
- session.icefilter = urlParams.get('icefilter');
-}
-
-
-if (urlParams.has('effects') || urlParams.has('effect')) {
- session.effects = urlParams.get('effects') || urlParams.get('effect') || null;
- if (session.effects === null){
- getById("effectsDiv").style.display = "block";
- session.effects = 0;
- } else if (session.effects === "0" || session.effects === "false" || session.effects === "off"){
- session.effects = false;
- getById("effectSelector3").style.display = "none";
- getById("effectsDiv3").style.display = "none";
- getById("effectSelector").style.display = "none";
- getById("effectsDiv").style.display = "none";
- } else {
- session.effects = parseInt(session.effects);
- }
-
- if (session.effects === 5){
- getById("selectImageTFLITE").style.display = "block";
- getById("selectImageTFLITE3").style.display = "block";
- getById("effectSelector").style.display = "none";
- getById("effectsDiv").style.display = "block";
- }
- // mirror == 2
- // face == 1
- // blur = 3
- // green = 4
- // image = 5
-}
-
-if (urlParams.has('activespeaker') || urlParams.has('speakerview') || urlParams.has('sas')){
- session.activeSpeaker = true;
- session.audioEffects = true;
- session.audioMeterGuest = true;
- setInterval(function(){activeSpeaker(false)},100);
-}
-
-if (urlParams.has('meter') || urlParams.has('meterstyle')){
- session.meterStyle = urlParams.get('meter') || urlParams.get('meterstyle') || 1;
-}
-
-if (urlParams.has('style') || urlParams.has('st')) {
- session.style = urlParams.get('style') || urlParams.get('st') || 1;
- if ((parseInt(session.style) == 1) || (session.style == "justvideo")) { // no audio only
- session.style = 1;
- } else if ((parseInt(session.style) == 2) || (session.style == "waveform")) { // audio waveform
- session.style = 2;
- session.audioEffects = true; ////!!!!!!! Do I want to enable the audioEffects myself? or do it here?
- } else if ((parseInt(session.style) == 3) || (session.style == "volume")) { // photo is taken? upload option? canvas?
- session.style = 3;
- session.audioEffects = true;
- } else {
- session.style = 1;
- }
-}
-
-
-if (urlParams.has('samplerate') || urlParams.has('sr')) {
- session.sampleRate = parseInt(urlParams.get('samplerate')) || parseInt(urlParams.get('samplerate')) || 48000;
- if (session.audioCtx) {
- session.audioCtx.close(); // close the default audio context.
- }
- session.audioCtx = new AudioContext({ // create a new audio context with a higher sample rate.
- sampleRate: session.sampleRate
- });
- session.audioEffects = true;
-}
-
-
-if (urlParams.has('noaudioprocessing') || urlParams.has('noap')) {
- session.disableWebAudio = true; // default true; might be useful to disable on slow or old computers?
- session.audioEffects = false; // disable audio inbound effects also.
- session.audioMeterGuest = false;
-}
-
-if (urlParams.has('tcp')){ // forces the TURN servers to use TCP mode; still need to add &private to force TURN also tho
- session.forceTcpMode = true;
-}
-if (urlParams.has('speedtest')){ // forces essentially UDP mode, unless TCP is specified, and some other stuff
- session.speedtest = true;
-}
-
-if (urlParams.has('turn')) {
- var turnstring = urlParams.get('turn');
- if (turnstring == "twilio") { // a sample function on loading remote credentials for TURN servers.
- try {
-
- session.ws = false; // prevents connection
- var twillioRequest = new XMLHttpRequest();
- twillioRequest.onreadystatechange = function() {
- if (twillioRequest.status === 200) {
- try{
- var res = JSON.parse(twillioRequest.responseText);
- } catch(e){return;}
- session.configuration = {
- iceServers: [{
- "username": res["1"],
- "credential": res["2"],
- "url": "turn:global.turn.twilio.com:3478?transport=tcp",
- "urls": "turn:global.turn.twilio.com:3478?transport=tcp"
- },
- {
- "username": res["1"],
- "credential": res["2"],
- "url": "turn:global.turn.twilio.com:443?transport=tcp",
- "urls": "turn:global.turn.twilio.com:443?transport=tcp"
- }
- ],
- sdpSemantics: 'unified-plan' // future-proofing
- };
- if (session.ws===false){
- session.ws=null; // allows connection (clears state)
- session.connect(); // connect if not already connected.
- }
+ if (!matched){
+ session.sink = false; // make sure any saved output device exists.
}
- // system does not connect if twilio API does not respond.
- };
- twillioRequest.open('GET', 'https://api.obs.ninja:1443/twilio', true); // `false` makes the request synchronous
- twillioRequest.send();
-
-
- } catch (e) {
- errorlog("Twilio Failed");
+ });
}
+ }
- } else if ((turnstring == "false") || (turnstring == "off") || (turnstring == "0")) { // disable TURN servers
- session.configuration = {
- iceServers: [
- { urls: ["stun:stun.l.google.com:19302", "stun:stun4.l.google.com:19302"]} // more than 4 stun+turn servers will cause firefox issues? (2 + 2 for now then)
- ],
- sdpSemantics: 'unified-plan' // future-proofing
- };
- } else {
+ if (window.obsstudio || (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1)){
+ session.fullscreen = true;
+ } else if (urlParams.has('fullscreen')) {
+ session.fullscreen = true;
+ }
+
+ if (urlParams.has('stats')) {
+ session.statsMenu = true;
+ }
+
+ if (urlParams.has('cleandirector') || urlParams.has('cdv')) {
+ session.cleanDirector = true;
+ }
+
+ if (urlParams.has('hidetranslate')) {
+ getById("translateButton").style.display = "none";
+ }
+
+ if (session.cleanOutput){
+ session.screensharebutton = false;
+ getById("translateButton").style.display = "none";
+ getById("credits").style.display = "none";
+ getById("header").style.display = "none";
+ getById("controlButtons").style.display = "none";
+ getById("helpbutton").style.display = "none";
+ getById("helpbutton").style.opacity = 0;
+ getById("reportbutton").style.display = "none";
+ getById("reportbutton").style.opacity = 0;
+ getById("calendarButton").style.display = "none";
+ getById("calendarButton").style.opacity = 0;
+ document.documentElement.style.setProperty('--myvideo-background', '#0000');
+ var styleTmp = document.createElement('style');
+ styleTmp.innerHTML = `
+ video {
+ background-image: none;
+ }
+ `;
+ document.head.appendChild(styleTmp);
+ }
+ getById("credits").innerHTML = "Version: " + session.version + " - " + getById("credits").innerHTML;
+
+ if (urlParams.has('ssb') || urlParams.has('screensharebutton')) {
+ session.screensharebutton = true;
+ }
+
+ if (urlParams.has('hideheader') || urlParams.has('noheader') || urlParams.has('hh')) { // needs to happen the room and permaid applications
+ getById("header").style.display = "none";
+ getById("header").style.opacity = 0;
+ } else if (urlParams.has('showheader')) { // needs to happen the room and permaid applications
+ getById("header").style.display = "inherit";
+ getById("header").style.opacity = 1;
+ }
+
+ if (urlParams.has('minidirector')) {
try {
- turnstring = turnstring.split(";");
- if (turnstring !== "false") { // false disables the TURN server. Useful for debuggin
- var turn = {};
- turn.username = turnstring[0]; // myusername
- turn.credential = turnstring[1]; //mypassword
- turn.urls = [turnstring[2]]; // ["turn:turn.obs.ninja:443"];
- session.configuration.iceServers = [{
- urls: ["stun:stun.l.google.com:19302", "stun:stun4.l.google.com:19302"]
- }];
- session.configuration.iceServers.push(turn);
- }
+ var cssStylesheet = document.createElement('link');
+ cssStylesheet.rel = 'stylesheet';
+ cssStylesheet.type = 'text/css';
+ cssStylesheet.media = 'screen';
+ cssStylesheet.href = 'minidirector.css';
+ document.getElementsByTagName('head')[0].appendChild(cssStylesheet);
} catch (e) {
- if (!(session.cleanOutput)) {
- warnUser("TURN server parameters were wrong.");
- }
errorlog(e);
}
}
-} else {
- chooseBestTURN(); // obs.ninja turn servers, if needed.
-}
-
-
-if (urlParams.has('privacy') || urlParams.has('private') || urlParams.has('relay')) { // please only use if you are also using your own TURN service.
- session.privacy = true;
- try {
- session.configuration.iceTransportPolicy = "relay"; // https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate/address
- } catch (e) {
- if (!(session.cleanOutput)) {
- warnUser("Privacy mode failed to configure.");
+
+ if (urlParams.has('postinterval')){ // interval to post snapimage images
+ session.postInterval = urlParams.get('postinterval') || session.postInterval;
+ session.postInterval = parseInt(session.postInterval) || 60;
+ if (session.postInterval<5){
+ session.postInterval = 5;
}
+ }
+ if (urlParams.has('postimage')){
+ var postURL = decodeURIComponent(urlParams.get('postimage')) || session.postURL; // default will post to https://temp.vdo.ninja/images/STREAMIDHERE.jpg
+ setInterval(function(postURL){
+ try {
+ uploadImageSnapshot(postURL);
+ } catch(e){}
+ }, session.postInterval*1000 , postURL);
+ }
+
+ if (urlParams.has('cleanish')) {
+ session.cleanish = true;
+ }
+
+ if (urlParams.has('channels')) { // must be loaded before channelOffset
+ session.audioChannels = parseInt(urlParams.get('channels')); // for audio output ; not input. see: &channelcount instead.
+ session.offsetChannel = 0;
+ log("max channels is 32; channels offset");
+ session.audioEffects = true;
+ }
+ if (urlParams.has('channeloffset')) {
+ session.offsetChannel = parseInt(urlParams.get('channeloffset'));
+ log("max channels is 32; channels offset");
+ session.audioEffects = true;
+ }
+
+ if (urlParams.has('enhance')) {
+ //if (parseInt(urlParams.get('enhance')>0){
+ session.enhance = true; //parseInt(urlParams.get('enhance'));
+ //}
+ }
+
+ if (urlParams.has('degrade')) {
+ session.degrade = urlParams.get('degrade') || true; // Firefox, and maybe Safari, supported I think.
+ // the possible values are maintain-framerate, maintain-resolution, or balanced. The default value is balanced
+ }
+
+ if (urlParams.has('maxviewers') || urlParams.has('mv')) {
+
+ session.maxviewers = urlParams.get('maxviewers') || urlParams.get('mv');
+ if (session.maxviewers.length == 0) {
+ session.maxviewers = 1;
+ } else {
+ session.maxviewers = parseInt(session.maxviewers);
+ }
+ log("maxviewers set");
+ }
+
+ if (urlParams.has('maxpublishers') || urlParams.has('mp')) {
+
+ session.maxpublishers = urlParams.get('maxpublishers') || urlParams.get('mp');
+ if (session.maxpublishers.length == 0) {
+ session.maxpublishers = 1;
+ } else {
+ session.maxpublishers = parseInt(session.maxpublishers);
+ }
+ log("maxpublishers set");
+ }
+
+ if (urlParams.has('maxconnections') || urlParams.has('mc')) {
+
+ session.maxconnections = urlParams.get('maxconnections') || urlParams.get('maxconnections');
+ if (session.maxconnections.length == 0) {
+ session.maxconnections = 1;
+ } else {
+ session.maxconnections = parseInt(session.maxconnections);
+ }
+
+ log("maxconnections set");
+ }
+
+
+ if (urlParams.has('secure')) {
+ session.security = true;
+ if (!(session.cleanOutput)) {
+ delayedStartupFuncs.push([warnUser, "Enhanced Security Mode Enabled."]);
+ }
+ }
+
+ if (urlParams.has('random') || urlParams.has('randomize')) {
+ session.randomize = true;
+ }
+
+ if (urlParams.has('frameRate') || urlParams.has('fr') || urlParams.has('fps')) {
+ session.frameRate = urlParams.get('frameRate') || urlParams.get('fr') || urlParams.get('fps');
+ session.frameRate = parseInt(session.frameRate);
+ log("frameRate Changed");
+ log(session.frameRate);
+ }
+
+ if (urlParams.has('tz')){
+ session.tz = urlParams.get('tz');
+ if ((session.tz === null) || (session.tz === "")){
+ session.tz = false;
+ } else {
+ session.tz = parseInt(session.tz);
+ }
+ }
+
+ if (urlParams.has('maxframeRate') || urlParams.has('mfr') || urlParams.has('mfps')) {
+ session.maxframeRate = urlParams.get('maxframeRate') || urlParams.get('mfr') || urlParams.get('mfps');
+ session.maxframeRate = parseInt(session.maxframeRate);
+ log("max frameRate assigned");
+ log(session.maxframeRate);
+ }
+
+ if (urlParams.has('buffer')) { // needs to be before sync
+ if ((ChromeVersion > 50) && (ChromeVersion< 78)){
+
+ } else {
+ session.buffer = parseFloat(urlParams.get('buffer')) || 0;
+ log("buffer Changed: " + session.buffer);
+ //session.sync = 0;
+ //session.audioEffects = true;
+ }
+ }
+
+ if (urlParams.has('panning') || urlParams.has('pan')) {
+ session.panning = urlParams.get('panning') || urlParams.get('pan');
+ if (session.panning===""){
+ session.panning=true
+ }
+ session.audioEffects = true;
+ }
+
+ if (urlParams.has('sync')) {
+ if ((ChromeVersion > 50) && (ChromeVersion< 78)){
+
+ } else {
+ session.sync = parseFloat(urlParams.get('sync'));
+ log("sync Changed; in milliseconds. If not set, defaults to auto.");
+ log(session.sync);
+ session.audioEffects = true;
+ if (session.buffer === false) {
+ session.buffer = 0;
+ }
+ }
+ }
+
+ if (urlParams.has('mirror')) {
+ if (urlParams.get('mirror') == "3") {
+ getById("main").classList.add("mirror");
+ } else if (urlParams.get('mirror') == "2") {
+ session.mirrored = 2;
+ } else if (urlParams.get('mirror') == "0") {
+ session.mirrored = 0;
+ } else if (urlParams.get('mirror') == "false") {
+ session.mirrored = 0;
+ } else if (urlParams.get('mirror') == "off") {
+ session.mirrored = 0;
+ } else {
+ session.mirrored = 1;
+ }
+ }
+
+ if (urlParams.has('flip')) {
+ if (urlParams.get('flip') == "0") {
+ session.flipped = false;
+ } else if (urlParams.get('flip') == "false") {
+ session.flipped = false;
+ } else if (urlParams.get('flip') == "off") {
+ session.flipped = false;
+ } else {
+ session.flipped = true;
+ }
+ }
+
+ if ((session.mirrored) && (session.flipped)) {
+ try {
+ log("Mirror all videos");
+ var mirrorStyle = document.createElement('style');
+ mirrorStyle.innerHTML = "video {transform: scaleX(-1) scaleY(-1); }";
+ document.getElementsByTagName("head")[0].appendChild(mirrorStyle);
+ } catch (e) {
+ errorlog(e);
+ }
+ } else if (session.mirrored) { // mirror the video horizontally
+ try {
+ log("Mirror all videos");
+ var mirrorStyle = document.createElement('style');
+ mirrorStyle.innerHTML = "video {transform: scaleX(-1);}";
+ document.getElementsByTagName("head")[0].appendChild(mirrorStyle);
+ } catch (e) {
+ errorlog(e);
+ }
+ } else if (session.flipped) { // mirror the video vertically
+ try {
+ log("Mirror all videos");
+ var mirrorStyle = document.createElement('style');
+ mirrorStyle.innerHTML = "video {transform: scaleY(-1);}";
+ document.getElementsByTagName("head")[0].appendChild(mirrorStyle);
+ } catch (e) {
+ errorlog(e);
+ }
+ }
+
+
+ if (urlParams.has('icefilter')) {
+ log("ICE FILTER ENABLED");
+ session.icefilter = urlParams.get('icefilter');
+ }
+
+
+
+ //if (!(ChromeVersion>=57)){
+ // getById("effectSelector").disabled=true;
+ // getById("effectSelector3").disabled=true;
+ // getById("effectSelector").title = "Effects are only support on Chromium-based browsers";
+ // getById("effectSelector3").title = "Effects are only support on Chromium-based browsers";
+ // var elementsTmp = document.querySelectorAll('[data-effectsNotice]');
+ // for (let i = 0; i < elementsTmp.length; i++) {
+ // elementsTmp[i].style.display = "inline-block";
+ // }
+ //}
+
+
+ if (urlParams.has('viewereffect') || urlParams.has('viewereffects') || urlParams.has('ve')) {
+ session.viewereffects = parseInt(urlParams.get('viewereffect')) || parseInt(urlParams.get('ve')) || false;
+ }
+
+ if (urlParams.has('activespeaker') || urlParams.has('speakerview') || urlParams.has('sas')){
+ session.activeSpeaker = urlParams.get('activespeaker') || urlParams.get('speakerview') || urlParams.get('sas') || 1;
+ session.activeSpeaker = parseInt(session.activeSpeaker);
+ session.style=6;
+ session.audioEffects = true;
+ //session.audioMeterGuest = true;
+ session.minipreview = 2;
+ if ((session.activeSpeaker==1) || (session.activeSpeaker==3)){
+ session.animatedMoves = false;
+ }
+ session.fadein=true;
+ document.querySelector(':root').style.setProperty('--fadein-speed', 0.5);
+ setInterval(function(){activeSpeaker(false);},100);
+
+ } else if (urlParams.has('noisegate') || urlParams.has('gating') || urlParams.has('gate') ||urlParams.has('ng')){
+ session.quietOthers = urlParams.get('noisegate') || urlParams.get('gating') || urlParams.get('gate') || urlParams.get('ng') || 1;
+ session.quietOthers = parseInt(session.quietOthers);
+
+ if (session.quietOthers == 1){
+ session.quietOthers = false;
+ session.noisegate = true;
+ session.audioEffects = true;
+ //session.audioMeterGuest = true;
+ } else if (session.quietOthers == 4){
+ session.quietOthers = 1;
+ session.audioEffects = true;
+ //session.audioMeterGuest = true;
+ setInterval(function(){activeSpeaker(false);},100);
+ } else if (!session.quietOthers){
+ session.noisegate = false;
+ session.quietOthers = false;
+ } else {
+ session.audioEffects = true;
+ //session.audioMeterGuest = true;
+ setInterval(function(){activeSpeaker(false);},100);
+ }
+ }
+
+ if (urlParams.has('noisegatesettings')){
+ session.noisegateSettings = urlParams.get('noisegatesettings');
+ session.noisegateSettings = session.noisegateSettings.split(",");
+ }
+
+ if (urlParams.has('fadein')) {
+ session.fadein=true;
+ if (urlParams.get('fadein') || 0){
+ try {
+ var fadeinspeed = parseInt(urlParams.get('fadein') || 0)/1000.0;
+ fadeinspeed+="s";
+ document.querySelector(':root').style.setProperty('--fadein-speed', fadeinspeed);
+ } catch(e){errorlog("variable css failed");}
+ } else {
+ try {
+ var fadeinspeed = 0.5;
+ fadeinspeed+="s";
+ document.querySelector(':root').style.setProperty('--fadein-speed', fadeinspeed);
+ } catch(e){errorlog("variable css failed");}
+ }
+ }
+
+ if (urlParams.has('animated') || urlParams.has('animate')){
+ session.animatedMoves = urlParams.get('animated') || urlParams.get('animate');
+ if (session.animatedMoves === "false") {
+ session.animatedMoves = false;
+ } else if (session.animatedMoves === "0") {
+ session.animatedMoves = false;
+ } else if (session.animatedMoves === "no") {
+ session.animatedMoves = false;
+ } else if (session.animatedMoves === "off") {
+ session.animatedMoves = false;
+ } else {
+ session.animatedMoves = parseInt(session.animatedMoves) || 100;
+ }
+ if (session.animatedMoves>200){
+ session.animatedMoves = 200;
+ }
+ } else if (session.mobile){
+ session.animatedMoves=false;
+ }
+
+ if (urlParams.has('meter') || urlParams.has('meterstyle')){ // same as also adding &style=3
+ session.meterStyle = urlParams.get('meter') || urlParams.get('meterstyle') || 1;
+ session.meterStyle = parseInt(session.meterStyle);
+ session.style=3;
+ session.audioEffects = true;
+ }
+
+ if (urlParams.has('directorchat') || urlParams.has('dc')){
+ session.directorChat = true;
+ }
+
+
+
+ if (urlParams.has('style') || urlParams.has('st')) {
+ session.style = urlParams.get('style') || urlParams.get('st');
+ if ((parseInt(session.style) === 0) || (session.style == "controls")) { // no audio only
+ session.style = 0;
+ } else if ((parseInt(session.style) == 1) || (session.style == "justvideo")) { // no audio only
+ session.style = 1;
+ } else if ((parseInt(session.style) == 2) || (session.style == "waveform")) { // audio waveform
+ session.style = 2;
+ session.audioEffects = true; ////!!!!!!! Do I want to enable the audioEffects myself? or do it here?
+ } else if ((parseInt(session.style) == 3) || (session.style == "volume")) { // audio meter ; see &meterstyle , where optios include default(false), 1, and 2.
+ session.style = 3;
+ session.audioEffects = true;
+ } else if (parseInt(session.style) == 4) { // black background
+ session.style = 4;
+ } else if (parseInt(session.style) == 5) { // random colored background
+ session.style = 5;
+ } else if (parseInt(session.style) == 7) { // shows video elements for all connections; even those without video/audio
+ session.style = parseInt(session.style);
+ session.showall = true;
+ } else if (parseInt(session.style)) { // 6 is the first letter of the name, surrounded with a colored circle
+ session.style = parseInt(session.style);
+ } else {
+ session.style = 1;
+ }
+ }
+ //if (session.style){
+ // getById("toggleWaveformButton").classList.remove("hidden");
+ //}
+
+ if (urlParams.has('showall')){ // just an alternative; might be compoundable
+ session.showall = true;
+ }
+
+
+
+ if (urlParams.has('samplerate') || urlParams.has('sr')) {
+ session.sampleRate = parseInt(urlParams.get('samplerate')) || parseInt(urlParams.get('samplerate')) || 48000;
+ if (session.audioCtx) {
+ session.audioCtx.close(); // close the default audio context.
+ }
+ session.audioCtx = new AudioContext({ // create a new audio context with a higher sample rate.
+ sampleRate: session.sampleRate
+ });
+ session.audioEffects = true;
+ }
+
+ // if (session.audioCodec === "lyra"){ // WIP. does not work
+ // try {
+ // var { default: Module } = await import('./thirdparty/lyra/webassembly_codec_wrapper.js');
+ // await Module().then((module) => {
+ // console.log("Initialized codec's wasmModule.");
+ // session.lyraCodecModule = module;
+ // }).catch(e => {
+ // console.log(`Module() error: ${e.name} message: ${e.message}`);
+ // });
+ // } catch(e){
+ // errorlog(e);
+ // }
+ // if (session.lyraCodecModule){
+ // console.log("Lyra module loaded");
+ // session.micSampleRate = 16000;
+ // session.encodedInsertableStreams = true;
+ // } else {
+ // console.log("Lyra module failed to load");
+ // }
+ // }
+
+ if (urlParams.has("insertablestreams")){
+ session.encodedInsertableStreams = true;
+ }
+
+ if (urlParams.has('micsamplerate') || urlParams.has('msr')) {
+ session.micSampleRate = parseInt(urlParams.get('micsamplerate')) || parseInt(urlParams.get('msr')) || 48000;
+ }
+
+ if (urlParams.has('noaudioprocessing') || urlParams.has('noap')) {
+ session.disableWebAudio = true; // default true; might be useful to disable on slow or old computers?
+ session.disableViewerWebAudioPipeline = true; // this has the potential to break things.
+ session.audioEffects = false; // disable audio inbound effects also.
+ session.audioMeterGuest = false;
+ if (session.noisegate===null){
+ session.noisegate = false;
+ }
+ }
+
+ // For info, see this: https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidatePairStats/availableOutgoingBitrate
+ if (urlParams.has('maxbandwidth')) { // limits the bitrate based on the outbound total available bandwidth; chromium-based
+ session.maxBandwidth = urlParams.get('maxbandwidth') || 80; // 0 to 100; will reduce bitrate as a percentage of available
+ session.maxBandwidth = parseInt(session.maxBandwidth);
+ if (session.maxBandwidth > 200){ // will over ride default 2500kbps if no bitrate is specified
+ session.maxBandwidth = 200;
+ } else if (session.maxBandwidth<0){
+ session.maxBandwidth = 0;
+ }
+ }
+
+ if (urlParams.has('iframetarget')) {
+ session.iframetarget = urlParams.get('iframetarget'); // speciifies the IFRAME Hostname target
+ if (session.iframetarget){
+ session.iframetarget = decodeURIComponent(session.iframetarget);
+ } else {
+ session.iframetarget = window.location.hostname;
+ }
+ }
+
+
+ if (urlParams.has('sendframes')) {
+ session.sendframes = urlParams.get('sendframes');
+ if(session.sendframes){
+ session.sendframes = decodeURIComponent(session.sendframes);
+ } else {
+ session.sendframes = session.iframetarget || "*";
+ }
+ }
+
+ if (urlParams.has('tcp')){ // forces the TURN servers to use TCP mode; still need to add &private to force TURN also tho
+ session.forceTcpMode = true;
+ }
+
+ if (urlParams.has('stun')) {
+ var stunstring = urlParams.get('stun');
+ stunstring = stunstring.split(";");
+ if (stunstring[0] !== "false") { // false disables the TURN server. Useful for debuggin
+ var stun = {};
+ if (stunstring.length==3){
+ stun.username = stunstring[0]; // myusername
+ stun.credential = stunstring[1]; //mypassword
+ stun.urls = [stunstring[2]]; // ["turn:turn.obs.ninja:443"];
+ } else if (stunstring.length==1){
+ stun.urls = [stunstring[0]];
+ }
+ session.stunServers = [stun];
+ } else {
+ session.stunServers = [];
+ }
+ }
+ if (urlParams.has('addstun')) {
+ var stunstring = urlParams.get('addstun');
+ stunstring = stunstring.split(";");
+ var stun = {};
+ if (stunstring.length==3){
+ stun.username = stunstring[0]; // myusername
+ stun.credential = stunstring[1]; //mypassword
+ stun.urls = [stunstring[2]]; // ["turn:turn.obs.ninja:443"];
+ } else if (stunstring.length==1){
+ stun.urls = [stunstring[0]];
+ }
+ session.stunServers = session.stunServers.concat(stun);
+ }
+
+
+ if (urlParams.has('turn')) {
+ var turnstring = urlParams.get('turn');
+
+ if (turnstring == "twilio") { // a sample function on loading remote credentials for TURN servers.
+ try {
+ session.ws = false; // prevents connection
+ var twillioRequest = new XMLHttpRequest();
+ twillioRequest.onreadystatechange = function() {
+ if (twillioRequest.status === 200) {
+ try{
+ var res = JSON.parse(twillioRequest.responseText);
+ } catch(e){return;}
+ session.configuration = {
+ iceServers: [{
+ "username": res["1"],
+ "credential": res["2"],
+ "url": "turn:global.turn.twilio.com:3478?transport=tcp",
+ "urls": "turn:global.turn.twilio.com:3478?transport=tcp"
+ },
+ {
+ "username": res["1"],
+ "credential": res["2"],
+ "url": "turn:global.turn.twilio.com:443?transport=tcp",
+ "urls": "turn:global.turn.twilio.com:443?transport=tcp"
+ }
+ ],
+ sdpSemantics: 'unified-plan' // future-proofing
+ };
+ if (session.ws===false){
+ session.ws=null; // allows connection (clears state)
+ session.connect(); // connect if not already connected.
+ }
+ }
+ // system does not connect if twilio API does not respond.
+ };
+ twillioRequest.open('GET', 'https://turn.example.com:443/twilio', true); // `false` makes the request synchronous
+ twillioRequest.send();
+ } catch (e) {
+ errorlog("Twilio Failed");
+ }
+
+ } else if (turnstring == "nostun") { // disable TURN servers
+ session.configuration = {
+ sdpSemantics: 'unified-plan' // future-proofing
+ };
+
+ } else if ((turnstring == "false") || (turnstring == "off") || (turnstring == "0")) { // disable TURN servers
+ session.configuration = {
+ iceServers: session.stunServers,
+ sdpSemantics: 'unified-plan' // future-proofing
+ };
+ } else {
+ try {
+ //session.configuration = {iceServers: [], sdpSemantics: 'unified-plan'};
+ turnstring = turnstring.split(";");
+ if (turnstring !== "false") { // false disables the TURN server. Useful for debuggin
+ var turn = {};
+ if (turnstring.length==3){
+ turn.username = turnstring[0]; // myusername
+ turn.credential = turnstring[1]; //mypassword
+ turn.urls = [turnstring[2]]; // ["turn:turn.obs.ninja:443"];
+ } else if (turnstring.length==1){
+ turn.urls = [turnstring[0]];
+ }
+ session.configuration = {
+ iceServers: session.stunServers,
+ sdpSemantics: 'unified-plan' // future-proofing
+ };
+
+ session.configuration.iceServers.push(turn);
+ }
+ } catch (e) {
+ if (!(session.cleanOutput)) {
+ warnUser("TURN server parameters were wrong.");
+ }
+ errorlog(e);
+ }
+ }
+ }
+
+ if (urlParams.has('apiserver') && urlParams.get('apiserver')){ // must set this after any custom TURN / STUN settings, else it might over-ride them.
+ session.apiserver = urlParams.get('apiserver');
+ }
+
+ if (urlParams.has('speedtest')){ // must set this after any custom TURN / STUN settings, else it might over-ride them.
+ session.speedtest = true;
+ if (urlParams.get('speedtest')){ // forces essentially UDP mode, unless TCP is specified, and some other stuff
+ session.speedtest = urlParams.get('speedtest').toLowerCase(); // also limits bitrate
+ }
+ setupSpeedtest();
+ }
+
+ if (urlParams.has('privacy') || urlParams.has('private') || urlParams.has('relay')) { // please only use if you are also using your own TURN service.
+ session.privacy = true;
+
+ try { // I'll re-apply this in the setupSpeedtest() promise callback, just to be case.
+ if (session.configuration){ // this needs to set last, otherwise it might be overridden
+ session.configuration.iceTransportPolicy = "relay"; // https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate/address
+ }
+ } catch (e) {
+ if (!(session.cleanOutput)) {
+ warnUser("Privacy mode failed to configure.");
+ }
+ errorlog(e);
+ }
+
+ if (session.speedtest){
+ warnlog("Bitrate being throttled to max of 6000 kbps");
+ if (session.maxvideobitrate !== false) {
+ if (session.maxvideobitrate > 6000) {
+ session.maxvideobitrate = 6000; // Please feel free to get rid of this if using your own TURN servers...
+ }
+ } else {
+ session.maxvideobitrate = 6000; // don't let people pull more than 6000 from you
+ }
+ if (session.bitrate !== false) {
+ if (session.bitrate > 6000) {
+ session.bitrate = 6000; // Please feel free to get rid of this if using your own TURN servers...
+ }
+ }
+ } else {
+ warnlog("Bitrate being throttled to max of 3000 kbps");
+ if (session.maxvideobitrate !== false) {
+ if (session.maxvideobitrate > 4000) {
+ session.maxvideobitrate = 4000; // Please feel free to get rid of this if using your own TURN servers...
+ }
+ } else {
+ session.maxvideobitrate = 4000; // don't let people pull more than 3000 from you
+ }
+ if (session.bitrate !== false) {
+ if (session.bitrate > 4000) {
+ session.bitrate = 4000; // Please feel free to get rid of this if using your own TURN servers...
+ }
+ }
+ }
+ }
+
+ if (urlParams.has('wss')) {
+ session.customWSS = true;
+ session.wssSetViaUrl = true;
+ if (urlParams.get('wss')) {
+ session.wss = urlParams.get('wss');
+ if (!session.wss.startsWith("wss://")){
+ session.wss = "wss://" + session.wss;
+ }
+ }
+ }
+
+ if (urlParams.has("bypass")){
+ session.bypass = true;
+ session.customWSS = true;
+ }
+
+ if (urlParams.has('osc') || urlParams.has('api')) {
+ if (urlParams.get('osc') || urlParams.get('api')) {
+ session.api = urlParams.get('osc') || urlParams.get('api') || false;
+ if (session.api){
+ setTimeout(function(){oscClient();},1000);
+ }
+ }
+ }
+
+ if (urlParams.has('whip')) {
+ session.whip = urlParams.get('whip') || false;
+ if (session.whip){
+ setTimeout(function(){whipClient();},1000); // OBS v29 required?
+ }
+ }
+
+ if (urlParams.has('queue')) {
+ session.queue = true;
+ }
+
+ if (urlParams.has('push') || urlParams.has('id') || urlParams.has('permaid') ) {
+ session.permaid = urlParams.get('push') || urlParams.get('id') || urlParams.get('permaid');
+
+ if (session.permaid) {
+ session.streamID = sanitizeStreamID(session.permaid);
+ } else {
+ session.permaid = null;
+ }
+
+ if (urlParams.has('push')){
+ updateURL("push="+session.streamID, true, false);
+ } else if (urlParams.has('id')){
+ updateURL("id="+session.streamID, true, false); // not 'officially' supporting this yet; we'll see.
+ } else if (urlParams.has('permaid')){
+ updateURL("permaid="+session.streamID, true, false);
+ } else {
+ updateURL("push="+session.streamID, true, false);
+ }
+
+ if (session.director) { // if I do a short form of this, it will cause duplications in the code elsewhere.
+ //var director_room_input = urlParams.get('director');
+ //director_room_input = sanitizeRoomName(director_room_input);
+ //createRoom(director_room_input);
+ session.permaid = false; // used to avoid a trigger later on.
+ } else {
+ getById("container-1").className = 'column columnfade hidden';
+ getById("container-4").className = 'column columnfade hidden';
+ getById("dropButton").className = 'column columnfade hidden';
+
+ getById("info").innerHTML = "";
+ if (session.videoDevice === 0) {
+ miniTranslate(getById("add_camera"), "share-your-mic", "Share your Microphone");
+ } else {
+ miniTranslate(getById("add_camera"), "share-your-camera", "Share your Camera");
+ }
+ miniTranslate(getById("add_screen"), "share-your-screen", "Share your Screen");
+ getById("container-2").title = getById("add_screen").innerText;
+ getById("container-3").title = getById("add_camera").innerText;
+
+ getById("passwordRoom").value = "";
+ getById("videoname1").value = "";
+ getById("dirroomid").innerHTML = "";
+ getById("roomid").innerHTML = "";
+
+ getById("mainmenu").style.alignSelf = "center";
+ getById("mainmenu").classList.add("mainmenuclass");
+ getById("header").style.alignSelf = "center";
+
+ //if ((iOS) || (iPad)) {
+ //getById("header").style.display = "none"; // just trying to free up space.
+ //}
+
+ if (session.webcamonly == true) { // mobile or manual flag 'webcam' pflag set
+ getById("head1").innerHTML = '- Please accept any camera permissions';
+ } else {
+ getById("head1").innerHTML = ' - Please select which you wish to share';
+ }
+ }
+ }
+
+ if (session.roomid || urlParams.has('roomid') || urlParams.has('r') || urlParams.has('room') || filename || (session.permaid !== false)) {
+ var roomid = "";
+ if (urlParams.has('room')) { // needs to be first; takes priority
+ roomid = urlParams.get('room');
+ } else if (urlParams.has('roomid')) {
+ roomid = urlParams.get('roomid');
+ } else if (urlParams.has('r')) {
+ roomid = urlParams.get('r');
+ } else if (session.roomid) {
+ roomid = session.roomid;
+ } else if (filename) {
+ roomid = filename;
+ }
+ session.roomid = sanitizeRoomName(roomid);
+ }
+
+ if ((session.permaid===false) && (session.roomid===false) && (session.view===false) && (session.effect===false) && (session.director===false)){
+ session.effect = null;
+ }
+
+ if (urlParams.has('effects') || urlParams.has('effect')) {
+ session.effect = urlParams.get('effects') || urlParams.get('effect') || null;
+ }
+
+ if (window.FaceDetector !== undefined){
+ document.querySelectorAll(".facetracker").forEach(ele=>{
+ ele.disabled = null;
+ ele.removeAttribute("disabled");
+ ele.title = "Will slowly pan, tilt, and zoom in on the first face detected";
+ });
+ }
+
+
+ if (urlParams.has('imagelist')){ // "&imagelist="+encodeURIComponent(JSON.stringify(["./media/bg_sample.webp", "./media/bg_sample2.webp"]))
+ var imageList = urlParams.get('imagelist'); //
+ if (imageList){
+ try {
+ imageList = JSON.parse(decodeURIComponent(imageList));
+ } catch(e){
+ console.error(e);
+ }
+ if (imageList.length){
+ session.defaultBackgroundImages = imageList; // ["./media/bg_sample.webp", "./media/bg_sample2.webp"]
+ } else {
+ warnlog("empty image array; skipping");
+ }
+ }
+ }
+
+ if (session.effect!==false){
+ if (session.effect === null){
+ getById("effectsDiv").style.display = "block";
+ session.effect = "0";
+ } else if (session.effect === "0" || session.effect === "false" || session.effect === "off" || session.effect === 0){
+ session.effect = false;
+ getById("effectSelector3").style.display = "none";
+ getById("effectsDiv3").style.display = "none";
+ getById("effectSelector").style.display = "none";
+ getById("effectsDiv").style.display = "none";
+ }
+
+ if (session.effect === "5"){
+
+ loadTFLITEImages();
+
+ getById("effectSelector").style.display = "none";
+ getById("effectsDiv").style.display = "block";
+
+ }
+ if (session.effect === "3a"){ // heavier blur
+ session.effectValue = 5;
+ session.effect = "3";
+ } else if (session.effect === "3"){
+ session.effectValue = 2;
+ } else if (session.effect === "7"){
+ session.effectValue = 1;
+ }
+ // mirror == 2
+ // face == 1
+ // blur = 3
+ // green = 4
+ // image = 5
+ }
+
+
+ if (urlParams.has('effectvalue') || urlParams.has('ev')) {
+ session.effectValue = parseInt(urlParams.get('effectvalue')) || parseInt(urlParams.get('ev')) || 0;
+ session.effectValue_default = session.effectValue;
+ }
+
+ if (session.webcamonly == true) {
+ if (session.introButton){
+ getById("container-2").className = 'column columnfade hidden'; // Hide screen share
+ getById("head3").classList.add('hidden');
+ getById("head3a").classList.add('hidden');
+ } else {
+ getById("container-2").className = 'column columnfade hidden'; // Hide screen share
+ getById("container-3").classList.add("skip-animation");
+ getById("container-3").classList.remove('pointer');
+ delayedStartupFuncs.push([previewWebcam]);
+ }
+ }
+ if (session.introOnClean && (session.permaid===false) && (session.roomid===false)){
+ //getById("container-2").className = 'column columnfade hidden'; // Hide screen share
+ getById("head3").classList.add('hidden');
+ getById("head3a").classList.add('hidden');
+ } else if (session.introOnClean && (session.scene===false) && ((session.permaid!==false || session.roomid!==false))){
+ getById("container-2").className = 'column columnfade hidden'; // Hide screen share
+ getById("container-3").classList.add("skip-animation");
+ getById("container-3").classList.remove('pointer');
+ delayedStartupFuncs.push([previewWebcam]);
+ }
+
+ //if (!session.director && ((ChromeVersion == 86) || (ChromeVersion == 77) || (ChromeVersion == 62) || (ChromeVersion == 51)) && (((session.permaid===false) && session.view) || (session.scene!==false))){
+ // session.studioSoftware = true; // vmix
+ if (window.obsstudio){
+ session.studioSoftware = true;
+ }
+ if (session.cleanViewer){
+ if (session.view && !session.director && session.permaid===false){
+ session.cleanOutput = true;
+ }
+ }
+ if (urlParams.has('clock')){
+ if (urlParams.get('clock') === "false"){
+ session.showTime = false;
+ } else if (urlParams.get('clock') === "0"){
+ session.showTime = false;
+ } else {
+ session.showTime = true;
+ }
+ } else if (session.cleanOutput){
+ session.showTime = false;
+ }
+
+ if (urlParams.has('hidescreenshare') || urlParams.has('hidess') || urlParams.has('sshide') || urlParams.has('screensharehide')) { // this way I don't need to remember what it's called. I can just guess. :D
+ session.screenShareElementHidden = true;
+ }
+
+ if (urlParams.has('sspaused') || urlParams.has('sspause') || urlParams.has('ssp')) { // this way I don't need to remember what it's called. I can just guess. :D
+ session.screenShareStartPaused = true;
+ }
+
+ if (urlParams.has('zoomedbitrate') || urlParams.has('zb')) { // this way I don't need to remember what it's called. I can just guess. :D
+ session.zoomedBitrate = urlParams.get('zoomedbitrate') || urlParams.get('zb') || 2500;
+ session.zoomedBitrate = parseInt(session.zoomedBitrate) ;
+ }
+
+ if (urlParams.has('screenshareid') || urlParams.has('ssid')) {
+ if (urlParams.get('screenshareid') || urlParams.get('ssid')) {
+ session.screenshareid = urlParams.get('screenshareid') || urlParams.get('ssid');
+ session.screenshareid = sanitizeStreamID(session.screenshareid);
+ } else {
+ session.screenshareid = session.streamID + "_ss";
+ }
+ }
+
+ if (urlParams.has('screensharevideoonly') || urlParams.has('ssvideoonly') || urlParams.has('ssvo')) {
+ session.screenshareVideoOnly = true;
+ }
+
+ if (urlParams.has('screensharefps') || urlParams.has('ssfps')) {
+ if (urlParams.get('screensharefps') || urlParams.get('ssfps')) {
+ session.screensharefps = urlParams.get('screensharefps') || urlParams.get('ssfps');
+ session.screensharefps = parseInt(session.screensharefps) || 2;
+ }
+ }
+
+ if (urlParams.has('screensharequality') || urlParams.has('ssq')) {
+ if (urlParams.get('screensharequality') || urlParams.get('ssq')) {
+ session.screensharequality = urlParams.get('screensharequality') || urlParams.get('ssq');
+ session.screensharequality = parseInt(session.screensharequality) || 0;
+ try {
+ getById("gear_screen").parentNode.removeChild(getById("gear_screen"));
+ } catch(e){}
+ }
+ }
+
+ if (urlParams.has('screensharebitrate') || urlParams.has('ssbitrate')) {
+ session.screenShareBitrate = urlParams.get('screensharebitrate') || urlParams.get('ssbitrate');
+ session.screenShareBitrate = parseInt(session.screenShareBitrate) || 2500;
+ }
+
+ if (urlParams.has('screensharelabel') || urlParams.has('sslabel')) {
+ session.screenShareLabel = urlParams.get('screensharelabel') || urlParams.get('sslabel');
+ session.screenShareLabel = decodeURIComponent(session.screenShareLabel);
+ session.screenShareLabel = session.screenShareLabel.replace(/_/g, " ")
+ }
+
+ if (session.roomid!==false){
+ if (!(session.cleanOutput)) {
+ if (session.roomid === "test") {
+ if (session.password === session.defaultPassword) {
+ window.focus();
+ var testRoomResponse = confirm(miscTranslations["room-test-not-good"]);
+ if (testRoomResponse == false) {
+ hangup();
+ throw new Error("User requested to not enter room 'room'.");
+ }
+ }
+ }
+ }
+
+ if (session.audioDevice === false && session.outputDevice === false) {
+ getById("headphonesDiv2").style.display = "inline-block";
+ getById("headphonesDiv").style.display = "inline-block";
+ }
+ getById("addPasswordBasic").style.display = "none";
+
+ getById("info").innerHTML = "";
+ getById("info").style.color = "#CCC";
+ getById("videoname1").value = session.roomid;
+ getById("dirroomid").innerText = session.roomid;
+ getById("roomid").innerText = session.roomid;
+ getById("container-1").className = 'column columnfade hidden';
+ getById("container-4").className = 'column columnfade hidden';
+ // container 5 is share media file; 6 is share website
+ getById("container-7").style.display = 'none';
+ getById("container-8").style.display = 'none';
+ getById("container-9").style.display = 'none';
+ getById("container-10").style.display = 'none';
+ getById("container-11").style.display = 'none';
+ getById("container-12").style.display = 'none';
+ getById("container-13").style.display = 'none';
+ getById("container-14").style.display = 'none';
+ getById("container-15").style.display = 'none';
+ getById("mainmenu").style.alignSelf = "center";
+ getById("mainmenu").classList.add("mainmenuclass");
+ getById("header").style.alignSelf = "center";
+
+ if (session.webcamonly == true) { // mobile or manual flag 'webcam' pflag set
+ getById("head1").innerHTML = '';
+ } else {
+ getById("head1").innerHTML = 'Please select an option to join.';
+ }
+
+ if (session.roomid.length > 0) {
+ if (session.videoDevice === 0) {
+ if (session.audioDevice === 0) {
+ miniTranslate(getById("add_camera"), "join-room", "Join room");
+ } else {
+ miniTranslate(getById("add_camera"), "join-room-with-mic", "Join room with Microphone");
+ }
+ } else {
+ miniTranslate(getById("add_camera"), "join-room-with-camera", "Join Room with Camera");
+ }
+ miniTranslate(getById("add_screen"), "share-screen-with-room", "Screenshare with Room");
+ } else {
+ if (session.videoDevice === 0) {
+ miniTranslate(getById("add_camera"), "share-your-mic", "Share your Microphone");
+ } else {
+ miniTranslate(getById("add_camera"), "share-your-camera", "Share your Camera");
+ }
+ miniTranslate(getById("add_screen"), "share-your-screen", "Share your Screen");
+ }
+ getById("head3").classList.add('hidden');
+ getById("head3a").classList.add('hidden');
+ getById("container-2").title = getById("add_screen").innerText;
+ getById("container-3").title = getById("add_camera").innerText;
+
+ if (session.scene !== false) {
+ getById("container-4").className = 'column columnfade';
+ getById("container-3").className = 'column columnfade';
+ getById("container-2").className = 'column columnfade';
+ getById("container-1").className = 'column columnfade';
+ getById("header").className = 'hidden';
+ getById("info").className = 'hidden';
+ getById("head1").className = 'hidden';
+ getById("head2").className = 'hidden';
+ getById("mainmenu").style.display = "none";
+ getById("translateButton").style.display = "none";
+ log("Update Mixer Event on REsize SET");
+ window.onresize = updateMixer;
+ window.onorientationchange = function(){
+ setTimeout(updateMixer, 200);
+
+ };
+ joinRoom(session.roomid); // this is a scene, so we want high resolutions
+ getById("main").style.overflow = "hidden";
+
+ if (session.chatbutton === true) {
+ getById("chatbutton").classList.remove("hidden");
+ getById("controlButtons").style.display = "inherit";
+ } else if (session.chatbutton === false) {
+ getById("chatbutton").classList.add("hidden");
+ }
+ } else if ((session.permaid === null) && (session.roomid == "")) {
+ if (!(session.cleanOutput)) {
+ getById("head3").classList.remove('hidden');
+ getById("head3a").classList.remove('hidden');
+ }
+ } else if ((window.obsstudio) && (session.permaid === false) && (session.director === false) && (session.view) &&(session.roomid.length>0)) { // we already know roomid !== false
+ updateURL("scene", true, false); // we also know it's not a scene, but we will assume it is in this specific case.
+ }
+
+
+ } else if (urlParams.has('director') || urlParams.has('dir')) { // if I do a short form of this, it will cause duplications in the code elsewhere.
+ if (directorLanding == false) {
+ var director_room_input = urlParams.get('director') || urlParams.get('dir');
+ director_room_input = sanitizeRoomName(director_room_input);
+ log("director_room_input:" + director_room_input);
+
+ if (urlParams.has('codirector') || urlParams.has('directorpassword') || urlParams.has('dirpass') || urlParams.has('dp')) {
+ session.directorPassword = urlParams.get('codirector') || urlParams.get('directorpassword') || urlParams.get('dirpass') || urlParams.get('dp');
+ if (!session.directorPassword) {
+ window.focus();
+ session.directorPassword = await promptAlt(miscTranslations["enter-director-password"], true);
+ } else {
+ session.directorPassword = decodeURIComponent(session.directorPassword);
+ }
+ if (session.directorPassword){
+ session.directorPassword = sanitizePassword(session.directorPassword)
+ await generateHash(session.directorPassword + session.salt + "abc123", 12).then(function(hash) { // million to one error.
+ log("dir room hash is " + hash);
+ session.directorHash = hash;
+ return;
+ }).catch(errorlog);
+ } else {
+ session.directorPassword = false;
+ }
+ }
+
+ setTimeout(function(director_room_input){createRoom(director_room_input);},20, director_room_input);
+ }
+ if (session.chatbutton === true) {
+ getById("chatbutton").classList.remove("hidden");
+ getById("controlButtons").style.display = "inherit";
+ } else if (session.chatbutton === false) {
+ getById("chatbutton").classList.add("hidden");
+ }
+ } else if ((session.view) && (session.permaid === false)) {
+ //if (!session.activeSpeaker){
+ session.audioMeterGuest = false;
+ //}
+ if ((session.style===false) && window.obsstudio){
+ session.style = 1;
+ }
+ if (session.audioEffects === null) {
+ session.audioEffects = false;
+ }
+ log("Update Mixer Event on REsize SET");
+ getById("translateButton").style.display = "none";
+ window.onresize = updateMixer;
+ window.onorientationchange = function(){setTimeout(function(){
+ updateMixer();
+ }, 200);};
+ getById("main").style.overflow = "hidden";
+
+ if (session.chatbutton === true) {
+ getById("chatbutton").classList.remove("hidden");
+ getById("controlButtons").style.display = "inherit";
+ } else if (session.chatbutton === false) {
+ getById("chatbutton").classList.add("hidden");
+ }
+ }
+
+ if (urlParams.has('nofileshare') || urlParams.has('nodownloads') || urlParams.has('nofiles')){
+ session.hostedFiles = false;
+ session.nodownloads = true;
+ getById('sharefilebutton').style.display = "none";
+ getById('sharefilebutton').classList.add("hidden");
+ } else if (session.mobile){
+ getById('sharefilebutton').style.display = "none";
+ getById('sharefilebutton').classList.add("hidden");
+ } else if (session.roomid==false){
+ getById('sharefilebutton').style.display = "none";
+ getById('sharefilebutton').classList.add("hidden");
+ }
+
+ if (session.audioEffects === null) {
+ session.audioEffects = true;
+ }
+
+ if (session.audioEffects) {
+ getById("channelGroup1").style.display = "block";
+ getById("channelGroup2").style.display = "block";
+ }
+
+ if (urlParams.has('hidemenu') || urlParams.has('hm')) { // needs to happen the room and permaid applications
+ getById("mainmenu").style.display = "none";
+ getById("header").style.display = "none";
+ getById("mainmenu").style.opacity = 0;
+ getById("header").style.opacity = 0;
+ }
+
+ if (session.view) {
+ getById("main").className = "";
+ getById("credits").style.display = 'none';
+ try {
+ if (session.label === false) {
+ if (document.title == "") {
+ document.title = "View=" + session.view.toString();
+ } else {
+ document.title += ", View=" + session.view.toString();
+ }
+ }
+ } catch (e) {
+ errorlog(e);
+ };
+ }
+
+ if (urlParams.has('waitimage')){
+ session.waitImage = urlParams.get('waitimage') || false;
+ }
+
+ if (((session.view) && (session.roomid === false)) || (session.waitImage && (session.scene!==false))) {
+
+ getById("container-4").className = 'column columnfade';
+ getById("container-3").className = 'column columnfade';
+ getById("container-2").className = 'column columnfade';
+ getById("container-1").className = 'column columnfade';
+ //getById("header").className = 'hidden';
+ getById("info").className = 'hidden';
+ getById("header").className = 'hidden';
+ getById("head1").className = 'hidden';
+ getById("head2").className = 'hidden';
+ getById("head3").classList.add('hidden');
+ getById("head3a").classList.add('hidden');
+
+
+ getById("mainmenu").style.backgroundRepeat = "no-repeat";
+ getById("mainmenu").style.backgroundPosition = "bottom center";
+ getById("mainmenu").style.minHeight = "100%";
+ getById("mainmenu").style.minWidth = "100%";
+ getById("mainmenu").style.backgroundSize = "100px 100px";
+ getById("mainmenu").innerHTML = '';
+ getById("mainmenu").classList.remove("row");
+ getById("mainmenu").style.display = "block";
+
+ if (urlParams.has('waittimeout')){
+ session.waitImageTimeout = parseInt(urlParams.get('waittimeout')) || 0;
+ }
+ if (!session.fakeFeeds){
+ session.waitImageTimeoutObject = setTimeout(function() {
+ session.waitImageTimeoutObject = true;
+ try {
+ if ((session.view)) {
+ if (document.getElementById("mainmenu")) {
+ if (session.waitImage){
+ getById("mainmenu").innerHTML += '';
+ getById("retryimage").src = decodeURIComponent(session.waitImage);
+ getById("retryimage").onerror = function(){this.style.display='none';};
+
+ if (session.cover) {
+ getById("retryimage").style.objectFit = "cover";
+ }
+
+ } else if (!(session.cleanOutput)){
+ getById("mainmenu").innerHTML += '';
+ getById("retrySpinner").onclick = function(){
+ updateURL("cleanoutput");
+ location.reload();
+ }
+ getById("retrySpinner").title = miscTranslations["waiting-for-the-stream"]
+ }
+ if (urlParams.has('waitmessage')){
+ getById("mainmenu").innerHTML += '';
+ getById("retrymessage").innerText = urlParams.get('waitmessage');
+ getById("retrySpinner").title = urlParams.get('waitmessage');
+ }
+ }
+ }
+ } catch (e) {
+ errorlog(e);
+ }
+ }, session.waitImageTimeout);
+ }
+
+ log("auto playing");
+ if ((iPad || iOS) && navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && SafariVersion > 13) { // Modern iOS doesn't need pop up
+ play();
+ } else if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) { // Safari on Desktop does require pop up
+ if (!(session.cleanOutput)) {
+ warnUser("Safari requires us to ask for an audio permission to use peer-to-peer technology. You will need to accept it in a moment if asked to view this live video", 20000);
+ }
+ navigator.mediaDevices.getUserMedia({
+ audio: true
+ }).then(function() {
+ closeModal();
+ play();
+ }).catch(function() {
+ play();
+ });
+ } else { // everything else is OK.
+ play();
+ }
+ } else if (session.roomid) {
+ try {
+ if (session.label === false) {
+ if (document.title == "") {
+ document.title = "Room=" + session.roomid.toString();
+ } else {
+ document.title += ": " + session.roomid.toString();
+ }
+ }
+ } catch (e) {
+ errorlog(e);
+ };
+
+ }
+
+ hideHomeCheck();
+
+ setTimeout(function(){
+ for (var i in delayedStartupFuncs) {
+ var cb = delayedStartupFuncs[i];
+ log(cb.slice(1));
+ cb[0](...cb.slice(1)); // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#A_better_apply
+ }
+ delayedStartupFuncs = [];
+ },50);
+
+ if ((session.effect=="3") || (session.effect=="4") || (session.effect=="5")){
+ attemptTFLiteJsFileLoad();
+ } else if (session.effect=="6"){
+ loadTensorflowJS();
+ } else if (session.effect=="9"){
+ session.effect="sample";
+ //loadEffect(session.effect);
+ warnUser("Loading custom effects model...",1000);
+ } else if (session.effect=="10"){
+ session.effect="dog";
+ //loadEffect(session.effect);
+ warnUser("Loading custom effects model...",1000);
+ } else if (session.effect=="11"){
+ session.effect="anon";
+ //loadEffect(session.effect);
+ warnUser("Loading custom effects model...",1000);
+ } else if (session.effect=="12"){
+ session.effect="sample";
+ //loadEffect(session.effect);
+ warnUser("Loading custom effects model...",1000);
+ } else if (session.effect=="facetracking"){
+ session.effect="1";
+ } else if (session.effect=="zoom"){
+ session.effect="7";
+ }
+
+ if (session.effect === "3"){
+ getById("selectEffectAmount").style.display = "block";
+ getById("selectEffectAmount3").style.display = "block";
+ getById("selectEffectAmountInput").value = session.effectValue;
+ getById("selectEffectAmountInput3").value = session.effectValue;
+ } else if (session.effect === "7"){
+ getById("selectEffectAmount").style.display = "block";
+ getById("selectEffectAmount3").style.display = "block";
+ session.effectValue = 1.0;
+ getById("selectEffectAmountInput").min = 1;
+ getById("selectEffectAmountInput").max = 1.99;
+ getById("selectEffectAmountInput").step = 0.01
+ getById("selectEffectAmountInput3").min = 1;
+ getById("selectEffectAmountInput3").max = 1.99;
+ getById("selectEffectAmountInput3").step = 0.01
+
+ getById("selectEffectAmountInput").value = session.effectValue;
+ getById("selectEffectAmountInput3").value = session.effectValue;
+ }
+
+ if (location.protocol !== 'https:') {
+ if (!(session.cleanOutput)) {
+ warnUser("SSL (https) is not enabled. This site will not work without it!
Try accessing the site from here instead.", false, false);
+ }
+ }
+
+ if (session.sensorData) {
+ setupSensorData(parseInt(session.sensorData));
+ }
+
+ try {
+ navigator.mediaDevices.ondevicechange = reconnectDevices;
+ } catch (e) {
errorlog(e);
}
+
+ if (urlParams.has('autohide')) {
+ session.autohide=true;
+ }
+ if (session.autohide && (session.scene===false)){// && (session.roomid!==false)){
+ getById("main").onmouseover = showControl; // this is correct. (it's not session.showControls)
+ document.ontouchstart = showControl; // this is correct. (it's not session.showControls)
+ getById("controlButtons").classList.add("zeroHeight");
+ getById("gridlayout").classList.add("nocontrolbar");
+ }
- if (session.speedtest){
- if (session.maxvideobitrate !== false) {
- if (session.maxvideobitrate > 6000) {
- session.maxvideobitrate = 6000; // Please feel free to get rid of this if using your own TURN servers...
- }
- } else {
- session.maxvideobitrate = 6000; // don't let people pull more than 2500 from you
- }
- if (session.bitrate !== false) {
- if (session.bitrate > 6000) {
- session.bitrate = 6000; // Please feel free to get rid of this if using your own TURN servers...
- }
- }
- } else {
- if (session.maxvideobitrate !== false) {
- if (session.maxvideobitrate > 2500) {
- session.maxvideobitrate = 2500; // Please feel free to get rid of this if using your own TURN servers...
- }
- } else {
- session.maxvideobitrate = 2500; // don't let people pull more than 2500 from you
- }
- if (session.bitrate !== false) {
- if (session.bitrate > 2500) {
- session.bitrate = 2500; // Please feel free to get rid of this if using your own TURN servers...
- }
- }
+ if (urlParams.has('flagship')) {
+ session.flagship = true;
}
-}
-
-if (urlParams.has('wss')) {
- if (urlParams.get('wss')) {
- session.wss = "wss://" + urlParams.get('wss');
+ //if (!session.flagship && session.mobile && (session.limitTotalBitrate===false)){
+ // session.limitTotalBitrate = session.totalRoomBitrate_default; // 500, with the max per guest stream out at maxMobileBitrate (350kbps) or 35-kbps if more than X in the room.
+ //}
+
+ if (urlParams.has('maxmobilebitrate')) {
+ session.maxMobileBitrate = parseInt(urlParams.has('maxmobilebitrate')) || 0;
+ }
+ if (urlParams.has('lowmobilebitrate')) {
+ session.lowMobileBitrate = parseInt(urlParams.has('lowmobilebitrate')) || 0;
}
-}
-if (urlParams.has('queue')) {
- session.queue = true;
-}
-
-if (isIFrame) { // reduce CPU load if not needed.
- window.onmessage = function(e) { // iFRAME support
- log(e);
+ // Please contact steve on discord.vdo.ninja if you'd like this iFRAME tweaked, expanded, etc -- it's updated based on user request
+
+ session.remoteInterfaceAPI = function(e) { // iFRAME api support
+ warnlog(e);
try {
if ("function" in e.data) { // these are calling in-app functions, with perhaps a callback -- TODO: add callbacks
var ret = null;
@@ -2611,6 +4139,10 @@ if (isIFrame) { // reduce CPU load if not needed.
ret.innerHTML = e.data.value;
} else if (e.data.function === "publishScreen") {
ret = publishScreen();
+ } else if (e.data.function === "routeMessage"){
+ try {
+ session.ws.onmessage({data: e.data.value});
+ } catch(e){warnlog("handshake not yet setup");}
} else if (e.data.function === "eval") {
eval(e.data.value); // eval == evil ; feedback welcomed
}
@@ -2618,13 +4150,52 @@ if (isIFrame) { // reduce CPU load if not needed.
} catch (err) {
errorlog(err);
}
+
+ if ("sendData" in e.data) { // send generic data via p2p. Send whatever you want I guess; there is a max chunk size of course. Use filetransfer for large files?
+ var UUID = false;
+ var streamID = false;
+ var type = false;
+ if (e.data.UUID){
+ UUID = e.data.UUID;
+ } else if (e.data.streamID){
+ streamID = e.data.streamID;
+ }
+ if (e.data.type){
+ type = e.data.type;
+ }
+ var ret = session.sendGenericData(e.data.sendData, UUID, streamID, type); // comes out the other side as: ("dataReceived", data, UUID);
+ if (!ret){warnlog("Not connected yet or no peers available");}
+ return;
+ }
+
+ if ("PPT" in e.data){
+ log("PTT activated-webmain");
+ if (e.data.PPT === true) { // unmute
+ session.muted = false; // set
+ getById("mutebutton").classList.add("PPTActive");
+ log(session.muted);
+ toggleMute(true); // apply
+
+ } else if (e.data.PPT === false) { // mute
+ session.muted = true; // set
+ getById("mutebutton").classList.remove("PPTActive");
+ log(session.muted);
+ toggleMute(true); // apply
+ } else if (e.data.PPT === "toggle") { // toggle
+ toggleMute();
+ }
+ return; // this is a high-load call, so lets skip the rest of the checks to save cpu.
+ }
if ("sendChat" in e.data) {
sendChat(e.data.sendChat); // sends to all peers; more options down the road
+ return;
}
// Chat out gets called via getChatMessage function
// Related code: parent.postMessage({"chat": {"msg":-----,"type":----,"time":---} }, "*");
+ // session.requestResolution(vid.dataset.UUID, wrw*window.devicePixelRatio, hrh*window.devicePixelRatio);
+
if ("mic" in e.data) { // this should work for the director's mic mute button as well. Needs to be manually enabled the first time still tho.
if (e.data.mic === true) { // unmute
session.muted = false; // set
@@ -2652,7 +4223,63 @@ if (isIFrame) { // reduce CPU load if not needed.
toggleVideoMute();
}
}
-
+
+ if ("keyframe" in e.data) {
+ session.sendKeyFrameScenes();
+ }
+
+
+ if ("groups" in e.data) {
+ if (typeof e.data.groups == "object"){
+ session.group = e.data.groups || [];
+ } else if (!e.data.group){
+ session.group = [];
+ } else {
+ session.group = e.data.groups.split(",");
+ }
+ var eleGroup = getById("groups");
+ eleGroup.querySelectorAll('[data-action-type="toggle-group"][data-group]').forEach(group=>{
+ if (!(session.group && session.group.includes(group))){
+ group.remove("green");
+ }
+ });
+
+ if (session.group){
+ session.group.forEach(group =>{
+ var ele = eleGroup.querySelector('[data-action-type="toggle-group"][data-group="'+group+'"');
+ if (!ele){
+ ele = document.createElement("div");
+ ele.dataset.actionType = "toggle-group";
+ ele.dataset.group = group;
+ ele.classList.add('float');
+ ele.style.display = "inline-block";
+ ele.role = "button";
+ ele.innerHTML = ' '+group;
+ eleGroup.appendChild(ele);
+ ele.onclick = function(){
+ changeGroupDirectorAPI(this.dataset.group);
+ }
+ }
+ ele.classList.add("green");
+ });
+ }
+
+ updateMixer();
+
+ if (session.group.length || session.allowNoGroup){
+ session.sendMessage({"group":session.group.join(",")});
+ if (session.screenShareState && (session.screenshareType ===3)){
+ session.sendMessage({"group":session.group.join(","), altUUID:true});
+ }
+ } else {
+ session.sendMessage({"group":false});
+ if (session.screenShareState && (session.screenshareType ===3)){
+ session.sendMessage({"group":false, altUUID:true});
+ }
+ }
+
+ }
+
if ("mute" in e.data) {
if (e.data.mute === true) { // unmute
session.speakerMuted = true; // set
@@ -2680,72 +4307,227 @@ if (isIFrame) { // reduce CPU load if not needed.
if ("recording" in session.videoElement) {
recordLocalVideo("stop");
}
- } else if (e.data.record == true){
+ } else if (e.data.record === true){
if ("recording" in session.videoElement) {
// already recording
} else {
recordLocalVideo("start");
}
- }
- }
-
-
- if ("volume" in e.data) {
- for (var i in session.rpcs) {
- try {
- session.rpcs[i].videoElement.volume = parseFloat(e.data.volume);
- } catch (e) {
- errorlog(e);
+ } else if (e.data.record){
+ var video = document.getElementById(e.data.record);
+ if (video){
+ recordLocalVideo(null, 4000, video);
}
}
}
- if ("bitrate" in e.data) {
+
+ if ("volume" in e.data) { // might not work with iframes or meshcast currently.
+ session.volume = parseFloat(e.data.volume) || 0;
+ if (session.volume > 1.0){ // this is a bit quasi improper. But the API is official 0 to 1.0; not 0 to 100, so this is mainly a catch for those not using the API right.
+ session.volume = session.volume/100.0;
+ }
+ if (!("target" in e.data) || (e.data.target == "*")){
+ if (session.videoElement){
+ session.videoElement.volume = session.volume;
+ }
+ }
for (var i in session.rpcs) {
try {
- session.requestRateLimit(parseInt(e.data.bitrate), i);
+ if (!session.rpcs[i].videoElement){continue;}
+ if ("streamID" in session.rpcs[i]) {
+ if ("target" in e.data) {
+ if ((session.rpcs[i].streamID == e.data.target) || (e.data.target == "*")) { // specify a stream ID or let it apply to all videos
+ session.rpcs[i].videoElement.volume = session.volume;
+ }
+ } else {
+ session.rpcs[i].videoElement.volume = session.volume;
+ }
+ }
} catch (e) {
errorlog(e);
}
}
}
- if ("audiobitrate" in e.data) {
- for (var i in session.rpcs) {
+
+
+ if ("panning" in e.data){ // panning adjusts the stereo pan , although current its UUID based. can add stream ID based if requested.
+ if ("UUID" in e.data){
try {
- session.requestAudioRateLimit(parseInt(e.data.audiobitrate), i);
+ adjustPan(UUID, e.data.panning);
} catch (e) {
errorlog(e);
}
- }
- }
-
-
- if ("sceneState" in e.data) { // TRUE OR FALSE - tells the connected peers if they are live or not via a tally light change.
-
- var visibility = e.data.sceneState;
- var bundle = {};
- bundle.sceneUpdate = [];
-
- for (var UUID in session.rpcs) {
- if (session.rpcs[UUID].visibility !== visibility) { // only move forward if there is a change; the event likes to double fire you see.
-
- session.rpcs[UUID].visibility = visibility;
- var msg = {};
- msg.visibility = visibility;
-
- if (session.rpcs[UUID].videoElement.style.display == "none") { // Flag will be left alone, but message will say its disabled.
- msg.visibility = false;
+ } else {
+ for (var i in session.rpcs) {
+ try {
+ adjustPan(i, e.data.panning);
+ } catch (e) {
+ errorlog(e);
}
-
- msg.UUID = UUID;
- session.sendRequest(msg, UUID);
- bundle.sceneUpdate.push(msg);
}
}
- session.sendRequest(bundle); // we want all publishing peers to know the state
+ }
+
+ if (("targetBitrate" in e.data) || ("targetAudioBitrate" in e.data)) { // this sets the fundemental bitrate target, but does not necessarily "lock" .
+
+ var msg = {};
+ if ("targetBitrate" in e.data){
+ msg.targetBitrate = e.data.targetBitrate;
+ }
+ if ("targetAudioBitrate" in e.data){
+ msg.targetAudioBitrate = e.data.targetAudioBitrate;
+ }
+ if (e.data.requestAs){
+ msg.requestAs = e.data.requestAs;
+ }
+ if (e.data.remote){
+ msg.remote = e.data.remote;
+ }
+ for (var i in session.rpcs) {
+ try {
+ if ("streamID" in session.rpcs[i]) {
+ if ("target" in e.data) {
+ if ((session.rpcs[i].streamID == e.data.target) || (e.data.target == "*")) { // specify a stream ID or let it apply to all videos
+ session.sendRequest(msg, i);
+ }
+ } else if (e.data.UUID && (e.data.UUID===i)) {
+ session.sendRequest(msg, i);
+ } else if (e.data.streamID) {
+ if (session.rpcs[i].streamID == e.data.streamID) { // specify a stream ID or let it apply to all videos
+ session.sendRequest(msg, i);
+ }
+ } else {
+ session.sendRequest(msg, i); // bitrate = 0 pauses the video
+ }
+ }
+ } catch (e) {
+ errorlog(e);
+ }
+ }
+ }
+
+ if ("manualBitrate" in e.data){
+ for (var i in session.rpcs) {
+ try {
+ if ("streamID" in session.rpcs[i]) {
+ if ("target" in e.data) {
+ if ((session.rpcs[i].streamID == e.data.target) || (e.data.target == "*")) { // specify a stream ID or let it apply to all videos
+ session.rpcs[i].manualBandwidth = e.data.manualBitrate;
+ session.requestRateLimit(false, i);
+ }
+ } else if (e.data.UUID && (e.data.UUID===i)) {
+ session.rpcs[i].manualBandwidth = e.data.manualBitrate;
+ session.requestRateLimit(false, i);
+ } else if (e.data.streamID) {
+ if (session.rpcs[i].streamID == e.data.streamID) { // specify a stream ID or let it apply to all videos
+ session.rpcs[i].manualBandwidth = e.data.manualBitrate
+ session.requestRateLimit(false, i);
+ }
+ } else {
+ session.rpcs[i].manualBandwidth = e.data.manualBitrate;
+ session.requestRateLimit(false, i);
+ }
+ }
+ } catch (e) {
+ errorlog(e);
+ }
+ }
}
+ if ("bitrate" in e.data) { /// set a video bitrate for a video; scene or view link; kbps
+ var lock = true;
+ if ("lock" in e.data){ // since this is the iframe API, we're going to assume the default is manual over-ride. VDO.Ninja's automixer logic won't override a locked bitrate.
+ lock = e.data.lock;
+ }
+ for (var i in session.rpcs) {
+ try {
+ if ("streamID" in session.rpcs[i]) { // we only target publishers with this call
+ if ("target" in e.data) {
+ if ((session.rpcs[i].streamID == e.data.target) || (e.data.target == "*")) { // specify a stream ID or let it apply to all videos
+ session.requestRateLimit(e.data.bitrate, i, false, lock);
+ }
+ } else if (e.data.UUID && (e.data.UUID===i)) {
+ session.requestRateLimit(e.data.bitrate, i, false, lock);
+ } else if (e.data.streamID) {
+ if (session.rpcs[i].streamID == e.data.streamID) { // specify a stream ID or let it apply to all videos
+ session.requestRateLimit(e.data.bitrate, i, false, lock);
+ }
+ } else {
+ session.requestRateLimit(e.data.bitrate, i, false, lock); // bitrate = 0 pauses the video
+ }
+ }
+ } catch (e) {
+ errorlog(e);
+ }
+ }
+ }
+
+ if ("audiobitrate" in e.data) { // changes the audio bitrate of a specific or all inbound media tracks. kbps
+ var lock = true;
+ if ("lock" in e.data){ // since this is the iframe API, we're going to assume the default is manual over-ride. VDO.Ninja's automixer logic won't override a locked bitrate.
+ lock = e.data.lock;
+ }
+ for (var i in session.rpcs) {
+ try {
+ if ("streamID" in session.rpcs[i]) { // we only target publishers with this call
+ if ("target" in e.data) {
+ if ((session.rpcs[i].streamID == e.data.target) || (e.data.target == "*")) { // specify a stream ID or let it apply to all videos
+ session.requestAudioRateLimit(parseInt(e.data.bitrate), i, lock);
+ }
+ } else if (e.data.UUID && (e.data.UUID===i)) {
+ session.requestAudioRateLimit(parseInt(e.data.bitrate), i, lock);
+ } else if (e.data.streamID) {
+ if (session.rpcs[i].streamID == e.data.streamID) { // specify a stream ID or let it apply to all videos
+ session.requestAudioRateLimit(parseInt(e.data.bitrate), i, lock);
+ }
+ } else {
+ session.requestAudioRateLimit(parseInt(e.data.bitrate), i, lock); // bitrate = 0 pauses the video
+ }
+ }
+ } catch (e) {
+ errorlog(e);
+ }
+ }
+ }
+
+ if ("changeVideoDevice" in e.data) {
+ warnlog(e.data.changeVideoDevice);
+ changeVideoDevice(e.data.changeVideoDevice);
+ }
+
+ if ("changeAudioDevice" in e.data) {
+ warnlog(e.data.changeAudioDevice);
+ changeAudioDevice(e.data.changeAudioDevice);
+ }
+
+ if ("changeAudioOutputDevice" in e.data) {
+ warnlog(e.data.changeAudioOutputDevice);
+ changeAudioOutputDeviceById(e.data.changeAudioOutputDevice);
+ }
+
+ if ("getDeviceList" in e.data) { // get a list of local camera / audio devices
+ warnlog(e.data.getDeviceList);
+ enumerateDevices().then(function(deviceInfos) {
+ parent.postMessage({
+ "deviceList": JSON.parse(JSON.stringify(deviceInfos))
+ }, session.iframetarget);
+ });
+ }
+
+ if ("sceneState" in e.data) { // TRUE OR FALSE - tells the connected peers if they are live or not via a tally light change.
+ var msg = {};
+ msg.obsState = {};
+ msg.obsState.visibility = e.data.sceneState || false;
+ msg.obsState.recording = e.data.sceneState || false;
+ session.sendRequest(msg);
+ }
+
+ if ("layouts" in e.data) {
+ session.layouts = e.data.layouts;
+ }
+
if ("sendMessage" in e.data) { // webrtc send to viewers
session.sendMessage(e.data);
}
@@ -2753,136 +4535,239 @@ if (isIFrame) { // reduce CPU load if not needed.
if ("sendRequest" in e.data) { // webrtc send to publishers
session.sendRequest(e.data);
}
+
+ if ("sendRawMIDI" in e.data) { // webrtc send to publishers
+ //var msg = {};
+ //msg.midi = {};
+ //msg.midi.d = e.data.sendRawMIDI.data; aka [d1,d2,d3];
+ //msg.midi.c = e.data.sendRawMIDI.channel;
+ //msg.midi.s = e.data.sendRawMIDI.timestamp;
+ // e.data.UUID or e.data.streamID or leave empty to send to all
+ if ("UUID" in e.data){
+ sendRawMIDI(e.data.sendRawMIDI, e.data.UUID); // send to connection
+ } else if (e.data.streamID){
+ sendRawMIDI(e.data.sendRawMIDI, false, e.data.streamID); // send to connection
+ } else {
+ sendRawMIDI(e.data.sendRawMIDI); // send to all
+ }
+ return; // make it send faster.
+ }
if ("sendPeers" in e.data) { // webrtc send message to every connected peer; like send and request; a hammer vs a knife.
session.sendPeers(e.data);
}
- if ("reload" in e.data) {
- location.reload();
+ if ("reload" in e.data) { // reload the page
+ reloadRequested(); // location.reload();, but with no user prompt (force reload)
+ }
+
+ if ("getFaces" in e.data){
+ if (e.data.faceTrack){
+ session.grabFaceData = true;
+ getFaces();
+ } else {
+ session.grabFaceData = false;
+ }
}
- if ("getStats" in e.data) {
-
+ if (("getStats" in e.data)){
var stats = {};
- stats.total_outbound_connections = Object.keys(session.pcs).length;
- stats.total_inbound_connections = Object.keys(session.rpcs).length;
- stats.inbound_stats = {};
- for (var i in session.rpcs) {
- stats.inbound_stats[session.rpcs[i].streamID] = session.rpcs[i].stats;
- }
-
-
- for (var uuid in session.pcs) {
- setTimeout(function(UUID) {
- session.pcs[UUID].getStats().then(function(stats) {
- stats.forEach(stat => {
- if (stat.type == "outbound-rtp") {
- if (stat.kind == "video") {
-
- if ("qualityLimitationReason" in stat) {
- session.pcs[UUID].stats.quality_limitation_reason = stat.qualityLimitationReason;
- }
- if ("framesPerSecond" in stat) {
- session.pcs[UUID].stats.resolution = stat.frameWidth + " x " + stat.frameHeight + " @ " + stat.framesPerSecond;
- }
- if ("encoderImplementation" in stat) {
- session.pcs[UUID].stats.encoder = stat.encoderImplementation;
- }
- }
- } else if (stat.type == "remote-candidate") {
- if ("relayProtocol" in stat) {
- if ("ip" in stat) {
- session.pcs[UUID].stats.remote_relay_IP = stat.ip;
- }
- session.pcs[UUID].stats.remote_relayProtocol = stat.relayProtocol;
- }
- if ("candidateType" in stat) {
- session.pcs[UUID].stats.remote_candidateType = stat.candidateType;
- }
- } else if (stat.type == "local-candidate") {
- if ("relayProtocol" in stat) {
- if ("ip" in stat) {
- session.pcs[UUID].stats.local_relayIP = stat.ip;
- }
- session.pcs[UUID].stats.local_relayProtocol = stat.relayProtocol;
- }
- if ("candidateType" in stat) {
- session.pcs[UUID].stats.local_candidateType = stat.candidateType;
- }
- } else if ((stat.type == "candidate-pair" ) && (stat.nominated)) {
+ try {
+ stats.inbound_stats = {};
+ stats.total_outbound_connections = Object.keys(session.pcs).length;
+ stats.total_inbound_connections = Object.keys(session.rpcs).length;
+ for (var i in session.rpcs) {
+ stats.inbound_stats[session.rpcs[i].streamID] = session.rpcs[i].stats;
+ }
+ for (var uuid in session.pcs) {
+ setTimeout(function(UUID) {
+ session.pcs[UUID].getStats().then(function(stats) {
+ stats.forEach(stat => {
- if ("availableOutgoingBitrate" in stat){
- session.pcs[UUID].stats.available_outgoing_bitrate_kbps = parseInt(stat.availableOutgoingBitrate/1024);
+ if (stat.id && stat.id.startsWith("DEPRECATED_")){return;}
+
+ if (stat.type == "outbound-rtp") {
+ if (stat.kind == "video") {
+
+ if ("qualityLimitationReason" in stat) {
+
+ session.pcs[UUID].stats.quality_limitation_reason = stat.qualityLimitationReason;
+ }
+ if ("framesPerSecond" in stat) {
+ session.pcs[UUID].stats.resolution = stat.frameWidth + " x " + stat.frameHeight + " @ " + stat.framesPerSecond;
+ }
+ if ("encoderImplementation" in stat) {
+ session.pcs[UUID].stats.encoder = stat.encoderImplementation;
+ }
+ }
+ } else if (stat.type == "remote-candidate") {
+ if ("relayProtocol" in stat) {
+ if ("ip" in stat) {
+ session.pcs[UUID].stats.remote_relay_IP = stat.ip;
+ }
+ session.pcs[UUID].stats.remote_relayProtocol = stat.relayProtocol;
+ }
+ if ("candidateType" in stat) {
+ session.pcs[UUID].stats.remote_candidateType = stat.candidateType;
+ }
+ } else if (stat.type == "local-candidate") {
+ if ("relayProtocol" in stat) {
+ if ("ip" in stat) {
+ session.pcs[UUID].stats.local_relayIP = stat.ip;
+ }
+ session.pcs[UUID].stats.local_relayProtocol = stat.relayProtocol;
+ }
+ if ("candidateType" in stat) {
+ session.pcs[UUID].stats.local_candidateType = stat.candidateType;
+ }
+ } else if ((stat.type == "candidate-pair" ) && (stat.nominated)) {
+
+ if ("availableOutgoingBitrate" in stat){
+ session.pcs[UUID].stats.available_outgoing_bitrate_kbps = parseInt(stat.availableOutgoingBitrate/1024);
+ }
+ if ("totalRoundTripTime" in stat){
+ if ("responsesReceived" in stat){
+ session.pcs[UUID].stats.average_roundTripTime_ms = parseInt((stat.totalRoundTripTime/stat.responsesReceived)*1000);
+ }
+
+ }
}
- if ("totalRoundTripTime" in stat){
- session.pcs[UUID].stats.total_roundTripTime_ms = stat.totalRoundTripTime*1000;
- }
- }
+ return;
+ });
return;
});
- return;
- });
- }, 0, uuid);
+ }, 0, uuid);
+ }
+ } catch(e){
+ // disconnected probably
}
setTimeout(function() {
stats.outbound_stats = {};
- for (var i in session.pcs) {
- stats.outbound_stats[i] = session.pcs[i].stats;
- }
+ try {
+ for (var i in session.pcs) {
+ stats.outbound_stats[i] = session.pcs[i].stats;
+ }
+ } catch(e){}
parent.postMessage({
"stats": stats
- }, "*");
+ }, session.iframetarget);
}, 1000);
}
if ("getRemoteStats" in e.data) {
- session.sendRequest({"requestStats":true, "remote":session.remote});
+ if (session.remote){
+ session.sendRequest({"requestStats":true, "remote":session.remote});
+ } else {
+ session.sendRequest({"requestStats":true});
+ }
+ }
+
+ if ("requestStatsContinuous" in e.data) {
+ if (session.remote){
+ session.sendRequest({"requestStatsContinuous":e.data.requestStatsContinuous, "remote":session.remote});
+ } else {
+ session.sendRequest({"requestStatsContinuous":e.data.requestStatsContinuous});
+ }
}
if ("getLoudness" in e.data) {
log("GOT LOUDNESS REQUEST");
if (e.data.getLoudness == true) {
- session.pushLoudness = true;
- var loudness = {};
+ if (!session.pushLoudness && (session.audioEffects!==true)){
+ session.pushLoudness = true;
+ for (var i in session.rpcs) {
+ updateIncomingAudioElement(i); // this can be called when turning on/off inbound audio processing.
+ }
+ } else {
+ session.pushLoudness = true;
+ }
+
+ var loudness = {};
for (var i in session.rpcs) {
loudness[session.rpcs[i].streamID] = session.rpcs[i].stats.Audio_Loudness;
}
parent.postMessage({
"loudness": loudness
- }, "*");
+ }, session.iframetarget);
} else {
- session.pushLoudness = false;
+ if (session.pushLoudness && !session.audioEffects){ // turn off audio processing
+ session.pushLoudness = false;
+ for (var i in session.rpcs) {
+ updateIncomingAudioElement(i)
+ }
+ } else {
+ session.pushLoudness = false; // can't turn off audio processing
+ }
+ }
+ }
+
+ if ("getEffectsData" in e.data) {
+ log("GOT getEffects Data REQUESTed"); // face tracking info, etc.
+ if (e.data.getEffectsData !== false) {
+ session.pushEffectsData = e.data.getEffectsData; // which effect do you want the data from? it won't enable the effect necessarily; just the ML pipeline
+
+ //parent.postMessage({
+ // "effectsData": effectsData,
+ // "effectsID": session.pushEffectsData
+ //}, session.iframetarget);
+
+ } else {
+ session.pushEffectsData = false;
}
}
- if ("getStreamIDs" in e.data) {
- if (e.data.getStreamIDs == true) {
+ if ("getStreamIDs" in e.data) { // get a list of stream Ids, with a label if it is present. label = false if not there
+ if (e.data.getStreamIDs) {
var streamIDs = {};
for (var i in session.rpcs) {
streamIDs[session.rpcs[i].streamID] = session.rpcs[i].label;
}
parent.postMessage({
"streamIDs": streamIDs
- }, "*");
-
+ }, session.iframetarget);
}
}
-
- if ("close" in e.data) {
- for (var i in session.rpcs) {
- try {
- session.rpcs[i].close();
- } catch (e) {
- errorlog(e);
+
+ if ("getStreamInfo" in e.data) { // get a list of stream Ids, with a label if it is present. label = false if not there
+ try {
+ var UUIDS = {};
+ for (var i in session.rpcs){
+ UUIDS[i] = {};
+ UUIDS[i].label = session.rpcs[i].label || false;
+ UUIDS[i].streamID = session.rpcs[i].streamID || false;
+ if (session.rpcs[i].stats && session.rpcs[i].stats.info){
+ UUIDS[i].info = session.rpcs[i].stats.info;
+ } else {
+ UUIDS[i].info = {};
+ }
}
+ parent.postMessage({
+ "streamInfo": UUIDS
+ }, session.iframetarget);
+ } catch(e){
+ errorlog(e);
}
}
- if ("style" in e.data) {
+ if (("close" in e.data) || ("hangup" in e.data)) { // disconnect and hangup all inbound streams.
+ var tmp = e.data.close || e.data.hangup;
+ if (tmp == "estop"){ // try to stop the video recording even if not complete; if you can't wait even ms before a reload/exit.
+ console.log("ESTOP");
+ session.hangup(false,true);
+ } else if (tmp == "reload"){ // stop and reload the page safely.
+ session.hangup(true);
+ } else { // just hangup, but can take up to 1-second to do so fully.
+ session.hangup();
+ }
+ }
+ if ("hangup" in e.data) { // disconnect and hangup all inbound streams.
+ session.hangup();
+ }
+
+ if ("style" in e.data) { // insert a custom style sheet
try {
const style = document.createElement('style');
style.textContent = e.data.style;
@@ -2892,9 +4777,15 @@ if (isIFrame) { // reduce CPU load if not needed.
errorlog(e);
}
}
+
+ if ("getDetailedState" in e.data) {
+ var detailedState = getDetailedState();
+ parent.postMessage({
+ "detailedState": detailedState
+ }, session.iframetarget);
+ }
-
- if ("automixer" in e.data) {
+ if ("automixer" in e.data) { // stop the auto mixer if you want to control the layout and bitrate yourself
if (e.data.automixer == true) {
session.manual = false;
try {
@@ -2904,21 +4795,144 @@ if (isIFrame) { // reduce CPU load if not needed.
session.manual = true;
}
}
+
+ if ("advancedMode" in e.data){
+ if (e.data.advancedMode){
+ document.documentElement.style.setProperty('--advanced-mode', "inline-block"); // show advanced items
+ } else {
+ document.documentElement.style.setProperty('--advanced-mode', "none"); // hide advanced items
+ }
+ }
+
+ if ("requestStream" in e.data){
+ if (e.data.requestStream){ // load a specific stream ID
+ log("requestStream iframe api");
+ session.requestStream(e.data.requestStream);
+ } // don't use if the stream is in your room (as not needed)
+ } // you can load a stream ID from inside a room that exists outside any room
+
+
+ if ("previewMode" in e.data){
+ if ("layout" in e.data){
+ session.layout = e.data.layout;
+ pokeIframeAPI("layout-updated", session.layout);
+ }
+ switchModes(e.data.previewMode);
+ } else if ("layout" in e.data){
+ warnlog("changing layout request via IFRAME API");
+ session.layout = e.data.layout;
+ pokeIframeAPI("layout-updated", session.layout);
+
+ if (e.data.obsCommand){
+ issueLayoutOBS(e.data);
+ } else {
+ if (session.director){
+ if ("scene" in e.data){
+ if ("UUID" in e.data){
+ issueLayout(e.data.layout, e.data.scene, e.data.UUID);
+ } else {
+ issueLayout(e.data.layout, e.data.scene);
+ }
+ } else if ("UUID" in e.data){
+ issueLayout(e.data.layout, false, e.data.UUID);
+ }
+ }
+ }
+ updateMixer();
+ } else if (e.data.obsCommand){
+ errorlog("obsCommand via iframe API currently needs a layout..");
+ }
+
+
+ if ("slotmode" in e.data){
+ if (session.slotmode){
+ session.slotmode = parseInt(e.data.slotmode);
+ } else {
+ session.slotmode = false;
+ }
+ }
+
+ //////////// manual scale. Request a specific down-scaled resolution from a remote connection
+ var targetWidth = false;
+ var targetHeight = false;
+ if ("targetWidth" in e.data){
+ targetWidth = e.data.targetWidth || 0;
+ }
+ if ("targetHeight" in e.data){
+ targetHeight = e.data.targetHeight || 0;
+ }
+ // session.viewheight or session.viewwidth
+ if ((targetWidth || targetHeight) && e.data.UUID){
+ var requestAs = false;
+ if (e.data.requestAs){
+ requestAs = e.data.requestAs;
+ }
+ session.requestResolution(e.data.UUID, targetWidth || 4096 , targetHeight || 2160 , false, requestAs); // this is fine.
+ }
+ ////////////////
+
+ if ("scale" in e.data) {
+ if (e.data.scale === false){
+ session.dynamicScale = true; // disable manual scaling
+ updateMixer();
+ var scale = false;
+ } else {
+ session.dynamicScale = false;
+ var scale = parseInt(e.data.scale) || 100;
+ }
- if ("target" in e.data) {
+ if (e.data.UUID){
+ session.sendRequest({scale:scale}, UUID);
+ } else if (e.data.target){
+ for (var i in session.rpcs) {
+ try {
+ if ("streamID" in session.rpcs[i]) {
+ if ("target" in e.data) {
+ if ((session.rpcs[i].streamID == e.data.target) || (e.data.target == "*")) { // specify a stream ID or let it apply to all videos
+ session.sendRequest({scale:scale}, i);
+ }
+ } else {
+ session.sendRequest({scale:scale}, i);
+ }
+ }
+ } catch (e) {
+ errorlog(e);
+ }
+ }
+ } else {
+ session.sendRequest({scale:scale});
+ }
+
+ }
+
+
+ if (("action" in e.data) && (e.data.action!="null")) { /////////////// reuse the Companion API
+ var resp = processMessage(e.data); // reuse the companion API
+ if (resp!==null){
+ log(resp);
+ parent.postMessage(resp, session.iframetarget);
+ }
+ } else if ("target" in e.data) {
log(e.data);
for (var i in session.rpcs) {
try {
if ("streamID" in session.rpcs[i]) {
if ((session.rpcs[i].streamID == e.data.target) || (e.data.target == "*")) {
try {
+
if ("settings" in e.data) {
- for (const property in e.data.settings) {
- session.rpcs[i].videoElement[property] = e.data.settings[property];
- }
+ try{
+ for (const property in e.data.settings) {
+ try {
+ session.rpcs[i].videoElement[property] = e.data.settings[property];
+ } catch(e){}
+ }
+ } catch(e){}
}
if ("add" in e.data) {
- getById("gridlayout").appendChild(session.rpcs[i].videoElement);
+ try{
+ getById("gridlayout").appendChild(session.rpcs[i].videoElement);
+ } catch(e){warnlog(e);}
} else if ("remove" in e.data) {
try {
@@ -2928,7 +4942,16 @@ if (isIFrame) { // reduce CPU load if not needed.
session.rpcs[i].videoElement.parentNode.parentNode.removeChild(session.rpcs[i].videoElement.parentNode);
} catch (e) {}
}
- }
+ } else if ("replace" in e.data) { // should allow for a cleaner cut between two video streams.
+ try {
+ getById("gridlayout").appendChild(session.rpcs[i].videoElement);
+ getById("gridlayout").childNodes.forEach(ele=>{
+ if ((!ele.id) || (ele.id !== session.rpcs[i].videoElement.id)){
+ getById("gridlayout").removeChild(ele);
+ }
+ });
+ } catch(e){}
+ }
} catch (e) {
errorlog(e);
}
@@ -2940,13762 +4963,554 @@ if (isIFrame) { // reduce CPU load if not needed.
}
}
};
-}
+
+ if (isIFrame) { // reduce CPU load if not needed. //iframe API
+ window.onmessage = session.remoteInterfaceAPI;
+ }
-function setupIncomingVideoTracking(v, UUID){ // video element.
-
- if (session.directorUUID===UUID){
- v.muted=false;
- } else {
- v.muted = session.speakerMuted;
- }
-
- v.onpause = (event) => { // prevent things from pausing; human or other
- if (!((event.ctrlKey) || (event.metaKey) )){
- warnlog("Video paused; force it to play again");
- //return;
- //session.audioCtx.resume();
- //log("ctx resume");
-
- event.currentTarget.play().then(_ => {
- log("playing");
- }).catch(error => {
- warnlog("didnt play 1");
- });
-
- }
- }
-
- v.onplay = function(){
- try {
- var bigPlayButton = document.getElementById("bigPlayButton");
- if (bigPlayButton){
- bigPlayButton.parentNode.removeChild(bigPlayButton);
- }
- } catch(e){}
- if (session.pip){
- if (v.readyState >= 3){
- if (!(v.pip)){
- v.pip=true;
- toggleSystemPip(v, true);
- }
- }
- }
+ if (session.midiHotkeys || session.midiOut!==false) {
- }
-
- if (session.pip){
- v.onloadedmetadata = function(){
- if (!v.paused){
- if (!(v.pip)){
- v.pip=true;
- toggleSystemPip(v, true);
- }
- }
- }
- }
+ var script = document.createElement('script');
+ script.onload = function() {
+ WebMidi.enable().then(() =>{
-
- v.addEventListener('resize', (e) => {
- log("resize event");
- var aspectRatio = parseFloat(e.target.videoWidth/e.target.videoHeight);
- if (v.dataset.aspectRatio){
- if (aspectRatio != v.dataset.aspectRatio){
- setTimeout(function(){updateMixer();},1); // We don't want to run this on the first resize? just subsequent ones.
- }
- } else {
- log("ASPECT RATIO CHANGED");
- setTimeout(function(){updateMixer();},1);
- }
- v.dataset.aspectRatio = parseFloat(e.target.videoWidth/e.target.videoHeight);
- });
-
- v.volume = 1.0; // play audio automatically
- v.autoplay = true;
- v.controls = false;
- v.className += "tile";
- v.setAttribute("playsinline","");
- v.controlTimer = null;
-
- changeAudioOutputDevice(v); // if enabled, changes to desired output audio device.
-
- if (document.getElementById("mainmenu")){
- var m = getById("mainmenu");
- m.remove();
- }
-
- if (session.director){
- v.controls = true;
- var container = getById("videoContainer_"+UUID);
- v.disablePictureInPicture = false
- v.setAttribute("controls","controls")
- container.appendChild(v);
- session.requestRateLimit(session.directorViewBitrate,UUID); /// limit resolution for director
-
- if (session.beepToNotify) {
- playtone();
- }
-
- } else if (session.scene!==false){
- v.controls = false;
-
- if (session.view){ // specific video to be played
- v.style.display="block";
- } else if (session.scene===0){
- v.style.display="block";
- } else { // group scene I guess; needs to be added manually
- v.style.display="none";
- v.muted= true;
- }
-
- setTimeout(function(){updateMixer();},1);
- } else if (session.roomid!==false){
- if (session.cleanOutput){
- v.controls = false;
- } else if (window.obsstudio) {
- v.controls = false;
- } else {
- v.controls = true;
- }
- if ((session.roomid==="") && (session.bitrate)){
- // let's keep the default bitrates, since this isn't a real room and bitrates are specified.
- } else if (session.novideo !== false){
- if (session.novideo.includes(session.rpcs[UUID].streamID)){
- session.requestRateLimit(0,UUID);// limit resolution for guests see ln: 1804 in main.js also
- }
- } else {
- session.requestRateLimit(0,UUID);// limit resolution for guests see ln: 1804 in main.js also
- }
- setTimeout(function(){updateMixer();},1);
- } else {
- v.style.display="block";
- if (window.obsstudio) {
- v.controls = false;
- }
- setTimeout(function(){updateMixer();},1);
- }
-
-
- v.addEventListener('click', function(e) { // show stats of video if double clicked
- log("clicked");
- try {
- if ((e.ctrlKey)||(e.metaKey)){
- e.preventDefault();
- var uid = e.currentTarget.dataset.UUID;
- if ("stats" in session.rpcs[uid]){
-
- var [menu, innerMenu] = statsMenuCreator();
-
- printViewStats(innerMenu, session.rpcs[uid].stats, session.rpcs[uid].streamID );
-
- menu.interval = setInterval(printViewStats,3000, innerMenu, session.rpcs[uid].stats, session.rpcs[uid].streamID);
-
-
- }
- e.stopPropagation();
- return false;
- }
- } catch(e){errorlog(e);}
- });
-
- if (session.statsMenu){
- if ("stats" in session.rpcs[UUID]){
-
- if (getById("menuStatsBox")){
- clearInterval(getById("menuStatsBox").interval);
- getById("menuStatsBox").remove();
- }
-
- var [menu, innerMenu] = statsMenuCreator();
-
- printViewStats(innerMenu, session.rpcs[UUID].stats, session.rpcs[UUID].streamID );
-
- menu.interval = setInterval(printViewStats,3000, innerMenu, session.rpcs[UUID].stats, session.rpcs[UUID].streamID);
-
- }
- }
-
-
- v.touchTimeOut = null;
- v.touchLastTap = 0;
- v.touchCount = 0;
- v.addEventListener('touchend', function(event) {
- log("touched");
-
- document.ontouchup = null;
- document.onmouseup = null;
- document.onmousemove = null;
- document.ontouchmove = null;
-
- var currentTime = new Date().getTime();
- var tapLength = currentTime - v.touchLastTap;
- clearTimeout(v.touchTimeOut);
- if (tapLength < 500 && tapLength > 0) {
- ///
- log("double touched");
- v.touchCount+=1;
- event.preventDefault();
- if (v.touchCount<5){
- v.touchLastTap = currentTime;
- return false;
- }
- v.touchLastTap = 0;
- v.touchCount=0;
-
- log("double touched");
- var uid = event.currentTarget.dataset.UUID;
- if ("stats" in session.rpcs[uid]){
-
- var [menu, innerMenu] = statsMenuCreator();
-
- printViewStats(innerMenu, session.rpcs[uid].stats, session.rpcs[uid].streamID );
-
- menu.interval = setInterval(printViewStats,3000, innerMenu, session.rpcs[uid].stats, session.rpcs[uid].streamID);
-
-
- }
- event.stopPropagation();
- return false;
- //////
- } else {
- v.touchCount=1;
- v.touchTimeOut = setTimeout(function(vv) {
- clearTimeout(vv.touchTimeOut);
- vv.touchLastTap = 0;
- vv.touchCount=0;
- }, 5000, v);
- v.touchLastTap = currentTime;
- }
-
- });
-
-
- if (session.remote){
- v.addEventListener("wheel", session.remoteControl);
- }
-
- if (v.controls == false){
- v.addEventListener("click", function () {
- if (v.paused){
- log("PLAYING MANUALLY?");
- v.play().then(_ => {
- log("playing");
- }).catch(warnlog);
- }
- });
- if (session.nocursor==false){ // we do not want to show the controls. This is because MacOS + OBS does not work; so electron app needs this.
- if (!(session.cleanOutput)){
- if (!(window.obsstudio)){
- if (v.controlTimer){
- clearInterval(v.controlTimer);
- }
- v.controlTimer = setTimeout(showControlBar.bind(null,v),3000);
- //v.controlTimer = setTimeout(function (){v.controls=true;},3000); // 3 seconds before I enable the controls automatically. This way it doesn't auto appear during loading. 3s enough, right?
- }
- }
- }
- }
-
- setTimeout(session.processStats, 1000, UUID);
-
-}
-
-function updateMixerRun(e=false){ // this is the main auto-mixing code. It's a giant function that runs when there are changes to screensize, video track statuses, etc.
- if (getById("subControlButtons").dragElement){
- if (parseInt(getById("subControlButtons").style.top) > 0){
- getById("subControlButtons").style.top = "0px";
- } else if (parseInt(getById("subControlButtons").style.top) < parseInt(50 - window.innerHeight) ){
- getById("subControlButtons").style.top = parseInt( 50 - window.innerHeight)+"px";
- }
- if (parseInt(getById("subControlButtons").style.left) < 0){
- getById("subControlButtons").style.left = "0px";
- } else if (parseInt(getById("subControlButtons").style.left) > parseInt( window.innerWidth - getById("subControlButtons").offsetWidth) ){
- getById("subControlButtons").style.left = parseInt( window.innerWidth -getById("subControlButtons").offsetWidth )+"px";
- }
- }
- if (session.director){return;}
- if (session.manual === true){return;}
- var playarea = getById("gridlayout");
- var header = getById("header");
-
- var hi = header.offsetHeight ;
- var w = window.innerWidth;
- var h = window.innerHeight - hi;
-
- if ( window.innerHeight<=700 ){
- if (document.getElementById("controlButtons")){
- var h = window.innerHeight - hi - document.getElementById("controlButtons").offsetHeight;
- } else {
- var h = window.innerHeight - hi;
- }
- }
-
- if (session.aspectratio){
- if (session.aspectratio==1){
- var arW = 9.0;
- var arH = 16.0;
- } else if (session.aspectratio==2){
- var arW = 1.0;
- var arH = 1.0;
- }
- } else {
- var arW = 16.0;
- var arH = 9.0;
- }
-
- var ww = w/arW;
- var hh = h/arH;
-
- var mediaPool = [];
- var mediaPool_invisible = [];
-
- if (session.videoElement){ // I, myself, exist
- if (session.videoElement.style.display!="none"){ // local feed
- if (session.minipreview && (session.infocus!==true)){
-
- session.videoElement.onclick = function(){
- if (session.infocus === true){
- session.infocus = false;
- } else {
- session.infocus = true;
- log("session: myself");
- }
- setTimeout(()=>updateMixer(),10);
- };
-
- } else {
- if (session.order!==false){
- session.videoElement.order=session.order;
- } else {
- session.videoElement.order=0;
- }
- if (session.activeSpeaker && (!session.activelySpeaking)){
- mediaPool_invisible.push(session.videoElement);
- } else {
- mediaPool.push(session.videoElement);
- }
- }
- }
- }
-
- if (session.screenShareElement){ // I, myself, exist
- if (session.screenShareElement.style.display!="none"){ // local feed
- if (session.order!==false){
- session.screenShareElement.order=session.order;
- } else {
- session.screenShareElement.order=0;
- }
-
- if (session.infocus!==false){
- mediaPool_invisible.push(session.screenShareElement);
- } else if (session.activeSpeaker && (!session.activelySpeaking)){
- mediaPool_invisible.push(session.screenShareElement);
- } else {
- mediaPool.push(session.screenShareElement);
- }
- }
- }
-
- if (session.iframeEle){ // I, myself, exist
- if (session.iframeEle.style.display!="none"){ // local feed
- if (session.order!==false){
- session.iframeEle.order=session.order;
- } else {
- session.iframeEle.order=0;
- }
- if (session.activeSpeaker && (!session.activelySpeaking)){
- mediaPool_invisible.push(session.iframeEle);
- } else {
- mediaPool.push(session.iframeEle);
- }
- }
- }
-
-
- if ((session.infocus) && (session.infocus in session.rpcs)){ // remote guest being full screened; infocus == UUID
- log(session.infocus+" set fullscreen");
- mediaPool = []; // remove myself from fullscreen
- for (var j in session.rpcs){
- if (j != session.infocus){
- session.requestRateLimit(0, j); // disable the video of non-fullscreen videos
- try {
- if (session.rpcs[j].videoElement.style.display!="none"){ // Add it if not hidden
- mediaPool_invisible.push(session.rpcs[j].videoElement);
- }
- } catch(e){}
- } else { // in focus video
- ////////
- try {
- if (session.rpcs[j].order!==false){
- session.rpcs[j].videoElement.order=session.rpcs[j].order;
- } else {
- session.rpcs[j].videoElement.order=0;
- }
- ///////////
- if (session.activeSpeaker && (!session.rpcs[j].activelySpeaking)){
- mediaPool_invisible.push(session.rpcs[j].videoElement);
- } else {
- mediaPool.push(session.rpcs[j].videoElement);
- }
-
- session.rpcs[j].videoElement.style.visibility = "visible";
- if ((session.rpcs[j].targetBandwidth!==-1) && (session.rpcs[j].targetBandwidth0){
- if (session.nopreview!==false){
- mediaPool = []; // we don't want to show our self-preview if in broadcast mode and there is a director.
- }
- }
- }
-
- if (roomQuality === 0){roomQuality=1;}
-
- roomQuality = parseInt(session.totalRoomBitrate/roomQuality);
- //if (roomQuality<20){
- // roomQuality=20;
- //}
-
- for (var i in session.rpcs){
- if (session.rpcs[i]===null){continue;}
-
- if (session.rpcs[i].iframeEle){
- if (session.rpcs[i].order!==false){
- session.rpcs[i].iframeEle.order=session.rpcs[i].order;
- } else {
- session.rpcs[i].iframeEle.order=0;
- }
- if (session.activeSpeaker && (!session.rpcs[i].activelySpeaking)){
- mediaPool_invisible.push(session.rpcs[i].iframeEle);
- } else {
- mediaPool.push(session.rpcs[i].iframeEle);
- }
- continue;
- }
-
- if (session.rpcs[i].imageElement){
- //if (session.rpcs[i].videoElement.srcObject.getVideoTracks().length==0){ // video shouldn't be on if images are on.
-
- if (session.rpcs[i].videoElement){ // is there audio?
- mediaPool_invisible.push(session.rpcs[i].videoElement); // include audio as hidden track;
- }
-
- if (session.rpcs[i].videoMuted){
- continue;
- } else if (session.rpcs[i].directorVideoMuted){
- continue;
- }
-
- if (session.rpcs[i].order!==false){
- session.rpcs[i].imageElement.order=session.rpcs[i].order;
- } else {
- session.rpcs[i].imageElement.order=0;
- }
- if (session.activeSpeaker && (!session.rpcs[i].activelySpeaking)){
- // mediaPool_invisible.push(session.rpcs[i].imageElement);
- } else {
- mediaPool.push(session.rpcs[i].imageElement);
- }
-
- continue;
- // } else {
- // errorlog("Video track added while in webp streaming mode? wasted bandwidth / cpu ..")
- // }
- }
-
- if (session.rpcs[i].videoElement){ // remote feeds
-
- //session.rpcs[i].targetBandwidth = -1;
- if (session.rpcs[i].videoElement.style.opacity==="0"){
- continue;
- }
-
- try{
- session.rpcs[i].videoElement.style.visibility = "visible";
- } catch(e){}
-
- if (session.directorUUID ===session.rpcs[i].UUID){ // director is never audio-only. Video if need, yes, but not visualized-audio.
- if (session.rpcs[i].videoElement.srcObject.getVideoTracks().length==0){
- //if (session.style==1){ // avatars and waveforms might be better done elsewhere? as a canvas effect even?
- continue;
- //}
- }
- } else if (session.style==2){
- log("style = 2");
- if (session.rpcs[i].videoElement.srcObject.getVideoTracks().length==0){
- if (session.rpcs[i].canvas){
- if (session.rpcs[i].order!==false){
- session.rpcs[i].canvas.order=session.rpcs[i].order;
- } else {
- session.rpcs[i].canvas.order=0;
- }
-
- if (session.activeSpeaker && (!session.rpcs[i].activelySpeaking)){
- mediaPool_invisible.push(session.rpcs[i].canvas);
- } else {
- mediaPool.push(session.rpcs[i].canvas);
- }
- }
- continue;
- }
- } else if (session.style==1){
- if (session.rpcs[i].videoElement.srcObject.getVideoTracks().length==0){
- //if (session.style==1){ // avatars and waveforms might be better done elsewhere? as a canvas effect even?
- continue;
- //}
- }
- } else if (session.scene!==false){
- if (session.rpcs[i].videoElement.srcObject.getVideoTracks().length==0){ // unless style==2, then scenes don't show audio.
- //if (session.style==1){ // avatars and waveforms might be better done elsewhere? as a canvas effect even?
- continue;
- //}
- }
- }
-
- if (session.rpcs[i].videoMuted){
- continue;
- } else if (session.rpcs[i].directorVideoMuted){
- continue;
- }
-
- if (session.director){ // director video should be low-bitrate, although this should never fire.
- warnlog("Update should not be called on DIRECTORs view? sorta at least"); // the director should never be called.
- return;
- } else if (session.rpcs[i].videoElement.style.display=="none"){ // Video is disabled; run at lowest
- if (session.scene!==false){
- session.requestRateLimit(session.hiddenSceneViewBitrate, i); // hidden. I dont want it to be super low, for video quality reasons.
- if (!session.hiddenSceneViewBitrate){
- session.rpcs[i].videoElement.classList.add("nogb");
- }
- } else {
- session.requestRateLimit(0, i); // w/e This is not in OBS, so we just set it as low as possible. Shoudln't exist really unless loading?
- }
- } else if (session.scene!==false){ // max
- session.requestRateLimit(-1, i); // unlock.
- if (session.rpcs[i].order!==false){
- session.rpcs[i].videoElement.order=session.rpcs[i].order;
- } else {
- session.rpcs[i].videoElement.order=0;
- }
- if (session.activeSpeaker && (!session.rpcs[i].activelySpeaking)){
- if (!(session.rpcs[i].videoElement in mediaPool_invisible)){
- mediaPool_invisible.push(session.rpcs[i].videoElement);
- } else {
- errorlog("THIS SHOULD NOT HAPPEN; 650");
- }
- } else {
- mediaPool.push(session.rpcs[i].videoElement);
- }
- } else if (session.roomid!==false){ // guests should see video at low bitrate, ie: 100kbps (not 35kbps like if disabled)
- if (session.rpcs[i].order!==false){
- session.rpcs[i].videoElement.order=session.rpcs[i].order;
- } else {
- session.rpcs[i].videoElement.order=0;
- }
- if (session.activeSpeaker && (!session.rpcs[i].activelySpeaking)){
- if (!(session.rpcs[i].videoElement in mediaPool_invisible)){
- mediaPool_invisible.push(session.rpcs[i].videoElement);
- } else {
- errorlog("THIS SHOULD NOT HAPPEN; 665");
- }
- } else {
- mediaPool.push(session.rpcs[i].videoElement);
- }
- if ((session.roomid==="") && (session.bitrate)){
- // we will let the URL specified bitrate hold, since this isn't a real room.
- session.requestRateLimit(-1, i);
- } else {
- session.requestRateLimit(roomQuality, i); // well, screw that. Setting it to room quality.
- }
- } else { // view=xx,yy or whatever. This should be highest quality.
- if (session.rpcs[i].order!==false){
- session.rpcs[i].videoElement.order=session.rpcs[i].order;
- } else {
- session.rpcs[i].videoElement.order=0;
- }
- if (session.activeSpeaker && (!session.rpcs[i].activelySpeaking)){
- if (!(session.rpcs[i].videoElement in mediaPool_invisible)){
- mediaPool_invisible.push(session.rpcs[i].videoElement);
- } else {
- errorlog("THIS SHOULD NOT HAPPEN; 684");
- }
- } else {
- mediaPool.push(session.rpcs[i].videoElement);
- }
- session.requestRateLimit(-1, i);
- }
- }
- }
- }
- if (session.director){return;} // director view says go no further :)
-
- if (document.fullscreenElement) {
- log("FULL SCREEN: "+document.fullscreenElement.id);
- return; // This is FULL SCREEN, so let's not continue.
- }
-
- var mpl = mediaPool.length;
- if (mpl>1){
- var BB = 0;
- var rw = 1;
- var rh = 1;
- var NW;
- var NH;
- var current;
- for (NW=1; NW <= mpl; NW++){
- NH = Math.ceil(mpl/NW);
- var www = ww/NW;
- var hhh = hh/NH;
- if (www>hhh){
- current = hhh * hhh * (mpl/(NW*NH));
- } else {
- current = www * www * (mpl/(NW*NH));
- }
-
- if (current>=BB){
- BB = current;
- rw = NW;
- rh = NH;
- }
-
- }
- } else { var rw=1; var rh=1;}
-
-
- if (playarea.getElementsByTagName("iframe").length){
-
- var childNodes = playarea.childNodes;
-
- for (var n=0;n{
- vid.style.width = "0px";
- vid.style.height = "0px";
- vid.style.top = "0px";
- vid.style.left = "0px";
- //vid.alreadyAdded=false; // what am I doing here? wtf? TODO: this is a typo, right?
- if (vid.alreadyAdded && vid.alreadyAdded==true){
- vid.alreadyAdded=false;
- return;
- } else if (vid.dataset.doNotMove){
- return;
- }
- playarea.appendChild(vid);
- });
-
- mediaPool.sort(compare_vids);
-
- mediaPool.forEach(vid=>{
-
- var container = document.createElement("div");
-
- container.style.position = "absolute";
- container.style.display = "flex";
- container.style.alignItems = "center";
- offsetx=0;
-
- if (i!==0){
- if (Math.ceil((i+0.01)/rw)==rh){
- if (mediaPool.length%rw){
- offsetx = ((rw - mediaPool.length%rw)*(window.innerWidth/rw))/2;
- }
- }
- }
-
- offsety = (h- Math.ceil(mediaPool.length/rw)*Math.ceil(h/rh))/2;
-
- if (vid.alreadyAdded && vid.alreadyAdded==true){
- container = vid.parentNode;
- }
-
- container.style.left = offsetx+Math.floor(((i%rw)+0)*w/rw)+"px";
- container.style.top = offsety+Math.floor((Math.floor(i/rw)+0)*h/rh + hi)+"px";
- container.style.width = Math.ceil(w/rw)+"px";
- container.style.height = Math.ceil(h/rh)+"px";
-
- if (vid.alreadyAdded && vid.alreadyAdded==true){
- vid.alreadyAdded=false;
- i+=1;
- return;
- } else if (vid.dataset.doNotMove){
- vid.style.position = "absolute";
- vid.style.left = container.style.left;
- vid.style.top = container.style.top;
- vid.style.width = container.style.width;
- vid.style.height = container.style.height;
- vid.style.display = "flex";
- i+=1;
- return;
- }
-
-
- playarea.appendChild(container);
-
- var wrw = Math.ceil(w/rw);
- var hrh = Math.ceil(h/rh);
-
- if (session.dynamicScale){
- if (vid.dataset.UUID){
- if (wrw && hrh){
- if (session.devicePixelRatio){
- session.requestResolution(vid.dataset.UUID, wrw * session.devicePixelRatio, hrh * session.devicePixelRatio);
- } else if (window.devicePixelRatio && parseInt(window.devicePixelRatio) > 1 ){
- session.requestResolution(vid.dataset.UUID, wrw*window.devicePixelRatio, hrh*window.devicePixelRatio);
- } else {
- session.requestResolution(vid.dataset.UUID, wrw, hrh);
- }
- }
- }
- }
-
-
- vid.style.objectFit = "contain";
- //vid.classList="";
- vid.style.maxWidth = "100%";
- vid.style.maxHeight = "100%";
- vid.style.margin = "auto";
-
- // Creates relative positioned element, important for label pos
- var holder = document.createElement("div");
- holder.className = "holder";
- //holder.appendChild(vid);
- container.appendChild(vid);
- container.appendChild(holder);
-
-
-
- if (vid.videoWidth && vid.videoHeight){
- var asw = wrw/vid.videoWidth;
- var ash = hrh/vid.videoHeight;
-
- if (asw < ash){
- holder.style.width = Math.ceil(vid.videoWidth*asw)+"px";
- holder.style.height = Math.ceil(vid.videoHeight*asw)+"px";
- holder.style.left = Math.ceil((Math.ceil(w/rw) - Math.ceil(vid.videoWidth*asw))/2);
- holder.style.top = Math.ceil(( Math.ceil(h/rh) - Math.ceil(vid.videoHeight*asw))/2);
- } else {
- holder.style.width = Math.ceil(vid.videoWidth*ash)+"px";
- holder.style.height = Math.ceil(vid.videoHeight*ash)+"px";
- holder.style.left = Math.ceil((Math.ceil(w/rw) - Math.ceil(vid.videoWidth*ash))/2);
- holder.style.top = Math.ceil((Math.ceil(h/rh) - Math.ceil(vid.videoHeight*ash))/2);
- }
- } else if (vid.width && vid.height){
- var asw = wrw/vid.width;
- var ash = hrh/vid.height;
-
- if (asw < ash){
- holder.style.width = Math.ceil(vid.width*asw)+"px";
- holder.style.height = Math.ceil(vid.height*asw)+"px";
- holder.style.left = Math.ceil((Math.ceil(w/rw) - Math.ceil(vid.width*asw))/2);
- holder.style.top = Math.ceil(( Math.ceil(h/rh) - Math.ceil(vid.height*asw))/2);
- } else {
- holder.style.width = Math.ceil(vid.width*ash)+"px";
- holder.style.height = Math.ceil(vid.height*ash)+"px";
- holder.style.left = Math.ceil((Math.ceil(w/rw) - Math.ceil(vid.width*ash))/2);
- holder.style.top = Math.ceil((Math.ceil(h/rh) - Math.ceil(vid.height*ash))/2);
- }
- } else if (wrw/hrh < arW/arH){
- holder.style.width = "100%";
- holder.style.height = "100%";
- if (vid.tagName.toLowerCase()=="iframe"){
- holder.style.height = "100%";
- }
- holder.style.left = 0;
- holder.style.top = 0;
-
- } else {
- holder.style.width = "100%";
- holder.style.height = "100%";
- if (vid.tagName.toLowerCase()=="iframe"){
- holder.style.width = "100%";
- }
- holder.style.left = 0;
- holder.style.top = 0;
- }
-
- holder.style.position = "absolute";
-
- vid.style.width = "100%";
- vid.style.height = "100%";
-
- var fontsize = (vid.offsetWidth + vid.offsetHeight)*0.03;
- log("fontsize " +fontsize + " - " +vid.offsetWidth + " - " + vid.offsetHeight);
- if (!fontsize){
- if (vid.videoWidth/holder.offsetWidth > vid.videoHeight/holder.offsetHeight){
- fontsize = (holder.offsetHeight + vid.videoHeight/holder.offsetHeight*vid.offsetWidth)*0.03;
- } else {
- fontsize = (holder.offsetWidth + vid.videoWidth/holder.offsetWidth*vid.offsetHeight)*0.03;
- }
- }
- if (!fontsize){
-
- fontsize = (holder.offsetWidth + holder.offsetHeight)*0.03;
- }
- log("fontsize final:" +fontsize);
-
-
- if (vid.dataset.UUID && session.rpcs[vid.dataset.UUID].label !== false && session.showlabels===true){ // remote source
-
- // creates a video label holder inside the recently created label holder
- var label = document.createElement("span");
- if (session.labelstyle){
- label.className = 'video-label '+session.labelstyle;
- } else {
- label.className = 'video-label';
- }
- if (fontsize){
- if (session.labelsize){
- fontsize = fontsize*session.labelsize/100;
- }
- fontsize = parseInt(fontsize);
- fontsize = fontsize+"px";
- label.style.fontSize = fontsize;
- }
- label.innerText = session.rpcs[vid.dataset.UUID].label;
- holder.appendChild(label);
- } else if ((session.showlabels===true) && (vid.id === "videosource") && (session.label)){ // local source
- // creates a label holder that's the same size of the vid element.
-
- // creates a video label holder inside the recently created label holder
- var label = document.createElement("span");
- if (session.labelstyle){
- label.className = 'video-label '+session.labelstyle;
- } else {
- label.className = 'video-label';
- }
- if (fontsize){
- if (session.labelsize){
- fontsize = fontsize*session.labelsize/100;
- }
- fontsize = parseInt(fontsize);
- fontsize = fontsize+"px";
- label.style.fontSize = fontsize;
- }
-
- label.innerText = sanitizeLabel(session.label);//.replace(/[\W]+/g,"_").replace(/_+/g, ' ');
- holder.appendChild(label);
- }
-
- if (vid.dataset.UUID && session.rpcs[vid.dataset.UUID] && session.rpcs[vid.dataset.UUID].voiceMeter){
- holder.appendChild(session.rpcs[vid.dataset.UUID].voiceMeter);
-
- }
- if (vid.dataset.UUID && session.rpcs[vid.dataset.UUID] && session.rpcs[vid.dataset.UUID].remoteMuteElement){
- holder.appendChild(session.rpcs[vid.dataset.UUID].remoteMuteElement);
- }
- try {
- if (!(session.cleanOutput) || (session.cleanish==true)){
- if (session.firstPlayTriggered===false){ // don't play unless needed; might cause clicking or who knows what else.
- warnlog("VIDEO IS NOT PLAYING");
- if (vid.tagName.toLowerCase()=="video"){ // we don't want to try playing an Iframe or Canvas.
- var playPromise = vid.play();
- if (playPromise !== undefined){
- playPromise.then(_ => {
- // playing
- session.firstPlayTriggered=true; // global tracking. "user gesture obtained", so no longer needed if playing.
- }).catch((err)=>{
-
- var bigPlayButton = document.getElementById("bigPlayButton");
- if (bigPlayButton){
- bigPlayButton.innerHTML = '';
- bigPlayButton.style.display="block";
- }
- });
- } else {
- session.firstPlayTriggered=true; // well, I don't know if it's playing, and so whatever. fail gracefully.
- }
- }
- }
- }
- } catch(e) {
- log("VIDEO IS PLAYING");
- var bigPlayButton = document.getElementById("bigPlayButton");
- if (bigPlayButton){
- bigPlayButton.parentNode.removeChild(bigPlayButton);
- }
-
- }
-
- if (vid.tagName.toLowerCase()=="iframe"){ // I need to add this back in at some point.
- i+=1;
- return;
- }
-
- if (!session.cleanOutput && !session.nocursor){
- if ((session.roomid!==false) && (session.scene===false)){
- var button = document.createElement("div");
- button.id = "button_"+vid.id;
-
- if (session.infocus){
- button.innerHTML = "";
- button.title = "Show all active videos togethers";
- } else if (mediaPool.length>1){
- button.innerHTML = "";
- button.title = "Enlarge video and increase its clarity";
- } else {
- button.style.visibility = "hidden";
- }
- button.style.transition = "opacity 0.3s"
- button.style.width ="4vh";
- button.style.height = "4vh";
- button.style.maxWidth ="30px";
- button.style.maxHeight = "30px";
- button.style.minWidth ="15px";
- button.style.minHeight = "15px";
- button.style.position = "absolute";
- //button.style.display="none";
- //button.style.opacity="10%";
- button.style.zIndex="3";
- button.style.right = "4vh";//(Math.ceil(w/rw) -30 - 30 + offsetx+Math.floor(((i%rw)+0)*w/rw))+"px";
- button.style.top = "4vh";//( offsety + 30 + Math.floor((Math.floor(i/rw)+0)*h/rh + hi))+"px";
- button.style.color = "white";
- button.style.cursor = "pointer";
-
-
- container.appendChild(button);
- if (vid.id == "videosource"){
- button.onclick = function(){
- var target = event.currentTarget;
- log(target);
- if (session.infocus === true){
- session.infocus = false;
- //target.childNodes[0].className = 'las la-arrows-alt';
- } else {
- session.infocus = true;
- log("session: myself");
- //target.childNodes[0].className = 'las la-compress';
- }
- setTimeout(()=>updateMixer(),10);
- };
-
- } else {
- button.dataset.UUID = vid.dataset.UUID;
- button.onclick = function(event){
- var target = event.currentTarget;
- log("fullscreen");
- log(target);
- if (session.infocus === target.dataset.UUID){
- //target.childNodes[0].className = 'las la-arrows-alt';
- session.infocus = false;
- } else {
- //target.childNodes[0].className = 'las la-compress';
- session.infocus = target.dataset.UUID;
- //log("session:"+target.dataset.UUID);
- }
- setTimeout(()=>updateMixer(),10);
- };
-
- }
- vid.onclick = function(){
- button.style.display="block";
- container.style.backgroundColor= "#4444";
- button.style.opacity="100%";
- };
- button.onmouseenter = function(){
- button.style.display="block";
- container.style.backgroundColor= "#4444";
- setTimeout(function(button){button.style.opacity="100%";},0,button);
-
- };
- container.onmouseenter = function(){
- button.style.display="block";
- container.style.backgroundColor= "#4444";
- setTimeout(function(button){button.style.opacity="100%";},0,button);
- };
- container.onmouseleave = function(){
- button.style.display="none";
- container.style.backgroundColor= null;
- button.style.opacity="10%";
- };
- }
- }
- i+=1;
- });
-}
-
-
-var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
-var eventer = window[eventMethod];
-var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
-eventer(messageEvent, function(e) { // this listens for child IFRAMES.
- if ("action" in e.data) {
- if (e.data.action == "screen-share-ended") {
- if (session.screenShareElement) {
- if (e.source == session.screenShareElement.contentWindow) { // reject messages send from other iframes
- warnlog(e);
- session.screenShareElement.contentWindow.postMessage({
- "close": true
- }, '*');
- session.screenShareElement.parentNode.removeChild(session.screenShareElement);
- session.screenShareElement = false;
- updateMixer();
- getById("screenshare2button").classList.add("float");
- getById("screenshare2button").classList.remove("float2");
- }
- }
- }
- }
-});
-
-
-function requestKeyframeScene(ele) {
- var UUID = ele.dataset.UUID;
- if (ele.dataset.value == 1) {
- } else {
- ele.dataset.value = 1;
- ele.classList.add("pressed");
- session.requestKeyframe(UUID, true);
- setTimeout(function(el){
- el.dataset.value = 0;
- el.classList.remove("pressed");
- }, 1000, ele)
- }
-}
-
-function pokeIframeAPI(action, value = null, UUID = null) {
- if (!isIFrame){return;}
- try {
- var data = {};
-
- data.action = action;
-
- if (value !== null) {
- data.value = value;
- }
- if (UUID !== null) {
- data.UUID = UUID;
- }
-
- if (isIFrame) {
- parent.postMessage(data, "*");
- }
- } catch (e) {
- errorlog(e);
- }
-}
-
-function jumptoroom(event = null) {
-
- if (event) {
- if (event.which !== 13) {
- return;
- }
- }
-
- var arr = window.location.href.split('?');
- var roomname = getById("joinroomID").value;
- roomname = sanitizeRoomName(roomname);
- if (roomname.length) {
-
- var passStr = "";
- var pass = prompt("Enter a password if provided, otherwise just click cancel"); //sanitizePassword(session.password);
- if (pass && pass.length) {
- session.password = sanitizePassword(pass);
- passStr = "&password=" + session.password;
- } else {
- session.password = false;
- }
-
- if (arr.length > 1 && arr[1] !== '') {
- window.location += "&room=" + roomname + passStr;
- } else {
- window.location += "?room=" + roomname + passStr;
- }
- }
-}
-
-function sleep(ms = 0) {
- return new Promise(r => setTimeout(r, ms)); // LOLz!
-}
-
-////////// Canvas Effects ///////////////
-
-function drawFrameMirrored() {
- session.canvasCtx.save();
- session.canvasCtx.scale(-1, 1);
- session.canvasCtx.drawImage(session.canvasSource, 0, 0, session.canvas.width * -1, session.canvas.height);
- session.canvasCtx.restore();
-}
-
-function setupCanvas() {
- if (session.canvas === null) {
- warnlog("SETUP CANVAS");
- session.canvas = document.createElement("canvas");
- session.canvas.width = 512;
- session.canvas.height = 288;
- session.canvasCtx = session.canvas.getContext('2d', {alpha: false, desynchronized: true});
- //session.canvasCtx.width=288;
- //session.canvasCtx.height=720;
- session.canvasCtx.fillStyle = "blue";
- session.canvasCtx.fillRect(0, 0, 512, 288);
- session.canvasSource = document.createElement("video");
- session.canvasSource.width=512;
- session.canvasSource.height=288;
- session.canvasSource.autoplay = true;
- session.canvasSource.srcObject = new MediaStream();
- }
-}
-
-function applyEffects(track, stream) {
-
- setupCanvas();
-
- session.canvasSource.srcObject.addTrack(track, stream);
- session.canvasSource.width = track.getSettings().width || 1280;
- session.canvasSource.height = track.getSettings().height || 720;
- session.canvas.width = track.getSettings().width || 1280;
- session.canvas.height = track.getSettings().height || 720;
-
- var audioTracks = session.streamSrc.getAudioTracks();
- session.streamSrc = session.canvas.captureStream();
- audioTracks.forEach(function(trk) {
- session.streamSrc.addTrack(trk);
- });
- session.videoElement.srcObject = session.streamSrc;
-
- if (session.effects == 1) { // auto align face
- setTimeout(function() {
- drawFace();
- }, 100);
- } else if (session.effects == 2) { // mirror video at a canvas level
- var drawRate = parseInt(1000 / track.getSettings().frameRate) + 1;
- if (session.canvasInterval !== null) {
- clearInterval(session.canvasInterval);
- }
- session.canvasInterval = setInterval(function() {
- drawFrameMirrored();
- }, drawRate);
- } else if ((session.effects == 3) || (session.effects == 4) || (session.effects == 5)){ // blur & greenscreen (low and high)
- TFLiteWorker();
- } else if (session.effects == 6){
- session.canvasSource.onloadeddata = mainMeshMask;
- }
- return session.streamSrc.getVideoTracks()[0];
-}
-
-function dataURItoArraybuffer(dataURI) {
- var byteString = atob(dataURI.split(',')[1]);
- var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
- var ab = new ArrayBuffer(byteString.length);
- var ia = new Uint8Array(ab);
- for (var i = 0; i < byteString.length; i++) {
- ia[i] = byteString.charCodeAt(i);
- }
- return ab;
-}
-
-
-var makeImagesActive = null;
-var makeImagesTimeout = null;
-async function makeImages(startup=false){
- if (makeImagesActive===true){return;}
- if (!session.videoElement){return;}
- if (session.videoMuted){return;}
- if (!session.videoElement.srcObject.getVideoTracks().length){return;}
-
- if (makeImagesActive===null){
- makeImagesActive=true;
- session.webPcanvas = document.createElement("canvas");
-
- var width = 480;
- var height = 270;
- var timeout = 60;
-
- if (session.webPquality===0){
- width = 1920;
- height = 1080;
- timeout = 15;
- } else if (session.webPquality===1){
- width = 1280;
- height = 720;
- timeout = 15;
- } else if (session.webPquality===2){
- width = 640;
- height = 360;
- timeout = 15;
- } else if (session.webPquality===3){
- width = 480;
- height = 270;
- timeout = 15;
- } else if (session.webPquality===4){
- width = 480;
- height = 270;
- timeout = 30;
- } else {
- width = 480;
- height = 270;
- timeout = 60;
- }
- session.webPcanvas.width = width;
- session.webPcanvas.height = height;
- session.webPcanvas.timeout = timeout;
- session.webPcanvasCtx = session.webPcanvas.getContext('2d', {alpha: false, desynchronized: true});
- session.webPcanvasCtx.fillStyle = "black";
- session.webPcanvasCtx.fillRect(0, 0, width, height);
- } else {
- makeImagesActive=true;
- }
-
- if (startup){
- var exit = true;
- for (var i in session.pcs){
- if (session.pcs[i].allowBroadcast){ // just for safety, to avoid a race condition, double check that it's still not active.
- exit = false;
- }
- }
- if (exit){
- makeImagesActive=false;
- return;
- }
- }
-
- try{
- session.webPcanvasCtx.drawImage(session.videoElement, 0, 0, session.webPcanvas.width, session.webPcanvas.height);
- const webp = session.webPcanvas.toDataURL("image/webp",0.6); // seems like a good balance here
- const arrayBuffer = dataURItoArraybuffer(webp);
- var broadcasting = false;
- for (var i in session.pcs){
- try{
- if (session.pcs[i].allowBroadcast){ // only publish to those seeking this stream
- broadcasting = true;
- if (!session.pcs[i].sendChannel.bufferedAmount){ // only send when the buffer is free. don't clog it up or wait.
- session.pcs[i].sendChannel.send(arrayBuffer);
- }
- }
- } catch(e){}
- }
- } catch(e){
- warnlog(e);
- makeImagesActive=false;
- return;
- }
- makeImagesActive=false;
- if (broadcasting){ // cancel broadcasting since now one is active.
- clearTimeout(makeImagesTimeout);
- makeImagesTimeout = setTimeout(function(){
- window.requestAnimationFrame(makeImages);
- },session.webPcanvas.timeout);
- } else {
- for (var i in session.pcs){
- if (session.pcs[i].allowBroadcast){ // just for safety, to avoid a race condition, double check that it's still not active.
- clearTimeout(makeImagesTimeout);
- makeImagesTimeout = setTimeout(function(){
- window.requestAnimationFrame(makeImages);
- },session.webPcanvas.timeout);
- return;
- }
- }
- log("Stopping webP broadcast.");
- }
-}
-
-var updateUserListTimeout=null
-var updateUserListActive = false;
-function updateUserList(){
- if ((session.showList!==true) && (session.cleanOutput || (session.scene!==false) || !session.roomid || session.director || (session.showList===false))){return;}
- clearInterval(updateUserListTimeout);
- updateUserListTimeout = setTimeout(function(){
- if (updateUserListActive){return;}
- updateUserListActive=true;
- try {
- var added = false;
- getById("userList").innerHTML = "";
-
- for (var UUID in session.rpcs){
- var track = false;
- if (session.rpcs[UUID].streamSrc && session.rpcs[UUID].streamSrc.getVideoTracks().length){
- var tracks = session.rpcs[UUID].streamSrc.getVideoTracks().forEach(function(trk){
- //if (!trk.muted){
- track=true;
- //}
- });
- }
- if (((session.rpcs[UUID].videoMuted || (track==false && !session.rpcs[UUID].imageElement)) && !session.rpcs[UUID].canvas) || ( session.infocus && session.infocus!==UUID )){
-
- if (UUID === session.directorUUID){
- if (!session.rpcs[UUID].streamSrc){ // director not active yet, so we won't bother showing it.
- continue;
- }
- }
-
- var insert = document.createElement("div");
- if (session.rpcs[UUID].label){
- insert.innerText = session.rpcs[UUID].label + "";
- } else if (session.directorUUID === UUID){
- insert.innerText = "Director";
- } else {
- insert.innerText = "Unknown User";
- }
- getById("userList").appendChild(insert);
-
- if (session.rpcs[UUID].remoteMuteState || !(session.rpcs[UUID].streamSrc)){
- var muteInsert = document.createElement("div");
- muteInsert.className = "video-mute-state-userlist";
- muteInsert.innerHTML = '';
- insert.appendChild(muteInsert);
- } else if (session.rpcs[UUID].voiceMeter){
- insert.appendChild(session.rpcs[UUID].voiceMeter);
- }
- //getById("userList").innerHTML += " ";
- added=true;
- }
- }
-
- if (!added){
- getById("connectUsers").style.display = "none";
- } else {
- getById("connectUsers").style.display = "block";
- }
- } catch(e){}
- updateUserListActive=false;
- },200);
-}
-
-var LaunchTFWorkerCallback = false;
-function TFLiteWorker(){
- if (session.tfliteModule==false){
- LaunchTFWorkerCallback=true
- return;
- }
- if (TFLITELOADING){LaunchTFWorkerCallback=true;return;}
- LaunchTFWorkerCallback=false;
-
- const segmentationWidth = 256;
- const segmentationHeight = 144;
- const segmentationPixelCount = segmentationWidth * segmentationHeight;
- const inputMemoryOffset = session.tfliteModule._getInputMemoryOffset() / 4;
- const outputMemoryOffset = session.tfliteModule._getOutputMemoryOffset() / 4;
- const segmentationMask = new ImageData(segmentationWidth, segmentationHeight);
- const segmentationMaskCanvas = document.createElement('canvas');
- segmentationMaskCanvas.width = segmentationWidth;
- segmentationMaskCanvas.height = segmentationHeight;
- const segmentationMaskCtx = segmentationMaskCanvas.getContext('2d');
-
- session.tfliteModule.img = document.createElement("img");
- session.tfliteModule.img.onload = function(){
- URL.revokeObjectURL(session.tfliteModule.img.src); // no longer needed, free memory
- session.tfliteModule.img.ready = true;
- }
- session.tfliteModule.img.src = "./media/bg_sample.jpg";
- session.tfliteModule.img.ready = false;
-
- console.log('Starting Loop');
-
-
- function process(){
- if (session.tfliteModule.activelyProcessing){return;}
- session.tfliteModule.activelyProcessing=true;
- try{
- segmentationMaskCtx.drawImage(
- session.canvasSource,
- 0,
- 0,
- session.canvasSource.width,
- session.canvasSource.height,
- 0,
- 0,
- segmentationWidth,
- segmentationHeight
- )
-
- const imageData = segmentationMaskCtx.getImageData(
- 0,
- 0,
- segmentationWidth,
- segmentationHeight
- );
-
- for (let i = 0; i < segmentationPixelCount; i++) {
- session.tfliteModule.HEAPF32[inputMemoryOffset + i * 3] = imageData.data[i * 4] / 255;
- session.tfliteModule.HEAPF32[inputMemoryOffset + i * 3 + 1] = imageData.data[i * 4 + 1] / 255;
- session.tfliteModule.HEAPF32[inputMemoryOffset + i * 3 + 2] = imageData.data[i * 4 + 2] / 255;
- }
-
- session.tfliteModule._runInference();
-
- for (let i = 0; i < segmentationPixelCount; i++) {
- const background = session.tfliteModule.HEAPF32[outputMemoryOffset + i * 2];
- const person = session.tfliteModule.HEAPF32[outputMemoryOffset + i * 2 + 1];
- const shift = Math.max(background, person);
- const backgroundExp = Math.exp(background - shift);
- const personExp = Math.exp(person - shift);
- segmentationMask.data[i * 4 + 3] = (255 * personExp) / (backgroundExp + personExp); // softmax
- }
- segmentationMaskCtx.putImageData(segmentationMask, 0, 0);
-
- session.canvasCtx.globalCompositeOperation = 'copy';
- session.canvasCtx.filter = 'blur(4px)';
- session.canvasCtx.drawImage(
- segmentationMaskCanvas,
- 0,
- 0,
- segmentationWidth,
- segmentationHeight,
- 0,
- 0,
- session.canvasSource.width,
- session.canvasSource.height
- )
-
- session.canvasCtx.globalCompositeOperation = 'source-in';
- session.canvasCtx.filter = 'none';
- session.canvasCtx.drawImage(session.canvasSource, 0, 0);
-
- session.canvasCtx.globalCompositeOperation = 'destination-over';
- if (session.effects=="4"){ // greenscreen
- session.canvasCtx.filter = 'none';
- session.canvasCtx.fillStyle = "#0F0";
- session.canvasCtx.fillRect(0, 0, session.canvas.width, session.canvas.height);
- } else if (session.effects=="5"){
- session.canvasCtx.filter = 'none';
- if (session.tfliteModule.img.ready){
- session.canvasCtx.drawImage(session.tfliteModule.img, 0, 0, session.canvas.width, session.canvas.height);
- }
- } else if (session.effects=="3"){ // BLUR
- session.canvasCtx.filter = 'blur(4px)'; // Does not work on Safari
- session.canvasCtx.drawImage(session.canvasSource, 0, 0);
- } else {
- session.tfliteModule.activelyProcessing=false;
- return;
- }
- } catch (e){
- errorlog(e);
- session.tfliteModule.activelyProcessing=false;
- return;
- }
- session.tfliteModule.activelyProcessing=false;
- window.requestAnimationFrame(process);
- }
- process();
-}
-
-
-function mainMeshMask() {
- if (model == false){
- setTimeout(function(){mainMeshMask();},1000);
- return;
- }
- function heatMapColorforValue(value){
- var h = parseInt((1.0 - value) * 240);
- if (h<0){h=0;}
- if (h>240){h=240;}
- return "hsl(" + h + ", 100%, 50%)";
- }
- async function innerLoop(){
- const predictions = await model.estimateFaces({
- input: session.canvasSource
- });
- if (predictions.length > 0) {
- for (let j = 0; j < predictions.length; j++) {
- const fp = predictions[j].annotations;
- session.canvasCtx.fillStyle = "#000000";
- session.canvasCtx.fillRect(0, 0, session.canvas.width, session.canvas.height);
- const keypoints = predictions[j].scaledMesh
- for (let i = 0; i < keypoints.length; i++) {
- const [x, y, z] = keypoints[i];
- session.canvasCtx.fillStyle = heatMapColorforValue((z+40)/60);
- session.canvasCtx.fillRect(parseInt(x), parseInt(y), 5, 5);
- }
- }
- }
- window.requestAnimationFrame(innerLoop);
- }
- innerLoop();
-}
-
-function drawFace() {
- var faceAlignment = (function() {
- var vid = session.canvasSource;
-
- var canvas = session.canvas;
- var ctx = session.canvasCtx;
-
- var canvas_tmp = document.createElement("canvas");
- var ctx_tmp = canvas_tmp.getContext('2d');
-
- //var stream = canvas.captureStream(30);
-
- var image = new Image();
- var zoom = 10;
- var scale = 1;
- var lastFace = {};
-
- var w = vid.videoWidth;
- var h = vid.videoHeight;
- var x = vid.videoWidth / 2;
- var y = vid.videoHeight / 2;
-
- lastFace.x = vid.videoWidth / 2;
- lastFace.y = vid.videoHeight / 2;
- lastFace.w = vid.videoWidth;
- lastFace.h = vid.videoHeight;
- var yoffset = 0;
-
- if (window.FaceDetector == undefined) {
- //console.error('Face Detection not supported');
- var faceDetector = false;
- } else {
- var faceDetector = new FaceDetector();
- //console.log('FaceD Loaded');
- setTimeout(function() {
- detect();
- }, 300);
- setTimeout(function() {
- draw();
- }, 33);
- }
-
- canvas.height = vid.videoHeight;
- canvas.width = vid.videoWidth;
- canvas_tmp.height = vid.videoHeight;
- canvas_tmp.width = vid.videoWidth;
- image.src = canvas_tmp.toDataURL();
- scale = canvas.width / image.width;
- lastFace.x = 0;
- lastFace.y = 0;
- lastFace.w = 1280 / 3 / 16 * zoom;
- lastFace.h = 720 / 3 / 9 * zoom;
-
- w = 1280 / 5;
- h = 720 / 5;
- x = 1280 / 2;
- y = 720 / 2 - w * 9 / zoom / 2;
-
- async function detect() {
-
- if (session.effects !== 1){return;}
-
- ctx_tmp.drawImage(vid, 0, 0, vid.videoWidth, vid.videoHeight);
- image.src = canvas_tmp.toDataURL();
- await faceDetector.detect(image).then(faces => {
-
- if (faces.length === 0) {
- log("NO FACES");
- setTimeout(function() {
- detect();
- }, 10);
- return;
- }
- for (let face of faces) {
- lastFace.x = (face.boundingBox.x + lastFace.x) / 2 || face.boundingBox.x;
- lastFace.y = (face.boundingBox.y + lastFace.y) / 2 || face.boundingBox.y;
- lastFace.w = (face.boundingBox.width + lastFace.w) / 2 || face.boundingBox.width;
- lastFace.h = (face.boundingBox.height + lastFace.h) / 2 || face.boundingBox.height;
- }
-
- setTimeout(function() {
- detect();
- }, 300);
- }).catch((e) => {
- console.error("Boo, Face Detection failed: " + e);
- });
-
- }
-
- function draw() {
-
- if (session.effects !== 1){return;}
-
- canvas.height = vid.videoHeight;
- canvas.width = vid.videoWidth;
-
- if (lastFace.w - w < 0.15 * lastFace.w) {
- w = w * 0.999 + 0.001 * lastFace.w;
- }
- if (lastFace.h - h < 0.15 * lastFace.h) {
- h = h * 0.999 + 0.001 * lastFace.h;
- }
- if (Math.abs(x - (lastFace.x + lastFace.w / 2)) > 0.15 * (lastFace.x + lastFace.w / 2.0)) {
- x = x * 0.999 + 0.001 * (lastFace.x + lastFace.w / 2.0);
- }
- if (Math.abs(y - (lastFace.y + lastFace.h / 2)) > 0.15 * (lastFace.y + lastFace.h / 2.0)) {
- y = y * 0.999 + 0.001 * (lastFace.y + lastFace.h / 2.0);
- }
-
- yoffset = w * 9 / zoom / 2;
-
- var yyy = y - w * 9 / zoom - yoffset;
- var hhh = w * 3 * 9 / zoom;
- var www = w * 3 * 16 / zoom;
- var xxx = x - w * 16 / zoom * 1.5;
-
- if (www + xxx < 1280) {
- xxx = 1280 - www;
- }
- if (hhh + yyy < 720) {
- yyy = 720 - hhh;
- }
-
- if (www + xxx > 1280) {
- xxx = 1280 - www;
- }
- if (hhh + yyy > 720) {
- yyy = 720 - hhh;
- }
-
- if (yyy < 0) {
- yyy = 0;
- }
- if (xxx < 0) {
- xxx = 0;
- }
-
- ctx.drawImage(vid, xxx, yyy, www, hhh, 0, 0, vid.videoWidth, vid.videoHeight);
-
- setTimeout(function() {
- draw();
- }, 30);
- }
- })();
-}
-
-
-//////// END CANVAS EFFECTS ///////////////////
-
-
-if (urlParams.has('permaid') || urlParams.has('push')) {
- session.permaid = urlParams.get('push') || urlParams.get('permaid');
-
- if (session.permaid) {
- session.streamID = sanitizeStreamID(session.permaid);
- } else {
- session.permaid = null;
- }
-
- if (urlParams.has('permaid')) {
- updateURL("permaid=" + session.streamID, true, false); // I'm not deleting the permaID first tho...
- } else {
- updateURL("push=" + session.streamID, true, false); // I'm not deleting the permaID first tho...
- }
-
- if (urlParams.has('director') || urlParams.has('dir')) { // if I do a short form of this, it will cause duplications in the code elsewhere.
- //var director_room_input = urlParams.get('director');
- //director_room_input = sanitizeRoomName(director_room_input);
- //createRoom(director_room_input);
- session.permaid = false; // used to avoid a trigger later on.
- } else {
- getById("container-1").className = 'column columnfade advanced';
- getById("container-4").className = 'column columnfade advanced';
- getById("dropButton").className = 'column columnfade advanced';
-
- getById("info").innerHTML = "";
- if (session.videoDevice === 0) {
- getById("add_camera").innerHTML = "Share your Microphone";
- miniTranslate(getById("add_camera"), "share-your-mic");
- } else {
- getById("add_camera").innerHTML = "Share your Camera";
- miniTranslate(getById("add_camera"), "share-your-camera");
- }
- getById("add_screen").innerHTML = "Share your Screen";
- miniTranslate(getById("add_screen"), "share-your-screen");
-
- getById("passwordRoom").value = "";
- getById("videoname1").value = "";
- getById("dirroomid").innerHTML = "";
- getById("roomid").innerHTML = "";
-
- getById("mainmenu").style.alignSelf = "center";
- getById("mainmenu").classList.add("mainmenuclass");
- getById("header").style.alignSelf = "center";
-
- if ((iOS) || (iPad)) {
- getById("header").style.display = "none"; // just trying to free up space.
- }
-
- if (session.webcamonly == true) { // mobile or manual flag 'webcam' pflag set
- getById("head1").innerHTML = '- Please accept any camera permissions';
- } else {
- getById("head1").innerHTML = ' - Please select which you wish to share';
- }
- }
-}
-
-if ((session.roomid) || (urlParams.has('roomid')) || (urlParams.has('r')) || (urlParams.has('room')) || (filename) || (session.permaid !== false)) {
-
- var roomid = "";
- if (filename) {
- roomid = filename;
- } else if (urlParams.has('room')) {
- roomid = urlParams.get('room');
- } else if (urlParams.has('roomid')) {
- roomid = urlParams.get('roomid');
- } else if (urlParams.has('r')) {
- roomid = urlParams.get('r');
- } else if (session.roomid) {
- roomid = session.roomid;
- }
-
- session.roomid = sanitizeRoomName(roomid);
-
- if (!(session.cleanOutput)) {
- if (session.roomid === "test") {
- if (session.password === session.defaultPassword) {
- var testRoomResponse = confirm("The room name 'test' is very commonly used and may not be secure.\n\nAre you sure you wish to proceed?");
- if (testRoomResponse == false) {
- hangup();
- throw new Error("User requested to not enter room 'room'.");
- }
- }
- }
- }
-
- if (session.audioDevice === false && session.outputDevice === false) {
- getById("headphonesDiv2").style.display = "inline-block";
- getById("headphonesDiv").style.display = "inline-block";
- }
- getById("addPasswordBasic").style.display = "none";
-
- getById("info").innerHTML = "";
- getById("info").style.color = "#CCC";
- getById("videoname1").value = session.roomid;
- getById("dirroomid").innerText = session.roomid;
- getById("roomid").innerText = session.roomid;
- getById("container-1").className = 'column columnfade advanced';
- getById("container-4").className = 'column columnfade advanced';
- getById("container-7").style.display = 'none';
- getById("container-8").style.display = 'none';
- getById("mainmenu").style.alignSelf = "center";
- getById("mainmenu").classList.add("mainmenuclass");
- getById("header").style.alignSelf = "center";
-
- if (session.webcamonly == true) { // mobile or manual flag 'webcam' pflag set
- getById("head1").innerHTML = '';
- } else {
- getById("head1").innerHTML = 'Please select an option to join.';
- }
-
- if (session.roomid.length > 0) {
- if (session.videoDevice === 0) {
- if (session.audioDevice === 0) {
- getById("add_camera").innerHTML = "Join room";
- miniTranslate(getById("add_camera"), "join-room");
- } else {
- getById("add_camera").innerHTML = "Join room with Microphone";
- miniTranslate(getById("add_camera"), "join-room-with-mic");
- }
- } else {
- getById("add_camera").innerHTML = "Join Room with Camera";
- miniTranslate(getById("add_camera"), "join-room-with-camera");
- }
- getById("add_screen").innerHTML = "Screenshare with Room";
- miniTranslate(getById("add_screen"), "share-screen-with-room");
- } else {
- if (session.videoDevice === 0) {
- getById("add_camera").innerHTML = "Share your Microphone";
- miniTranslate(getById("add_camera"), "share-your-mic");
- } else {
- getById("add_camera").innerHTML = "Share your Camera";
- miniTranslate(getById("add_camera"), "share-your-camera");
- }
- getById("add_screen").innerHTML = "Share your Screen";
- miniTranslate(getById("add_screen"), "share-your-screen");
- }
- getById("head3").className = 'advanced';
-
- if (session.scene !== false) {
- getById("container-4").className = 'column columnfade';
- getById("container-3").className = 'column columnfade';
- getById("container-2").className = 'column columnfade';
- getById("container-1").className = 'column columnfade';
- getById("header").className = 'advanced';
- getById("info").className = 'advanced';
- getById("head1").className = 'advanced';
- getById("head2").className = 'advanced';
- getById("mainmenu").style.display = "none";
- getById("translateButton").style.display = "none";
- log("Update Mixer Event on REsize SET");
- window.addEventListener("resize", updateMixer);
- window.addEventListener("orientationchange", function() {
- setTimeout(updateMixer, 200);
- });
- joinRoom(session.roomid); // this is a scene, so we want high resolutions
- getById("main").style.overflow = "hidden";
- } else {
- if ((session.permaid === null) && (session.roomid == "")) {
- if (!(session.cleanOutput)) {
- getById("head3").className = '';
- }
- }
- }
-
-} else if (urlParams.has('director') || urlParams.has('dir')) { // if I do a short form of this, it will cause duplications in the code elsewhere.
- if (directorLanding == false) {
- var director_room_input = urlParams.get('director') || urlParams.get('dir');
- director_room_input = sanitizeRoomName(director_room_input);
- log("director_room_input:" + director_room_input);
- createRoom(director_room_input);
- }
-} else if ((session.view) && (session.permaid === false)) {
- //if (!session.activeSpeaker){
- session.audioMeterGuest = false;
- //}
- if (session.audioEffects === null) {
- session.audioEffects = false;
- }
- log("Update Mixer Event on REsize SET");
- getById("translateButton").style.display = "none";
- window.addEventListener("resize", updateMixer);
- window.addEventListener("orientationchange", function() {
- setTimeout(updateMixer, 200);
- });
- getById("main").style.overflow = "hidden";
-}
-
-if (session.audioEffects === null) {
- session.audioEffects = true;
-}
-
-if (session.audioEffects) {
- getById("channelGroup1").style.display = "block";
- getById("channelGroup2").style.display = "block";
-}
-
-if (urlParams.has('hidemenu') || urlParams.has('hm')) { // needs to happen the room and permaid applications
- getById("mainmenu").style.display = "none";
- getById("header").style.display = "none";
- getById("mainmenu").style.opacity = 0;
- getById("header").style.opacity = 0;
-}
-
-if (urlParams.has('hideheader') || urlParams.has('noheader') || urlParams.has('hh')) { // needs to happen the room and permaid applications
- getById("header").style.display = "none";
- getById("header").style.opacity = 0;
-}
-
-function checkConnection() {
- if (session.ws === null) {
- return;
- }
- if (document.getElementById("qos")) { // true or false; null might cause problems?
- if ((session.ws) && (session.ws.readyState === WebSocket.OPEN)) {
- getById("qos").style.color = "white";
- } else {
- getById("qos").style.color = "red";
- }
- }
-}
-setInterval(function() {
- checkConnection();
-}, 5000);
-
-
-function remoteStats(msg){
- if (session.director){
- var output = "";
- var size = 0;
- for (var key in msg.remoteStats) {
- if (msg.remoteStats.hasOwnProperty(key)) size++;
- }
- output += "Total Viewers: "+size;
- for (var uuid in msg.remoteStats){
- if ("scene" in msg.remoteStats[uuid] && msg.remoteStats[uuid].scene !== false){
- output+="scene: "+msg.remoteStats[uuid].scene;
- if ("video_bitrate_kbps" in msg.remoteStats[uuid]){
- output+=" video_bitrate_kbps: "+msg.remoteStats[uuid].video_bitrate_kbps;
- }
- if ("audio_bitrate_kbps" in msg.remoteStats[uuid]){
- output+=" audio_bitrate_kbps: "+msg.remoteStats[uuid].audio_bitrate_kbps;
- }
- if (msg.remoteStats[uuid].resolution){
- output+=" resolution: "+msg.remoteStats[uuid].resolution;
- }
- if (msg.remoteStats[uuid].video_encoder){
- output+=" video_encoder: "+msg.remoteStats[uuid].video_encoder;
- }
- if ("scaleFactor" in msg.remoteStats[uuid]){
- output+=" scaleFactor: "+msg.remoteStats[uuid].scaleFactor;
- }
- if ("nacks_per_second" in msg.remoteStats[uuid]){
- output+=" nacks_per_second: "+msg.remoteStats[uuid].nacks_per_second;
- }
- if (msg.remoteStats[uuid].retransmitted_kbps){
- output+=" quality_limitation_reason: "+msg.remoteStats[uuid].retransmitted_kbps;
- }
- if (msg.remoteStats[uuid].quality_limitation_reason){
- output+=" quality_limitation_reason: "+msg.remoteStats[uuid].quality_limitation_reason;
- }
- }
- }
- warnUser(output);
- };
- if (isIFrame){
- parent.postMessage({"remoteStats": msg.remoteStats }, "*");
- }
-}
-
-
-function printViewStats(menu, statsObj, streamID) { // Stats for viewing a remote video
- var scrollLeft = menu.scrollLeft;
- var scrollTop = menu.scrollTop;
- //menu.innerHTML="rae:"+session.audioEffects+ ", lae:"+ !session.disableWebAudio;
- menu.innerHTML = "StreamID: " + streamID + " ";
- menu.innerHTML += printValues(statsObj);
- menu.scrollTop = scrollTop;
- menu.scrollLeft = scrollLeft;
-
-}
-
-function printValues(obj) { // see: printViewStats
- var out = "";
- for (var key in obj) {
- if (typeof obj[key] === "object") {
- if (obj[key] != null) {
- var tmp = key;
- tmp = sanitizeChat((tmp));
- out += "
" + tmp + "
"
- out += printValues(obj[key]);
- }
- } else {
- if (key.startsWith("_")) {
- // if it starts with _, we don't want to show it.
- } else {
- try {
- var unit = '';
-
- var value = obj[key];
-
- var stat = sanitizeChat(key);
-
- if (typeof obj[key] == "string") {
- value = sanitizeChat((value));
- }
-
- //
- if (key == 'useragent') {
- value = ""+value+""
- }
-
- if (key == 'Bitrate_in_kbps') {
- var unit = " kbps";
- stat = "Bitrate";
- }
- else if (key == 'type') {
- var unit = "";
- stat = 'Type';
-
- if (value == "Audio Track") {
- value = "🔊 " + value;
- //out += "";
- }
-
- if (value == "Video Track") {
- value = "📺 " + value;
- }
-
- }
- else if (key == 'packetLoss_in_percentage') {
- var unit = " %";
- stat = 'Packet Loss 📶';
- value = parseInt(parseFloat(value) * 10000) / 10000.0;
- }
- else if (key == 'local_relayIP') {
- value = "" + value + "";
- }
- else if (key == 'remote_relay_IP') {
- value = "" + value + "";
- }
- else if (key == 'local_candidateType') {
- if (value == "relay") {
- value = "💸 relay server";
- }
- }
- else if (key == 'remote_candidateType') {
- if (value == "relay") {
- value = "💸 relay server";
- }
- }
- else if (key == 'height_url') {
- if (value == false) {
- continue;
- }
- }
- else if (key == 'width_url') {
- if (value == false) {
- continue;
- }
- }
- else if (key == 'height_url') {
- if (value == false) {
- continue;
- }
- }
- else if (key == 'version') {
- stat = "OBS.Ninja Version";
- } else if (key == 'platform') {
- stat = "Platform (OS)";
- }
- else if (key == 'aec_url') {
- stat = "Echo-Cancellation";
- }
- else if (key == 'agc_url') {
- stat = "Auto-Gain (agc)";
- }
- else if (key == 'denoise_url') {
- stat = "De-noising ";
- }
- else if (key == 'audio_level') {
- stat = "Audio Level";
- }
- else if (key == 'Buffer_Delay_in_ms') {
- var unit = " ms";
- stat = 'Buffer Delay';
- }
- else if (value === null) {
- value = "null";
- }
- else if (key == "stereo_url") {
- stat = "Pro-Audio (Stereo-mode)";
- if (value == 3) {
- value = "3 (outbound hi-fi) Use Headphones";
- } else if (value == 1) {
- value = "1 (in & out hi-fi) Use Headphones";
- } else if (value == 2) {
- value = "3 (inbound hi-fi)";
- } else if (value == 4) {
- value = "3 (multichannel) Use Headphones";
- } else if (value == 5) {
- value = "5 (auto-mode) Use Headphones";
- }
- }
- else if (value === false) {
- continue
- }
- else if (value === "false") {
- continue
- }
- out += "
" + stat + "" + value + unit + "
";
- } catch (e) {
- warnlog(e);
- }
- }
- }
- }
- return out;
-}
-
-
-function printMyStats(menu) { // see: setupStatsMenu
- var scrollLeft = getById("menuStatsBox").scrollLeft;
- var scrollTop = getById("menuStatsBox").scrollTop;
- menu.innerHTML = "";
-
- session.stats.outbound_connections = Object.keys(session.pcs).length;
- session.stats.inbound_connections = Object.keys(session.rpcs).length;
-
- function printViewValues(obj) {
-
- if (!(document.getElementById("menuStatsBox"))){
- return;
- }
-
- for (var key in obj) {
- if (typeof obj[key] === "object") {
- printViewValues(obj[key]);
- } else {
-
- if (key.startsWith("_")){continue;}
-
- var stat = sanitizeChat(key);
- var value = obj[key];
- if (typeof value == "string") {
- value = sanitizeChat((value));
- }
-
- if (value === false){continue;}
-
- if (key == 'useragent') {
- value = ""+value+""
- }
-
- if (key == 'local_relayIP') {
- value = "" + value + "";
- }
- if (key == 'remote_relay_IP') {
- value = "" + value + "";
- }
- if (key == 'local_candidateType') {
- if (value == "relay") {
- value = "💸 relay server";
- }
- }
- if (key == 'remote_candidateType') {
- if (value == "relay") {
- value = "💸 relay server";
- }
- }
-
- menu.innerHTML += "
" + stat + "" + value + "
";
- }
- }
- }
- printViewValues(session.stats);
- menu.innerHTML += "";
- for (var uuid in session.pcs) {
- printViewValues(session.pcs[uuid].stats);
- menu.innerHTML += "";
- }
- try {
- getById("menuStatsBox").scrollLeft = scrollLeft;
- getById("menuStatsBox").scrollTop = scrollTop;
- } catch (e) {}
-}
-
-
-function updateLocalStats(){
-
- var totalBitrate = 0;
- var totalBitrate2 = 0;
- var cpuLimited = false;
- for (var uuid in session.pcs) {
- if ("video_bitrate_kbps" in session.pcs[uuid].stats){
- totalBitrate+=session.pcs[uuid].stats.video_bitrate_kbps || 0;
- }
- if ("audio_bitrate_kbps" in session.pcs[uuid].stats){
- totalBitrate+=session.pcs[uuid].stats.audio_bitrate_kbps || 0;
- }
- if ("total_sending_bitrate_kbps" in session.pcs[uuid].stats){
- totalBitrate2+=session.pcs[uuid].stats.total_sending_bitrate_kbps || 0;
- }
-
- if ("quality_limitation_reason" in session.pcs[uuid].stats){
- if (session.pcs[uuid].stats.quality_limitation_reason == "cpu"){
- cpuLimited=true;
- }
- }
-
- if (uuid in session.rpcs){
- if (session.pcs[uuid].stats.label){
- session.pcs[uuid].stats.label = session.rpcs[uuid].label;
- }
- if (session.pcs[uuid].stats.streamID){
- session.pcs[uuid].stats.streamID = session.rpcs[uuid].streamID;
- }
- }
-
- setTimeout(function(UUID) {
- if (!( session.pcs[UUID])){return;}
- session.pcs[UUID].getStats().then(function(stats) {
- if ("audio_bitrate_kbps" in session.pcs[UUID].stats){
- session.pcs[UUID].stats.audio_bitrate_kbps=0;
- }
- stats.forEach(stat => {
- if (stat.type == "transport"){
- if ("bytesSent" in stat) {
- if ("_bytesSent" in session.pcs[UUID].stats){
- if (session.pcs[UUID].stats._timestamp){
- if (stat.timestamp){
- session.pcs[UUID].stats.total_sending_bitrate_kbps = parseInt(8*(stat.bytesSent - session.pcs[UUID].stats._bytesSent)/(stat.timestamp - session.pcs[UUID].stats._timestamp));
- }
- }
- }
- session.pcs[UUID].stats._bytesSent = stat.bytesSent;
- }
- if ("timestamp" in stat) {
- session.pcs[UUID].stats._timestamp = stat.timestamp;
- }
- } else if (stat.type == "outbound-rtp") {
- if (stat.kind == "video") {
-
- if ("qualityLimitationReason" in stat) {
- session.pcs[UUID].stats.quality_limitation_reason = stat.qualityLimitationReason;
- }
- if ("framesPerSecond" in stat) {
- session.pcs[UUID].stats.resolution = stat.frameWidth + " x " + stat.frameHeight + " @ " + stat.framesPerSecond;
- }
- if ("encoderImplementation" in stat) {
- session.pcs[UUID].stats.video_encoder = stat.encoderImplementation;
- }
- if ("bytesSent" in stat) {
- if ("_bytesSentVideo" in session.pcs[UUID].stats){
- if (session.pcs[UUID].stats._timestamp1){
- session.pcs[UUID].stats.video_bitrate_kbps = parseInt(8*(stat.bytesSent - session.pcs[UUID].stats._bytesSentVideo)/(stat.timestamp - session.pcs[UUID].stats._timestamp1));
- if (stat.timestamp){
- }
- }
- }
- session.pcs[UUID].stats._bytesSentVideo = stat.bytesSent;
- }
-
- if ("nackCount" in stat) {
- if ("_nackCount" in session.pcs[UUID].stats){
- if (session.pcs[UUID].stats._timestamp1){
- if (stat.timestamp){
- session.pcs[UUID].stats.nacks_per_second = parseInt(10000*(stat.nackCount - session.pcs[UUID].stats._nackCount)/(stat.timestamp - session.pcs[UUID].stats._timestamp1))/10;
- }
- }
- }
- }
- if ("retransmittedBytesSent" in stat) {
- if ("_retransmittedBytesSent" in session.pcs[UUID].stats){
- if (session.pcs[UUID].stats._timestamp1){
- if (stat.timestamp){
- session.pcs[UUID].stats.retransmitted_kbps = parseInt(8*(stat.retransmittedBytesSent - session.pcs[UUID].stats._retransmittedBytesSent)/(stat.timestamp - session.pcs[UUID].stats._timestamp1));
- }
- }
- }
- }
-
- if ("nackCount" in stat) {
- session.pcs[UUID].stats._nackCount = stat.nackCount;
-
- }
-
- if ("retransmittedBytesSent" in stat) {
- session.pcs[UUID].stats._retransmittedBytesSent = stat.retransmittedBytesSent;
-
- }
-
- if ("timestamp" in stat) {
- session.pcs[UUID].stats._timestamp1 = stat.timestamp;
- }
-
- if ("pliCount" in stat) {
- session.pcs[UUID].stats.total_pli_count = stat.pliCount;
- }
- if ("keyFramesEncoded" in stat) {
- session.pcs[UUID].stats.total_key_frames_encoded = stat.keyFramesEncoded;
- }
-
-
- } else if (stat.kind == "audio") {
- if ("bytesSent" in stat) {
- if (session.pcs[UUID].stats._bytesSentAudio){
- if (session.pcs[UUID].stats._timestamp2){
- if (stat.timestamp){
- if ("audio_bitrate_kbps" in session.pcs[UUID].stats){
- session.pcs[UUID].stats.audio_bitrate_kbps += parseInt(8*(stat.bytesSent - session.pcs[UUID].stats._bytesSentAudio)/(stat.timestamp - session.pcs[UUID].stats._timestamp2));
- } else {
- session.pcs[UUID].stats.audio_bitrate_kbps=0;
- }
- }
- }
- }
- }
- if ("timestamp" in stat) {
- session.pcs[UUID].stats._timestamp2 = stat.timestamp;
- }
-
- if ("bytesSent" in stat) {
- session.pcs[UUID].stats._bytesSentAudio = stat.bytesSent;
-
- }
- }
- } else if (stat.type == "remote-candidate") {
- if ("relayProtocol" in stat) {
- if ("ip" in stat) {
- session.pcs[UUID].stats.remote_relay_IP = stat.ip;
- }
- session.pcs[UUID].stats.remote_relayProtocol = stat.relayProtocol;
- }
- if ("candidateType" in stat) {
- session.pcs[UUID].stats.remote_candidateType = stat.candidateType;
- }
- } else if (stat.type == "local-candidate") {
- if ("relayProtocol" in stat) {
- if ("ip" in stat) {
- session.pcs[UUID].stats.local_relayIP = stat.ip;
- }
- session.pcs[UUID].stats.local_relayProtocol = stat.relayProtocol;
- }
- if ("candidateType" in stat) {
- session.pcs[UUID].stats.local_candidateType = stat.candidateType;
- }
- } else if ((stat.type == "candidate-pair" ) && (stat.nominated)) {
-
- if ("availableOutgoingBitrate" in stat){
- session.pcs[UUID].stats.available_outgoing_bitrate_kbps = parseInt(stat.availableOutgoingBitrate/1024);
- }
- if ("totalRoundTripTime" in stat){
- session.pcs[UUID].stats.total_roundTripTime_ms = stat.totalRoundTripTime*1000;
- }
- }
- return;
+ WebMidi.addListener("connected", function(e) {
+ log(e);
});
- return;
- });
- }, 0, uuid);
- }
- var headerStats = "Viewers: ";
- headerStats += Object.keys(session.pcs).length || 0;
- headerStats += ", Upload (kbps): "+totalBitrate2; // + " / "+totalBitrate;
- if (cpuLimited){
- headerStats += ", CPU Overloaded";
- }
- if (Object.keys(session.pcs).length){
- getById("head5").classList.remove("advanced");
- }
- getById("head5").innerHTML = headerStats;
-}
-
-function updateStats(obsvc = false) {
- log('updateStats - resolution found');
- if (document.getElementById('previewWebcam')) {
- var ele = document.getElementById('previewWebcam');
- var wcs = "webcamstats";
- } else if (document.getElementById('videosource')) {
- var ele = document.getElementById('videosource');
- var wcs = "webcamstats3";
- } else {
- return;
- }
-
- try {
- getById(wcs).innerHTML = "";
- ele.srcObject.getVideoTracks().forEach(
- function(track) {
- if ((obsvc) && (parseInt(track.getSettings().frameRate) == 30)) {
- getById(wcs).innerHTML = "Video Settings: " + (track.getSettings().width || 0) + "x" + (track.getSettings().height || 0) + " @ up to 60fps";
- } else {
- getById(wcs).innerHTML = "Current Video Settings: " + (track.getSettings().width || 0) + "x" + (track.getSettings().height || 0) + "@" + (parseInt(track.getSettings().frameRate * 10) / 10) + "fps";
- }
- }
- );
-
- } catch (e) {
- errorlog(e);
- }
-}
-
-function toggleMute(apply = false) { // TODO: I need to have this be MUTE, toggle, with volume not touched.
-
- log("muting");
-
- if (session.director) {
- if (!session.directorEnabledPPT) {
- log("Director doesn't have PPT enabled yet");
- // director has not enabled PTT yet.
- return;
- }
- }
-
- if (apply) {
- session.muted = !session.muted; // we flip here as we are going to flip again in a second.
- }
- //try{var ptt = getById("press2talk");} catch(e){var ptt=false;}
-
-
- if (session.muted == false) {
- session.muted = true;
- getById("mutetoggle").className = "las la-microphone-slash my-float toggleSize";
- if (!(session.cleanOutput)){
- getById("mutebutton").className = "float2 red puslate";
- getById("header").classList.add('red');
-
- if (session.localMuteElement){
- session.localMuteElement.style.display = "block";
- }
-
- }
- if (session.streamSrc) {
- session.streamSrc.getAudioTracks().forEach((track) => {
- track.enabled = false;
- });
- }
- //if (ptt){
- // ptt.innerHTML = "🔇 Push to Talk";
- //}
-
- } else {
- session.muted = false;
- getById("mutetoggle").className = "las la-microphone my-float toggleSize";
- if (!(session.cleanOutput)){
- getById("mutebutton").className = "float";
- getById("header").classList.remove('red');
-
- if (session.localMuteElement){
- session.localMuteElement.style.display = "none";
- }
-
- }
- if (session.streamSrc) {
- session.streamSrc.getAudioTracks().forEach((track) => {
- track.enabled = true;
- });
- }
- //if (ptt){
- // ptt.innerHTML = "🔴 Push to Mute";
- //}
- }
-
- if (document.getElementById("screensharesource")){
- document.getElementById("screensharesource").contentWindow.postMessage({"mic":!session.muted}, '*');
- }
-
- if (!apply) { // only if they are changing states do we bother to spam.
- data = {};
- data.muteState = session.muted;
- session.sendMessage(data);
- log("SEND DATA");
- pokeIframeAPI('mic-mute-state', session.muted);
- }
-}
-
-
-function toggleSpeakerMute(apply = false) { // TODO: I need to have this be MUTE, toggle, with volume not touched.
-
- if (CtrlPressed) {
- resetupAudioOut();
- }
-
- if (apply) {
- session.speakerMuted = !session.speakerMuted;
- }
- if (session.speakerMuted == false) {
- session.speakerMuted = true;
- getById("mutespeakertoggle").className = "las la-volume-mute my-float toggleSize";
- if (!(session.cleanOutput)){
- getById("mutespeakerbutton").className = "float2 red";
- }
- var sounds = document.getElementsByTagName("video");
- for (var i = 0; i < sounds.length; ++i) {
- sounds[i].muted = session.speakerMuted;
- }
-
- } else {
- session.speakerMuted = false;
-
- getById("mutespeakertoggle").className = "las la-volume-up my-float toggleSize";
- if (!(session.cleanOutput)){
- getById("mutespeakerbutton").className = "float";
- }
-
- var sounds = document.getElementsByTagName("video");
- for (var i = 0; i < sounds.length; ++i) {
-
- if (sounds[i].id === "videosource") { // don't unmute ourselves. feedback galore if so.
- continue;
- } else if (sounds[i].id === "previewWebcam") {
- continue;
- } else if (sounds[i].id === "screenshare") {
- continue;
- } else {
- sounds[i].muted = session.speakerMuted;
- }
- }
- }
-
- for (var UUID in session.rpcs) {
- if (session.rpcs[UUID].videoElement) {
- //if (UUID === session.directorUUID) {
- // session.rpcs[UUID].videoElement.muted = false; // unmute director
- // log("MAKE SURE DIRECTOR ISN'T MUTED");
- //} else {
- session.rpcs[UUID].videoElement.muted = session.speakerMuted;
- // }
- }
- }
-
- if ((iOS) || (iPad)) {
- resetupAudioOut();
- }
-}
-
-
-function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle, with volume not touched.
- if (session.chat == false) {
- setTimeout(function() {
- document.addEventListener("click", toggleChat);
- }, 10);
-
- getById("chatModule").addEventListener("click", function(e) {
- e.stopPropagation();
- return false;
- });
- session.chat = true;
- getById("chattoggle").className = "las la-comment-dots my-float toggleSize";
- getById("chatbutton").className = "float2";
- getById("chatModule").style.display = "block";
- getById("chatInput").focus(); // give it keyboard focus
- } else {
- session.chat = false;
- getById("chattoggle").className = "las la-comment-alt my-float toggleSize";
- getById("chatbutton").className = "float";
- getById("chatModule").style.display = "none";
-
- document.removeEventListener("click", toggleChat);
- getById("chatModule").removeEventListener("click", function(e) {
- e.stopPropagation();
- return false;
- });
- }
- if (getById("chatNotification").value) {
- getById("chatNotification").value = 0;
- }
- getById("chatNotification").classList.remove("notification");
-}
-
-function directorAdvanced(ele) {
- var target = document.createElement("div");
- target.style = "position:absolute;float:left;width:270px;height:222px;background-color:#7E7E7E;";
-
- var closeButton = document.createElement("button");
- closeButton.innerHTML = " close";
- closeButton.style.left = "5px";
- closeButton.style.position = "relative";
- closeButton.onclick = function() {
- target.parentNode.removeChild(target);
- };
- target.appendChild(closeButton);
-
- var someButton = document.createElement("button");
- someButton.innerHTML = " some action ";
- someButton.style.left = "5px";
- someButton.style.position = "relative";
- someButton.onclick = function() {
- var actionMsg = {};
- session.sendRequest(actionMsg, ele.dataset.UUID);
- };
- target.appendChild(someButton);
-
- ele.parentNode.appendChild(target);
-}
-
-function directorSendMessage(ele) {
- var target = document.createElement("div");
- target.style = "position:absolute;float:left;width:270px;height:222px;background-color:#7E7E7E;";
-
- var inputField = document.createElement("textarea");
- inputField.placeholder = "Enter your message here";
- inputField.style.width = "255px";
- inputField.style.height = "170px";
- inputField.style.margin = "5px 10px 5px 10px";
- inputField.style.padding = "5px";
-
- target.appendChild(inputField);
-
- var sendButton = document.createElement("button");
- sendButton.innerHTML = " send message ";
- sendButton.style.left = "5px";
- sendButton.style.position = "relative";
- sendButton.onclick = function() {
- var chatMsg = {};
- chatMsg.chat = inputField.value;
- if (sendButton.parentNode.overlay) {
- chatMsg.overlay = sendButton.parentNode.overlay;
- }
- session.sendRequest(chatMsg, ele.dataset.UUID);
- inputField.value = "";
- //target.parentNode.removeChild(target);
- };
-
-
- var closeButton = document.createElement("button");
- closeButton.innerHTML = " close";
- closeButton.style.left = "5px";
- closeButton.style.position = "relative";
- closeButton.onclick = function() {
- inputField.value = "";
- target.parentNode.removeChild(target);
- };
-
- var overlayMsg = document.createElement("span");
-
- overlayMsg.style.left = "16px";
- overlayMsg.style.top = "6px";
- overlayMsg.style.position = "relative";
- overlayMsg.innerHTML = "";
- target.overlay = true;
-
- overlayMsg.onclick = function(e) {
- log(e.target.parentNode.parentNode);
- if (e.target.parentNode.parentNode.overlay === true) {
- e.target.parentNode.parentNode.overlay = false;
- e.target.parentNode.innerHTML = "";
- } else {
- e.target.parentNode.parentNode.overlay = true;
- e.target.parentNode.innerHTML = "";
- }
- }
-
-
- inputField.addEventListener("keydown", function(e) {
- if (e.keyCode == 13) {
- e.preventDefault();
- sendButton.click();
- } else if (e.keyCode == 27) {
- e.preventDefault();
- inputField.value = "";
- target.parentNode.removeChild(target);
- }
- });
- target.appendChild(closeButton);
- target.appendChild(sendButton);
- target.appendChild(overlayMsg);
- ele.parentNode.appendChild(target);
- inputField.focus();
- inputField.select();
-}
-
-function toggleVideoMute(apply = false) { // TODO: I need to have this be MUTE, toggle, with volume not touched.
- if (apply) {
- session.videoMuted = !session.videoMuted;
- }
- if (session.videoMuted == false) {
- session.videoMuted = true;
- getById("mutevideotoggle").className = "las la-video-slash my-float toggleSize";
- if (!(session.cleanOutput)){
- getById("mutevideobutton").className = "float2 red";
- }
- if (session.streamSrc) {
- session.streamSrc.getVideoTracks().forEach((track) => {
- track.enabled = false;
- });
- }
-
- } else {
- session.videoMuted = false;
-
- getById("mutevideotoggle").className = "las la-video my-float toggleSize";
- if (!(session.cleanOutput)){
- getById("mutevideobutton").className = "float";
- }
- if (session.streamSrc) {
- session.streamSrc.getVideoTracks().forEach((track) => {
- // try {
- // if (document.querySelector("select#videoSource3").value == "ZZZ"){
- // return;
- // }
- // } catch(e){}
- track.enabled = true;
- });
- }
- }
-
-
-
- if (!apply) {
- var msg = {};
- msg.videoMuted = session.videoMuted;
- session.sendMessage(msg);
- pokeIframeAPI('video-mute-state', session.videoMuted);
- if (!session.videoMuted){makeImages();}
- }
-}
-
-var toggleSettingsState = false;
-
-function toggleSettings(forceShow = false) { // TODO: I need to have this be MUTE, toggle, with volume not touched.
-
- getById("multiselect-trigger3").dataset.state = "0";
- getById("multiselect-trigger3").classList.add('closed');
- getById("multiselect-trigger3").classList.remove('open');
- getById("chevarrow2").classList.add('bottom');
-
- if (toggleSettingsState == true) {
- if (forceShow == true) {
- enumerateDevices().then(gotDevices2);
- return;
- }
- } // don't close if already open
- if (getById("popupSelector").style.display == "none") {
-
- updateConstraintSliders();
-
- setTimeout(function() {
- document.addEventListener("click", toggleSettings);
- }, 10);
-
- getById("popupSelector").addEventListener("click", function(e) {
- e.stopPropagation();
- return false;
- });
-
- if (navigator.userAgent.indexOf('Chrome') != -1) {
- try {
- navigator.permissions.query({
- name: "camera"
- }).then(function(promise) {
- if (promise && promise.state) {
- if (promise.state == "prompt") {
- navigator.mediaDevices.getUserMedia({
- video: true
- , audio: false
- }).then(function(stream) {
- enumerateDevices().then(gotDevices2).then(function() {
- stream.getTracks().forEach(function(track) {
- //stream.removeTrack(track);
- track.stop(); // clean up?
- });
- });
-
- }).catch(function(err) {
- enumerateDevices().then(gotDevices2).then(function() {});
- });
- } else {
- enumerateDevices().then(gotDevices2).then(function() {});
- }
- // console.log(promise.state); //"granted", "prompt" or "rejected"
- } else {
- enumerateDevices().then(gotDevices2).then(function() {});
- }
+ WebMidi.addListener("disconnected", function(e) {
+ log(e);
});
- } catch (e) {
- enumerateDevices().then(gotDevices2).then(function() {});
- }
- } else {
- enumerateDevices().then(gotDevices2).then(function() {});
- }
-
- getById("popupSelector").style.display = "inline-block"
- getById("settingsbutton").classList.add("float2");
- getById("settingsbutton").classList.remove("float");
- setTimeout(function() {
- getById("popupSelector").style.right = "0px";
- }, 1);
- toggleSettingsState = true;
- } else {
- document.removeEventListener("click", toggleSettings);
- getById("popupSelector").removeEventListener("click", function(e) {
- e.stopPropagation();
- return false;
- });
-
- getById("popupSelector").style.right = "-400px";
-
- getById("settingsbutton").classList.add("float");
- getById("settingsbutton").classList.remove("float2");
- setTimeout(function() {
- getById("popupSelector").style.display = "none";
- }, 200);
- toggleSettingsState = false;
- }
-}
-
-function hangup() { // TODO: I need to have this be MUTE, toggle, with volume not touched.
- getById("main").innerHTML = "👋";
- setTimeout(function() {
- session.hangup();
- }, 0);
-}
-
-function hangup2() {
- session.hangupDirector();
- getById("miniPerformer").innerHTML = "";
- getById("press2talk").dataset.value = 0;
- getById("screensharebutton").classList.add("advanced");
- getById("settingsbutton").classList.add("advanced");
- getById("mutebutton").classList.add("advanced");
- getById("hangupbutton2").classList.add("advanced");
- //getById("chatbutton").classList.remove("advanced");
- getById("controlButtons").style.display = "inherit";
- //getById("mutespeakerbutton").classList.add("advanced");
- getById("mutevideobutton").classList.add("advanced");
- getById("screenshare2button").classList.add("advanced");
-
- getById("screensharebutton").classList.add("float");
- getById("screensharebutton").classList.remove("float2");
-
- if (session.showDirector == false) {
- getById("miniPerformer").innerHTML = '';
- } else {
- getById("miniPerformer").innerHTML = '';
- }
- getById("miniPerformer").className = "";
-}
-
-function hangupComplete() {
- getById("main").innerHTML = "👋";
-}
-
-
-function raisehand() {
- if (session.directorUUID == false) {
- log("no director in room yet");
- return;
- }
-
- var data = {};
- data.UUID = session.directorUUID;
-
- log(data);
- if (getById("raisehandbutton").dataset.raised == "0") {
- getById("raisehandbutton").dataset.raised = "1";
- getById("raisehandbutton").classList.add("raisedHand");
- data.chat = "Raised hand";
- log("hand raised");
- } else {
- log("hand lowered");
- getById("raisehandbutton").dataset.raised = "0";
- getById("raisehandbutton").classList.remove("raisedHand");
- data.chat = "Lowered hand";
- }
- session.sendMessage(data, data.UUID);
-}
-
-function lowerhand() {
- log("hand lowered");
- getById("raisehandbutton").dataset.raised = "0";
- getById("raisehandbutton").classList.remove("raisedHand");
-}
-
-var previousRoom = "";
-var stillNeedRoom = true;
-var transferCancelled = false;
-var armedTransfer = false;
-
-function directMigrate(ele, event) { // everyone in the room will hangup this guest also? I like that idea. What about the STREAM ID? I suppose we don't kick out if the viewID matches.
- log("directMigrate");
- if (event === false) {
- if (previousRoom === null) { // user cancelled in previous callback
- ele.innerHTML = ' Transfer';
- ele.style.backgroundColor = null;
- return;
- }
- if (transferCancelled === true) {
- ele.innerHTML = ' Transfer';
- ele.style.backgroundColor = null;
- return;
- }
- var migrateRoom = previousRoom
- } else if ((event.ctrlKey) || (event.metaKey)) {
- ele.innerHTML = ' Armed';
- ele.style.backgroundColor = "#BF3F3F";
- transferCancelled = false;
- //armedTransfer=true;
- Callbacks.push([directMigrate, ele, stillNeedRoom]);
- stillNeedRoom = false;
- log("Migrate queued");
- return;
- // } else if (armedTransfer){
- //migrateRoom = sanitizeRoomName(previousRoom);
- } else {
- if (armedTransfer!==false && previousRoom!==""){
- var migrateRoom = sanitizeRoomName(previousRoom);
- } else {
- var migrateRoom = prompt("Transfer guests to room:\n\n(Please note rooms must share the same password)", previousRoom);
- }
- stillNeedRoom = true;
- if (migrateRoom === null) { // user cancelled
- ele.innerHTML = ' Transfer';
- ele.style.backgroundColor = null;
- transferCancelled = true;
- return;
- }
- try {
- migrateRoom = sanitizeRoomName(migrateRoom);
- previousRoom = migrateRoom;
- } catch (e) {}
-
- }
- ele.innerHTML = ' Transfer';
- ele.style.backgroundColor = null;
-
- if (migrateRoom) {
- previousRoom = migrateRoom;
-
- var msg = {};
- msg.request = "migrate";
- if (session.password) {
- return session.generateHash(migrateRoom + session.password + session.salt, 16).then(function(rid) {
- var msg = {};
- msg.request = "migrate";
- msg.roomid = rid;
- msg.target = ele.dataset.UUID;
- session.sendMsg(msg); // send to everyone in the room, so they know if they are on air or not.
- });
- } else {
- var msg = {};
- msg.request = "migrate";
- msg.roomid = migrateRoom;
- msg.target = ele.dataset.UUID;
- session.sendMsg(msg); // send to everyone in the room, so they know if they are on air or not.
- }
- }
-}
-var stillNeedHangupTarget = 1;
-
-function directHangup(ele, event) { // everyone in the room will hangup this guest? I like that idea.
- if (event == false) {
- if (stillNeedHangupTarget === 1) {
- var confirmHangup = confirm("Are you sure you wish to disconnect these users?");
- stillNeedHangupTarget = confirmHangup;
- } else {
- confirmHangup = stillNeedHangupTarget;
- }
- } else if ((event.ctrlKey) || (event.metaKey)) {
- ele.innerHTML = ' ARMED';
- ele.style.backgroundColor = "#BF3F3F";
- stillNeedHangupTarget = 1;
- Callbacks.push([directHangup, ele, false]);
- log("Hangup queued");
- return;
- } else {
- var confirmHangup = confirm("Are you sure you wish to disconnect this user?");
- }
-
- if (confirmHangup) {
- var msg = {};
- msg.hangup = true;
- log(msg);
- log(ele.dataset.UUID);
- session.sendRequest(msg, ele.dataset.UUID);
- //session.anysend(msg); // send to everyone in the room, so they know if they are on air or not.
- } else {
- ele.innerHTML = ' Hangup';
- ele.style.backgroundColor = null;
- }
-}
-
-function directEnable(ele, event, scene=1, director=false) { // A directing room only is controlled by the Director, with the exception of MUTE.
- if (!((event.ctrlKey) || (event.metaKey))) {
- if (ele.dataset.value == 1) {
- ele.dataset.value = 0;
- ele.classList.remove("pressed");
- if (ele.children[1]){
- ele.children[1].innerHTML = "Add to Scene "+scene;
- if (director){
- getById("container_director").style.backgroundColor = null;
- } else {
- getById("container_" + ele.dataset.UUID).style.backgroundColor = null;
- }
- }
- } else {
- ele.dataset.value = 1;
- ele.classList.add("pressed");
- if (ele.children[1]){
- ele.children[1].innerHTML = "Remove";
- if (director){
- getById("container_director").style.backgroundColor = "#649166";
- } else {
- getById("container_" + ele.dataset.UUID).style.backgroundColor = "#649166";
- }
- }
- }
- }
- var msg = {};
-
- msg.scene = scene;
- msg.action = "display";
- msg.value = ele.dataset.value;
- msg.target = ele.dataset.sid;
-
- for (var uuid in session.pcs){
- if (session.pcs[uuid].stats.info && ("version" in session.pcs[uuid].stats.info) && (session.pcs[uuid].stats.info.version < 17.2)){
- msg.request = "sendroom";
- session.sendMsg(msg);
- return;
- }
- }
-
- for (var uuid in session.pcs){
- if (session.pcs[uuid].scene!==false){ // send to all scenes (but scene = 0)
- session.sendMessage(msg, uuid);
- }
- }
-}
-
-var previousURL = "";
-var stillNeedURL = true;
-var reloadCancelled = false;
-var armedReload = false;
-
-function directPageReload(ele, event) {
- log("URL Page reload");
- if (event === false) {
- if (previousURL === null) { // user cancelled in previous callback
- ele.innerHTML = ' Change URL';
- ele.style.backgroundColor = null;
- return;
- }
- if (reloadCancelled === true) {
- ele.innerHTML = ' Change URL';
- ele.style.backgroundColor = null;
- return;
- }
- reloadURL = previousURL
- } else if ((event.ctrlKey) || (event.metaKey)) {
- ele.innerHTML = ' Armed';
- ele.style.backgroundColor = "#BF3F3F";
- reloadCancelled = false;
- armedReload=true;
- Callbacks.push([directPageReload, ele, stillNeedURL]);
- stillNeedURL = false;
- log("URL update queued");
- return;
- } else if (armedReload){
- reloadURL = previousURL;
- } else {
- var reloadURL = prompt("Transfer guests to new website URL.\n\n(Guests will be prompted to accept)", previousURL);
- stillNeedURL = true;
- if (reloadURL === null) { // user cancelled
- ele.innerHTML = ' Change URL';
- ele.style.backgroundColor = null;
- reloadCancelled = true;
- return;
- }
- try {
- previousURL = reloadURL;
- } catch (e) {}
-
- }
- ele.innerHTML = ' Change URL';
- ele.style.backgroundColor = null;
-
- if (reloadURL) {
- previousURL = reloadURL;
-
- var msg = {};
- msg.changeURL = reloadURL;
- if (ele.dataset.UUID in session.rpcs){
- session.rpcs[ele.dataset.UUID].receiveChannel.send(JSON.stringify(msg));
- }
- }
-}
-
-function directMute(ele, event=false) { // A directing room only is controlled by the Director, with the exception of MUTE.
- log("mute");
- if (!event || (!((event.ctrlKey) || (event.metaKey)))) {
- if (ele.dataset.value == 0) {
- ele.dataset.value = 1;
- ele.classList.remove("pressed");
- ele.children[1].innerHTML = "Mute in scene";
- } else {
- ele.dataset.value = 0;
- ele.classList.add("pressed");
- ele.children[1].innerHTML = "Un-mute";
- }
- }
- var msg = {};
- msg.scene = true;
- msg.action = "mute";
- msg.value = ele.dataset.value;
- msg.target = ele.dataset.sid;
-
- for (var uuid in session.pcs){
- if (session.pcs[uuid].stats.info && ("version" in session.pcs[uuid].stats.info) && (session.pcs[uuid].stats.info.version < 17.2)){
- msg.request = "sendroom";
- session.sendMsg(msg);
- return;
- }
- }
-
- for (var uuid in session.pcs){
- if (session.pcs[uuid].scene!==false){ // send to all scenes (but scene = 0)
- session.sendMessage(msg, uuid);
- }
- }
-}
-
-function remoteSpeakerMute(ele, event=false){
- log("speaker mute");
- if (!event || (!((event.ctrlKey) || (event.metaKey)))) {
- if (ele.dataset.value == 1) {
- ele.dataset.value = 0;
- ele.classList.remove("pressed");
- ele.children[1].innerHTML = "deafen guest";
- } else {
- ele.dataset.value = 1;
- ele.classList.add("pressed");
- ele.children[1].innerHTML = "Un-deafen";
- }
- }
-
- var msg = {};
- if (ele.dataset.value == 0) {
- msg.speakerMute = false
- } else {
- msg.speakerMute = true;
- }
- msg.UUID = ele.dataset.UUID;
- session.sendRequest(msg, ele.dataset.UUID);
-}
-
-function updateRemoteSpeakerMute(UUID) {
- var ele = document.querySelectorAll('[data-action-type="toggle-remote-speaker"][data--u-u-i-d="' + UUID + '"]');
- if (ele[0]) {
- ele[0].classList.add("pressed");
- ele[0].dataset.value = 1;
- ele[0].children[1].innerHTML = "Un-deafen";
- }
-}
-
-function updateRemoteDisplayMute(UUID) {
- var ele = document.querySelectorAll('[data-action-type="toggle-remote-display"][data--u-u-i-d="' + UUID + '"]');
- if (ele[0]) {
- ele[0].classList.add("pressed");
- ele[0].dataset.value = 1;
- ele[0].children[1].innerHTML = "Un-blind";
- }
-}
-
-function remoteDisplayMute(ele, event=false) {
- log("display mute");
- if (!event || (!((event.ctrlKey) || (event.metaKey)))) {
- if (ele.dataset.value == 1) {
- ele.dataset.value = 0;
- ele.classList.remove("pressed");
- ele.children[1].innerHTML = "blind guest";
- } else {
- ele.dataset.value = 1;
- ele.classList.add("pressed");
- ele.children[1].innerHTML = "Un-blind";
- }
- }
-
- var msg = {};
- if (ele.dataset.value == 0) {
- msg.displayMute = false;
- } else {
- msg.displayMute = true;
- }
- msg.UUID = ele.dataset.UUID;
- session.sendRequest(msg, ele.dataset.UUID);
-}
-
-function remoteLowerhands(UUID) {
- var msg = {};
- msg.lowerhand = true;
- msg.UUID = UUID;
- session.sendRequest(msg, UUID);
-}
-
-
-function remoteMute(ele, event=false) {
- log("mute");
- if (!event || (!((event.ctrlKey) || (event.metaKey)))) {
- if (ele.dataset.value == 1) {
- ele.dataset.value = 0;
- ele.classList.remove("pressed");
- ele.children[1].innerHTML = "mute guest";
- } else {
- ele.dataset.value = 1;
- ele.classList.add("pressed");
- ele.children[1].innerHTML = "Un-mute guest";
- }
- }
-
- try {
- session.rpcs[ele.dataset.UUID].directorMutedState = ele.dataset.mute;
- var volume = session.rpcs[ele.dataset.UUID].directorVolumeState;
- } catch (e) {
- errorlog(e);
- var volume = 100;
- }
-
- var msg = {};
- if (ele.dataset.value == 0) {
- msg.volume = volume;
- } else {
- msg.volume = 0;
- }
- msg.UUID = ele.dataset.UUID;
- session.sendRequest(msg, ele.dataset.UUID);
-}
-
-function remoteMuteVideo(ele, event=false) {
- log("video mute");
-
- if (!event || ((event.ctrlKey) || (event.metaKey))) {
- ele.children[1].innerHTML = "ARMED";
- ele.style.backgroundColor = "#BF3F3F";
- Callbacks.push([remoteMuteVideo, ele, false]);
- log("video queued");
- return;
- } else {
- if (ele.dataset.value == 1) {
- ele.dataset.value = 0;
- ele.classList.remove("pressed");
- ele.children[1].innerHTML = "hide guest";
- } else {
- ele.dataset.value = 1;
- ele.classList.add("pressed");
- ele.children[1].innerHTML = "Unhide guest";
- }
- ele.style.backgroundColor = null;
- }
-
- var msg = {};
- if (ele.dataset.value == 0) {
- msg.directVideoMuted = false;
- } else {
- msg.directVideoMuted = true;
- }
-
- for (var i in session.pcs){
- msg.target = ele.dataset.UUID;
-
- if (i === msg.target){
- msg.target = true;
- }
- try{
- session.pcs[i].sendChannel.send(JSON.stringify(msg));
- } catch(e){}
-
- }
-}
-
-function updateDirectorVideoMute(UUID) {
- var ele = document.querySelectorAll('[data-action-type="hide-guest"][data--u-u-i-d="' + UUID + '"]');
- if (ele[0]) {
- ele[0].dataset.value = 1;
- ele[0].classList.add("pressed");
- ele[0].children[1].innerHTML = "Unhide guest";
- }
-}
-
-function directVolume(ele) { // NOT USED ANYMORE
- log("volume");
- var msg = {};
- msg.scene = true;
- msg.action = "volume";
- msg.target = ele.dataset.sid; // i want to focus on the STREAM ID, not the UUID...
- msg.value = ele.value;
-
- for (var uuid in session.pcs){
- if (session.pcs[uuid].stats.info && ("version" in session.pcs[uuid].stats.info) && (session.pcs[uuid].stats.info.version < 17.2)){
- msg.request = "sendroom";
- session.sendMsg(msg);
- return;
- }
- }
-
- for (var uuid in session.pcs){
- if (session.pcs[uuid].scene!==false){ // send to all scenes (but scene = 0)
- session.sendMessage(msg, uuid);
- }
- }
-}
-
-function remoteVolumeUI(ele){
- ele.nextSibling.innerHTML = ele.value;
-}
-
-function remoteVolume(ele) { // A directing room only is controlled by the Director, with the exception of MUTE.
- log("volume");
- var msg = {};
- var muted = session.rpcs[ele.dataset.UUID].directorMutedState;
- if (muted == 1) { // 1 is a string, not an int, so == and not ===. this happens in a few places :/
- session.rpcs[ele.dataset.UUID].directorVolumeState = ele.value;
- } else {
- session.rpcs[ele.dataset.UUID].directorVolumeState = ele.value;
- msg.volume = ele.value;
- msg.UUID = ele.dataset.UUID;
- session.sendRequest(msg, ele.dataset.UUID);
- }
-}
-
-
-function sendChat(chatmessage = "hi", UUID=false) { // A directing room only is controlled by the Director, with the exception of MUTE.
- log("Chat message");
- var msg = {};
- msg.chat = chatmessage;
-
- session.sendPeers(msg, UUID);
-}
-
-var activatedStream = false;
-
-function publishScreen() {
- if (activatedStream == true) {
- return;
- }
- activatedStream = true;
- setTimeout(function() {
- activatedStream = false;
- }, 1000);
-
- var title = "ScreenShare"; //getById("videoname2").value;
-
- formSubmitting = false;
-
- var quality = parseInt(getById("webcamquality2").elements.namedItem("resolution2").value);
-
- if (session.quality !== false) {
- quality = session.quality; // override the user's setting
- }
-
- if (quality == 0) {
- var width = {
- ideal: 1920
- };
- var height = {
- ideal: 1080
- };
- } else if (quality == 1) {
- var width = {
- ideal: 1280
- };
- var height = {
- ideal: 720
- };
- } else if (quality == 2) {
- var width = {
- ideal: 640
- };
- var height = {
- ideal: 360
- };
- } else if (quality >= 3) { // lowest
- var width = {
- ideal: 320
- };
- var height = {
- ideal: 180
- };
- }
-
- if (session.width) {
- width = {
- ideal: session.width
- };
- }
- if (session.height) {
- height = {
- ideal: session.height
- };
- }
-
- var constraints = window.constraints = {
- audio: {
- echoCancellation: false
- , autoGainControl: false
- , noiseSuppression: false
- }
- , video: {
- width: width
- , height: height
- }
- };
-
- if (session.noiseSuppression === true) {
- constraints.audio.noiseSuppression = true;; // the defaults for screen publishing should be off.
- }
- if (session.autoGainControl === true) {
- constraints.audio.autoGainControl = true; // the defaults for screen publishing should be off.
- }
- if (session.echoCancellation === true) {
- constraints.audio.echoCancellation = true; // the defaults for screen publishing should be off.
- }
-
- try {
- let supportedConstraints = navigator.mediaDevices.getSupportedConstraints(); // cursor hidding isn't supported by most browsers anyways.
- if (supportedConstraints.cursor) {
- constraints.video.cursor = "never";
- }
- } catch(e){
- warnlog("navigator.mediaDevices.getSupportedConstraints() not supported");
- }
-
- //if (session.nocursor) { // we assume no cursor on screen share anyways. maybe make a different flag for screenshare cursor
- // constraints.video.cursor = {
- // exact: "none"
- // }; // Not sure this does anything, but whatever.
- //}
-
- if (session.framerate !== false) {
- constraints.video.frameRate = session.framerate;
- } else if (session.maxframerate != false){
- constraints.video.frameRate = {
- ideal: session.maxframerate,
- max: session.maxframerate
- };
- } else {
- constraints.video.frameRate = {
- ideal: 60
- };
- }
-
- var audioSelect = document.querySelector('select#audioSourceScreenshare');
- var outputSelect = document.querySelector('select#outputSourceScreenshare');
-
-
- session.sink = outputSelect.options[outputSelect.selectedIndex].value;
- log("Session SInk: " + session.sink);
- if (session.sink == "default") {
- session.sink = false;
- }
-
- /* if (session.sink ===false){
- if (session.outputDevice){
- try {
- for (var i in outputSelect.options){
- log(outputSelect.options[i].label.replace(/[\W]+/g,"_").toLowerCase());
- log(session.outputDevice);
- if (outputSelect.options[i].label.replace(/[\W]+/g,"_").toLowerCase().includes(session.outputDevice)){
- session.sink = outputSelect.options[i].value;
- break;
- }
- }
- } catch (e){}
- }
- } */
-
- log("*");
-
-
- session.publishScreen(constraints, title, audioSelect).then((res) => {
- if (res == false) {
- return;
- } // no screen selected
- log("streamID is: " + session.streamID);
-
- if (session.transcript) {
- setTimeout(function() {
- setupClosedCaptions();
- }, 0);
- }
- //session.screenShareState=true;
- if (!(session.cleanOutput)) {
- getById("mutebutton").className = "float";
- getById("mutespeakerbutton").classList.remove("advanced");
- //getById("mutespeakerbutton").className="float";
- getById("chatbutton").className = "float";
- getById("mutevideobutton").className = "float";
- getById("hangupbutton").className = "float";
- if (session.showSettings) {
- getById("settingsbutton").className = "float";
- }
- if (session.raisehands) {
- getById("raisehandbutton").className = "float";
- }
- if (session.recordLocal !== false) {
- getById("recordLocalbutton").className = "float";
- }
- if (screensharebutton) {
- getById("screensharebutton").className = "float2";
- }
- getById("controlButtons").style.display = "flex";
- getById("helpbutton").style.display = "inherit";
- getById("reportbutton").style.display = "";
- } else if (session.cleanish && session.recordLocal!==false){
- getById("recordLocalbutton").className = "float";
- getById("mutebutton").classList.add("advanced");
- getById("mutespeakerbutton").classList.add("advanced");
- getById("chatbutton").classList.add("advanced");
- getById("mutevideobutton").classList.add("advanced");
- getById("hangupbutton").classList.add("advanced");
- getById("hangupbutton2").classList.add("advanced");
- getById("controlButtons").style.display = "flex";
- getById("settingsbutton").classList.add("advanced");
- getById("screenshare2button").classList.add("advanced");
- getById("screensharebutton").classList.add("advanced");
- getById("queuebutton").classList.add("advanced");
- } else {
- getById("controlButtons").style.display = "none";
- }
-
- if (session.chatbutton === true) {
- getById("chatbutton").classList.remove("advanced");
- getById("controlButtons").style.display = "inherit";
- } else if (session.chatbutton === false) {
- getById("chatbutton").classList.add("advanced");
- }
-
- getById("head1").className = 'advanced';
- getById("head2").className = 'advanced';
- }).catch(() => {});
-
-}
-
-function publishWebcam(btn = false) {
- if (btn) {
- if (btn.dataset.ready == "false") {
- warnlog("Clicked too quickly; button not enabled yet");
- return;
- }
-
- if (getById("passwordBasicInput").value.length){
- session.password = getById("passwordBasicInput").value;
- session.password = sanitizePassword(session.password);
- if (session.password.length==0){
- session.password = false;
- } else {
- session.defaultPassword = false;
- if (urlParams.has('pass')) {
- updateURL("pass=" + session.password);
- } else if (urlParams.has('pw')) {
- updateURL("pw=" + session.password);
- } else if (urlParams.has('p')) {
- updateURL("p=" + session.password);
- } else {
- updateURL("password=" + session.password);
- }
- }
- }
- }
-
- if (activatedStream == true) {
- return;
- }
- activatedStream = true;
- log("PRESSED PUBLISH WEBCAM!!");
-
- var title = "Webcam"; // getById("videoname3").value;
- var ele = getById("previewWebcam");
-
- formSubmitting = false;
- window.scrollTo(0, 0); // iOS has a nasty habit of overriding the CSS when changing camaera selections, so this addresses that.
-
- getById("head2").className = 'advanced';
-
- if (session.roomid !== false) {
- if ((session.roomid === "") && ((!(session.view)) || (session.view === ""))) {
- // no room, no viewing, viewing disabled
- session.manual = true;
- window.addEventListener("resize", updateMixer);
- window.addEventListener("orientationchange", function() {
- setTimeout(updateMixer, 200);
- });
- } else {
- log("ROOM ID ENABLED");
- log("Update Mixer Event on REsize SET");
- window.addEventListener("resize", updateMixer);
- window.addEventListener("orientationchange", function() {
- setTimeout(updateMixer, 200);
- });
- getById("main").style.overflow = "hidden";
- //session.cbr=0; // we're just going to override it
-
- if (session.stereo == 5) {
- if (session.roomid === "") {
- session.stereo = 1;
- } else {
- session.stereo = 3;
- }
- }
- joinRoom(session.roomid);
- if (session.roomid !== "") {
- if (!(session.cleanOutput)) {
- getById("head2").className = '';
- }
- }
- getById("head3").className = 'advanced';
-
- }
-
- } else {
- getById("head3").className = '';
- getById("logoname").style.display = 'none';
- }
-
- log("streamID is: " + session.streamID);
- getById("head1").className = 'advanced';
-
-
- if (!(session.cleanOutput)) {
- getById("mutebutton").className = "float";
- getById("mutespeakerbutton").classList.remove("advanced");
- //getById("mutespeakerbutton").className="float";
- getById("chatbutton").className = "float";
- getById("mutevideobutton").className = "float";
- getById("hangupbutton").className = "float";
- if (session.showSettings) {
- getById("settingsbutton").className = "float";
- }
- if (session.raisehands) {
- getById("raisehandbutton").className = "float";
- }
- if (session.recordLocal !== false) {
- getById("recordLocalbutton").className = "float";
- }
- if (screensharebutton) {
- if (session.roomid) {
- getById("screenshare2button").className = "float";
- getById("screensharebutton").className = "float advanced";
- } else {
- getById("screensharebutton").className = "float";
- getById("screenshare2button").className = "float advanced";
- }
- }
- getById("controlButtons").style.display = "flex";
- getById("helpbutton").style.display = "inherit";
- getById("reportbutton").style.display = "";
- } else if (session.cleanish && session.recordLocal!==false){
- getById("recordLocalbutton").className = "float";
- getById("mutebutton").classList.add("advanced");
- getById("mutespeakerbutton").classList.add("advanced");
- getById("chatbutton").classList.add("advanced");
- getById("mutevideobutton").classList.add("advanced");
- getById("hangupbutton").classList.add("advanced");
- getById("hangupbutton2").classList.add("advanced");
- getById("controlButtons").style.display = "flex";
- getById("settingsbutton").classList.add("advanced");
- getById("screenshare2button").classList.add("advanced");
- getById("screensharebutton").classList.add("advanced");
- getById("queuebutton").classList.add("advanced");
- } else {
- getById("controlButtons").style.display = "none";
- }
-
- if (session.chatbutton === true) {
- getById("chatbutton").classList.remove("advanced");
- getById("controlButtons").style.display = "inherit";
- } else if (session.chatbutton === false) {
- getById("chatbutton").classList.add("advanced");
- }
-
- if (urlParams.has('permaid')) {
- updateURL("permaid=" + session.streamID);
- } else {
- updateURL("push=" + session.streamID);
- }
-
- session.publishStream(ele, title);
-
-}
-
-
-session.publishIFrame = function(iframeURL){
-
- if (session.transcript){
- setTimeout(function(){setupClosedCaptions();},0);
- }
-
- if (iframeURL==""){
- iframeURL="./";
- }
- if (iframeURL === session.iframeSrc){return;}
-
-
- if (iframeURL.startsWith("https://") || iframeURL.startsWith("http://")){
- var domain = (new URL(iframeURL));
- domain = domain.hostname;
- log(domain);
- if ((domain=="www.youtube.com") || (domain=="youtube.com")){
- var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
- var match = iframeURL.match(regExp);
- var vidid = (match&&match[7].length==11)? match[7] : false;
-
- if(vidid){
- iframeURL = "https://www.youtube.com/embed/"+vidid+"?autoplay=1&modestbranding=1";
- log(iframeURL);
- }
- } else if (domain=="www.twitch.tv"){
- var vidid = iframeURL.split('/').pop().split('#')[0].split('?')[0];
- if (vidid){
- iframeURL = "https://player.twitch.tv/?channel="+vidid+"&parent="+location.hostname;
- log(iframeURL);
- }
- } else if (domain=="twitch.tv"){
- var vidid = iframeURL.split('/').pop().split('#')[0].split('?')[0];
- if (vidid){
- iframeURL = "https://player.twitch.tv/?channel="+vidid+"&parent="+location.hostname;
- log(iframeURL);
- }
- }
-
- }
-
-
- // https://player.twitch.tv/?channel=twitchpresents&parent=obs.ninja
-
- session.iframeSrc = iframeURL;
-
- var container = document.createElement("div");
- container.id = "container";
-
- var iframe = document.createElement("iframe");
- iframe.allow="autoplay;camera;microphone";
- iframe.allowtransparency="true";
- iframe.allowfullscreen ="true";
- iframe.src = session.iframeSrc;
- iframe.id = "iframe_source"
- session.iframeEle = iframe;
-
-
- if (session.roomid!==false){
-
- window.addEventListener("resize", updateMixer);
-
- if ((session.roomid==="") && ((!(session.view)) || (session.view===""))){
-
- } else {
- log("ROOMID EANBLED");
- getById("head3").className = 'advanced';
-
- joinRoom(session.roomid);
- }
-
- } else {
- getById("head3").className = '';
- getById("logoname").style.display = 'none';
- }
- getById("head1").className = 'advanced';
-
- if (urlParams.has('permaid')){
- updateURL("permaid="+session.streamID);
- } else {
- updateURL("push="+session.streamID);
- }
-
- getById("head1").className = 'advanced';
- getById("head2").className = 'advanced';
-
- if (!(session.cleanOutput)){
- getById("chatbutton").className="float";
- getById("hangupbutton").className="float";
- getById("controlButtons").style.display="flex";
- getById("helpbutton").style.display = "inherit";
- getById("reportbutton").style.display = "";
- } else {
- getById("controlButtons").style.display="none";
- }
-
-
-
- if (session.director){
- } else if (session.scene!==false){
- updateMixer();
- } else if (session.roomid!==false){
- if (session.roomid===""){
- if (!(session.view) || (session.view==="")){
+ console.log(WebMidi.inputs);
- getById("mutespeakerbutton").classList.add("advanced");
-
- container.style.width="100%";
- container.style.height="100%";
- container.style.alignItems = "center";
- container.style.maxWidth= "1280px";
- container.style.maxHeight= "720px";
- container.style.verticalAlign= "middle";
- container.style.margin= "auto";
- container.style.backgroundColor = "#666";
- container.style.border = "2px solid";
-
- } else {
- session.windowed = false;
- updateMixer();
- }
- } else {
-
- session.windowed = false;
- updateMixer();
- }
- } else {
-
- container.style.maxHeight= "1280px";
- container.style.maxWidth= "720px";
- container.style.verticalAlign= "middle";
- container.style.height="100%";
- container.style.width= "100%";
- container.style.margin= "auto";
- container.style.alignItems = "center";
- container.style.backgroundColor = "#666";
- }
-
- getById("mainmenu").parentElement.removeChild(getById("mainmenu"));
-
- getById("gridlayout").innerHTML = "";
- container.appendChild(iframe);
- getById("gridlayout").appendChild(container);
-
-
- session.seeding=true;
-
- getById("reshare").href = "https://"+location.host+location.pathname+"?view="+session.streamID;
- getById("reshare").text = "https://"+location.host+location.pathname+"?view="+session.streamID;
- getById("reshare").style.width = ((getById("reshare").text.length + 1)*1.15 * 8) + 'px';
- pokeIframeAPI('started-iframe-share');
-
- session.seedStream();
-}
-
-function outboundAudioPipeline(stream) {
- if (session.disableWebAudio) {
- return stream;
- }
-
- //if ((iOS) || (iPad)){
- // return stream
- //} else {
- try {
- log("Web Audio");
- var tracks = stream.getAudioTracks();
- if (tracks.length) {
- for (var waid in session.webAudios) { // TODO: EXCLUDE CURRENT TRACK IF ALREADY EXISTS ... if (track.id === wa.id){..
- session.webAudios[waid].stop();
- delete session.webAudios[waid];
- }
-
-
- var webAudio = {};
- webAudio.micDelay = false;
- webAudio.compressor = false;
- webAudio.analyser = false;
- webAudio.gainNode = false;
-
- webAudio.lowEQ = false;
- webAudio.midEQ = false;
- webAudio.highEQ = false;
-
- webAudio.id = tracks[0].id; // first track is used.
-
- if (session.audioLatency !== false) { // session.audioLatency could be useful for fixing clicking issues?
- var audioContext = new AudioContext({
- latencyHint: session.audioLatency / 1000.0 //, // needs to be in seconds, but OBSN user input is via milliseconds
- // sampleRate: 48000 // not sure this is a great idea, but might as well add this here, versus later on since it is needed anyways.
- });
- } else {
- var audioContext = new AudioContext();
- }
-
- webAudio.audioContext = audioContext;
- webAudio.mediaStreamSource = audioContext.createMediaStreamSource(stream); // clone to fix iOS issue
- webAudio.destination = audioContext.createMediaStreamDestination();
- webAudio.gainNode = audioGainNode(webAudio.mediaStreamSource, audioContext);
-
- var anonNode = webAudio.gainNode;
-
- if (session.micDelay) {
- webAudio.micDelay = micDelayNode(anonNode, audioContext);
- anonNode = webAudio.micDelay;
- }
-
- if (session.audioInputChannels == 1) {
- webAudio.splitter = audioContext.createChannelSplitter(6);
- anonNode.connect(webAudio.splitter);
-
- webAudio.merger = audioContext.createChannelMerger(6);
- webAudio.splitter.connect(webAudio.merger, 0, 0);
- webAudio.splitter.connect(webAudio.merger, 0, 1);
- webAudio.splitter.connect(webAudio.merger, 0, 2);
- webAudio.splitter.connect(webAudio.merger, 0, 3);
- webAudio.splitter.connect(webAudio.merger, 0, 4);
- webAudio.splitter.connect(webAudio.merger, 0, 5);
- anonNode = webAudio.merger;
- }
-
-
- if (session.lowcut) { // https://webaudioapi.com/samples/frequency-response/ for a tool to help set values
- webAudio.lowcut1 = audioContext.createBiquadFilter();
- webAudio.lowcut1.type = "highpass";
- webAudio.lowcut1.frequency.value = session.lowcut;
-
- webAudio.lowcut2 = audioContext.createBiquadFilter();
- webAudio.lowcut2.type = "highpass";
- webAudio.lowcut2.frequency.value = session.lowcut;
-
- webAudio.lowcut3 = audioContext.createBiquadFilter();
- webAudio.lowcut3.type = "highpass";
- webAudio.lowcut3.frequency.value = session.lowcut;
-
- anonNode.connect(webAudio.lowcut1);
- webAudio.lowcut1.connect(webAudio.lowcut2);
- webAudio.lowcut2.connect(webAudio.lowcut3);
- anonNode = webAudio.lowcut3;
- }
-
-
- if (session.equalizer) { // https://webaudioapi.com/samples/frequency-response/ for a tool to help set values
- webAudio.lowEQ = audioContext.createBiquadFilter();
- webAudio.lowEQ.type = "lowshelf";
- webAudio.lowEQ.frequency.value = 100;
- webAudio.lowEQ.gain.value = 0;
-
- webAudio.midEQ = audioContext.createBiquadFilter();
- webAudio.midEQ.type = "peaking";
- webAudio.midEQ.frequency.value = 1000;
- webAudio.midEQ.Q.value = 0.5;
- webAudio.midEQ.gain.value = 0;
-
- webAudio.highEQ = audioContext.createBiquadFilter();
- webAudio.highEQ.type = "highshelf";
- webAudio.highEQ.frequency.value = 10000;
- webAudio.highEQ.gain.value = 0;
-
- anonNode.connect(webAudio.lowEQ);
- webAudio.lowEQ.connect(webAudio.midEQ);
- webAudio.midEQ.connect(webAudio.highEQ);
- anonNode = webAudio.highEQ;
- }
-
- if (session.compressor === 1) {
- webAudio.compressor = audioCompressor(anonNode, audioContext);
- anonNode = webAudio.compressor;
- } else if (session.compressor === 2) {
- webAudio.compressor = audioLimiter(anonNode, audioContext);
- anonNode = webAudio.compressor;
- }
-
- webAudio.analyser = audioMeter(anonNode, audioContext);
- webAudio.analyser.connect(webAudio.destination);
-
- webAudio.stop = function() {
- try {
- webAudio.destination.disconnect();
- } catch (e) {}
- try {
- clearInterval(webAudio.analyser.interval);
- } catch (e) {}
- try {
- webAudio.analyser.disconnect();
- } catch (e) {}
- try {
- webAudio.splitter.disconnect();
- } catch (e) {}
- try {
- webAudio.merger.disconnect();
- } catch (e) {}
- try {
- webAudio.lowcut1.disconnect();
- webAudio.lowcut2.disconnect();
- webAudio.lowcut3.disconnect();
- } catch (e) {}
- try {
- webAudio.lowEQ.disconnect();
- } catch (e) {}
- try {
- webAudio.midEQ.disconnect();
- } catch (e) {}
- try {
- webAudio.highEQ.disconnect();
- } catch (e) {}
- try {
- webAudio.gainNode.disconnect();
- } catch (e) {}
- try {
- webAudio.micDelay.disconnect();
- } catch (e) {}
- try {
- webAudio.compressor.disconnect();
- } catch (e) {}
- try {
- webAudio.mediaStreamSource.context.close();
- } catch (e) {}
- }
-
- webAudio.mediaStreamSource.onended = function() {
- webAudio.stop();
- };
-
- session.webAudios[webAudio.id] = webAudio;
-
- stream.getTracks().forEach(function(track) {
- if (webAudio.id != track.id) {
- webAudio.destination.stream.addTrack(track, stream);
- }
- });
-
- return webAudio.destination.stream;
- } else {
- return stream; // no audio track
- }
- } catch (e) {
- errorlog(e);
- return stream;
- }
-}
-
-function changeLowCut(freq, trackid = 0) {
- if (trackid != 0) {
- errorlog("EQ Doesn't work for anything but track 0. yet");
- }
- log("LOW EQ");
-
- for (var webAudio in session.webAudios) {
- if (!session.webAudios[webAudio].lowcut1) {
- errorlog("EQ not setup");
- return;
- }
- if (!session.webAudios[webAudio].lowcut2) {
- errorlog("EQ not setup");
- return;
- }
- if (!session.webAudios[webAudio].lowcut3) {
- errorlog("EQ not setup");
- return;
- }
- session.webAudios[webAudio].lowcut1.frequency.setValueAtTime(freq, session.webAudios[webAudio].audioContext.currentTime);
- session.webAudios[webAudio].lowcut2.frequency.setValueAtTime(freq, session.webAudios[webAudio].audioContext.currentTime);
- session.webAudios[webAudio].lowcut3.frequency.setValueAtTime(freq, session.webAudios[webAudio].audioContext.currentTime);
- }
-
-}
-
-function changeLowEQ(lowEQ, trackid = 0) {
- if (trackid != 0) {
- errorlog("EQ Doesn't work for anything but track 0. yet");
- }
- log("LOW EQ");
-
- for (var webAudio in session.webAudios) {
- if (!session.webAudios[webAudio].lowEQ) {
- errorlog("EQ not setup");
- return;
- }
- session.webAudios[webAudio].lowEQ.gain.setValueAtTime(lowEQ, session.webAudios[webAudio].audioContext.currentTime);
- }
-
-}
-
-function changeMidEQ(midEQ, trackid = 0) {
- if (trackid != 0) {
- errorlog("EQ Doesn't work for anything but track 0. yet");
- }
-
- for (var webAudio in session.webAudios) {
- if (!session.webAudios[webAudio].midEQ) {
- errorlog("EQ not setup");
- return;
- }
- session.webAudios[webAudio].midEQ.gain.setValueAtTime(midEQ, session.webAudios[webAudio].audioContext.currentTime);
- }
-
-}
-
-function changeHighEQ(highEQ, trackid = 0) {
- if (trackid != 0) {
- errorlog("EQ Doesn't work for anything but track 0. yet");
- }
-
- for (var webAudio in session.webAudios) {
- if (!session.webAudios[webAudio].highEQ) {
- errorlog("EQ not setup");
- return;
- }
- session.webAudios[webAudio].highEQ.gain.setValueAtTime(highEQ, session.webAudios[webAudio].audioContext.currentTime);
- }
-
-}
-
-
-function micDelayNode(mediaStreamSource, audioContext) {
- var delayNode = audioContext.createDelay();
- if (session.micDelay !== false) {
- var delay = parseFloat(session.micDelay/1000) || 0;
- } else {
- var delay = 0;
- }
- delayNode.delayTime.value = delay;
- mediaStreamSource.connect(delayNode);
- return delayNode;
-}
-
-function audioGainNode(mediaStreamSource, audioContext) {
- var gainNode = audioContext.createGain();
- if (session.audioGain !== false) {
- var gain = parseFloat(session.audioGain / 100.0) || 0;
- } else {
- var gain = 1.0;
- }
- gainNode.gain.value = gain;
- mediaStreamSource.connect(gainNode);
- return gainNode;
-}
-
-function audioMeter(mediaStreamSource, audioContext) {
- var analyser = audioContext.createAnalyser();
- mediaStreamSource.connect(analyser);
- analyser.fftSize = 256;
- analyser.smoothingTimeConstant = 0.05;
-
- var bufferLength = analyser.frequencyBinCount;
- var dataArray = new Uint8Array(bufferLength);
-
-
- function draw() {
- analyser.getByteFrequencyData(dataArray);
- var total = 0;
- for (var i = 0; i < dataArray.length; i++) {
- total += dataArray[i];
- }
- total = total / 100;
-
- if (session.cleanOutput){
- return;
- }
-
- if (document.getElementById("meter1")) {
- if (total == 0) {
- getById("meter1").style.width = "1px";
- getById("meter2").style.width = "0px";
- } else if (total <= 1) {
- getById("meter1").style.width = "1px";
- getById("meter2").style.width = "0px";
- } else if (total <= 150) {
- getById("meter1").style.width = total + "px";
- getById("meter2").style.width = "0px";
- } else if (total > 150) {
- if (total > 200) {
- total = 200;
- }
- getById("meter1").style.width = "150px";
- getById("meter2").style.width = (total - 150) + "px";
- }
- } else if (document.getElementById("mutetoggle")) {
- if (total > 200) {
- total = 200;
- }
- total = parseInt(total);
- document.getElementById("mutetoggle").style.color = "rgb(" + (255 - total) + ",255," + (255 - total) + ")";
- } else {
- clearInterval(analyser.interval);
- warnlog("METERS NOT FOUND");
- return;
- }
- };
-
- analyser.interval = setInterval(function() {
- draw();
- }, 100);
- return analyser;
-}
-
-
-
-function audioCompressor(mediaStreamSource, audioContext) {
- var compressor = audioContext.createDynamicsCompressor();
- compressor.threshold.value = -50;
- compressor.knee.value = 40;
- compressor.ratio.value = 12;
- compressor.attack.value = 0;
- compressor.release.value = 0.25;
- mediaStreamSource.connect(compressor);
- return compressor;
-}
-
-function audioLimiter(mediaStreamSource, audioContext) {
- var compressor = audioContext.createDynamicsCompressor();
- compressor.threshold.value = -5;
- compressor.knee.value = 0;
- compressor.ratio.value = 20.0; // 1 to 20
- compressor.attack.value = 0.001;
- compressor.release.value = 0.1;
- mediaStreamSource.connect(compressor);
- return compressor;
-}
-
-
-function activeSpeaker(border=false) {
- var lastActiveSpeaker = null;
- var changed = false;
- for (var UUID in session.rpcs) {
- if (session.rpcs[UUID].stats._Audio_Loudness_average) {
- session.rpcs[UUID].stats._Audio_Loudness_average = parseFloat(session.rpcs[UUID].stats.Audio_Loudness*0.2 + session.rpcs[UUID].stats._Audio_Loudness_average*0.8);
- } else {
- session.rpcs[UUID].stats._Audio_Loudness_average = 1;
- }
- //log(session.rpcs[UUID].stats._Audio_Loudness_average);
- if (session.rpcs[UUID].stats._Audio_Loudness_average > 13) {
-
- if (border) {
- if (session.rpcs[UUID].videoElement) {
- session.rpcs[UUID].videoElement.style.border = "green solid 1px";
- session.rpcs[UUID].videoElement.style.padding = "0";
- }
- } else if (!session.rpcs[UUID].activelySpeaking){
- session.rpcs[UUID].activelySpeaking = true;
- changed = true;
- lastActiveSpeaker = UUID;
- session.rpcs[UUID].stats._Audio_Loudness_average+=2000000;
- }
-
- } else if (session.rpcs[UUID].stats._Audio_Loudness_average > 6) {
-
- } else {
- if (border){
- if (session.rpcs[UUID].videoElement) {
- session.rpcs[UUID].videoElement.style.border = "";
- session.rpcs[UUID].videoElement.style.padding = "1px";
- }
- } else if (session.rpcs[UUID].activelySpeaking) {
- changed = true;
- session.rpcs[UUID].activelySpeaking=false;
- lastActiveSpeaker = UUID;
- }
- }
- }
-
- var speaker = false;
- for (var UUID in session.rpcs) {
- if (session.rpcs[UUID].activelySpeaking){speaker=true;}
- }
-
- if (!speaker && lastActiveSpeaker && (session.nopreview || session.minipreview || (session.scene!==false) || (session.permaid === false))){
- session.rpcs[lastActiveSpeaker].activelySpeaking=true;
- } else if (changed) {
- setTimeout(function(){updateMixer();},0);
- }
-}
-
-
-
-function randomizeArray(unshuffled) {
-
- var arr = unshuffled.map((a) => ({
- sort: Math.random(), value: a
- })).sort((a, b) => a.sort - b.sort).map((a) => a.value); // shuffle once
-
- for (var i = arr.length - 1; i > 0; i--) { // shuffle twice
- var j = Math.floor(Math.random() * (i + 1));
- var tmp = arr[i];
- arr[i] = arr[j];
- arr[j] = tmp;
- }
- return arr
-}
-
-function joinRoom(roomname) {
- if (roomname.length) {
- roomname = sanitizeRoomName(roomname);
- log("Join room");
- log(roomname);
- session.joinRoom(roomname).then(function(response) { // callback from server; we've joined the room. Just the listing is returned
-
- if (session.joiningRoom === "seedPlz") { // allow us to seed, now that we have joined the room.
- session.joiningRoom = false; // joined
- session.seedStream();
- } else {
- session.joiningRoom = false; // no seeding callback
- }
-
- log("Members in Room");
- log(response);
-
- if (session.randomize === true) {
- response = randomizeArray(response);
- log("Randomized List of Viewers");
- log(response);
- for (var i in response) {
- if ("UUID" in response[i]) {
- if ("streamID" in response[i]) {
- if (response[i].UUID in session.rpcs) {
- log("RTC already connected"); /// lets just say instead of Stream, we have
- } else {
- log(response[i].streamID);
- var streamID = session.desaltStreamID(response[i].streamID);
- if (session.queue){
- if (session.directorUUID === response[i].UUID){
- play(streamID);
- } else if (session.queueList.length<5000){
- if (!session.queueList.includes(streamID)){
- session.queueList.push(streamID);
- }
- }
- } else {
- log("STREAM ID DESALTED 3: " + streamID);
- setTimeout(function(sid) {
- play(sid);
- }, (Math.floor(Math.random() * 100)), streamID); // add some furtherchance with up to 100ms added latency
- }
- }
- }
- }
- }
- } else {
- for (var i in response) {
- if ("UUID" in response[i]) {
- if ("streamID" in response[i]) {
- if (response[i].UUID in session.rpcs) {
- log("RTC already connected"); /// lets just say instead of Stream, we have
- } else {
- log(response[i].streamID);
- var streamID = session.desaltStreamID(response[i].streamID);
- if (session.queue){
- if (session.directorUUID === response[i].UUID){
- play(streamID);
- } else if (session.queueList.length<5000){
- if (!session.queueList.includes(streamID)){
- session.queueList.push(streamID);
- }
- }
- } else {
- log("STREAM ID DESALTED 3: " + streamID);
- play(streamID); // play handles the group room mechanics here
- }
- }
- }
- }
- }
- }
- session.updateQueue();
- }, function(error) {
- return {};
- });
- } else {
- log("Room name not long enough or contained all bad characaters");
- }
-}
-
-function createRoom(roomname = false) {
-
- if (roomname == false) {
- roomname = getById("videoname1").value;
- roomname = sanitizeRoomName(roomname);
-
- if (roomname.length != 0) {
- if (urlParams.has('dir')){
- updateURL("dir=" + roomname, true, false); // make the link reloadable.
- } else {
- updateURL("director=" + roomname, true, false); // make the link reloadable.
- }
- }
- }
- if (roomname.length == 0) {
- if (!(session.cleanOutput)) {
- warnUser("Please enter a room name before continuing");
- }
- return;
- }
- log(roomname);
- session.roomid = roomname;
-
- getById("dirroomid").innerHTML = decodeURIComponent(session.roomid);
- getById("roomid").innerHTML = session.roomid;
-
- var passwordRoom = getById("passwordRoom").value;
- passwordRoom = sanitizePassword(passwordRoom);
- if (passwordRoom.length) {
- session.password = passwordRoom;
- session.defaultPassword = false;
-
- if (urlParams.has('pass')) {
- updateURL("pass=" + session.password);
- } else if (urlParams.has('pw')) {
- updateURL("pw=" + session.password);
- } else if (urlParams.has('p')) {
- updateURL("p=" + session.password);
- } else {
- updateURL("password=" + session.password);
- }
- }
-
- var passAdd = "";
- var passAdd2 = "";
-
- if ((session.defaultPassword === false) && (session.password)) {
- passAdd2 = "&password=" + session.password;
- return session.generateHash(session.password + session.salt, 4).then(function(hash) {
- passAdd = "&hash=" + hash;
- createRoomCallback(passAdd, passAdd2);
- });
- } else {
- createRoomCallback(passAdd, passAdd2);
- }
-}
-
-function hideDirectorinvites(ele) {
-
- if (getById("directorLinks2").style.display == "none") {
- ele.innerHTML = ' LINKS (GUEST INVITES & SCENES)';
- getById("directorLinks2").style.display = "inline-block";
- getById("customizeLinks").classList.remove("advanced");
- } else {
- ele.innerHTML = ' LINKS (GUEST INVITES & SCENES)'
- getById("directorLinks2").style.display = "none";
- getById("help_directors_room").style.display = "none";
- getById("roomnotes2").style.display = "none";
- getById("customizeLinks").classList.add("advanced");
- }
- if (getById("directorLinks1").style.display == "none") {
- getById("directorLinks1").style.display = "inline-block";
- getById("customizeLinks").classList.remove("advanced");
- } else {
- getById("directorLinks1").style.display = "none";
- getById("help_directors_room").style.display = "none";
- getById("roomnotes2").style.display = "none";
- getById("customizeLinks").classList.add("advanced");
-
- }
- //document.querySelector(".directorContainer.half").style.display="none";
- //document.querySelector(".directorContainer").style.display="none";
-}
-
-function createRoomCallback(passAdd, passAdd2) {
-
- var gridlayout = getById("gridlayout");
- gridlayout.classList.add("directorsgrid");
-
- var broadcastFlag = getById("broadcastFlag");
- try {
- if (broadcastFlag.checked) {
- broadcastFlag = true;
- } else {
- broadcastFlag = false;
- }
- } catch (e) {
- broadcastFlag = false;
- }
-
- var broadcastString = "";
- if (broadcastFlag) {
- broadcastString = "&broadcast";
- getById("broadcastSlider").checked = true;
- }
-
- var showdirectorFlag = getById("showdirectorFlag");
- try {
- if (showdirectorFlag.checked) {
- showdirectorFlag = true;
- } else {
- showdirectorFlag = false;
- }
- } catch (e) {
- showdirectorFlag = false;
- }
-
- if (showdirectorFlag) {
- updateURL("showdirector", true, false);
- session.showDirector = true;
- //getById("broadcastSlider").checked=true;
- }
-
-
- var codecGroupFlag = getById("codecGroupFlag");
-
- if (codecGroupFlag.value) {
- if (codecGroupFlag.value === "vp9") {
- codecGroupFlag = "&codec=vp9";
- getById("codech264toggle").disabled=true;
- } else if (codecGroupFlag.value === "h264") {
- codecGroupFlag = "&codec=h264";
- getById("codech264toggle").checked=true;
- } else if (codecGroupFlag.value === "vp8") {
- codecGroupFlag = "&codec=vp8";
- getById("codech264toggle").disabled=true;
- } else if (codecGroupFlag.value === "av1") {
- codecGroupFlag = "&codec=av1";
- getById("codech264toggle").disabled=true;
- } else {
- codecGroupFlag = "";
- }
- } else {
- codecGroupFlag = "";
- }
- if (codecGroupFlag) {
- session.codecGroupFlag = codecGroupFlag;
- }
-
- formSubmitting = false;
-
-
- var m = getById("mainmenu");
- m.remove();
-
- getById("head1").className = 'advanced';
- getById("head2").className = 'advanced';
- //getById("head3").className = 'advanced';
- getById("head4").className = '';
-
- try {
- if (session.label === false) {
- document.title = "Control Room";
- }
- } catch (e) {
- errorlog(e);
- };
-
-
- session.director = true;
- screensharesupport = false;
-
- window.addEventListener("resize", updateMixer);
- window.addEventListener("orientationchange", updateMixer);
- getById("reshare").parentNode.removeChild(getById("reshare"));
-
-
- //getById("mutespeakerbutton").style.display = null;
- session.speakerMuted = true; // the director will start with audio playback muted.
- toggleSpeakerMute(true);
-
-
- if (session.cleanDirector == false) {
-
- getById("roomHeader").style.display = "";
- //getById("directorLinks").style.display = "";
- getById("directorLinks1").style.display = "inline-block";
- getById("directorLinks2").style.display = "inline-block";
-
- getById("director_block_1").dataset.raw = "https://" + location.host + location.pathname + "?room=" + session.roomid + broadcastString + passAdd;
- getById("director_block_1").href = "https://" + location.host + location.pathname + "?room=" + session.roomid + broadcastString + passAdd;
- getById("director_block_1").innerText = "https://" + location.host + location.pathname + "?room=" + session.roomid + broadcastString + passAdd;
-
-
- getById("director_block_3").dataset.raw = "https://" + location.host + location.pathname + "?scene&room=" + session.roomid + codecGroupFlag + passAdd2;
- getById("director_block_3").href = "https://" + location.host + location.pathname + "?scene&room=" + session.roomid + codecGroupFlag + passAdd2;
- getById("director_block_3").innerText = "https://" + location.host + location.pathname + "?scene&room=" + session.roomid + codecGroupFlag + passAdd2;
-
- getById("calendarButton").style.display = "inline-block";
-
-
- } else {
- getById("guestFeeds").innerHTML = '';
- }
- getById("guestFeeds").style.display = "";
-
- if (!(session.cleanOutput)) {
- if (session.queue){
- getById("queuebutton").classList.remove("advanced");
- }
- getById("chatbutton").classList.remove("advanced");
- getById("controlButtons").style.display = "inherit";
- getById("mutespeakerbutton").classList.remove("advanced");
- if (session.showDirector == false) {
- getById("miniPerformer").innerHTML = '';
- } else {
- getById("miniPerformer").innerHTML = '';
- }
- getById("miniPerformer").className = "";
-
- var tabindex = 26;
- if (session.rooms && session.rooms.length > 0){
- var container = getById("rooms");
- container.innerHTML += 'Arm Transfer: ';
- session.rooms.forEach(function (r) {
- if(session.roomid == r) return; //don't include self
- container.innerHTML += '';
- tabindex++;
- });
- }
-
- } else {
- getById("miniPerformer").style.display = "none";
- getById("controlButtons").style.display = "none";
- }
-
- if (session.chatbutton === true) {
- getById("chatbutton").classList.remove("advanced");
- getById("controlButtons").style.display = "inherit";
- } else if (session.chatbutton === false) {
- getById("chatbutton").classList.add("advanced");
- }
-
- clearInterval(session.updateLocalStatsInterval);
- session.updateLocalStatsInterval = setInterval(function(){updateLocalStats();},3000);
-
- if (session.autostart){
- setTimeout(function(){press2talk(true);},400);
- } else {
- session.seeding=true;
- session.seedStream();
- }
-
- joinRoom(session.roomid);
-
-}
-/**
- * Handles click actions on the room selection buttons in #controlButtons
- * @param {string} room - Room name to select/deselect for the next transfer call
- */
-function handleRoomSelect(room) {
- var elems = document.querySelectorAll(".btnArmTransferRoom");
- [].forEach.call(elems, function(el) {
- el.classList.remove("selected");
- });
- if (previousRoom == room) {
- previousRoom = "";
- armedTransfer = false;
- stillNeedRoom = true;
- } else {
- previousRoom = room;
- stillNeedRoom = false;
- armedTransfer = true;
- getById("roomselect_" + room).classList.add('selected');
- }
-}
-
-function getDirectorSettings(scene){
- var settings = {};
- var eles = document.querySelectorAll('[data-action-type="solo-video"]');
- settings.soloVideo = false;
- for (var i=0;i\
- \
- Add a label\
-
";
-
- controls.innerHTML += "
\
-
\
- " + soloLink + "\
- \
-
This is you, the director. You are also a performer.
";
-
-
- controls.querySelectorAll('[data-action-type]').forEach((ele) => { // give action buttons some self-reference
- ele.dataset.sid = session.streamID;
- });
-
- container.innerHTML = buttons;
- container.appendChild(controls);
- var labelID = document.getElementById("label_director");
-
- labelID.onclick = function(ee){
- var oldlabel = ee.target.innerText;
- if (session.label===false){
- oldlabel = "";
- }
- var newlabel = prompt("Enter a new Display Name for this stream", oldlabel);
- if (newlabel!==null){
- if (newlabel == ""){
- newlabel = false;
- ee.target.innerText = "Add a label";
- } else {
- ee.target.innerText = newlabel;
- }
- session.label = newlabel;
- var data = {};
- data.changeLabel = true;
- data.value = session.label;
- session.sendMessage(data);
- }
- }
- labelID.style.float = "left";
- labelID.style.top = "2px";
- labelID.style.marginLeft = "5px";
- labelID.style.position = "relative";
- labelID.style.cursor="pointer";
- if (session.label){
- labelID.innerText = session.label;
- }
-}
-
-function createControlBox(UUID, soloLink, streamID) {
- if (document.getElementById("deleteme")) {
- getById("deleteme").parentNode.removeChild(getById("deleteme"));
- }
- var controls = getById("controls_blank").cloneNode(true);
-
- var container = document.createElement("div");
- container.id = "container_" + UUID; // needed to delete on user disconnect
- container.className = "vidcon directorMargins";
- controls.style.display = "block";
- controls.id = "controls_" + UUID;
- getById("guestFeeds").appendChild(container);
-
- var buttons = "
";
-
- controls.querySelectorAll('[data-action-type]').forEach((ele) => { // give action buttons some self-reference
- ele.dataset.UUID = UUID;
- ele.dataset.sid = streamID;
- });
-
- container.innerHTML = buttons;
- container.appendChild(videoContainer);
- videoContainer.appendChild(session.rpcs[UUID].voiceMeter);
- videoContainer.appendChild(session.rpcs[UUID].remoteMuteElement);
- container.appendChild(controls);
-}
-
-function createDirectorCam(vid) {
-
- getById("press2talk").innerHTML = "";
- getById("press2talk").outerHTML = "";
- if (document.getElementById("videoContainer_director")){
- getById("videoContainer_director").appendChild(vid);
- } else {
- getById("miniPerformer").appendChild(vid);
- }
- vid.title = "This is the preview of the Director's audio and video output.";
- getById("press2talk").dataset.value = 1;
- session.muted = false;
- toggleMute(true);
- getById("screensharebutton").classList.remove("advanced");
- getById("hangupbutton2").classList.remove("advanced");
- setTimeout(function() {
- toggleSettings();
- }, 200);
-
- if (urlParams.has('permaid')) {
- updateURL("permaid=" + session.streamID);
- } else {
- updateURL("push=" + session.streamID);
- }
-}
-
-function press2talk(clean = false) {
- var ele = getById("press2talk");
- ele.style.minWidth = "127px";
- ele.style.padding = "7px";
- getById("settingsbutton").classList.remove("advanced");
- if (!document.getElementById("controls_director") && session.showDirector){createDirectorOnlyBox();}
-
-
- if (session.videoDevice || (session.audioDevice && session.audioDevice!==1)){
- if ((session.videoDevice === 1) && (session.audioDevice===false || session.audioDevice==1)){
- session.publishDirector(clean, true);
- session.muted = false;
- toggleMute(true);
- return;
- } else {
- enumerateDevices().then(function(deviceInfos) {
- var vdevice = false;
- var adevice = true;
- if (session.audioDevice==0){
- adevice=false;
- }
- if (session.videoDevice && (session.videoDevice!=1)){
- for (let i = 0; i !== deviceInfos.length; ++i) {
- var deviceInfo = deviceInfos[i];
- if ((deviceInfo.kind === 'videoinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes(session.videoDevice))) {
- vdevice = {deviceId: {exact: deviceInfo.deviceId}};
- break;
- } else if (deviceInfo.deviceId === session.videoDevice){
- vdevice = {deviceId: {exact: deviceInfo.deviceId}};
- break;
- }
- }
- }
- if (session.audioDevice && (session.audioDevice!=1)){
- for (let i = 0; i !== deviceInfos.length; ++i) {
- var deviceInfo = deviceInfos[i];
- if ((deviceInfo.kind === 'audioinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes(session.audioDevice))) {
- adevice = {deviceId: {exact: deviceInfo.deviceId}};
- break;
- } else if (deviceInfo.deviceId === session.audioDevice){
- adevice = {deviceId: {exact: deviceInfo.deviceId}};
- break;
- }
- }
- }
- session.publishDirector(clean, vdevice, adevice);
- session.muted = false;
- toggleMute(true);
- });
- return;
- }
- }
-
- session.publishDirector(clean);
- session.muted = false;
- toggleMute(true);
-
-}
-
-function addToGoogleCalendar(){
- var title = "Live Stream";
- //var dates = "20180512T230000Z/20180513T030000Z";
- var linkout = getById("director_block_1").innerText;
- var details = "Join the live stream as a performer at the following link:
===> "+linkout+"
To test your connection and camera ahead of time, please visit https://obs.ninja/speedtest
Do not share the details of this invite with others, unless explicitly told to.";
- details = details.split(' ').join('+');
- details = details.split('&').join('%26');
- var linkToOpen = "https://calendar.google.com/calendar/r/eventedit?text="+title+"&details="+details;
- //https://calendar.google.com/calendar/r/eventedit?text=My+Custom+Event&dates=20180512T230000Z/20180513T030000Z&details=For+details,+link+here:+https://example.com/tickets-43251101208&location=Garage+Boston+-+20+Linden+Street+-+Allston,+MA+02134
-
- window.open(linkToOpen);
-
-}
-
-function addToOutlookCalendar(){
- var title = "Live Stream";
- var linkout = getById("director_block_1").innerText;
- var details = "Join the live stream as a performer at the following link:
===> "+linkout+"
To test your connection and camera ahead of time, please visit https://obs.ninja/speedtest
Do not share the details of this invite with others, unless explicitly told to.";
- details = details.split(' ').join('%20');
- details = details.split('&').join('%26');
-
-
- var linkToOpen = "https://outlook.live.com/owa/?path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&subject="+title+"&body="+details;
- //https://calendar.google.com/calendar/r/eventedit?text=My+Custom+Event&dates=20180512T230000Z/20180513T030000Z&details=For+details,+link+here:+https://example.com/tickets-43251101208&location=Garage+Boston+-+20+Linden+Street+-+Allston,+MA+02134
-
- window.open(linkToOpen);
-}
-
-function addToYahooCalendar(){
- var title = "Live Stream";
- var linkout = getById("director_block_1").innerText;
- var details = "Join the live stream as a performer at the following link:
===> "+linkout+"
To test your connection and camera ahead of time, please visit https://obs.ninja/speedtest
Do not share the details of this invite with others, unless explicitly told to.";
- details = details.split(' ').join('%20');
- details = details.split('&').join('%26');
- var linkToOpen = "https://calendar.yahoo.com?v60&title="+title+"&desc="+details;
- //https://calendar.google.com/calendar/r/eventedit?text=My+Custom+Event&dates=20180512T230000Z/20180513T030000Z&details=For+details,+link+here:+https://example.com/tickets-43251101208&location=Garage+Boston+-+20+Linden+Street+-+Allston,+MA+02134
-
- window.open(linkToOpen);
-}
-
-function toggle(ele, tog = false, inline = true) {
- var x = ele;
- if (x.style.display === "none") {
- if (inline) {
- x.style.display = "inline-block";
- } else {
- x.style.display = "block";
- }
- } else {
- x.style.display = "none";
- }
- if (tog) {
- if (tog.dataset.saved) {
- tog.innerHTML = tog.dataset.saved;
- delete(tog.dataset.saved);
- } else {
- tog.dataset.saved = tog.innerHTML;
- tog.innerHTML = "Hide This";
- }
- }
-}
-
-function toggleByDataset(filter) {
- var elements = document.querySelectorAll('[data-cluster="'+filter+'"]'); // ie: .cluster1
- for (var i = 0; i < elements.length; i++) {
- elements[i].classList.toggle('hidden');
- }
-}
-
-
-var SelectedAudioOutputDevices = []; // order matters.
-var SelectedAudioInputDevices = []; // ..
-var SelectedVideoInputDevices = []; // ..
-
-function enumerateDevices() {
-
- log("enumerated start");
-
- if (typeof navigator.enumerateDevices === "function") {
- log("enumerated failed 1");
- return navigator.enumerateDevices();
- } else if (typeof navigator.mediaDevices === "object" && typeof navigator.mediaDevices.enumerateDevices === "function") {
- return navigator.mediaDevices.enumerateDevices();
- } else {
- return new Promise((resolve, reject) => {
- try {
- if (window.MediaStreamTrack == null || window.MediaStreamTrack.getSources == null) {
- throw new Error();
- }
- window.MediaStreamTrack.getSources((devices) => {
- resolve(devices
- .filter(device => {
- return device.kind.toLowerCase() === "video" || device.kind.toLowerCase() === "videoinput";
- })
- .map(device => {
- return {
- deviceId: device.deviceId != null ? device.deviceId : ""
- , groupId: device.groupId
- , kind: "videoinput"
- , label: device.label
- , toJSON: /* istanbul ignore next */ function() {
- return this;
- }
- };
- }));
- });
- } catch (e) {
- errorlog(e);
- }
- });
- }
-}
-
-function requestOutputAudioStream() {
- try {
- //warnlog("GET USER MEDIA");
- return navigator.mediaDevices.getUserMedia({
- audio: true
- , video: false
- }).then(function(stream1) { // Apple needs thi to happen before I can access EnumerateDevices.
- log("get media sources; request audio stream");
- return enumerateDevices().then(function(deviceInfos) {
- stream1.getTracks().forEach(function(track) { // We don't want to keep it without audio; so we are going to try to add audio now.
- track.stop(); // I need to do this after the enumeration step, else it breaks firefox's labels
- });
- const audioOutputSelect = document.querySelector('#outputSourceScreenshare');
- audioOutputSelect.remove(0);
- audioOutputSelect.removeAttribute("onclick");
-
- for (let i = 0; i !== deviceInfos.length; ++i) {
- const deviceInfo = deviceInfos[i];
- if (deviceInfo == null) {
- continue;
- }
- const option = document.createElement('option');
- option.value = deviceInfo.deviceId;
- if (deviceInfo.kind === 'audiooutput') {
- const option = document.createElement('option');
- if (audioOutputSelect.length === 0) {
- option.dataset.default = true;
- } else {
- option.dataset.default = false;
- }
- option.value = deviceInfo.deviceId || "default";
- if (option.value == session.sink) {
- option.selected = true;
- }
- option.text = deviceInfo.label || `Speaker ${audioOutputSelect.length + 1}`;
- audioOutputSelect.appendChild(option);
- } else {
- log('Some other kind of source/device: ', deviceInfo);
- }
- }
- });
- });
- } catch (e) {
- if (!(session.cleanOutput)) {
- if (window.isSecureContext) {
- warnUser("An error has occured when trying to access the default audio device. The reason is not known.");
- } else if ((iOS) || (iPad)) {
- warnUser("iOS version 13.4 and up is generally recommended; older than iOS 11 is not supported.");
- } else {
- warnUser("Error acessing the default audio device.\n\nThe website may be loaded in an insecure context.\n\nPlease see: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia");
- }
- }
- }
-}
-
-
-function requestAudioStream() {
- try {
- //warnlog("GET USER MEDIA");
- return navigator.mediaDevices.getUserMedia({
- audio: true
- , video: false
- }).then(function(stream1) { // Apple needs thi to happen before I can access EnumerateDevices.
- log("get media sources; request audio stream");
- return enumerateDevices().then(function(deviceInfos) {
- stream1.getTracks().forEach(function(track) { // We don't want to keep it without audio; so we are going to try to add audio now.
- track.stop(); // I need to do this after the enumeration step, else it breaks firefox's labels
- });
- log("updating audio");
- const audioInputSelect = document.querySelector('select#audioSourceScreenshare');
- audioInputSelect.remove(1);
- audioInputSelect.removeAttribute("onchange");
-
-
- for (let i = 0; i !== deviceInfos.length; ++i) {
- const deviceInfo = deviceInfos[i];
- if (deviceInfo == null) {
- continue;
- }
- const option = document.createElement('option');
- option.value = deviceInfo.deviceId;
- if (deviceInfo.kind === 'audioinput') {
- option.text = deviceInfo.label || `Microphone ${audioInputSelect.length + 1}`;
- audioInputSelect.appendChild(option);
- } else {
- log('Some other kind of source/device: ', deviceInfo);
- }
- }
- audioInputSelect.style.minHeight = ((audioInputSelect.childElementCount + 1) * 1.15 * 16) + 'px';
- audioInputSelect.style.minWidth = "342px";
- });
- });
- } catch (e) {
- if (!(session.cleanOutput)) {
- if (window.isSecureContext) {
- warnUser("An error has occured when trying to access the default audio device. The reason is not known.");
- } else if ((iOS) || (iPad)) {
- warnUser("iOS version 13.4 and up is generally recommended; older than iOS 11 is not supported.");
- } else {
- warnUser("Error acessing the default audio device.\n\nThe website may be loaded in an insecure context.\n\nPlease see: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia");
- }
- }
- }
-}
-
-
-function gotDevices(deviceInfos) { // https://github.com/webrtc/samples/blob/gh-pages/src/content/devices/input-output/js/main.js#L19
-
- log("got devices!");
- log(deviceInfos);
- try {
- const audioInputSelect = document.querySelector('#audioSource');
-
- audioInputSelect.innerHTML = "";
-
- var option = document.createElement('input');
- option.type = "checkbox";
- option.value = "ZZZ";
- option.name = "multiselect1";
- option.id = "multiselect1";
- option.style.display = "none";
- option.checked = true;
-
-
- var label = document.createElement('label');
- label.for = option.name;
- label.innerHTML = 'No Audio';
-
- var listele = document.createElement('li');
- listele.appendChild(option);
- listele.appendChild(label);
- audioInputSelect.appendChild(listele);
-
-
- option.onchange = function(event) { // make sure to clear 'no audio option' if anything else is selected
- if (!(getById("multiselect1").checked)) {
- getById("multiselect1").checked = true;
-
- if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {} else {
- SelectedAudioInputDevices.push(event.currentTarget.value);
- }
-
- log("CHECKED 1");
- } else {
-
- var list = document.querySelectorAll("#audioSource>li>input");
- for (var i = 0; i < list.length; i++) {
- if (list[i].id !== "multiselect1") {
- list[i].checked = false;
- }
- }
-
- while (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {
- SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(event.currentTarget.value), 1);
- }
- }
- };
-
- getById('multiselect-trigger').dataset.state = '0';
- getById('multiselect-trigger').classList.add('closed');
- getById('multiselect-trigger').classList.remove('open');
- getById('chevarrow1').classList.add('bottom');
-
- const videoSelect = document.querySelector('select#videoSourceSelect');
- const audioOutputSelect = document.querySelector('#outputSource');
- const selectors = [videoSelect];
-
- const values = selectors.map(select => select.value);
- selectors.forEach(select => {
- while (select.firstChild) {
- select.removeChild(select.firstChild);
- }
- });
-
-
- function comp(a, b) {
- if (a.kind === 'audioinput') {
- return 0;
- } else if (a.kind === 'audiooutput') {
- return 0;
- }
- const labelA = a.label.toUpperCase();
- const labelB = b.label.toUpperCase();
- if (labelA > labelB) {
- return 1;
- } else if (labelA < labelB) {
- return -1;
- }
- return 0;
- }
- //deviceInfos.sort(comp); // I like this idea, but it messes with the defaults. I just don't know what it will do.
-
- // This is to hide NDI from default device. NDI Tools fucks up.
- var tmp = [];
- for (let i = 0; i !== deviceInfos.length; ++i) {
- deviceInfo = deviceInfos[i];
- if (!((deviceInfo.kind === 'videoinput') && (deviceInfo.label.toLowerCase().startsWith("ndi") || deviceInfo.label.toLowerCase().startsWith("newtek")))) {
- tmp.push(deviceInfo);
- }
- }
-
- for (let i = 0; i !== deviceInfos.length; ++i) {
- deviceInfo = deviceInfos[i];
- if ((deviceInfo.kind === 'videoinput') && (deviceInfo.label.toLowerCase().startsWith("ndi") || deviceInfo.label.toLowerCase().startsWith("newtek"))) {
- tmp.push(deviceInfo);
- log("V DEVICE FOUND = " + deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase());
- }
- }
- deviceInfos = tmp;
- log(deviceInfos);
-
- if ((session.audioDevice) && (session.audioDevice !== 1)) { // this sorts according to users's manual selection
- var tmp = [];
- for (let i = 0; i !== deviceInfos.length; ++i) {
- deviceInfo = deviceInfos[i];
- if ((deviceInfo.kind === 'audioinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes(session.audioDevice))) {
- tmp.push(deviceInfo);
- log("A DEVICE FOUND = " + deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase());
- } else if (deviceInfo.deviceId === session.audioDevice){
- tmp.push(deviceInfo);
- log("EXACT A DEVICE FOUND");
- }
- }
- for (let i = 0; i !== deviceInfos.length; ++i) {
- deviceInfo = deviceInfos[i];
- if (!((deviceInfo.kind === 'audioinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes(session.audioDevice)))) {
- if (deviceInfo.deviceId !== session.audioDevice){
- tmp.push(deviceInfo);
- }
- }
- }
-
- deviceInfos = tmp;
- log(session.audioDevice);
- log(deviceInfos);
- }
-
-
- if ((session.videoDevice) && (session.videoDevice !== 1)) { // this sorts according to users's manual selection
- var tmp = [];
- for (let i = 0; i !== deviceInfos.length; ++i) {
- deviceInfo = deviceInfos[i];
- if ((deviceInfo.kind === 'videoinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes(session.videoDevice))) {
- tmp.push(deviceInfo);
- log("V DEVICE FOUND = " + deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase());
- } else if (deviceInfo.deviceId === session.videoDevice){
- tmp.push(deviceInfo);
- log("EXACT V DEVICE FOUND");
- }
- }
- for (let i = 0; i !== deviceInfos.length; ++i) {
- deviceInfo = deviceInfos[i];
- if (!((deviceInfo.kind === 'videoinput') && (deviceInfo.label.replace(/[\W]+/g, "_").toLowerCase().includes(session.videoDevice)))) {
- if (deviceInfo.deviceId !== session.videoDevice){
- tmp.push(deviceInfo);
- }
- }
- }
- deviceInfos = tmp;
- log("VDECICE:" + session.videoDevice);
- log(deviceInfos);
- }
-
-
- var counter = 1;
- for (let i = 0; i !== deviceInfos.length; ++i) {
- const deviceInfo = deviceInfos[i];
- if (deviceInfo == null) {
- continue;
- }
-
- if (deviceInfo.kind === 'audioinput') {
- option = document.createElement('input');
- option.type = "checkbox";
- counter++;
- listele = document.createElement('li');
- if (counter == 2) {
- option.checked = true;
- listele.style.display = "block";
- option.style.display = "none";
- getById("multiselect1").checked = false;
- getById("multiselect1").parentNode.style.display = "none";
- } else {
- listele.style.display = "none";
- }
-
-
- option.value = deviceInfo.deviceId || "default";
- option.name = "multiselect" + counter;
- option.id = "multiselect" + counter;
- label = document.createElement('label');
- label.for = option.name;
-
- label.innerHTML = " " + (deviceInfo.label || ("microphone " + ((audioInputSelect.length || 0) + 1)));
-
- listele.appendChild(option);
- listele.appendChild(label);
- audioInputSelect.appendChild(listele);
-
- option.onchange = function(event) { // make sure to clear 'no audio option' if anything else is selected
- getById("multiselect1").checked = false;
- log("UNCHECKED");
- if (!(CtrlPressed)) {
- document.querySelectorAll("#audioSource input[type='checkbox']").forEach(function(item) {
- if (event.currentTarget.id !== item.id) {
- item.checked = false;
-
- while (SelectedAudioInputDevices.indexOf(item.value) > -1) {
- SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(item.value), 1);
- }
-
- } else {
- item.checked = true;
- if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {} else {
- SelectedAudioInputDevices.push(event.currentTarget.value);
- }
- }
- });
- }
- };
-
- } else if (deviceInfo.kind === 'videoinput') {
- option = document.createElement('option');
- option.value = deviceInfo.deviceId || "default";
- option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
- videoSelect.appendChild(option);
- } else if (deviceInfo.kind === 'audiooutput') {
- option = document.createElement('option');
- if (audioOutputSelect.length === 0) {
- option.dataset.default = true;
- } else {
- option.dataset.default = false;
- }
- option.value = deviceInfo.deviceId || "default";
- if (option.value == session.sink) {
- option.selected = true;
- }
- option.text = deviceInfo.label || `Speaker ${audioOutputSelect.length + 1}`;
- audioOutputSelect.appendChild(option);
- } else {
- log('Some other kind of source/device: ', deviceInfo);
- }
- }
-
- if (audioOutputSelect.childNodes.length == 0) {
- option = document.createElement('option');
- option.value = "default";
- option.text = "System Default";
- audioOutputSelect.appendChild(option);
- }
-
- option = document.createElement('option');
- option.text = "Disable Video";
- option.value = "ZZZ";
- videoSelect.appendChild(option); // NO AUDIO OPTION
-
- selectors.forEach((select, selectorIndex) => {
- if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
- select.value = values[selectorIndex];
- }
- });
-
- } catch (e) {
- errorlog(e);
- }
-}
-
-
-if (location.protocol !== 'https:') {
- if (!(session.cleanOutput)) {
- warnUser("SSL (https) is not enabled. This site will not work without it!
Try accessing the site from here instead.");
- }
-}
-
-
-function getUserMediaVideoParams(resolutionFallbackLevel, isSafariBrowser) {
- switch (resolutionFallbackLevel) {
- case 0:
- if (isSafariBrowser) {
- return {
- width: {
- min: 360
- , ideal: 1920
- , max: 1920
- }
- , height: {
- min: 360
- , ideal: 1080
- , max: 1080
- }
- };
- } else {
- return {
- width: {
- min: 720
- , ideal: 1920
- , max: 1920
- }
- , height: {
- min: 720
- , ideal: 1080
- , max: 1920
- }
- };
- }
- case 1:
- if (isSafariBrowser) {
- return {
- width: {
- min: 360
- , ideal: 1280
- , max: 1280
- }
- , height: {
- min: 360
- , ideal: 720
- , max: 720
- }
- };
- } else {
- return {
- width: {
- min: 720
- , ideal: 1280
- , max: 1280
- }
- , height: {
- min: 720
- , ideal: 720
- , max: 1280
- }
- };
- }
- case 2:
- if (isSafariBrowser) {
- return {
- width: {
- min: 640
- }
- , height: {
- min: 360
- }
- };
- } else {
- return {
- width: {
- min: 240
- , ideal: 640
- , max: 1280
- }
- , height: {
- min: 240
- , ideal: 360
- , max: 1280
- }
- };
- }
- case 3:
- if (isSafariBrowser) {
- return {
- width: {
- min: 360
- , ideal: 1280
- , max: 1440
- }
- };
- } else {
- return {
- width: {
- min: 360
- , ideal: 1280
- , max: 1440
- }
- };
- }
- case 4:
- if (isSafariBrowser) {
- return {
- height: {
- min: 360
- , ideal: 720
- , max: 960
- }
- };
- } else {
- return {
- height: {
- ideal: 720
- , max: 960
- }
- };
- }
- case 5:
- if (isSafariBrowser) {
- return {
- width: {
- min: 360
- , ideal: 640
- , max: 1440
- }
- , height: {
- min: 360
- , ideal: 360
- , max: 720
- }
- };
- } else {
- return {
- width: {
- ideal: 640
- , max: 1920
- }
- , height: {
- ideal: 360
- , max: 1920
- }
- }; // same as default, but I didn't want to mess with framerates until I gave it all a try first
- }
- case 6:
- if (isSafariBrowser) {
- return {}; // iphone users probably don't need to wait any longer, so let them just get to it
- } else {
- return {
- width: {
- min: 360
- , ideal: 640
- , max: 3840
- }
- , height: {
- min: 360
- , ideal: 360
- , max: 2160
- }
- };
-
- }
- case 7:
- return { // If the camera is recording in low-light, it may have a low framerate. It coudl also be recording at a very high resolution.
- width: {
- min: 360
- , ideal: 640
- }
- , height: {
- min: 360
- , ideal: 360
- }
- , };
-
- case 8:
- return {
- width: {
- min: 360
- }
- , height: {
- min: 360
- }
- , frameRate: 10
- }; // same as default, but I didn't want to mess with framerates until I gave it all a try first
- case 9:
- return {
- frameRate: 0
- }; // Some Samsung Devices report they can only support a framerate of 0.
- case 10:
- return {}
- default:
- return {};
- }
-}
-
-function addScreenDevices(device) {
- if (device.kind == "audio") {
- const audioInputSelect = document.querySelector('#audioSource3');
- const listele = document.createElement('li');
- listele.style.display = "block";
-
- const option = document.createElement('input');
- option.type = "checkbox";
- option.checked = true;
-
- if (getById('multiselect-trigger3').dataset.state == 0) {
- option.style.display = "none";
- }
-
- option.value = device.id;
- option.name = device.label;
- option.dataset.type = "screen";
- option.label = device.label;
-
- const label = document.createElement('label');
- label.for = option.name;
- label.innerHTML = " " + device.label;
- listele.appendChild(option);
- listele.appendChild(label);
-
- option.onchange = function(event) { // make sure to clear 'no audio option' if anything else is selected
- log("change 4644");
- if (!(CtrlPressed)) {
- document.querySelectorAll("#audioSource3 input[type='checkbox']").forEach(function(item) {
- if (event.currentTarget.value !== item.value) { // this shoulnd't happen, but if it does.
-
- item.checked = false;
-
- if (item.dataset.type == "screen") {
- item.parentElement.parentElement.removeChild(item.parentElement);
- }
-
- while (SelectedAudioInputDevices.indexOf(item.value) > -1) {
- SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(item.value), 1);
- }
-
- activatedPreview = false;
- grabAudio("videosource", "#audioSource3"); // exclude item.id
-
- } else {
- if (SelectedAudioInputDevices.indexOf(item.value) > -1) {} else {
- SelectedAudioInputDevices.push(item.value);
- }
-
- item.checked = true;
- activatedPreview = false;
- grabAudio("videosource", "#audioSource3", item.value); // exclude item.id. we will reconnect, even if already connected, as a way to 'reset' a device if it isn't working.
- }
- });
- }
- event.stopPropagation();
- return false;
- };
- audioInputSelect.appendChild(listele);
- getById("audioSourceNoAudio2").checked = false;
-
- } else if (device.kind == "video") {
- const videoSelect = document.querySelector('select#videoSource3');
- //const selectors = [ videoSelect];
- //const values = selectors.map(select => select.value);
- const option = document.createElement('option');
- option.value = device.id;
- option.text = device.label;
- option.selected = true;
- option.label = device.label;
- videoSelect.appendChild(option);
- }
-}
-
-function gotDevices2(deviceInfos) {
- log("got devices!");
- log(deviceInfos);
-
- getById("multiselect-trigger3").dataset.state = "0";
- getById("multiselect-trigger3").classList.add('closed');
- getById("multiselect-trigger3").classList.remove('open');
- getById("chevarrow2").classList.add('bottom');
-
- var knownTrack = false;
-
- try {
- const audioInputSelect = document.querySelector('#audioSource3');
- const videoSelect = document.querySelector('select#videoSource3');
- const audioOutputSelect = document.querySelector('#outputSource3');
- const selectors = [videoSelect];
-
-
- [audioInputSelect].forEach(select => {
- while (select.firstChild) {
- select.removeChild(select.firstChild);
- }
- });
-
- const values = selectors.map(select => select.value);
- selectors.forEach(select => {
- while (select.firstChild) {
- select.removeChild(select.firstChild);
- }
- });
-
- [audioOutputSelect].forEach(select => {
- while (select.firstChild) {
- select.removeChild(select.firstChild);
- }
- });
-
- var counter = 0;
- for (let i = 0; i !== deviceInfos.length; ++i) {
- const deviceInfo = deviceInfos[i];
- if (deviceInfo == null) {
- continue;
- }
-
- if (deviceInfo.kind === 'audioinput') {
- const option = document.createElement('input');
- option.type = "checkbox";
- counter++;
- const listele = document.createElement('li');
- listele.style.display = "none";
-
- try {
- session.streamSrc.getAudioTracks().forEach(function(track) {
- if (deviceInfo.label == track.label) {
- option.checked = true;
- listele.style.display = "inherit";
- }
- });
- } catch (e) {
- errorlog(e);
- }
-
- option.style.display = "none"
- option.value = deviceInfo.deviceId || "default";
- option.name = "multiselecta" + counter;
- option.id = "multiselecta" + counter;
- option.dataset.label = deviceInfo.label || ("microphone " + ((audioInputSelect.length || 0) + 1));
-
- const label = document.createElement('label');
- label.for = option.name;
-
- label.innerHTML = " " + (deviceInfo.label || ("microphone " + ((audioInputSelect.length || 0) + 1)));
-
- listele.appendChild(option);
- listele.appendChild(label);
- audioInputSelect.appendChild(listele);
-
- option.onchange = function(event) { // make sure to clear 'no audio option' if anything else is selected
- log("change 4768");
- if (!(CtrlPressed)) {
- document.querySelectorAll("#audioSource3 input[type='checkbox']").forEach(function(item) {
- if (event.currentTarget.value !== item.value) {
- item.checked = false;
- if (item.dataset.type == "screen") {
- item.parentElement.parentElement.removeChild(item.parentElement);
- }
- while (SelectedAudioInputDevices.indexOf(item.value) > -1) {
- SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(item.value), 1);
- }
- } else {
- item.checked = true;
- if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {} else {
- SelectedAudioInputDevices.push(event.currentTarget.value);
- }
- }
- });
- } else {
-
- if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {} else {
- SelectedAudioInputDevices.push(event.currentTarget.value);
- }
-
- getById("audioSourceNoAudio2").checked = false;
- }
- };
-
- } else if (deviceInfo.kind === 'videoinput') {
- const option = document.createElement('option');
- option.value = deviceInfo.deviceId || "default";
- option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
- try {
- if (!knownTrack){
- if (session.canvasSource){
- session.canvasSource.srcObject.getVideoTracks().forEach(function(track) {
- if (option.text == track.label) {
- option.selected = true;
- knownTrack = true;
- }
- });
- }
- }
- if (!knownTrack){
- session.streamSrc.getVideoTracks().forEach(function(track) {
- if (option.text == track.label) {
- option.selected = true;
- knownTrack = true;
- }
- });
- }
- } catch (e) {
- errorlog(e);
- }
- videoSelect.appendChild(option);
-
- } else if (deviceInfo.kind === 'audiooutput') {
- const option = document.createElement('option');
- if (audioOutputSelect.length === 0) {
- option.dataset.default = true;
- } else {
- option.dataset.default = false;
- }
- option.value = deviceInfo.deviceId || "default";
- if (option.value == session.sink) {
- option.selected = true;
- }
- option.text = deviceInfo.label || `Speaker ${outputSelect.length + 1}`;
- audioOutputSelect.appendChild(option);
-
- } else {
- log('Some other kind of source/device: ', deviceInfo);
- }
- }
-
- if (audioOutputSelect.childNodes.length == 0) {
- const option = document.createElement('option');
- option.value = "default";
- option.text = "System Default";
- audioOutputSelect.appendChild(option);
- }
-
- ////////////
-
- session.streamSrc.getAudioTracks().forEach(function(track) { // add active ScreenShare audio tracks to the list
- log("Checking for screenshare audio");
- var matched = false;
- for (var i = 0; i !== deviceInfos.length; ++i) {
- var deviceInfo = deviceInfos[i];
- if (deviceInfo == null) {
- continue;
- }
- log("---");
- if (track.label == deviceInfo.label) {
- matched = true;
- continue;
- }
- }
- if (matched == false) { // Not a gUM device
-
- var listele = document.createElement('li');
- listele.style.display = "block";
- var option = document.createElement('input');
- option.type = "checkbox";
- option.value = track.id;
- option.checked = true;
- option.style.display = "none";
- option.name = track.label;
- option.label = track.label;
- option.dataset.type = "screen";
- const label = document.createElement('label');
- label.for = option.name;
- label.innerHTML = " " + track.label;
- listele.appendChild(option);
- listele.appendChild(label);
- option.onchange = function(event) { // make sure to clear 'no audio option' if anything else is selected
- log("change 4873");
- var trackid = null;
- if (!(CtrlPressed)) {
-
- document.querySelectorAll("#audioSource3 input[type='checkbox']").forEach(function(item) {
- if (event.currentTarget.value !== item.value) { // this shoulnd't happen, but if it does.
- item.checked = false;
- if (item.dataset.type == "screen") {
- item.parentElement.parentElement.removeChild(item.parentElement);
- }
- } else {
- event.currentTarget.checked = true;
- trackid = item.value;
- }
- });
- } else {
- //getById("audioSourceNoAudio2").checked=false;
- if (event.currentTarget.dataset.type == "screen") {
- event.currentTarget.parentElement.parentElement.removeChild(event.currentTarget.parentElement);
- }
- }
- activatedPreview = false;
- grabAudio("videosource", "#audioSource3", trackid); // exclude item.id.
- event.stopPropagation();
- return false;
- };
- audioInputSelect.appendChild(listele);
- }
- });
- /////////// no video option
- var optionss = false;
- if (screensharesupport) {
- optionss = document.createElement('option');
- optionss.text = "New Screen Share";
- optionss.value = "XXX";
- optionss.previous =
- videoSelect.appendChild(optionss); // NO AUDIO OPTION
- }
-
- option = document.createElement('option'); // no video
- option.text = "Disable Video";
- option.value = "ZZZ";
- videoSelect.appendChild(option);
- if (session.streamSrc.getVideoTracks().length == 0) {
- option.selected = true;
- } else if (knownTrack == false) {
- option = document.createElement('option'); // no video
- option.text = session.streamSrc.getVideoTracks()[0].label;
- option.value = "YYY";
- videoSelect.appendChild(option);
- option.selected = true;
-
- }
-
- if (optionss) {
- optionss.lastSelected = videoSelect.selectedIndex;
- }
-
- ///////////// /// NO AUDIO appended option
-
- var option = document.createElement('input');
- option.type = "checkbox";
- option.value = "ZZZ";
- option.style.display = "none"
- option.id = "audioSourceNoAudio2";
-
- var label = document.createElement('label');
- label.for = option.name;
- label.innerHTML = " No Audio";
- var listele = document.createElement('li');
-
- if (session.streamSrc.getAudioTracks().length == 0) {
- option.checked = true;
- } else {
- listele.style.display = "none";
- option.checked = false;
- }
- option.onchange = function(event) { // make sure to clear 'no audio option' if anything else is selected
- log("change 4938");
- if (!(CtrlPressed)) {
- document.querySelectorAll("#audioSource3 input[type='checkbox']").forEach(function(item) {
- if (event.currentTarget.value !== item.value) {
- item.checked = false;
- if (item.dataset.type == "screen") {
- item.parentElement.parentElement.removeChild(item.parentElement);
- }
-
- while (SelectedAudioInputDevices.indexOf(item.value) > -1) {
- SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(item.value), 1);
- }
- } else {
- item.checked = true;
- if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {
- //
- } else {
- SelectedAudioInputDevices.push(event.currentTarget.value);
- }
- }
- });
- } else {
- document.querySelectorAll("#audioSource3 input[type='checkbox']").forEach(function(item) {
- if (event.currentTarget.value === item.value) {
- event.currentTarget.checked = true;
- if (SelectedAudioInputDevices.indexOf(event.currentTarget.value) > -1) {} else {
- SelectedAudioInputDevices.push(event.currentTarget.value);
- }
- } else {
- item.checked = false;
- if (item.dataset.type == "screen") {
- item.parentElement.parentElement.removeChild(item.parentElement);
- }
- while (SelectedAudioInputDevices.indexOf(item.value) > -1) {
- SelectedAudioInputDevices.splice(SelectedAudioInputDevices.indexOf(item.value), 1);
- }
- }
-
- });
- }
- };
- listele.appendChild(option);
- listele.appendChild(label);
- audioInputSelect.appendChild(listele);
-
- ////////////
-
-
- selectors.forEach((select, selectorIndex) => {
- if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
- select.value = values[selectorIndex];
- }
- });
-
- audioInputSelect.onchange = function() {
- log("Audio OPTION HAS CHANGED? 2");
- activatedPreview = false;
- setTimeout(function(){
- grabAudio("videosource", "#audioSource3");
- },10)
- };
- videoSelect.onchange = function(event) {
- try {
- if (event.target.options[event.target.options.selectedIndex].value === "XXX") {
- videoSelect.selectedIndex = event.target.options[event.target.options.selectedIndex].lastSelected;
- if (session.screenShareState == false) {
- toggleScreenShare();
- } else {
- toggleScreenShare(true);
- }
- return;
- }
- } catch (e) {}
- log("video source changed");
- activatedPreview = false;
- grabVideo(session.quality, "videosource", "select#videoSource3");
- enumerateDevices().then(gotDevices2).then(function() {
- session.screenShareState = false;
- pokeIframeAPI("screen-share-ended");
- getById("screensharebutton").classList.add("float");
- getById("screensharebutton").classList.remove("float2");
- });
- };
- getById("refreshVideoButton").onclick = function() {
- if (session.screenShareState) {
- log("can't refresh a screenshare");
- return;
- }
- log("video source changed");
- activatedPreview = false;
- grabVideo(session.quality, "videosource", "select#videoSource3");
- };
-
- audioOutputSelect.onchange = function() {
-
- if ((iOS) || (iPad)) {
- return;
- }
-
- var outputSelect = document.querySelector('select#outputSource3');
- session.sink = outputSelect.options[outputSelect.selectedIndex].value;
- //if (session.sink=="default"){session.sink=false;} else {
- try {
- getById("videosource").setSinkId(session.sink).then(() => {
- log("New Output Device:" + session.sink);
- }).catch(error => {
- errorlog(error);
- });
- } catch (e) {
- errorlog(e);
- }
- for (UUID in session.rpcs) {
- session.rpcs[UUID].videoElement.setSinkId(session.sink).then(() => {
- log("New Output Device for: " + UUID);
- }).catch(error => {
- errorlog(error);
- });
- }
- }
-
- } catch (e) {
- errorlog(e);
- }
-}
-
-function playtone(screen = false) {
-
- if ((iOS) || (iPad)) {
- // try{
- // session.audioContext.resume();
- // } catch(e){errorlog(e);}
- var testtone = document.getElementById("testtone");
- if (testtone) {
- testtone.mute
- testtone.play();
- }
- return;
- }
-
- if (screen) {
- var outputSelect = document.querySelector('select#outputSourceScreenshare');
- session.sink = outputSelect.options[outputSelect.selectedIndex].value;
- }
-
- var testtone = document.getElementById("testtone");
- if (testtone) {
- if (session.sink) {
- try {
- testtone.setSinkId(session.sink).then(() => { // TODO: iOS doens't support sink. Needs to bypass if IOS
- log("changing audio sink:" + session.sink);
- testtone.play();
- }).catch(error => {
- errolog("couldn't set sink");
- errorlog(error);
- });
- } catch (e) {
- warnlog(e); // firefox?
- testtone.play();
- }
- } else {
- testtone.play();
- }
- }
-}
-
-async function getAudioOnly(selector, trackid = null, override = false) {
- var audioSelect = document.querySelector(selector).querySelectorAll("input");
- var audioList = [];
- var streams = [];
- log("getAudioOnly()");
- for (var i = 0; i < audioSelect.length; i++) {
- if (audioSelect[i].value == "ZZZ") {
- continue;
- } else if (trackid == audioSelect[i].value) { // skip already excluded
- continue;
- } else if ("screen" == audioSelect[i].dataset.type) { // skip already excluded ---------- !!!!!! DOES THIS MAKE SENSE? TODO: CHECK
- continue;
- } else if (audioSelect[i].checked) {
- log(audioSelect[i]);
- audioList.push(audioSelect[i]);
- }
- }
- for (var i = 0; i < audioList.length; i++) {
-
- if ((audioList[i].value == "default") && (session.echoCancellation !== false) && (session.autoGainControl !== false) && (session.noiseSuppression !== false)) {
- var constraint = {
- audio: true
- };
- } else { // Just trying to avoid problems with some systems that don't support these features
- var constraint = {
- audio: {
- deviceId: {
- exact: audioList[i].value
- }
- }
- };
- if (session.echoCancellation === false) {
- constraint.audio.echoCancellation = false;
- } else {
- constraint.audio.echoCancellation = true;
- }
- if (session.autoGainControl === false) {
- constraint.audio.autoGainControl = false;
- } else {
- constraint.audio.autoGainControl = true;
- }
- if (session.noiseSuppression === false) {
- constraint.audio.noiseSuppression = false;
- } else {
- constraint.audio.noiseSuppression = true;
- }
- }
- constraint.video = false;
- if (override !== false) {
- try {
- if (override.audio.deviceId == audioList[i].value) {
- constraint = override;
- }
- } catch (e) {}
- }
-
- if (session.audioInputChannels) {
- if (constraint.audio === true) {
- constraint.audio = {};
- constraint.audio.channelCount = session.audioInputChannels;
- } else if (constraint.audio) {
- constraint.audio.channelCount = session.audioInputChannels;
- }
- }
- log("CONSTRAINT");
- log(constraint);
- var stream = await navigator.mediaDevices.getUserMedia(constraint).then(function(stream2) {
- return stream2;
- }).catch(function(err) {
- errorlog(err);
- if (!(session.cleanOutput)) {
- if (override !== false) {
- if (err.name) {
- if (err.constraint) {
- warnUser(err['name'] + ": " + err['constraint']);
- }
- }
- }
- }
- }); // More error reporting maybe?
- if (stream) {
- streams.push(stream);
- }
- }
-
- return streams;
-}
-
-function applyMirror(mirror, eleName = 'previewWebcam') { // true unmirrors as its already mirrored
-
- var transFlip = "";
- var transNorm = "";
- if ((eleName == 'videosource') && (session.windowed)) {
- transFlip = " translate(0, 50%)";
- transNorm = " translate(0, -50%)";
- }
-
- if (session.mirrored == 2) {
- mirror = true;
- } else if (session.mirrored === 0) {
- mirror = true;
- }
-
-
- if (mirror) {
- if (session.mirrored && session.flipped) {
- getById(eleName).style.transform = " scaleX(-1) scaleY(-1)" + transFlip;
- getById(eleName).classList.add("mirrorControl");
- } else if (session.mirrored) {
- getById(eleName).style.transform = "scaleX(-1)" + transNorm;
- getById(eleName).classList.add("mirrorControl");
- } else if (session.flipped) {
- getById(eleName).style.transform = "scaleY(-1) scaleX(1)" + transFlip;
- getById(eleName).classList.remove("mirrorControl");
- } else {
- getById(eleName).style.transform = "scaleX(1)" + transNorm;
- getById(eleName).classList.remove("mirrorControl");
- }
- } else {
- if (session.mirrored && session.flipped) {
- getById(eleName).style.transform = " scaleX(1) scaleY(-1)" + transFlip;
- getById(eleName).classList.remove("mirrorControl");
- } else if (session.mirrored) {
- getById(eleName).style.transform = "scaleX(1)" + transNorm;
- getById(eleName).classList.remove("mirrorControl");
- } else if (session.flipped) {
- getById(eleName).style.transform = "scaleY(-1) scaleX(-1)" + transFlip;
- getById(eleName).classList.add("mirrorControl");
- } else {
- getById(eleName).style.transform = "scaleX(-1)" + transNorm;
- getById(eleName).classList.add("mirrorControl");
- }
- }
-}
-
-function cleanupMediaTracks() {
- try {
- if (session.streamSrc) {
- session.streamSrc.getTracks().forEach(function(track) {
- session.streamSrc.removeTrack(track);
- track.stop();
- log("stopping old track");
- });
- }
- if (session.videoElement) {
- session.videoElement.srcObject.getTracks().forEach(function(track) {
- session.videoElement.srcObject.removeTrack(track);
- track.stop();
- log("stopping old track");
- });
- }
- activatedPreview = false;
- } catch (e) {
- errorlog(e);
- }
-}
-
-/// Detect system changes; handle change or use for debugging
-var lastAudioDevice = null;
-var lastVideoDevice = null;
-var lastPlaybackDevice = null;
-
-var audioReconnectTimeout = null;
-var videoReconnectTimeout = null;
-var grabDevicesTimeout = null;
-var playbackReconnectTimeout = null;
-
-function reconnectDevices(event) { /// TODO: Perhaps change this to only if there is a DISCONNECT; rather than ON NEW DEVICE?
- if ((iOS) || (iPad)) {
- // try{
- // session.audioContext.resume();
- // } catch(e){errorlog(e);}
- resetupAudioOut();
- return;
- }
- warnlog("A media device has changed");
-
- if (document.getElementById("previewWebcam")) {
- var outputSelect = document.getElementById("outputSource");
- if (!outputSelect) {
- errorlog("resetup audio failed");
- return;
- }
- try {
- session.sink = outputSelect.options[outputSelect.selectedIndex].value;
- getById("previewWebcam").setSinkId(session.sink).then(() => {}).catch(error => {
- warnlog(error);
- });
- } catch (e) {
- errorlog(e);
- }
- return;
- }
-
-
- if (session.streamSrc === null) {
- return;
- }
- if (document.getElementById("videosource") === null) {
- return;
- }
-
- try {
- session.streamSrc.getTracks().forEach(function(track) {
-
- if (track.readyState == "ended") {
- if (track.kind == "audio") {
- lastAudioDevice = track.label;
- } else if (track.kind == "video") {
- lastVideoDevice = track.label;
- }
- session.streamSrc.removeTrack(track);
- log("remove ended old track");
- }
- });
-
- session.videoElement.srcObject.getTracks().forEach(function(track) {
- if (track.readyState == "ended") {
- session.videoElement.srcObject.removeTrack(track);
- log("remove ended old track");
- }
- });
-
- } catch (e) {
- errorlog(e);
- }
-
- clearTimeout(audioReconnectTimeout);
- audioReconnectTimeout = null;
- if (lastAudioDevice) {
- audioReconnectTimeout = setTimeout(function() { // only reconnect same audio device. If reconnected, clear the disconnected flag.
- enumerateDevices().then(gotDevices2).then(function() {
- // TODO: check to see if any audio is connected?
- var streamConnected = false;
- var audioSelect = document.querySelector("#audioSource3").querySelectorAll("input");
- for (var i = 0; i < audioSelect.length; i++) {
- if (audioSelect[i].value == "ZZZ") {
- continue;
- } else if (audioSelect[i].checked) {
- log("checked");
- streamConnected = true;
- break;
- }
- }
-
- if (!streamConnected) {
- for (var i = 0; i < audioSelect.length; i++) {
- if (audioSelect[i].value == "ZZZ") {
- continue;
- }
- //errorlog(lastAudioDevice + " : " + audioSelect[i].dataset.label);
- if (lastAudioDevice == audioSelect[i].dataset.label) { // if the last disconnected device matches.
- audioSelect[i].checked = true;
- streamConnected = true;
- lastAudioDevice = null;
- warnlog("DISCONNECTED AUDIO DEVICE RECONNECTED");
- //for (var j=0; j check if session.sink still exists -> if not, select default default (track past last sink) -> if last disconnected devices comes back, reconnect it.
-
- // lastPlaybackDevice
- //if (session.sink){ // Let Chrome handle the audio automatically, since not manually specified.
- clearTimeout(playbackReconnectTimeout);
- playbackReconnectTimeout = setTimeout(function() {
- enumerateDevices().then(gotDevices2).then(function() {
- resetupAudioOut();
- });
- }, 500);
-
-}
-
-function resetupAudioOut() {
- if ((iOS) || (iPad)) {
- for (var UUID in session.rpcs) {
- if (session.rpcs[UUID].videoElement) {
- session.rpcs[UUID].videoElement.pause().then(() => {
- setTimeout(function(uuid) {
- session.rpcs[uuid].videoElement.play().then(() => {
- log("toggle pause/play");
- });
- }, 0, UUID);
-
- });
- }
- }
- return;
- }
-
- var outputSelect = document.getElementById("outputSource3");
- if (!outputSelect) {
- errorlog("resetup audio failed");
- return;
- }
- log("Resetting Audio Output");
- var sinkSet = false;
- for (var i = 0; i < outputSelect.options.length; i++) {
- if (outputSelect.options[i].value == session.sink) {
- outputSelect.options[i].selected = true;
- sinkSet = true;
- }
- }
- if (sinkSet == false) {
- if (outputSelect.options[0]) {
- outputSelect.options[0].selected = true;
- sinkSet = outputSelect.value;
- }
- } else {
- sinkSet = session.sink;
- }
- if (sinkSet) {
- session.videoElement.setSinkId(sinkSet).then(() => {}).catch(error => {
- errorlog(error);
- });
- for (UUID in session.rpcs) {
- try{
- session.rpcs[UUID].videoElement.setSinkId(sinkSet).then(() => {
- log("New Output Device for: " + UUID);
- }).catch(error => {
- errorlog(error);
- });
- } catch(e){warnlog(e);}
- }
- }
-}
-
-function obfuscateURL(input) {
- if (input.startsWith("https://obs.ninja/")) {
- input = input.replace('https://obs.ninja/', '');
- } else if (input.startsWith("http://obs.ninja/")) {
- input = input.replace('http://obs.ninja/', '');
- } else if (input.startsWith("obs.ninja/")) {
- input = input.replace('obs.ninja/', '');
- }
-
- input = input.replace('&view=', '&v=');
- input = input.replace('&view&', '&v&');
- input = input.replace('?view&', '?v&');
- input = input.replace('?view=', '?v=');
-
- input = input.replace('&videobitrate=', '&vb=');
- input = input.replace('?videobitrate=', '?vb=');
- input = input.replace('&bitrate=', '&vb=');
- input = input.replace('?bitrate=', '?vb=');
-
- input = input.replace('?audiodevice=', '?ad=');
- input = input.replace('&audiodevice=', '&ad=');
-
- input = input.replace('?label=', '?l=');
- input = input.replace('&label=', '&l=');
-
- input = input.replace('?stereo=', '?s=');
- input = input.replace('&stereo=', '&s=');
- input = input.replace('&stereo&', '&s&');
- input = input.replace('?stereo&', '?s&');
-
- input = input.replace('?webcam&', '?wc&');
- input = input.replace('&webcam&', '&wc&');
-
- input = input.replace('?remote=', '?rm=');
- input = input.replace('&remote=', '&rm=');
-
- input = input.replace('?password=', '?p=');
- input = input.replace('&password=', '&p=');
-
- input = input.replace('&maxvideobitrate=', '&mvb=');
- input = input.replace('?maxvideobitrate=', '?mvb=');
-
- input = input.replace('&maxbitrate=', '&mvb=');
- input = input.replace('?maxbitrate=', '?mvb=');
-
- input = input.replace('&height=', '&h=');
- input = input.replace('?height=', '?h=');
-
- input = input.replace('&width=', '&w=');
- input = input.replace('?width=', '?w=');
-
- input = input.replace('&quality=', '&q=');
- input = input.replace('?quality=', '?q=');
-
- input = input.replace('&cleanoutput=', '&clean=');
- input = input.replace('?cleanoutput=', '?clean=');
-
- input = input.replace('&maxviewers=', '&clean=');
- input = input.replace('?maxviewers=', '?clean=');
-
- input = input.replace('&framerate=', '&fr=');
- input = input.replace('?framerate=', '?fr=');
-
- input = input.replace('&fps=', '&fr=');
- input = input.replace('?fps=', '?fr=');
-
- input = input.replace('&permaid=', '&push=');
- input = input.replace('?permaid=', '?push=');
-
- input = input.replace('&roomid=', '&r=');
- input = input.replace('?roomid=', '?r=');
-
- input = input.replace('&room=', '&r=');
- input = input.replace('?room=', '?r=');
-
- log(input);
- var key = "OBSNINJAFORLIFE";
- var encrypted = CryptoJS.AES.encrypt(input, key);
- var output = "https://invite.cam/" + encrypted.toString();
- return output;
-}
-
-document.addEventListener("visibilitychange", function() {
- log(document.hidden, document.visibilityState);
- if ((iOS) || (iPad)) { // fixes a bug on iOS devices. Not need with other devices?
- if (document.visibilityState === 'visible') {
- setTimeout(function() {
- resetupAudioOut();
- }, 500);
- }
- }
-});
-
-try {
- navigator.mediaDevices.ondevicechange = reconnectDevices;
-} catch (e) {
- errorlog(e);
-}
-
-
-function updateConnectionStatus() {
- warnlog("Connection type changed from " + session.stats.network_type + " to " + Connection.effectiveType);
- session.stats.network_type = Connection.effectiveType + " / " + Connection.type;
- session.ping();
-}
-
-try {
- var Connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
- session.stats.network_type = Connection.effectiveType + " / " + Connection.type;
- Connection.addEventListener('change', updateConnectionStatus);
-} catch (e) {}
-
-
-
-var beforeScreenShare = null; // video
-var screenShareAudioTrack = null;
-async function toggleScreenShare(reload = false) { ////////////////////////////
-
- if (reload) {
- await grabScreen(quality = 0, audio = true, videoOnEnd = true).then(res => {
- if (res != false) {
- session.screenShareState = true;
- getById("screensharebutton").classList.add("float2");
- getById("screensharebutton").classList.remove("float");
- enumerateDevices().then(gotDevices2).then(function() {});
- }
-
- });
- return;
- }
-
-
- if (session.screenShareState == false) { // adding a screen
-
- await grabScreen(quality = 0, audio = true, videoOnEnd = true).then(res => {
- if (res != false) {
- session.screenShareState = true;
- getById("screensharebutton").classList.add("float2");
- getById("screensharebutton").classList.remove("float");
- enumerateDevices().then(gotDevices2).then(function() {});
- }
-
- });
-
- } else { // removing a screen . session.screenShareState already true true /////////////////////////////////
-
-
- session.screenShareState = false;
- pokeIframeAPI("screen-share-ended");
-
- if (beforeScreenShare) {
-
- session.streamSrc.getAudioTracks().forEach(function(track) { // previous video track; saving it. Must remove the track at some point.
- if (screenShareAudioTrack == track) { // since there are more than one audio track, lets see if we can remove JUST the audio track for the screen share.
- session.streamSrc.removeTrack(track);
- //session.videoElement.srcObject = outboundAudioPipeline(session.streamSrc);
- track.stop();
- }
- });
- session.streamSrc.getVideoTracks().forEach(function(track) {
- //errorlog(track);
- session.streamSrc.removeTrack(track);
- track.stop();
- });
-
- session.videoElement.srcObject.getVideoTracks().forEach(function(track) {
- //errorlog(track);
- session.videoElement.srcObject.removeTrack(track);
- track.stop();
- });
-
- getById("screensharebutton").classList.add("float");
- getById("screensharebutton").classList.remove("float2");
-
- session.streamSrc.addTrack(beforeScreenShare); // add back in the video track we had before we started screen sharing. It should be NULL if we changed the video track else where (such as via the settings). #TODO:
- session.videoElement.srcObject.addTrack(beforeScreenShare);
-
- toggleVideoMute(true);
- for (UUID in session.pcs) {
- try {
- if ((session.pcs[UUID].guest == true) && (session.roombitrate === 0)) {
- log("room rate restriction detected. No videos will be published to other guests");
- } else if (session.pcs[UUID].allowVideo == true) { // allow
- var senders = session.pcs[UUID].getSenders(); // for any connected peer, update the video they have if connected with a video already.
- 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(beforeScreenShare); // replace may not be supported by all browsers. eek.
- sender.track.enabled = true;
- added = true;
- }
- }
- });
- if (added == false) {
- session.pcs[UUID].addTrack(beforeScreenShare, stream);
- }
- }
- } catch (e) {
- errorlog(e);
- }
- }
- session.refreshScale();
- beforeScreenShare = null;
- }
- toggleSettings(forceShow = true);
- //enumerateDevices().then(gotDevices2).then(function(){
- //grabVideo();
- //grabAudio();
- // toggleSettings(forceShow=true);
- //});
-
-
- }
-}
-var ElectronDesktopCapture = false;
-if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) { // this enables Screen Capture in Electron
- try{
- const { desktopCapturer} = require('electron'); // This is definitely Electron specific. Requires Node Integration to be on, which is a potential security hazzard
- window.navigator.mediaDevices.getDisplayMedia = () => {
- return new Promise(async (resolve, reject) => {
- try {
- const sources = await desktopCapturer.getSources({ types: ['screen', 'window'] });
-
- const selectionElem = document.createElement('div');
- selectionElem.classList = 'desktop-capturer-selection';
- selectionElem.innerHTML = `
-
+### ⚠ Notice! We've rebranded from OBS.Ninja to VDO.Ninja - all else is staying the same ✨
-## 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.
+
-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.
+## What is **VDO NINJA**
+VDO.Ninja uses peer-to-peer technology to bring remote cameras into OBS or other studio software.
-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
+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.vdo.ninja
+Please see the sub-reddit added info: https://reddit.com/r/vdoninja
+Also check out the user documentation at: https://docs.vdo.ninja
+
+
## How to use
-I demo the basic usage of OBS.Ninja on YouTube: https://www.youtube.com/watch?v=6R_sQKxFAhg
-
-Here is a podcast series showing how to use different basic OBS.Ninja features, including macOS support: https://www.youtube.com/watch?v=XfSqufuoV74&list=PLWodc2tCfAH1l_LDvEyxEqFf42hOBKqQM
+A video demo and playlist of the basic usage of VDO.Ninja on YouTube can be found here: https://www.youtube.com/watch?v=QaA_6aOP9z8&list=PLWodc2tCfAH1l_LDvEyxEqFf42hOBKqQM&index=1.
And Here is another video series touching on some more advanced settings: https://www.youtube.com/watch?v=mQ1Jdhf5aYg&list=PL8VJWj2-XLFpFu3G35Hdm1nKZ2xn9_0_8
Check the subreddit for added use cases, advanced features, and support. Advanced features includes high-quality audio modes, custom video resolutions, and more.
-MacOS users will face some challenges in using OBS 25/26, but there are workarounds. Please see the subreddit or [the Wiki](https://github.com/steveseguin/obsninja/wiki).
-
## What's in this repo
-This repo contains software for OBS.Ninja, including the HTML landing page for its Electron Capture app offering. A sample config file and instructions for setting up a TURN server (video relay server), is also provided. You may also find [the Wiki](https://github.com/steveseguin/obsninja/wiki) for the project in this repo, which contains added information on how to use the software.
+This repo contains the web client software for VDO.Ninja, along with many sample apps that leverage its IFRAME API. A sample config file and instructions for setting up an optional TURN video relay server is also provided here. The user documentation for VDO.Ninja itself is found at docs.vdo.ninja.
## How to Deploy this Repo
-To use, just download and host the files on a HTTPS-enabled webserver. You may want to hide the .html extensions within your HTTP server as well, else the generated links will not work. See [here](https://github.com/steveseguin/obsninja/blob/master/install.md) for added details and alternative install options.
+VDO.Ninja is available as a free-to-use hosted service at https://vdo.ninja, so deploying is optional. If you do wish to self-deploy the service however, details are provided below.
-Directions on how to deploy a TURN server are listed in the turnserver.md file. You may wish to do so, although not all use cases will not need one. Only about 10% of remote guests, those often connected via 4G LTE, will require a TURN server. While OBS.Ninja does host some TURN servers, they are quite expensive to operate and not really for private deployment use. If you are deploying your own version of OBS.Ninja, I'd ask you use your own TURN servers instead.
+Hosting a private deployment can be as simple as hosting the files in this repository on a HTTPS-enabled webserver. For a very simple method on how to do this, there's a video guide here: https://www.youtube.com/watch?v=uYLKkX2_flY
+
+For more advanced users, you can see the [install.md](https://github.com/steveseguin/vdoninja/blob/master/install.md) file for alternative hosting options and more details on deploying additional system components. Limited technical support is provided for self-deployments, mainly due to how time-consuming such requests are, but the details to fully-deploy all system components are provided in the install.md file.
+
+If self-hosting, you might also wish to host your own video relay TURN server. Directions on how to deploy a TURN server are listed in the turnserver.md file. Only about ~ 5% of remote guests usually will need a TURN server, often those connected via 4G LTE or those behind a strict firewall, but most other users don't need one. While VDO.Ninja does host some pubiic TURN servers, they are quite expensive to operate, so please try to avoid abusing if possible. If you are deploying your own version of VDO.Ninja, I'd ask you to use your own TURN servers if you are capable of doing so; it's understandable if you aren't able to though.
+
+### Develop vs Release versions
+
+The develop branch is a bit like the preview or nightly version of VDO.Ninja. It's intended to be functional, but it may not be that well tested or there could be incomplete features. This version aligns closely with what is normally on vdo.ninja/beta/ or vdo.ninja/alpha/, which is well suited for those wishing to submit code changes or to gain access to experimental new features. You can access the GitHub develop on Github pages here as well: https://steveseguin.github.io/vdo.ninja/
+
+Release versions of VDO.Ninja have their own branches though, with the newest release being hosted at https://vdo.ninja/. These latest release branch will be updated to fix bugs or critical issues as needed, but are otherwise unchanged. https://github.com/steveseguin/vdo.ninja/branches
+
+Due to the nature of live video production, where unexpected changes to the app are not welcomed usually, I don't update https://vdo.ninja/ all that often. As well, constant updates to the primary hosted app makes supporting users challenging, as its hard to tell if an issue is with the code or with the user. For this reason, VDO.Ninja does infrequent updates to the primary hosted production version. Users wanting newer features, or who have greater risk tolerance, should use the beta version (vdo.ninja/beta/). The alpha version is usually updated daily, whereas beta is usually updated weekly.
## Server side / API software
-Since OBS.Ninja uses peer-2-peer technology, video connections are made directly between viewer and publisher in 90% of cases. Hosting a TURN server yourself may help improve performance, but less than 1% of users will see any benefit of this. Details on how to deploy a TURN server are provided. For those capable of hosting their own TURN server, that would be appreciated if possible, as TURN servers are the only real cost incurred by OBS.Ninja at present. (other than time, of course)
+Since VDO.Ninja uses peer-2-peer technology, video connections are made directly between viewer and publisher in 95% of cases. Hosting a TURN server yourself may help improve performance, but less than 1% of users will see an improvement to video quality by using one. They also will not help lower bandwidth usage or CPU usage, so generally you wish to avoid using them if possible.
-Other than TURN servers, OBS.Ninja also uses public STUN servers and a hosted handshake server. These are used to facilitate the initial setup of peer connections and are generally not required after a peer connection is established. These servers are free to access and use, even for private deployments. The handshake server's code is currently not available, so basic access to the Internet is still required to use OBS.Ninja even with a private deployment.
+Details on how to deploy a TURN server are provided; see: turnserver.md. For those capable of hosting their own TURN server, that would be appreciated if possible, as TURN servers are the largest cost incurred by VDO.Ninja at present. (other than time, of course)
-Development builds of OBS.Ninja may include debugging software, but in-production releases have this removed. Double check to ensure "console.re" debugging is disabled before deployment, just to be safe.
+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
-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 near 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
+If urgent, join me on discord: https://discord.vdo.ninja or email me at steve@seguin.email (Steve may not respond to emails if deemed unimportant)
## 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, but has been expanded to have additional functionality for content creators in general
https://github.com/steveseguin/electroncapture
### CAPTION.Ninja
-A free AI-based closed-captioning tool to add speech-to-text overlays to OBS Studio. It's browser-based with an easy OBS integration. Developed by Steve as well! https://caption.ninja
+A free AI-based closed-captioning tool to add speech-to-text overlays to OBS Studio. It's browser-based with an easy OBS or VMix integration. Developed by Steve as well! https://caption.ninja
-### Chat.Overlay.Ninja
-A free Chrome extension that lets you select Youtube Live Chat comments, with those comments then appearing directly in OBS or VMix as an overlay. No chroma-keying needed and the styling is pretty easy to customize without needing to modify the Chrome extension itself.
-http://chat.overlay.ninja/
+### Social Stream Ninja
+A free Chrome extension that lets you stream and feature chat comments from Youtube, Twitch, Facebook, and more. Featured comments will appear directly in OBS or VMix as an overlay, or as a stream list of comments. It also includes a dock for more advanced function, such as text-to-speech, sentiment analysis, and saving to disk. No chroma-keying needed and the styling is pretty easy to customize without needing to modify the Chrome extension itself.
+http://socialstream.ninja
-### Steves.app:
-A website designed to also work with OBS.Ninja as a Broadcasting tool. Share your webcam, window, desktop, or video file with friends and family. Peer-2-peer, so privacy can be maintained, but you can also list your broadcasts for others to watch.
-https://steves.app/
+### Rasbperry Ninja
+Use a Raspberry Pi, NVidia Jetson, or Linux box as a dedicated camera for VDO.Ninja. This project can use the hardware encoder of the RPi or Jetson to enable 1080p30 or even 4K video capture and webRTC-based broadcasting. Support for USB, CSI, and HDMI video sources is available. Python-based.
+[http://socialstream.ninja](https://github.com/steveseguin/raspberry_ninja)
## Privacy
-I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with OBS.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you. See: [turnserver.md](turnserver.md)
+I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with VDO.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you. See: [turnserver.md](turnserver.md)
-https://obs.ninja may unavoidably use cookies that are exempt from EU laws of requiring notice of their use; they are exempt as they are required and necessary for the technical functioning of the web service. Our webserver is cached by Cloudflare and it provides denial of server protection for the users of OBS.Ninja.
+https://vdo.ninja may unavoidably use cookies that are exempt from EU laws of requiring notice of their use; they are exempt as they are required and necessary for the technical functioning of the web service. Our webserver is cached by Cloudflare and it provides denial of server protection for the users of VDO.Ninja.
Additional security features are being added weekly on request. Please ask about these options if added security and privacy are requirements for you.
@@ -74,4 +89,12 @@ Additional security features are being added weekly on request. Please ask about
Ideas, feedback, bugs, etc -- all welcomed. I'm dumping many of my ideas as issues into Github. Feedback is typically most welcomed via Email or Discord.
## Licence
-OBS.Ninja is available as 'mostly' open-source; please see the LICENCE.md file for details.
+VDO.Ninja is available as 'mostly' open-source; please see the LICENCE.md file for details.
+
+## 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.
+
+## Contributors of this repo
+
+ 
+ 
+
+ 
+
+ 
+
+
+ 
- 
-
+
+ 
";
+ button.title = "Show all active videos togethers";
+ button.style.visibility = "visible";
+ } else if (mpl>1){
+ button.innerHTML = "
";
+ button.title = "Enlarge video and increase its clarity";
+ button.style.visibility = "visible";
+ } else {
+ button.style.visibility = "hidden";
+ }
+ button.style.transition = "opacity 0.3s"
+ button.style.width ="4vh";
+ button.style.height = "4vh";
+ button.style.maxWidth ="30px";
+ button.style.maxHeight = "30px";
+ button.style.minWidth ="15px";
+ button.style.minHeight = "15px";
+ button.style.position = "absolute";
+ button.style.display="none";
+ //button.style.opacity="10%";
+ button.style.zIndex="6";
+ button.style.right = "4vh";//(Math.ceil(w/rw) -30 - 30 + offsetx+Math.floor(((i%rw)+0)*w/rw))+"px";
+ button.style.top = "4vh";//( offsety + 30 + Math.floor((Math.floor(i/rw)+0)*h/rh + hi))+"px";
+ button.style.color = "white";
+ button.style.cursor = "pointer";
+
+ if (vid.id == "videosource"){
+ button.onclick = function(event){
+ if (session.infocus === true){
+ session.infocus = false;
+ } else {
+ session.infocus = true;
+ }
+ setTimeout(()=>updateMixer(),10);
+
+ if (session.fullscreenButton){
+ if (session.infocus){
+ fullscreenPageToggle(true);
+ } else {
+ fullscreenPageToggle(false);
+ }
+ }
+ };
+ } else {
+ button.dataset.UUID = vid.dataset.UUID;
+ button.onclick = function(event){
+ var target = event.currentTarget;
+ if (session.infocus === target.dataset.UUID){
+ //target.childNodes[0].className = 'las la-arrows-alt';
+ session.infocus = false;
+ } else {
+ //target.childNodes[0].className = 'las la-compress';
+ session.infocus = target.dataset.UUID;
+ //log("session:"+target.dataset.UUID);
+ }
+ if (session.fullscreenButton){
+ if (session.infocus){
+ fullscreenPageToggle(true);
+ } else {
+ fullscreenPageToggle(false);
+ }
+ }
+ setTimeout(()=>updateMixer(),10);
+ };
+
+ }
+ vid.onclick = function(event){
+ if (session.disableMouseEvents){return;}
+ button.style.display="block";
+ container.style.backgroundColor= "#4444";
+ button.style.opacity="100%";
+ };
+ button.onmouseenter = function(event){
+ if (session.disableMouseEvents){return;}
+ button.style.display="block";
+ container.style.backgroundColor= "#4444";
+ setTimeout(function(button){button.style.opacity="100%";},0,button);
+
+ };
+ container.onmouseenter = function(event){
+ if (session.disableMouseEvents){return;}
+ button.style.display="block";
+ container.style.backgroundColor= "#4444";
+ setTimeout(function(button){button.style.opacity="100%";},0,button);
+ };
+ container.onmouseleave = function(event){
+ if (session.disableMouseEvents){return;}
+ button.style.display="none";
+ container.style.backgroundColor= null;
+ button.style.opacity="10%";
+ };
+ } else if ((vid.id === "videosource") && miniPreview && soloVideo==true){
+
+ if (!holder.button){
+ var button = document.createElement("div");
+ holder.button = button;
+ holder.appendChild(button);
+ } else {
+ var button = holder.button;
+ }
+
+ button.id = "button_videosource";
+ button.dataset.button = true;
+ if (soloVideo){
+ button.innerHTML = "
\n\nFor further help on how to resolve this issue, please refer to:\n\nhttps://docs.vdo.ninja/common-errors-and-known-issues/enable-camera-microphone-permissions.", false, false);
+ } else {
+ warnUser("Permission access to the camera or microphone was denied.\n\nPlease ensure you have allowed the mic/camera permissions in your browser.\n\nFor guides on how to resolve this issue, please refer to:\n\nhttps://docs.vdo.ninja/common-errors-and-known-issues/enable-camera-microphone-permissions.", false, false);
+ }
+ }, 1);
+ }
+ return;
+ } else if (err.name == "TypeError" || err.name == "TypeError") {
+ //empty constraints object
+ } else {
+ //permission denied in browser
+ if (!(session.cleanOutput)) {
+ setTimeout(function() {
+ warnUser(err);
+ }, 1);
+ }
+ }
+ errorlog("trying to list webcam again");
+
+ if (callback){
+ callback();
+ }
+
+ });
+ } catch (e) {
+ errorlog(e);
+ if (!(session.cleanOutput)) {
+ if (window.isSecureContext) {
+ warnUser("An error has occured when trying to access the webcam or microphone. The reason is not known.");
+ } else if ((iOS) || (iPad)) {
+ warnUser("iOS version 13.4 and up is generally recommended; older than iOS 11 is not supported.");
+ } else {
+ warnUser("Error acessing camera or microphone.\n\nThe website may be loaded in an insecure context.\n\nPlease see: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia");
+ }
+ }
+ }
+}
+
+
+function copyFunction(copyText, evt = false) {
+ if (evt){
+ if ("buttons" in evt) {
+ if (evt.buttons !== 0){return;}
+ } else if ("which" in evt){
+ if (evt.which !== 0){return;}
+ }
+ popupMessage(evt);
+ evt.preventDefault();
+ evt.stopPropagation();
+ }
+
+ try {
+ copyText.select();
+ copyText.setSelectionRange(0, 99999);
+ document.execCommand("copy");
+ } catch (e) {
+ var dummy = document.createElement('input');
+ document.body.appendChild(dummy);
+ dummy.value = copyText;
+ dummy.select();
+ document.execCommand('copy');
+ document.body.removeChild(dummy);
+ }
+ return false;
+}
+
+function generateQRPage() {
+ var pass = sanitizePassword(getById("invite_password").value);
+ if (pass.length) {
+ return generateHash(pass + session.salt, 4).then(function(hash) {
+ generateQRPageCallback(hash);
+ }).catch(errorlog);
+ } else {
+ generateQRPageCallback("");
+ }
+}
+
+async function updateLinkWelcome(arg, input) {
+ if (input.checked){
+ var response = await promptAlt("Enter the message you'd like the guests to see");
+ response = encodeURIComponent(response);
+ var param = input.dataset.param.split("=")[0];
+ input.dataset.param = param + "=" + response;
+ }
+ updateLink(arg, input);
+}
+
+
+function updateLinkWebP(arg, input) {
+ if (input.checked){
+ if (!((getById("director_block_" + arg).dataset.raw.includes("&broadcast")) || (getById("director_block_" + arg).dataset.raw.includes("?broadcast")))){
+ getById("broadcastSlider").checked=true;
+ updateLink(arg, getById("broadcastSlider"));
+ }
+ }
+ updateLink(arg, input);
+}
+
+var soloLinkAppended = "";
+function updateLink(arg, input, solo=false) {
+ log("updateLink");
+ log(input.dataset.param);
+ if (input.checked) {
+
+ getById("director_block_" + arg).dataset.raw += input.dataset.param;
+
+ if (solo){
+ soloLinkAppended += input.dataset.param;
+ }
+
+ var string = getById("director_block_" + arg).dataset.raw;
+
+ if ((arg==1) && (getById("obfuscate_director_" + arg).checked)) {
+ string = obfuscateURL(string);
+ }
+
+ getById("director_block_" + arg).href = string;
+ getById("director_block_" + arg).innerText = string;
+ } else {
+ var string = getById("director_block_" + arg).dataset.raw + "&";
+ string = string.replace(input.dataset.param + "&", "&");
+ string = string.substring(0, string.length - 1);
+ getById("director_block_" + arg).dataset.raw = string;
+
+ if (solo){
+ soloLinkAppended += "&";
+ soloLinkAppended = soloLinkAppended.replace(input.dataset.param + "&", "&");
+ soloLinkAppended = soloLinkAppended.substring(0, soloLinkAppended.length - 1);
+ }
+
+ if ((arg==1) && (getById("obfuscate_director_" + arg).checked)) {
+ string = obfuscateURL(string);
+ }
+
+ // document.querySelector("soloLink")
+ // soloLink
+
+ getById("director_block_" + arg).href = string;
+ getById("director_block_" + arg).innerText = string;
+ }
+ if (solo){
+ document.querySelectorAll("a.soloLink").forEach(ele=>{
+ try {
+ var href = ele.getAttribute("value") + soloLinkAppended;
+ ele.href = href;
+ ele.innerHTML = href;
+ } catch(e){
+ errorlog(e);
+ }
+ });
+ }
+
+ saveDirectorSettings();
+}
+
+function changeURL(changeURL){
+ window.focus();
+ if (session.consent){
+ hangup();
+ window.location.href = changeURL;
+ } else {
+ confirmAlt(miscTranslations["director-redirect-1"]+changeURL+miscTranslations["director-redirect-2"]).then(res=>{
+ if (res){
+ hangup();
+ window.location.href = changeURL;
+ };
+ });
+ }
+}
+
+function updateLinkInverse(arg, input) {
+ log("updateLinkInverse");
+ log(input.dataset.param);
+ if (!(input.checked)) {
+
+ getById("director_block_" + arg).dataset.raw += input.dataset.param;
+
+ var string = getById("director_block_" + arg).dataset.raw;
+
+ if ((arg==1) && (getById("obfuscate_director_" + arg).checked)) {
+ string = obfuscateURL(string);
+ }
+
+
+ getById("director_block_" + arg).href = string;
+ getById("director_block_" + arg).innerText = string;
+ } else {
+ var string = getById("director_block_" + arg).dataset.raw + "&";
+ string = string.replace(input.dataset.param + "&", "&");
+ string = string.substring(0, string.length - 1);
+ getById("director_block_" + arg).dataset.raw = string;
+
+ if ((arg==1) && (getById("obfuscate_director_" + arg).checked)) {
+ string = obfuscateURL(string);
+ }
+
+ getById("director_block_" + arg).href = string;
+ getById("director_block_" + arg).innerText = string;
+ }
+}
+
+function updateLinkScene(arg, input) {
+ log("updateLinkScene");
+ var string = getById("director_block_" + arg).dataset.raw;
+
+ if (input.checked) {
+ string = changeParam(string, "scene", "0");
+ } else {
+ string = changeParam(string, "scene", "1");
+ }
+ getById("director_block_" + arg).dataset.raw = string;
+
+ if ((arg==1) && (getById("obfuscate_director_" + arg).checked)) {
+ string = obfuscateURL(string);
+ }
+
+ getById("director_block_" + arg).href = string;
+ getById("director_block_" + arg).innerText = string;
+}
+
+function fullscreenPageToggle(state=null){
+ try {
+ if (!document.fullscreenElement) { // not currently full screen
+ if (state!==false){ // if state is false, we are already not full screen
+ if (document.documentElement.requestFullscreen){
+ document.documentElement.requestFullscreen();
+ } else if (document.documentElement.webkitRequestFullscreen){
+ document.documentElement.webkitRequestFullscreen();
+ }
+ }
+ } else if (document.exitFullscreen) {
+ if (!state){ // if toggle mode or state=false
+ document.exitFullscreen();
+ }
+ } else if (document.webkitExitFullscreen) {
+ if (!state){ // if toggle mode or state=false
+ document.webkitExitFullscreen();
+ }
+ }
+ //updateMixer(); // we will do this on the event for this instead
+ } catch(e){errorlog(e);}
+}
+
+function resetGen() {
+ getById("gencontent").style.display = "block";
+ getById("gencontent2").style.display = "none";
+ getById("gencontent2").className = ""; //container-inner
+ getById("gencontent").className = "container-inner"; //
+ getById("gencontent2").innerHTML = "";
+ getById("videoname4").focus();
+}
+
+function generateQRPageCallback(hash) {
+ try {
+ var title = getById("videoname4").value;
+ if (title.length) {
+ title = title.replace(/[\W]+/g, "_").replace(/_+/g, '_'); // but not what others might get. TODO: allow for non-alphanumeric characters; santitize, then URL encode instead,
+ title = "&label=" + title;
+ }
+ var sid = session.generateStreamID();
+
+ var viewstr = "";
+ var sendstr = "";
+
+ if (getById("invite_bitrate").checked) {
+ viewstr += "&bitrate=20000";
+ }
+ if (getById("invite_vp9").checked) {
+ viewstr += "&codec=vp9";
+ }
+ if (getById("invite_stereo").checked) {
+ viewstr += "&stereo";
+ sendstr += "&stereo";
+ }
+ if (getById("invite_automic").checked) {
+ sendstr += "&audiodevice=1";
+ }
+ if (getById("invite_automic").checked) {
+ sendstr += "&audiodevice=1";
+ }
+ if (getById("invite_effects").checked) {
+ sendstr += "&effects";
+ }
+
+ if (getById("invite_remotecontrol").checked) { //
+ var remote_gen_id = session.generateStreamID();
+ sendstr += "&remote=" + remote_gen_id; // security
+ viewstr += "&remote=" + remote_gen_id;
+ }
+
+ if (getById("invite_joinroom").value.trim().length) {
+ sendstr += "&ssid&room=" + getById("invite_joinroom").value.trim();
+ viewstr += "&solo&room=" + getById("invite_joinroom").value.trim();
+ }
+
+ if (getById("invite_password").value.trim().length) {
+ sendstr += "&hash=" + hash;
+ viewstr += "&password=" + sanitizePassword(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";
+ } else if (getById("invite_group_chat_type").value == 2) { // no view or audio
+ sendstr += "&view";
+ }
+ }
+
+ if (getById("invite_quality").value) {
+ if (getById("invite_quality").value == 0) {
+ sendstr += "&quality=0";
+ } else if (getById("invite_quality").value == 1) {
+ sendstr += "&quality=1";
+ } else if (getById("invite_quality").value == 2) {
+ sendstr += "&quality=2";
+ }
+ }
+
+ var wss = "";
+
+ if (session.customWSS && session.wssSetViaUrl){
+ if (session.customWSS!==true){
+ wss = "&pie="+session.customWSS;
+ } else {
+ wss = "&wss="+session.wss;
+ }
+ }
+
+ var hoststr = "";
+ if (getById("invite_hostlink").checked) {
+ hoststr = 'https://' + location.host + location.pathname + '?push=' + sid + "_hostlink" + "&view="+ sid + sendstr + "&bitrate=500" + title + wss;
+ sendstr = 'https://' + location.host + location.pathname + '?push=' + sid + "&view="+sid + "_hostlink" + sendstr + "&bitrate=1200" + title + wss;
+ } else {
+ sendstr = 'https://' + location.host + location.pathname + '?push=' + sid + sendstr + title + wss;
+ }
+
+ if (getById("invite_obfuscate").checked) {
+ sendstr = obfuscateURL(sendstr);
+ }
+
+ viewstr = 'https://' + location.host + location.pathname + '?view=' + sid + viewstr + title + wss;
+ getById("gencontent").style.display = "none";
+ getById("gencontent").className = ""; //
+ getById("gencontent2").style.display = "block";
+ getById("gencontent2").className = "container-inner";
+
+ getById("gencontent2").innerHTML = '