elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-11 21:58:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #722 from steveseguin/master

Browse Source 
beginnings of v16.3; merging master.
This commit is contained in:
Steve Seguin 2021-02-16 19:07:30 -05:00 committed by GitHub
commit e366bdfa4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 546 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

456
IFRAME.md
View File

@ -1,217 +1,303 @@
## OBS.Ninja - iFrame API documentation
## OBS.Ninja - iFrame API documentation
OBS.Ninja (OBSN) is offers here a simple and free solution to quickly enable real-time video streaming in their websites. OBSN wishes to make live video streaming development accessible to any developer, even novices, yet still remain flexible and powerful.
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.
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:
var iframe = document.createElement("iframe");
iframe.allow="autoplay;camera;microphone";
iframe.allowtransparency="false"
iframe.src = "https://obs.ninja/?webcam";
```js
const iframe = document.createElement("iframe");
iframe.allow = "autoplay;camera;microphone";
iframe.allowtransparency = "false";
iframe.src = "https://obs.ninja/?webcam";
```
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.
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
More community-contributed IFRAME examples can be found here: https://github.com/steveseguin/obsninja/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://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
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 OBS.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
Some of the more interesting ones primarily for iframe users might include:
- &webcam
- &screenshare
- &videodevice=1 or 0
- &audiodevice=1 or 0
- &autostart
- &chroma
- &transparency
-
As for API, allow for dynamic messaging, below are examples of the options available:
- &webcam
- &screenshare
- &videodevice=1 or 0
- &audiodevice=1 or 0
- &autostart
- &chroma
- &transparency
- As for API, allow for dynamic messaging, below are examples of the options available:
- Mute Speaker
- Mute Mic
- Disconnect
- Change Video Bitrate
- Reload the page
- Change the volume
- Request detailed connection stats
- Access the loudness level of the audio
- Send/Recieve a chat message to other connected guests
- Get notified when there is a video connection
- Mute Speaker
- Mute Mic
- Disconnect
- Change Video Bitrate
- Reload the page
- Change the volume
- Request detailed connection stats
- Access the loudness level of the audio
- Send/Recieve a chat message to other connected guests
- Get notified when there is a video connection
As for the actually details for methods and options available to dynamically control child 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:
```js
let button = document.createElement("button");
button.innerHTML = "Mute Speaker";
button.onclick = () => {
iframe.contentWindow.postMessage({
"mute": true
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Un-Mute Speaker";
button.onclick = () => {
iframe.contentWindow.postMessage({
"mute": false
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Toggle Speaker";
button.onclick = () => {
iframe.contentWindow.postMessage({
"mute": "toggle"
}, '*');
}
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Mute Mic";
button.onclick = () => {
iframe.contentWindow.postMessage({
"mic": false
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Un-Mute Mic";
button.onclick = () => {
iframe.contentWindow.postMessage({
"mic": true
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Toggle Mic";
button.onclick = () => {
iframe.contentWindow.postMessage({
"mic": "toggle"
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Disconnect";
button.onclick = () => {
iframe.contentWindow.postMessage({
"close": true
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Low Bitrate";
button.onclick = () => {
iframe.contentWindow.postMessage({
"bitrate": 30
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "High Bitrate";
button.onclick = () => {
iframe.contentWindow.postMessage({
"bitrate": 5000
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Default Bitrate";
button.onclick = () => {
iframe.contentWindow.postMessage({
"bitrate": -1
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Reload";
button.onclick = () => {
iframe.contentWindow.postMessage({
"reload": true
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "50% Volume";
button.onclick = () => {
iframe.contentWindow.postMessage({
"volume": 0.5
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "100% Volume";
button.onclick = () => {
iframe.contentWindow.postMessage({
"volume": 1.0
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Request Stats";
button.onclick = () => {
iframe.contentWindow.postMessage({
"getStats": true
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Request Loudness Levels";
button.onclick = () => {
iframe.contentWindow.postMessage({
"getLoudness": true
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Stop Sending Loudness Levels";
button.onclick = () => {
iframe.contentWindow.postMessage({
"getLoudness": false
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "Say Hello";
button.onclick = () => {
iframe.contentWindow.postMessage({
"sendChat": "Hello!"
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "previewWebcam()";
button.onclick = () => {
iframe.contentWindow.postMessage({
"function": "previewWebcam"
}, '*');
};
iframeContainer.appendChild(button);
button = document.createElement("button");
button.innerHTML = "CLOSE IFRAME";
button.onclick = () => {
iframeContainer.parentNode.removeChild(iframeContainer);
};
iframeContainer.appendChild(button);
// As for listening events, where the parent listens for responses or events from the OBSN child frame:
// ////////// LISTEN FOR EVENTS
const eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
const eventer = window[eventMethod];
const messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
if (e.source !== iframe.contentWindow) {
return
} // reject messages send from other iframes
if ("stats" in e.data) {
const outputWindow = document.createElement("div");
let out = `<br />total_inbound_connections:${
e.data.stats.total_inbound_connections
}`;
out += `<br />total_outbound_connections:${
e.data.stats.total_outbound_connections
}`;
for (const streamID in e.data.stats.inbound_stats) {
out += `<br /><br /><b>streamID:</b> ${streamID}<br />`;
out += printValues(e.data.stats.inbound_stats[streamID]);
}
outputWindow.innerHTML = out;
iframeContainer.appendChild(outputWindow);
}
if ("gotChat" in e.data) {
const outputWindow = document.createElement("div");
outputWindow.innerHTML = e.data.gotChat.msg;
outputWindow.style.border = "1px dotted black";
iframeContainer.appendChild(outputWindow);
}
if ("action" in e.data) {
const outputWindow = document.createElement("div");
outputWindow.innerHTML = `child-page-action: ${
e.data.action
}<br />`;
outputWindow.style.border = "1px dotted black";
iframeContainer.appendChild(outputWindow);
}
if ("loudness" in e.data) {
console.log(e.data);
if (document.getElementById("loudness")) {
outputWindow = document.getElementById("loudness");
} else {
const outputWindow = document.createElement("div");
outputWindow.style.border = "1px dotted black";
iframeContainer.appendChild(outputWindow);
outputWindow.id = "loudness";
}
outputWindow.innerHTML = "child-page-action: loudness<br />";
for (const key in e.data.loudness) {
outputWindow.innerHTML += `${key} Loudness: ${
e.data.loudness[key]
}\n`;
}
outputWindow.style.border = "1px black";
}
});
```
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:
var button = document.createElement("button");
button.innerHTML = "Mute Speaker";
button.onclick = function(){iframe.contentWindow.postMessage({"mute":true}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Un-Mute Speaker";
button.onclick = function(){iframe.contentWindow.postMessage({"mute":false}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Toggle Speaker";
button.onclick = function(){iframe.contentWindow.postMessage({"mute":"toggle"}, '*');}
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Mute Mic";
button.onclick = function(){iframe.contentWindow.postMessage({"mic":false}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Un-Mute Mic";
button.onclick = function(){iframe.contentWindow.postMessage({"mic":true}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Toggle Mic";
button.onclick = function(){iframe.contentWindow.postMessage({"mic":"toggle"}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Disconnect";
button.onclick = function(){iframe.contentWindow.postMessage({"close":true}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Low Bitrate";
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":30}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "High Bitrate";
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":5000}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Default Bitrate";
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":-1}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Reload";
button.onclick = function(){iframe.contentWindow.postMessage({"reload":true}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "50% Volume";
button.onclick = function(){iframe.contentWindow.postMessage({"volume":0.5}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "100% Volume";
button.onclick = function(){iframe.contentWindow.postMessage({"volume":1.0}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Request Stats";
button.onclick = function(){iframe.contentWindow.postMessage({"getStats":true}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Request Loudness Levels";
button.onclick = function(){iframe.contentWindow.postMessage({"getLoudness":true}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Stop Sending Loudness Levels";
button.onclick = function(){iframe.contentWindow.postMessage({"getLoudness":false}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Say Hello";
button.onclick = function(){iframe.contentWindow.postMessage({"sendChat":"Hello!"}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "previewWebcam()";
button.onclick = function(){iframe.contentWindow.postMessage({"function":"previewWebcam"}, '*');};
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "CLOSE IFRAME";
button.onclick = function(){iframeContainer.parentNode.removeChild(iframeContainer);};
iframeContainer.appendChild(button);
As for listening events, where the parent listens for responses or events from the OBSN child frame:
//////////// LISTEN FOR EVENTS
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
if ("stats" in e.data){
var outputWindow = document.createElement("div");
var out = "<br />total_inbound_connections:"+e.data.stats.total_inbound_connections;
out += "<br />total_outbound_connections:"+e.data.stats.total_outbound_connections;
for (var streamID in e.data.stats.inbound_stats){
out += "<br /><br /><b>streamID:</b> "+streamID+"<br />";
out += printValues(e.data.stats.inbound_stats[streamID]);
}
outputWindow.innerHTML = out;
iframeContainer.appendChild(outputWindow);
}
if ("gotChat" in e.data){
var outputWindow = document.createElement("div");
outputWindow.innerHTML = e.data.gotChat.msg;
outputWindow.style.border="1px dotted black";
iframeContainer.appendChild(outputWindow);
}
if ("action" in e.data){
var outputWindow = document.createElement("div");
outputWindow.innerHTML = "child-page-action: "+e.data.action+"<br />";
outputWindow.style.border="1px dotted black";
iframeContainer.appendChild(outputWindow);
}
if ("loudness" in e.data){
console.log(e.data);
if (document.getElementById("loudness")){
outputWindow = document.getElementById("loudness");
} else {
var outputWindow = document.createElement("div");
outputWindow.style.border="1px dotted black";
iframeContainer.appendChild(outputWindow);
outputWindow.id = "loudness";
}
outputWindow.innerHTML = "child-page-action: loudness<br />";
for (var key in e.data.loudness) {
outputWindow.innerHTML += key + " Loudness: " + e.data.loudness[key] + "\n";
}
outputWindow.style.border="1px black";
}
});
This OBS.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.
-steve

2
LICENCE.md
View File

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

8
README.md
View File

@ -20,10 +20,10 @@ And Here is another video series touching on some more advanced settings: https:
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.
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 for the project in this repo, which contains added information on how to use the software.
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.
## 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.
@ -33,7 +33,7 @@ Directions on how to deploy a TURN server are listed in the turnserver.md file.
## Server side / API software?
Since OBS.Ninja uses peer-2-peer technology, video connections are made directly between viewer and publisher in 90% of cases. Hosting a TURN server yourself may help improve performance, but less than 1% of users will see any benefit of this. Details on how to deploy a TURN server are provided. For those capable of hosting their own TURN server, that would be appreciated if possible, as TURN servers are the only real cost incurred by OBS.Ninja at present. (other than time, of course)
Other than TURN servers, 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.
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.
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.
@ -63,7 +63,7 @@ https://steves.app/
A browser-based studio solution and simplified alternative to OBS, with built-in OBS.Ninja functionality. It is a server-based approach to group interactions and live production. Steve Seguin is affiliated with StageTEn, yet StageTEN is not affiliated with OBS.Ninja.
## Privacy
I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with OBS.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you. See: turnserver.md
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)
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.

9
devices.css
View File

@ -9,6 +9,7 @@ h1 {
padding:10px;
background-color:#457b9d;
color:white;
border-bottom: 2px solid #3b6a87;
}
.device {
@ -18,6 +19,9 @@ h1 {
font-size: 1rem;
padding: 10px;
position: relative;
user-select: none;
background: #d0d0d0;
border-radius: 4px;
}
.device.selected {
@ -55,12 +59,13 @@ h1 {
}
.notice {
background-color: orange;
background-color: #fff18c;
margin: 10px;
padding: 20px 20px;
font-weight: bold;
font-size: 1.2em;
text-align: center;
line-height: 1.4em;
}
.notice a {
@ -89,7 +94,7 @@ h1 {
left: 10%;
color: white;
overflow-wrap: anywhere;
background: #141926;
background: #2c3754;
padding: 20px;
box-shadow: 0px 0px 10px 5px #00000047;
border: 1px solid #333c52;

103
devices.html
View File

@ -22,7 +22,8 @@
<div class="notice">
Device IDs are bound to a combination of domain and browser. <br />If
you want to use electron-capture, open this URL on the electron-capture
app.
app. <br/>
Click device names to preset them. Select multiple audio inputs by clicking multiple devices.
</div>
<div class="notice">
Check for browser and camera capabilities <a href="/supports">here</a>.
@ -41,51 +42,56 @@
</div>
</div>
<div id="sharedDevices" style="display: none">
<span>Click to copy. Send this to your host:</span>
<span>Click to copy. Use this URL to preset audio/video devices.</span>
<span id="close" onclick="this.parentNode.style.display='none'">×</span>
<input id="devicesUrl" value="" />
</div>
<script>
var list = [];
var url = new URL(document.location.origin);
var audioInputDevices = [];
const list = [];
const url = new URL(document.location.origin);
const audioInputDevices = [];
function isAudioInput(value) {
return value.kind == "audioinput";
return value.kind === "audioinput";
}
function isAudioOutput(value) {
return value.kind == "audiooutput";
return value.kind === "audiooutput";
}
function isVideoInput(value) {
return value.kind == "videoinput";
return value.kind === "videoinput";
}
function sanitizeDeviceName(deviceName) {
return String(deviceName).toLowerCase().replace(/[\W]+/g, "_");
}
function addDevice(element) {
var info = element.getElementsByClassName("device-id")[0];
var type = info.dataset.deviceType;
const type = element.dataset.deviceType;
const device = sanitizeDeviceName(element.querySelector('span').innerText);
if (type == "audioinput") {
setAudioSearchParams(info);
if (type === "audioinput") {
setAudioSearchParams(element);
}
if (type == "videoinput") {
setVideoSearchParams(info);
if (type === "videoinput") {
setVideoSearchParams(element);
}
if (type == "audiooutput") {
if (type === "audiooutput") {
return;
}
/*
Allows for multiple audio devices to be selected
Will be output as a comma separated string to &ad
Allows for multiple audio devices to be selected
Will be output as a comma separated string to &ad
*/
function setAudioSearchParams(info) {
// Device was already selected
if (info.parentNode.className == "device selected") {
if (info.className === "device selected") {
// Remove device from list of selected devices
var index = audioInputDevices.indexOf(info.innerText);
const index = audioInputDevices.indexOf(device);
if (index !== -1) {
audioInputDevices.splice(index, 1);
}
@ -95,12 +101,13 @@
element.className = "device";
// If no audio devices remained, just remove the param completely
if (audioInputDevices.length == 0) {
if (audioInputDevices.length === 0) {
url.searchParams.delete("ad");
}
} else {
// Device is unselected
audioInputDevices.push(info.innerText);
audioInputDevices.push(device);
url.searchParams.set("ad", audioInputDevices.join(","));
element.className = "device selected";
}
@ -111,20 +118,27 @@
*/
function setVideoSearchParams(info) {
// Device was already selected
if (info.parentNode.className == "device selected") {
info.parentNode.className = "device";
if (info.className === "device selected") {
element.className = "device";
// Set the url param to the devices that are left
url.searchParams.set("vd", info.innerText);
url.searchParams.set("vd", device);
element.className = "device";
// If no devices remained, just remove the param completely
if (audioInputDevices.length == 0) {
if (audioInputDevices.length === 0) {
url.searchParams.delete("vd");
}
} else {
// Device is unselected
url.searchParams.set("vd", info.innerText);
try {
element.parentElement.querySelector('.device.selected').className = "device";
} catch (error) {
console.log("There was no video device already selected.");
}
url.searchParams.set("vd", device);
element.className = "device selected";
}
}
@ -139,40 +153,35 @@
}
function prettyPrint(json, element) {
var output = "<div class='prettyJson two-col'>";
var nestedObjs;
let output = "<div class='prettyJson two-col'>";
let nestedObjs;
Object.entries(json)
.sort()
.forEach(([key, value]) => {
output += "<div class='device' onclick='addDevice(this)'>";
output +=
"<span class='device-name'>" +
value.label +
"</span><span class='device-id' data-device-type='" +
value.kind +
"'>" +
value.deviceId +
"</span>";
output += "</div>";
output += `
<div class='device' onclick='addDevice(this)' data-device-type='${value.kind}'>
<span class='device-name'>${value.label}</span>
<span class='device-id'>
${value.deviceId}
</span>
</div>`;
});
output += "</div>";
document.getElementById(element).innerHTML = output;
}
document.getElementById("devicesUrl").onclick = function () {
this.select();
document.getElementById("devicesUrl").onclick = (e) => {
e.target.select();
document.execCommand("copy");
};
navigator.mediaDevices
.enumerateDevices()
.then(function (devices) {
devices.forEach(function (device) {
.then((devices) => {
devices.forEach((device) => {
console.log(
device.kind + ": " + device.label + " id = " + device.deviceId
`${device.kind}: ${device.label} id = ${device.deviceId}`
);
list.push(device);
});
@ -180,8 +189,8 @@
prettyPrint(devices.filter(isAudioOutput), "audioOutputs");
prettyPrint(devices.filter(isVideoInput), "videoInputs");
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
.catch((err) => {
console.log(`${err.name}: ${err.message}`);
});
</script>
</body>

1
index.html
View File

@ -146,6 +146,7 @@
<i class="toggleSize my-float las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
</div>
<span id="miniPerformer" style="pointer-events: auto;" class="advanced"></span>
<span id="rooms" style="padding-top:3px;pointer-events: auto;color:#fff;"></span>
<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cancel the Director's Video/Audio" onclick="hangup2()" class="advanced float" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Disconnect Direcotor's cam">
<i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>

2
install.md
View File

@ -92,5 +92,7 @@ A newly deployed code deployment should work without any changes to the index.ht
My suggestion? Limit changes to images and perhaps the translation files (maybe add a new one); these are good starting points. If making changes to the main.css style sheet or index.html file, you should be mostly okay too, since these files are designed to be changed; I try to keep that in mind when updating the code at least. Making changes to other files though is strongly not recommend and in some cases discouraged. If you find a bug or need to make a change to other files, it might be best to make a Pull Request with the desired changes and hope it gets adopted into the main codebase.
Final note: I haven't provided here instructions on deploying STUN services or a private handshake server; the OBS.Ninja handshake server code is currently not provided, but access to it as a service is freely accessible for private deployments.
Regards,
Steve

19
main.css
View File

@ -501,10 +501,23 @@ button.glyphicon-button.active.focus {
padding: 0px;
}
}
/* Node selector to prioritise this selector above .float */
button.btnArmTransferRoom{
width:auto;
margin-left: 2px;
height:38px;
border-radius: 15px;
}
button.btnArmTransferRoom i{
margin-right:3px;
}
button.btnArmTransferRoom:hover{
background-color: var(--green-accent);
}
button.btnArmTransferRoom.selected{
background-color: var(--red-accent);
}
@media only screen and (max-height: 540px){
#subControlButtons {

40
main.js
View File

@ -707,6 +707,11 @@ if (urlParams.has('director') || urlParams.has('dir')) {
filename = false;
}
if (urlParams.has('rooms')) {
session.rooms = urlParams.get('rooms').split(",").map(function(e) {
return sanitizeRoomName(e);
});
}
if (urlParams.has('showdirector')) {
session.showDirector = true;
@ -3723,6 +3728,7 @@ function lowerhand() {
var previousRoom = "";
var stillNeedRoom = true;
var transferCancelled = false;
var armedTransfer = true;
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.
@ -3746,6 +3752,8 @@ function directMigrate(ele, event) { // everyone in the room will hangup this gu
stillNeedRoom = false;
log("Migrate queued");
return;
} else if (armedTransfer){
migrateRoom = sanitizeRoomName(previousRoom);
} else {
var migrateRoom = prompt("Transfer guests to room:\n\n(Please note rooms must share the same password)", previousRoom);
stillNeedRoom = true;
@ -4997,6 +5005,18 @@ function createRoomCallback(passAdd, passAdd2) {
getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" style="width:auto;margin-left:5px;height:45px;border-radius: 38px;" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable"> enable director`s microphone or video</span></button>';
}
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 += '<button id="roomselect_' + r + '" onmousedown="event.preventDefault(); event.stopPropagation();" class="float btnArmTransferRoom" onclick="handleRoomSelect(\'' + r + '\');" title="Arm/disarm transfer to this room" tabindex="' + tabindex + '"><i class="las la-paper-plane"></i>' + r + '</button>';
tabindex++;
});
}
} else {
getById("miniPerformer").style.display = "none";
getById("controlButtons").style.display = "none";
@ -5016,6 +5036,26 @@ function createRoomCallback(passAdd, passAdd2) {
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 = undefined;
armedTransfer = false;
stillNeedRoom = true;
} else {
previousRoom = room;
stillNeedRoom = false;
armedTransfer = true;
getById("roomselect_" + room).classList.add('selected');
}
}
function requestAudioSettings(ele) {
var UUID = ele.dataset.UUID;

224
translations/nl.json
View File

@ -1,90 +1,99 @@
{
"titles": {
"toggle-the-chat": "Toggle the Chat",
"mute-the-speaker": "Mute the Speaker",
"mute-the-mic": "Mute the Mic",
"disable-the-camera": "Disable the Camera",
"settings": "Settings",
"hangup-the-call": "Hangup the Call",
"show-help-info": "Show Help Info",
"language-options": "Language Options",
"tip-hold-ctrl-command-to-select-multiple": "tip: Hold CTRL (command) to select Multiple",
"ideal-for-1080p60-gaming-if-your-computer-and-upload-are-up-for-it": "Ideal for 1080p60 gaming, if your computer and upload are up for it",
"better-video-compression-and-quality-at-the-cost-of-increased-cpu-encoding-load": "Better video compression and quality at the cost of increased CPU encoding load",
"disable-digital-audio-effects-and-increase-audio-bitrate": "Disable digital audio-effects and increase audio bitrate",
"the-guest-will-not-have-a-choice-over-audio-options": "The guest will not have a choice over audio-options",
"the-guest-will-only-be-able-to-select-their-webcam-as-an-option": "The guest will only be able to select their webcam as an option",
"hold-ctrl-and-the-mouse-wheel-to-zoom-in-and-out-remotely-of-compatible-video-streams": "Hold CTRL and the mouse wheel to zoom in and out remotely of compatible video streams",
"add-a-password-to-make-the-stream-inaccessible-to-those-without-the-password": "Add a password to make the stream inaccessible to those without the password",
"add-the-guest-to-a-group-chat-room-it-will-be-created-automatically-if-needed-": "Add the guest to a group-chat room; it will be created automatically if needed.",
"customize-the-room-settings-for-this-guest": "Customize the room settings for this guest",
"hold-ctrl-or-cmd-to-select-multiple-files": "Hold CTRL (or CMD) to select multiple files",
"enter-an-https-url": "Enter an HTTPS URL",
"toggle-the-chat": "Chat aan/uit",
"mute-the-speaker": "Demp de sSreker",
"mute-the-mic": "Demp de Mic",
"disable-the-camera": "Camera uitzetten",
"settings": "Instellingen",
"hangup-the-call": "Gesprek ophangen",
"show-help-info": "Geef Help weer",
"language-options": "Taal opties",
"tip-hold-ctrl-command-to-select-multiple": "tip: Houd CTRL (command) vast om meerdere te selecteren",
"ideal-for-1080p60-gaming-if-your-computer-and-upload-are-up-for-it": "Ideaal voor 1080p60 game streaming, als de pc krachtig genoeg is",
"better-video-compression-and-quality-at-the-cost-of-increased-cpu-encoding-load": "Betere videocompressie en kwaliteit ten koste van verhoogde CPU encodering belasting",
"disable-digital-audio-effects-and-increase-audio-bitrate": "Schakel digitale audio effecten uit en verhoogt audio bitrate",
"the-guest-will-not-have-a-choice-over-audio-options": "Gasten kunnen audio opties niet wijzigen",
"the-guest-will-only-be-able-to-select-their-webcam-as-an-option": "Gast kan alleen een webcam selecteren",
"hold-ctrl-and-the-mouse-wheel-to-zoom-in-and-out-remotely-of-compatible-video-streams": "Scroll in en uit door CTRL vast te houden en te scrollen met d emuis (wanneer mogelijk)",
"add-a-password-to-make-the-stream-inaccessible-to-those-without-the-password": "Voeg een wachtwoord toe en eis deze voor toegang",
"add-the-guest-to-a-group-chat-room-it-will-be-created-automatically-if-needed-": "Gast toevoegen aan groepschat.(Word automatisch gemaakt)",
"customize-the-room-settings-for-this-guest": "Geef (kamer) instellingen op voor deze gast",
"hold-ctrl-or-cmd-to-select-multiple-files": "Meerdere selecteren? CTRL vasthouden tijdens selecteren",
"enter-an-https-url": "Voer een HTTPS URL in",
"lucy-g": "Lucy G",
"flaticon": "Flaticon",
"creative-commons-by-3-0": "Creative Commons BY 3.0",
"gregor-cresnar": "Gregor Cresnar",
"add-this-video-to-any-remote-scene-1-": "Add this Video to any remote '&scene=1'",
"forward-user-to-another-room-they-can-always-return-": "Forward user to another room. They can always return.",
"start-recording-this-stream-experimental-views": "Start Recording this stream. *experimental*' views",
"force-the-user-to-disconnect-they-can-always-reconnect-": "Force the user to Disconnect. They can always reconnect.",
"forward-user-to-another-room-they-can-always-return-": "Stuur gast door naar andere room, kan terugkeren.",
"start-recording-this-stream-experimental-views": "Stream opnemen starten. *experimenteel*' views",
"force-the-user-to-disconnect-they-can-always-reconnect-": "Forceer einde verbinding, kan wel opnieuw verbinden.",
"change-this-audio-s-volume-in-all-remote-scene-views": "Change this Audio's volume in all remote '&scene' views",
"remotely-mute-this-audio-in-all-remote-scene-views": "Remotely Mute this Audio in all remote '&scene' views",
"disable-video-preview": "Disable Video Preview",
"low-quality-preview": "Low-Quality Preview",
"high-quality-preview": "High-Quality Preview",
"send-direct-message": "Send Direct Message",
"advanced-settings-and-remote-control": "Advanced Settings and Remote Control",
"toggle-voice-chat-with-this-guest": "Toggle Voice Chat with this Guest",
"join-by-room-name-here": "Enter a room name to quick join",
"join-room": "Join room",
"share-a-screen-with-others": "Share a Screen with others",
"alert-the-host-you-want-to-speak": "Alert the host you want to speak",
"record-your-stream-to-disk": "Record your stream to disk",
"cancel-the-director-s-video-audio": "Cancel the Director's Video/Audio",
"submit-any-error-logs": "Submit any error logs",
"add-group-chat-to-obs": "Add Group Chat to OBS",
"for-large-group-rooms-this-option-can-reduce-the-load-on-remote-guests-substantially": "For large group rooms, this option can reduce the load on remote guests substantially",
"which-video-codec-would-you-want-used-by-default-": "Which video codec would you want used by default?",
"you-ll-enter-as-the-room-s-director": "You'll enter as the room's director",
"add-your-camera-to-obs": "Add your Camera to OBS",
"remote-screenshare-into-obs": "Remote Screenshare into OBS",
"create-reusable-invite": "Create Reusable Invite",
"disable-video-preview": "Schakel Video Preview uit",
"low-quality-preview": "Lage kwaliteit Preview",
"high-quality-preview": "Hoge kwaliteit Preview",
"send-direct-message": "Stuur een Direct Message",
"advanced-settings-and-remote-control": "Geavanceerde instellingen en Remote Conntrol",
"toggle-voice-chat-with-this-guest": "Schakel Voice chat aan/uit met deze gast",
"join-by-room-name-here": "Voer een naam in voor snelle toegang",
"join-room": "Ga de kamer in",
"share-a-screen-with-others": "Deel je scherm met anderen",
"alert-the-host-you-want-to-speak": "Geef de director een seintje",
"record-your-stream-to-disk": "Streamopname naar lokale opslag",
"cancel-the-director-s-video-audio": "Annuleer de Director zijn Video/Audio",
"submit-any-error-logs": "Verzend foutmeldingslog",
"add-group-chat-to-obs": "Voeg een groepschat toe aan OBS",
"for-large-group-rooms-this-option-can-reduce-the-load-on-remote-guests-substantially": "Bij grotere groepen kan deze optie voor een lagere belasting aan gast zijde zorgen",
"which-video-codec-would-you-want-used-by-default-": "Welke video codec wil je standaard gebruiken?",
"you-ll-enter-as-the-room-s-director": "Je gaat de kamer binnen als Director",
"add-your-camera-to-obs": "Voeg je camera aan OBS toe",
"remote-screenshare-into-obs": "Schermdelen naar OBS",
"create-reusable-invite": "creëer herbruikbaare link",
"encode-the-url-so-that-it-s-harder-for-a-guest-to-modify-the-settings-": "Encode the URL so that it's harder for a guest to modify the settings.",
"more-options": "More Options",
"youtube-video-demoing-how-to-do-this": "Youtube Video demoing how to do this",
"invite-a-guest-or-camera-source-to-publish-into-the-group-room": "Invite a guest or camera source to publish into the group room",
"if-enabled-the-invited-guest-will-not-be-able-to-see-or-hear-anyone-in-the-room-": "If enabled, the invited guest will not be able to see or hear anyone in the room.",
"use-this-link-in-the-obs-browser-source-to-capture-the-video-or-audio": "Use this link in the OBS Browser Source to capture the video or audio",
"if-enabled-you-must-manually-add-a-video-to-a-scene-for-it-to-appear-": "If enabled, you must manually add a video to a scene for it to appear.",
"disables-echo-cancellation-and-improves-audio-quality": "Disables Echo Cancellation and improves audio quality",
"audio-only-sources-are-visually-hidden-from-scenes": "Audio-only sources are visually hidden from scenes",
"guest-will-be-prompted-to-enter-a-display-name": "Guest will be prompted to enter a Display Name",
"display-names-will-be-shown-in-the-bottom-left-corner-of-videos": "Display Names will be shown in the bottom-left corner of videos",
"request-1080p60-from-the-guest-instead-of-720p60-if-possible": "Request 1080p60 from the Guest instead of 720p60, if possible",
"the-default-microphone-will-be-pre-selected-for-the-guest": "The default microphone will be pre-selected for the guest",
"the-default-camera-device-will-selected-automatically": "The default camera device will selected automatically",
"the-guest-won-t-have-access-to-changing-camera-settings-or-screenshare": "The guest won't have access to changing camera settings or screenshare",
"the-guest-will-not-see-their-own-self-preview-after-joining": "The guest will not see their own self-preview after joining",
"guests-will-have-an-option-to-poke-the-director-by-pressing-a-button": "Guests will have an option to poke the Director by pressing a button",
"add-an-audio-compressor-to-the-guest-s-microphone": "Add an audio compressor to the guest's microphone",
"add-an-equalizer-to-the-guest-s-microphone-that-the-director-can-control": "Add an Equalizer to the guest's microphone that the director can control",
"the-guest-can-only-see-the-director-s-video-if-provided": "The guest can only see the Director's video, if provided",
"the-guest-s-microphone-will-be-muted-on-joining-they-can-unmute-themselves-": "The guest's microphone will be muted on joining. They can unmute themselves.",
"have-the-guest-join-muted-so-only-the-director-can-unmute-the-guest-": "Have the guest join muted, so only the director can Unmute the guest.",
"make-the-invite-url-encoded-so-parameters-are-harder-to-tinker-with-by-guests": "Make the invite URL encoded, so parameters are harder to tinker with by guests",
"move-the-user-to-another-room-controlled-by-another-director": "Move the user to another room, controlled by another director",
"send-a-direct-message-to-this-user-": "Send a Direct Message to this user.",
"remotely-change-the-volume-of-this-guest": "Remotely change the volume of this guest",
"mute-this-guest-everywhere": "Mute this guest everywhere",
"start-recording-this-remote-stream-to-this-local-drive-experimental-": "Start Recording this remote stream to this local drive. *experimental*'",
"the-remote-guest-will-record-their-local-stream-to-their-local-drive-experimental-": "The Remote Guest will record their local stream to their local drive. *experimental*",
"shift-this-video-down-in-order": "Shift this Video Down in Order",
"current-index-order-of-this-video": "Current Index Order of this Video",
"shift-this-video-up-in-order": "Shift this Video Up in Order",
"remote-audio-settings": "Remote Audio Settings",
"advanced-video-settings": "Advanced Video Settings",
"activate-or-reload-this-video-device-": "Activate or Reload this video device."
"more-options": "Meer opties",
"youtube-video-demoing-how-to-do-this": "Youtube video voorbeelden, hoe dit te doen!",
"invite-a-guest-or-camera-source-to-publish-into-the-group-room": "Vraag een gast zijn beeld te publiceren in de kamer",
"if-enabled-the-invited-guest-will-not-be-able-to-see-or-hear-anyone-in-the-room-": "Wanneer deze optie aan staat kan de gast niemand zien of horen",
"use-this-link-in-the-obs-browser-source-to-capture-the-video-or-audio": "Gebruik deze link als OBS Browser source om video/audio binnen te halen",
"if-enabled-you-must-manually-add-a-video-to-a-scene-for-it-to-appear-": "Wanneer deze optie aanstaat moet je video handmatig toevoegen aan een scene om hem te zien.",
"disables-echo-cancellation-and-improves-audio-quality": "Schakelt Echo Cancellation uit en verbetert audio kwaliteit",
"audio-only-sources-are-visually-hidden-from-scenes": "Bronnen met alleen audio niet laten zien in de scene",
"guest-will-be-prompted-to-enter-a-display-name": "Vraag gasten om een naam om weer te geven",
"display-names-will-be-shown-in-the-bottom-left-corner-of-videos": "Namen van gasten komen links onder in de hoek van de video",
"request-1080p60-from-the-guest-instead-of-720p60-if-possible": "Vraag om 1080p60 i.p.v. 720p60, wanneer mogelijk",
"the-default-microphone-will-be-pre-selected-for-the-guest": "Voor deze gast standaard microfoon selecteren vooraf",
"the-default-camera-device-will-selected-automatically": "Standaard camera word automatisch geselecteerd",
"the-guest-won-t-have-access-to-changing-camera-settings-or-screenshare": "De gast kan hierdoor niet wisselen tussen camera en scherm delen",
"the-guest-will-not-see-their-own-self-preview-after-joining": "Hierdoor zit de gast zichzelf niet nadat deze het gesprek is binnengekomen",
"guests-will-have-an-option-to-poke-the-director-by-pressing-a-button": "Gasten krijgen een optie de director een verzoek tot aandacht te sturen",
"add-an-audio-compressor-to-the-guest-s-microphone": "Voeg een audio compressor toe aan de gast zijn microfoon",
"add-an-equalizer-to-the-guest-s-microphone-that-the-director-can-control": "Voeg een audio equalizer toe aan gast, onder controle van director",
"the-guest-can-only-see-the-director-s-video-if-provided": "Gat kan alleen de director zien,wanneer deze aanwezig is",
"the-guest-s-microphone-will-be-muted-on-joining-they-can-unmute-themselves-": "Microfoon van gast standaard uit, kunnen zichzelf wel aanzetten",
"have-the-guest-join-muted-so-only-the-director-can-unmute-the-guest-": "Microfoon van gast standaard uit, alleen director kan deze aanzetten",
"make-the-invite-url-encoded-so-parameters-are-harder-to-tinker-with-by-guests": "Encodeer de invitatie URL. Om aanpassingen door gast moeilijker te maken",
"move-the-user-to-another-room-controlled-by-another-director": "Verplaats gast naar andere room. Beheerd door een andere director",
"send-a-direct-message-to-this-user-": "Stuur een Direct Message naar deze gast",
"remotely-change-the-volume-of-this-guest": "Op afstand veranderen volume gast",
"mute-this-guest-everywhere": "Deze gast niet meer hoorbaar maken overal",
"start-recording-this-remote-stream-to-this-local-drive-experimental-": "Start opname van de remote audio/video stream op de lokale drive *experimental*'",
"the-remote-guest-will-record-their-local-stream-to-their-local-drive-experimental-": "Zet opname aan bij gasten zelf op lokale schijf van gast *experimental*",
"shift-this-video-down-in-order": "Schuif deze video lager in orde",
"current-index-order-of-this-video": "Huidige index plek van deze video",
"shift-this-video-up-in-order": "Schuif deze video hoger in orde",
"remote-audio-settings": "Audio instellingen op afstand",
"advanced-video-settings": "Geavanceerde instellingen van video",
"activate-or-reload-this-video-device-": "Activeer of herlaadt deze video bron.",
"create-a-seconary-stream": "Create a Seconary Stream",
"the-director-will-be-visible-in-scenes-as-if-a-performer-themselves-": "The director will be visible in scenes, as if a performer themselves.",
"useful-if-you-want-to-perform-and-direct-at-the-same-time": "Useful if you want to perform and direct at the same time",
"start-streaming": "start streaming",
"if-disabled-the-invited-guest-will-not-be-able-to-see-or-hear-anyone-in-the-room-": "If disabled, the invited guest will not be able to see or hear anyone in the room.",
"if-disabled-you-must-manually-add-a-video-to-a-scene-for-it-to-appear-": "If disabled, you must manually add a video to a scene for it to appear.",
"toggle-solo-voice-chat": "Toggle Solo Voice Chat",
"toggle-the-remote-guest-s-speaker-output": "Toggle the remote guest's speaker output",
"toggle-the-remote-guest-s-display-output": "Toggle the remote guest's display output"
},
"innerHTML": {
"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS Ninja",
@ -92,7 +101,7 @@
"you-are-in-the-control-center": "U bent in het kamer beheers centrum",
"joining-room": "U neemt deel aan de kamer",
"add-group-chat": "Voeg Groepsgesprek toe",
"rooms-allow-for": "Kamers maken eenvoudige groepsgespreken en geavanceerd beheer van meerdere streams tegelijk mogelijk.",
"rooms-allow-for": "Kamers maken eenvoudige groepsgespreken en geavanceerd beheer van meerdere streams tegelijkertijd mogelijk.",
"room-name": "Kamer Naam",
"password-input-field": "Password",
"enter-the-rooms-control": "Ga de Kamer's Controle Centrum in",
@ -100,7 +109,7 @@
"added-notes": "\n\t\t\t\t<u><i>Notities:</i></u>\n\t\t\t\t<li>Iedereen kan de kamer binnenkomen als ze de naam kennen, dus hou hem uniek</li>\n\t\t\t\t<li>Meer dan vier (4) mensen in een kamer is niet aan te raden vanwege prestatie redenen, maar is afhankelijk van uw hardware.</li>\n\t\t\t\t<li>Bij iOS apparaten is de video alleen zichtbaar voor de regiseur. Dit is een hardware beperking.</li>\n\t\t\t\t<li>De \"Opname\" optie is nieuw en is experimenteel.</li>\n\t\t\t\t<li>U moet een video stroom \"Toevoegen\" aan de \"Groeps Scene\" om het hier te tonen.</li>\n\t\t\t\t<li>Er is een nieuwe \"uitgebreid volledig scherm\" knop toegevoegd aan het Gasten scherm.</li>\n\t\t\t\t",
"back": "Terug",
"add-your-camera": "Voeg je Camera toe",
"ask-for-permissions": "Allow Access to Camera/Microphone",
"ask-for-permissions": "Geef toestemming voor gebruik Camera/Microfoon",
"waiting-for-camera": "Wachten op het Laden van de Camera",
"video-source": "Video bron",
"max-resolution": "Max Resolutie",
@ -154,39 +163,42 @@
"more-than-four-can-join": "These four guest slots are just for demonstration. More than four guests can actually join a room.",
"welcome-to-obs-ninja-chat": "\n\t\t\t\t\tWelcome to OBS.Ninja! You can send text messages directly to connected peers from here.\n\t\t\t\t",
"names-and-labels-coming-soon": "\n\t\t\t\t\tNames identifying connected peers will be a feature in an upcoming release.\n\t\t\t\t",
"send-chat": "Send",
"available-languages": "Available Languages:",
"add-more-here": "Add More Here!",
"waiting-for-camera-to-load": "waiting-for-camera-to-load",
"send-chat": "Verstuur",
"available-languages": "Beschikbare talen:",
"add-more-here": "Voer hier meer toe!",
"waiting-for-camera-to-load": "Wachten tot camera geladen is",
"start": "START",
"share-your-mic": "Share your microphone",
"share-your-camera": "Share your Camera",
"share-your-screen": "Share your Screen",
"join-room-with-mic": "Join room with Microphone",
"share-screen-with-room": "Share-screen with Room",
"join-room-with-camera": "Join room with Camera",
"click-start-to-join": "Click Start to Join",
"guests-only-see-director": "Guests can only see the Director's Video",
"default-codec-select": "Preferred Video Codec: ",
"obfuscate_url": "Obfuscate the Invite URL",
"share-your-mic": "Deel je microfoon",
"share-your-camera": "Deel je camera",
"share-your-screen": "Deel je scherm",
"join-room-with-mic": "Ga de kamer binnen met microfoon",
"share-screen-with-room": "Deel je scherm met de kamer",
"join-room-with-camera": "Ga de kamer binnen met camera",
"click-start-to-join": "Druk op start om erin te gaan",
"guests-only-see-director": "Gasten kunnen alleen de directors video zien",
"default-codec-select": "Geprefereerde Video Codec: ",
"obfuscate_url": "Verhul originele uitnodigingslink",
"hide-the-links": " LINKS (GUEST INVITES &amp; SCENES)",
"invite-users-to-join": "Guests can use the link to join the group room",
"this-is-obs-browser-source-link": "Use in OBS or other studio software to capture the group video mix",
"invite-users-to-join": "Gasten kunnen de link gebruiken om de kamer binnen te gaan",
"this-is-obs-browser-source-link": "Gebruik deze link om de video mix te gebruiken in OBS of andere studio software",
"mute-scene": "mute in scene",
"mute-guest": "mute guest",
"record-local": " Record Local",
"record-remote": " Record Remote",
"record-local": " Lokale opname",
"record-remote": " Opname remote",
"order-down": "<i class=\"las la-minus\"></i>",
"order-up": "<i class=\"las la-plus\"></i>",
"advanced-audio-settings": "<i class=\"las la-sliders-h\"></i> Audio Settings"
"advanced-audio-settings": "<i class=\"las la-sliders-h\"></i> Audio instellingen",
"scenes-can-see-director": "Director will also be a performer",
"toggle-remote-speaker": "Deafen Guest",
"toggle-remote-display": "Blind Guest"
},
"placeholders": {
"join-by-room-name-here": "Join by Room Name here",
"enter-a-room-name-here": "Enter a Room Name here",
"optional-room-password-here": "Optional room password here",
"give-this-media-source-a-name-optional-": "Give this media source a name (optional)",
"add-an-optional-password": "Add an optional password",
"enter-room-name-here": "Enter Room name here",
"enter-chat-message-to-send-here": "Enter chat message to send here"
"join-by-room-name-here": "Ga binnen met een kamer naam",
"enter-a-room-name-here": "Geef hier een kamer naam op",
"optional-room-password-here": "Optionele wachtwoord voor kamer",
"give-this-media-source-a-name-optional-": "Geef de media bron een naam(optioneel)",
"add-an-optional-password": "Voeg optioneel wachtwoord toe",
"enter-room-name-here": "Geef hier de kamer naam op",
"enter-chat-message-to-send-here": "Type hier om te chatten"
}
}
}

25
turnserver.md
View File

@ -5,22 +5,25 @@
This install script and config file was used with a standard virtual machine server loaded with Ubuntu 20. GCP/AWS servers might need slightly different settings.
```
sudo apt-get update
sudo apt-get update # update package lists
sudo apt-get install coturn -y
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get install certbot -y
sudo apt-get install coturn -y # install coturn, the implementation of the TURN server
sudo add-apt-repository ppa:certbot/certbot # Add the certbot repository
sudo apt-get install certbot -y # Install certbot required for the HTTPS certificate
sudo vi /etc/default/coturn
sudo vi /etc/default/coturn # open the coturn configuration in Vim (you can also use nano or any other editor)
```
...and we uncomment the line:
```
#TURNSERVER_ENABLED=1
```
….leaving it like this:
```
TURNSERVER_ENABLED=1
```
Next make sure you have the DNS pointing to your IP address for this next step (ipv4, and ipv6 if possible). You will need to validate that in the next step.
```
sudo certbot certonly --standalone
sudo certbot certonly --standalone # only generate the HTTPS certificate without actually changing any configs
sudo apt install net-tools
```
note: If you run into error 701 issues with your TURN server, check that the coturn service has access to your new SSL certificates:
@ -37,10 +40,10 @@ sudo systemctl daemon-reload
Next, we are going to open up some ports... just in case they are blocked by default. Which exactly? well, these are default ports. TCP may not be needed?
```
sudo ufw allow 3478/tcp
sudo ufw allow 3478/udp
sudo ufw allow 443/tcp
sudo ufw allow 443/udp
sudo ufw allow 3478/tcp # The default coturn TCP port
sudo ufw allow 3478/udp # The default coturn UDP port
sudo ufw allow 443/tcp # The HTTPS TCP port
sudo ufw allow 443/udp # The HTTPS UDP port
sudo ufw allow 49152:65535/tcp
sudo ufw allow 49152:65535/udp
```

16
turnserver3.conf Normal file
View File

@ -0,0 +1,16 @@
# Another TURNSERVER conf file; this one is a basic UDP-based setup. Port 3478, no SSL/TLS, and basic username/password.
listening-port=3478
alt-listening-port=0
fingerprint
no-stun
lt-cred-mech
user=obsninja:somepasswordwhere
stale-nonce=600
realm=turn-eu2.obs.ninja
server-name=turn-eu2.obs.ninja
no-multicast-peers
stale-nonce=600
dh2066
#verbose
no-stdout-log