- Video and stream quality check -
-
-
-
-
-
-
-
-
-
- Bitrate (kbps)
- 0 - -
-
-
- Buffer delay (ms)
- 0 - -
-
- Live Video Inputs (Cloudflare feature) can be set up to forward any input to another input. This can be a RTMP(S) service such as YouTube, Twitch or Facebook Live.
-In theory you could publish from VDO.Ninja WHIP output to Cloudstream, and then to your RTMP destinations, like Youtube.
- -Instead of using Meshcast to broadcast video from director to guest, or guest to scene, you can use Cloudflare instead.
-Meshcast, or any compatible WHIP/WHEP service, can help reduce CPU and network load of guests by offloading distribution to a server, compared to using the peer-to-peer default of VDO.Ninja -
Cloudflare will automatically record incoming videos, allowing you (in theory) to have a backup of each guest in a room.
-This offers a redundant backup for your recordings, but also makes it easier to do higher quality VODs edits after the live ends.
-Lots input and output options, although if you're here, you're probably interested in the WHIP/WHEP mainly.
-VDO.Ninja is compatible with WHEP and WHIP!
-There's a free tier, which is more than enough for testing.
-Or pay $1 per $1000 minutes of streaming.
-When used with VDO.Ninja, video is published to Cloudflare via WHIP, and the WHEP playback URL is distributed to viewers. Unless otherwise specified, viewers will use the WHEP URL as the source of media from the publisher, instead of using the normal peer-to-peer mode. This has the effect of reducing the CPU and network load when sharing media with multiple videos, as instead of distributing media via peer-to-peer, the media is distributed via a server. This approach does have some downsides also, so its not normally advisable unless desired or needed.
-The reason we need a special generated URL parameter is because Cloudflare requires user accounts, unlike Meshcast. While you can generate WHIP URLs within your Cloudflare dashboard, and use them on VDO.Ninja links using &whipout, you'd need to create one per guest. Instead here, we're using our Cloudflare credentials to automatically create unique WHIP ingest URLs on demand for each guest, so you can get away with one-invite link for all your guests.
-Since it's not advisable to share your Cloudflare credentials, particularly with random guests, this page will encrypt your credentials into URL-friendly parameter. Only the VDO.Ninja servers knows the decryption key, which limits what guest can do with the encrypted key. You can delete or restrict the credentials provided to VDO.Ninja from your Cloudflare dashboard, allowing you to limit or revoke any trust provided to VDO.Ninja.
-The Cloudflare account ID can be found on the right-hand side of the Workers & Pages (Overview) page, or it can be found on the right-lower side of any of your Website (domain) overview pages.
-- As for the API token, you'll need to create it, with limited permissions. -
Yes, the code is open-sourced and it can be self-hosted, however please be aware there is limited support for those self-hosting.
-Please refer to the privacy policy, although the short answer is no. I can't say the same for Cloudflare, so please refer to their terms of service. -
Live Video Inputs (Cloudflare feature) can be set up to forward any input to another input. This can be a RTMP(S) service such as YouTube, Twitch or Facebook Live.
+In theory you could publish from VDO.Ninja WHIP output to Cloudstream, and then to your RTMP destinations, like Youtube.
+ +Instead of using Meshcast to broadcast video from director to guest, or guest to scene, you can use Cloudflare instead.
+Meshcast, or any compatible WHIP/WHEP service, can help reduce CPU and network load of guests by offloading distribution to a server, compared to using the peer-to-peer default of VDO.Ninja +
Cloudflare will automatically record incoming videos, allowing you (in theory) to have a backup of each guest in a room.
+This offers a redundant backup for your recordings, but also makes it easier to do higher quality VODs edits after the live ends.
+Lots input and output options, although if you're here, you're probably interested in the WHIP/WHEP mainly.
+VDO.Ninja is compatible with WHEP and WHIP!
+There's a free tier, which is more than enough for testing.
+Or pay $1 per $1000 minutes of streaming.
+When used with VDO.Ninja, video is published to Cloudflare via WHIP, and the WHEP playback URL is distributed to viewers. Unless otherwise specified, viewers will use the WHEP URL as the source of media from the publisher, instead of using the normal peer-to-peer mode. This has the effect of reducing the CPU and network load when sharing media with multiple videos, as instead of distributing media via peer-to-peer, the media is distributed via a server. This approach does have some downsides also, so its not normally advisable unless desired or needed.
+The reason we need a special generated URL parameter is because Cloudflare requires user accounts, unlike Meshcast. While you can generate WHIP URLs within your Cloudflare dashboard, and use them on VDO.Ninja links using &whipout, you'd need to create one per guest. Instead here, we're using our Cloudflare credentials to automatically create unique WHIP ingest URLs on demand for each guest, so you can get away with one-invite link for all your guests.
+Since it's not advisable to share your Cloudflare credentials, particularly with random guests, this page will encrypt your credentials into URL-friendly parameter. Only the VDO.Ninja servers knows the decryption key, which limits what guest can do with the encrypted key. You can delete or restrict the credentials provided to VDO.Ninja from your Cloudflare dashboard, allowing you to limit or revoke any trust provided to VDO.Ninja.
+The Cloudflare account ID can be found on the right-hand side of the Workers & Pages (Overview) page, or it can be found on the right-lower side of any of your Website (domain) overview pages.
++ As for the API token, you'll need to create it, with limited permissions. +
Yes, the code is open-sourced and it can be self-hosted, however please be aware there is limited support for those self-hosting.
+Please refer to the privacy policy, although the short answer is no. I can't say the same for Cloudflare, so please refer to their terms of service. +
- 
+
-
+
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/twitch.html b/app/static/examples/twitch.html
similarity index 96%
rename from examples/twitch.html
rename to app/static/examples/twitch.html
index aba3f54..2574018 100644
--- a/examples/twitch.html
+++ b/app/static/examples/twitch.html
@@ -1,358 +1,358 @@
-
-
- This app lets you publish video/audio via VDO.Ninja at the same time as viewing your Twitch chat.
If you have feature requests or suggestions, please report them at https://discord.vdo.ninja in the #feature-request channel.
-
+ This app lets you publish video/audio via VDO.Ninja at the same time as viewing your Twitch chat.
If you have feature requests or suggestions, please report them at https://discord.vdo.ninja in the #feature-request channel.
+
+ 
\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(err) {
- warnUser(err);
- }, 1,err);
- }
- }
- warnlog("trying to list webcam again");
-
- if (callback){
- callback(miconly);
- }
-
- });
- }, timeoutStart, gumID, constraint, timerBasicCheck, callback, miconly);
- } catch (e) {
- console.warn(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");
- }
- }
- }
- return null
-}
-
-
-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(getTranslation("director-redirect-1")+changeURL+getTranslation("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);}
-}
-
-session.pipWindow = false;
-async function PictureInPicturePageToggle(state=null){
- try {
- if (typeof documentPictureInPicture === "undefined"){return;}
- if (session.pipWindow){
- getById("testtone").parentNode.insertBefore(session.pipWindow.document.getElementById("gridlayout"), getById("testtone"));
- session.pipWindow.close();
- session.pipWindow = null;
- updateMixer();
- getById("PictureInPicturePage").classList.remove("green");
- } else{
- session.pipWindow = await documentPictureInPicture.requestWindow({width:564,height:346}); // 360 + 30px for the window header
-
- session.pipWindow.addEventListener("pagehide", (event) => {
- if (session.pipWindow){
- getById("testtone").parentNode.insertBefore(session.pipWindow.document.getElementById("gridlayout"), getById("testtone"));
- session.pipWindow.close();
- session.pipWindow = null;
- updateMixer();
- getById("PictureInPicturePage").classList.remove("green");
- }
- });
-
- session.pipWindow.document.body.className = "main";
- session.pipWindow.document.head.innerHTML = 'relay server
"; + } + else if ((key == 'remote_candidateType') && (value == "relay")) { + value = "💸relay server
"; + } + else if ((key == 'local_candidateType') && (value == "host")){ + value = "host
"; + } + else if ((key == 'remote_candidateType') && (value == "host")) { + value = "host
"; + } + else if ((key == 'local_candidateType') && (value == "srflx")){ + value = "srflx
"; + } + else if ((key == 'remote_candidateType') && (value == "srflx")) { + value = "srflx
"; + } + menu.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(err) {
+ warnUser(err);
+ }, 1,err);
+ }
+ }
+ warnlog("trying to list webcam again");
+
+ if (callback){
+ callback(miconly);
+ }
+
+ });
+ }, timeoutStart, gumID, constraint, timerBasicCheck, callback, miconly);
+ } catch (e) {
+ console.warn(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");
+ }
+ }
+ }
+ return null
+}
+
+
+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(getTranslation("director-redirect-1")+changeURL+getTranslation("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);}
+}
+
+session.pipWindow = false;
+async function PictureInPicturePageToggle(state=null){
+ try {
+ if (typeof documentPictureInPicture === "undefined"){return;}
+ if (session.pipWindow){
+ getById("testtone").parentNode.insertBefore(session.pipWindow.document.getElementById("gridlayout"), getById("testtone"));
+ session.pipWindow.close();
+ session.pipWindow = null;
+ updateMixer();
+ getById("PictureInPicturePage").classList.remove("green");
+ } else{
+ session.pipWindow = await documentPictureInPicture.requestWindow({width:564,height:346}); // 360 + 30px for the window header
+
+ session.pipWindow.addEventListener("pagehide", (event) => {
+ if (session.pipWindow){
+ getById("testtone").parentNode.insertBefore(session.pipWindow.document.getElementById("gridlayout"), getById("testtone"));
+ session.pipWindow.close();
+ session.pipWindow = null;
+ updateMixer();
+ getById("PictureInPicturePage").classList.remove("green");
+ }
+ });
+
+ session.pipWindow.document.body.className = "main";
+ session.pipWindow.document.head.innerHTML = '
";
+ button.title = "Show all active videos togethers";
+ button.style.visibility = "visible";
+ } else if ((mpl>1) || session.fullscreenButton){ // with session.fullscreenButton we hide the actuall full screen button, so this replaces it
+ button.innerHTML = "
";
+ button.title = "Enlarge video and increase its clarity";
+ button.style.visibility = "visible";
+ } else {
+ button.style.visibility = "hidden";
+ }
+ button.classList.add("fullwindowButton");
+
+ 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%";},1,button);
+
+ };
+ button.onmousemove = function(event){
+ if (session.disableMouseEvents){return;}
+ button.style.display="block";
+ container.style.backgroundColor= "#4444";
+ button.style.opacity="100%";
+
+ };
+ container.onmousemove = function(event){
+ if (session.disableMouseEvents){return;}
+ button.style.display="block";
+ container.style.backgroundColor= "#4444";
+ button.style.opacity="100%";
+ };
+ container.onmouseenter = function(event){
+ if (session.disableMouseEvents){return;}
+ button.style.display="block";
+ container.style.backgroundColor= "#4444";
+ setTimeout(function(button){button.style.opacity="100%";},1,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 && !session.infocusForceMode){
+
+ 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 = "