";
button.title = "Show all active videos togethers";
} else if (mpl>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="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";
container.appendChild(button);
if (vid.id == "videosource"){
button.onclick = function(event){
if (session.infocus === true){
session.infocus = false;
} else {
session.infocus = true;
}
setTimeout(()=>updateMixer(),10);
};
} 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);
}
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") && session.minipreview && soloVideo==true){
var button = container.querySelector('[data-button]');
if (!button){
button = document.createElement("div");
}
button.id = "button_videosource";
button.dataset.button = true;
if (soloVideo){
button.innerHTML = ""; added=true; } } if (!added){ getById("connectUsers").style.display = "none"; } else { getById("connectUsers").style.display = "block"; } } catch(e){} updateUserListActive=false; },200); } function resetCanvas(){ log("resetCanvas();"); session.streamSrc.getVideoTracks().forEach((track) => { session.canvasSource.width = track.getSettings().width || 1280; session.canvasSource.height = track.getSettings().height || 720; }); } var LaunchTFWorkerCallback = false; function TFLiteWorker(){ if (session.tfliteModule==false){ LaunchTFWorkerCallback=true return; } if (TFLITELOADING){LaunchTFWorkerCallback=true;return;} LaunchTFWorkerCallback=false; log("TFLiteWorker() called"); if (!session.tfliteModule.img){ 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.webp"; session.tfliteModule.img.ready = false; } if (session.tfliteModule.looping){return;} 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.nowTime = new Date().getTime(); session.tfliteModule.offsetTime = 0; function process(){ clearTimeout(session.tfliteModule.timeout); if (!(session.effects=="3" || session.effects=="4" || session.effects=="5")){ session.tfliteModule.looping=false; return; } if (session.tfliteModule.activelyProcessing){return;} session.tfliteModule.activelyProcessing=true; if (session.mobile){ if (screenWidth !== window.innerWidth){ screenWidth = window.innerWidth; setTimeout(function(){ updateRenderOutpipe(); },200); session.tfliteModule.looping=false; session.tfliteModule.activelyProcessing=false; return; } } 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'; if (session.mobile && (session.roomid !==false)){ session.canvasCtx.filter = 'none'; } else { 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 if (session.effectValue){ session.canvasCtx.filter = 'blur('+(parseInt(session.effectValue)*2)+'px)'; } else { session.canvasCtx.filter = 'blur(4px)'; // Does not work on Safari } session.canvasCtx.drawImage(session.canvasSource, 0, 0); } else { session.tfliteModule.activelyProcessing=false; session.tfliteModule.looping=false; return; } } catch (e){ errorlog(e); session.tfliteModule.activelyProcessing=false; session.tfliteModule.looping=false; return; } session.tfliteModule.lastTime = session.tfliteModule.nowTime; session.tfliteModule.nowTime = new Date().getTime(); var time = 33 - (session.tfliteModule.nowTime - session.tfliteModule.lastTime); time = time + session.tfliteModule.offsetTime; session.tfliteModule.activelyProcessing=false; if (time <= 0 ){ session.tfliteModule.timeout = setTimeout(function(){process();},0); session.tfliteModule.offsetTime = 0; } else { session.tfliteModule.timeout = setTimeout(function(){process();},time); session.tfliteModule.offsetTime = time; } } function processiOS(){ clearTimeout(session.tfliteModule.timeout); if (!(session.effects=="3" || session.effects=="4" || session.effects=="5")){ session.tfliteModule.looping=false; return; } if (session.tfliteModule.activelyProcessing){return;} session.tfliteModule.activelyProcessing=true; if (screenWidth !== window.innerWidth){ screenWidth = window.innerWidth; setTimeout(function(){ updateRenderOutpipe(); },200); session.tfliteModule.looping=false; session.tfliteModule.activelyProcessing=false; return; } try{ segmentationMaskCtx.drawImage( session.canvasSource, 0, 0, session.canvasSource.width, session.canvasSource.height, 0, 0, segmentationWidth, segmentationHeight ) var 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 - (255 * personExp) / (backgroundExp + personExp); // softmax } segmentationMaskCtx.putImageData(segmentationMask, 0, 0); session.canvasCtx.globalCompositeOperation = 'copy'; session.canvasCtx.drawImage(session.canvasSource, 0, 0); session.canvasCtx.globalCompositeOperation = 'destination-out'; session.canvasCtx.drawImage( segmentationMaskCanvas, 0, 0, segmentationWidth, segmentationHeight, 0, 0, session.canvasSource.width, session.canvasSource.height ); session.canvasCtx.globalCompositeOperation = 'destination-over'; if (session.effects=="4"){ // greenscreen session.canvasCtx.fillStyle = "#0F0"; session.canvasCtx.fillRect(0, 0, session.canvas.width, session.canvas.height); } else if (session.effects=="5"){ 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 const width = canvasBG.width; const height = canvasBG.height; ctxBG.drawImage(session.canvasSource, 0, 0, width, height); imageData = ctxBG.getImageData(0, 0, width, height); const { data } = imageData; // THE BELOW BLUR CODE polyfil is by David Enke // MIT License: Copyright (c) 2019 // https://github.com/steveseguin/context-filter-polyfill/blob/master/src/filters/blur.filter.ts const wm = width - 1; const hm = height - 1; const rad1 = amount + 1; const r = []; const g = []; const b = []; //const a = []; const vmin = []; const vmax = []; let iterations = 3; // 1 - 3 let p, p1, p2; while (iterations-- > 0) { let yw = 0; let yi = 0; for (let y = 0; y < height; y++) { let rsum = data[yw] * rad1; let gsum = data[yw + 1] * rad1; let bsum = data[yw + 2] * rad1; for (let i = 1; i <= amount; i++) { p = yw + (((i > wm ? wm : i)) << 2); rsum += data[p++]; gsum += data[p++]; bsum += data[p++]; } for (let x = 0; x < width; x++) { r[yi] = rsum; g[yi] = gsum; b[yi] = bsum; if (y === 0) { vmin[x] = ((p = x + rad1) < wm ? p : wm) << 2; vmax[x] = ((p = x - amount) > 0 ? p << 2 : 0); } p1 = yw + vmin[x]; p2 = yw + vmax[x]; rsum += data[p1++] - data[p2++]; gsum += data[p1++] - data[p2++]; bsum += data[p1++] - data[p2++]; yi++; } yw += (width << 2); } for (let x = 0; x < width; x++) { let yp = x; let rsum = r[yp] * rad1; let gsum = g[yp] * rad1; let bsum = b[yp] * rad1; for (let i = 1; i <= amount; i++) { yp += (i > hm ? 0 : width); rsum += r[yp]; gsum += g[yp]; bsum += b[yp]; } yi = x << 2; for (let y = 0; y < height; y++) { data[yi] = ((rsum * mulSum) >>> shgSum); data[yi + 1] = ((gsum * mulSum) >>> shgSum); data[yi + 2] = ((bsum * mulSum) >>> shgSum); if (x === 0) { vmin[y] = ((p = y + rad1) < hm ? p : hm) * width; vmax[y] = ((p = y - amount) > 0 ? p * width : 0); } p1 = x + vmin[y]; p2 = x + vmax[y]; rsum += r[p1] - r[p2]; gsum += g[p1] - g[p2]; bsum += b[p1] - b[p2]; yi += width << 2; } } } ////////////// END OF BLUR CODE - MIT LICENCED. ctxBG.putImageData(imageData, 0, 0); session.canvasCtx.drawImage(canvasBG, 0, 0, width, height, 0, 0, session.canvas.width, session.canvas.height); } else { session.tfliteModule.activelyProcessing=false; session.tfliteModule.looping=false; return; } } catch (e){ session.tfliteModule.activelyProcessing=false; session.tfliteModule.looping=false; errorlog(e); return; } session.tfliteModule.lastTime = session.tfliteModule.nowTime; session.tfliteModule.nowTime = new Date().getTime(); var time = 33 - (session.tfliteModule.nowTime - session.tfliteModule.lastTime); time = time + session.tfliteModule.offsetTime; session.tfliteModule.activelyProcessing=false; if (time <= 0 ){ session.tfliteModule.timeout = setTimeout(function(){processiOS();},0); session.tfliteModule.offsetTime = 0; } else { session.tfliteModule.timeout = setTimeout(function(){processiOS();},time); session.tfliteModule.offsetTime = time; } } session.tfliteModule.looping=true; var screenWidth = window.innerWidth; if (iOS || iPad || SafariVersion){ var canvasBG = document.createElement("canvas"); var ctxBG = canvasBG.getContext("2d", {alpha: false}); var amount = 1.0; var mulTable = [1, 57, 41, 21, 203, 34, 97, 73, 227, 91, 149, 62, 105, 45, 39, 137, 241, 107, 3, 173, 39, 71, 65, 238, 219, 101, 187, 87, 81, 151, 141, 133, 249, 117, 221, 209, 197, 187, 177, 169, 5, 153, 73, 139, 133, 127, 243, 233, 223, 107, 103, 99, 191, 23, 177, 171, 165, 159, 77, 149, 9, 139, 135, 131, 253, 245, 119, 231, 224, 109, 211, 103, 25, 195, 189, 23, 45, 175, 171, 83, 81, 79, 155, 151, 147, 9, 141, 137, 67, 131, 129, 251, 123, 30, 235, 115, 113, 221, 217, 53, 13, 51, 50, 49, 193, 189, 185, 91, 179, 175, 43, 169, 83, 163, 5, 79, 155, 19, 75, 147, 145, 143, 35, 69, 17, 67, 33, 65, 255, 251, 247, 243, 239, 59, 29, 229, 113, 111, 219, 27, 213, 105, 207, 51, 201, 199, 49, 193, 191, 47, 93, 183, 181, 179, 11, 87, 43, 85, 167, 165, 163, 161, 159, 157, 155, 77, 19, 75, 37, 73, 145, 143, 141, 35, 138, 137, 135, 67, 33, 131, 129, 255, 63, 250, 247, 61, 121, 239, 237, 117, 29, 229, 227, 225, 111, 55, 109, 216, 213, 211, 209, 207, 205, 203, 201, 199, 197, 195, 193, 48, 190, 47, 93, 185, 183, 181, 179, 178, 176, 175, 173, 171, 85, 21, 167, 165, 41, 163, 161, 5, 79, 157, 78, 154, 153, 19, 75, 149, 74, 147, 73, 144, 143, 71, 141, 140, 139, 137, 17, 135, 134, 133, 66, 131, 65, 129, 1]; var mulSum = mulTable[amount]; var shgTable = [0, 9, 10, 10, 14, 12, 14, 14, 16, 15, 16, 15, 16, 15, 15, 17, 18, 17, 12, 18, 16, 17, 17, 19, 19, 18, 19, 18, 18, 19, 19, 19, 20, 19, 20, 20, 20, 20, 20, 20, 15, 20, 19, 20, 20, 20, 21, 21, 21, 20, 20, 20, 21, 18, 21, 21, 21, 21, 20, 21, 17, 21, 21, 21, 22, 22, 21, 22, 22, 21, 22, 21, 19, 22, 22, 19, 20, 22, 22, 21, 21, 21, 22, 22, 22, 18, 22, 22, 21, 22, 22, 23, 22, 20, 23, 22, 22, 23, 23, 21, 19, 21, 21, 21, 23, 23, 23, 22, 23, 23, 21, 23, 22, 23, 18, 22, 23, 20, 22, 23, 23, 23, 21, 22, 20, 22, 21, 22, 24, 24, 24, 24, 24, 22, 21, 24, 23, 23, 24, 21, 24, 23, 24, 22, 24, 24, 22, 24, 24, 22, 23, 24, 24, 24, 20, 23, 22, 23, 24, 24, 24, 24, 24, 24, 24, 23, 21, 23, 22, 23, 24, 24, 24, 22, 24, 24, 24, 23, 22, 24, 24, 25, 23, 25, 25, 23, 24, 25, 25, 24, 22, 25, 25, 25, 24, 23, 24, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 23, 25, 23, 24, 25, 25, 25, 25, 25, 25, 25, 25, 25, 24, 22, 25, 25, 23, 25, 25, 20, 24, 25, 24, 25, 25, 22, 24, 25, 24, 25, 24, 25, 25, 24, 25, 25, 25, 25, 22, 25, 25, 25, 24, 25, 24, 25, 18]; var shgSum = shgTable[amount]; log("session.canvas: "+session.canvas.width+"x"+session.canvas.height); canvasBG.width = parseInt(session.canvas.width/12);; canvasBG.height = parseInt(session.canvas.height/12);; ctxBG.width = canvasBG.width; ctxBG.height = canvasBG.height; processiOS(); } else { process(); } } function mainMeshMask() { if ((session.TFJSModel === null) || (session.TFJSModel === true)){ 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 process(){ if (session.TFJSModel.activelyProcessing){return;} session.TFJSModel.activelyProcessing = true; clearTimeout(session.TFJSModel.timeout); if (session.effects!="6"){ //session.TFJSModel.looping=false; session.TFJSModel.activelyProcessing = false; return; } const predictions = await session.TFJSModel.estimateFaces({ input: session.canvasSource }); var output = []; 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++) { var [x,y,z] = keypoints[i]; x=parseInt(x); y=parseInt(y); z=parseInt(z); if (session.pushEffectsData){ output.push(x); output.push(y); } session.canvasCtx.fillStyle = heatMapColorforValue((z+40)/60); session.canvasCtx.fillRect(x, y, 5, 5); } } } if (session.pushEffectsData){ //output = FastIntegerCompression.compress(output); //log(output); if (isIFrame){ parent.postMessage({ "effectsData": output, "eID": session.pushEffectsData }, "*"); } else { for (var i in session.pcs){ if (!session.pcs[i].sendChannel.bufferedAmount){ // don't overload things. session.sendMessage({"effectsData": output, "eID":session.effects},i); } } } } if (document.hidden) { session.TFJSModel.lastTime = session.TFJSModel.nowTime || new Date().getTime(); session.TFJSModel.nowTime = new Date().getTime(); var time = 33 - (session.TFJSModel.nowTime - session.TFJSModel.lastTime); if (time <= 0 ){ session.TFJSModel.timeout = setTimeout(function(){process();},0); } else { session.TFJSModel.timeout = setTimeout(function(){process();},time); } session.TFJSModel.activelyProcessing = false; } else { session.TFJSModel.timeout = setTimeout(function(){process();},33); session.TFJSModel.activelyProcessing = false; window.requestAnimationFrame(process); } } process(); } var faceAlignment=false;; function drawFace() { if (faceAlignment!==false){return;} faceAlignment = (function() { if (!(session.canvasSource && session.canvasSource.srcObject.getVideoTracks().length)){ setTimeout(function(){drawFace();},1000);// TODO: this needs a way to prevent the function loading twice return; } var timers = {}; timers.activelyProcessing=false; timers.activelyProcessingDraw = false; 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 zoom = 30; var lastFace = {}; var yoffset = 0; lastFace.x = vid.videoWidth / 2; lastFace.y = vid.videoHeight / 2; lastFace.w = vid.videoWidth; lastFace.h = vid.videoHeight; canvas.height = vid.videoHeight; canvas.width = vid.videoWidth; canvas_tmp.height = vid.videoHeight; canvas_tmp.width = vid.videoWidth; var image = new Image(); function processImg(){ try { errorlog("Go to Detector"); faceDetector.detect(this).then(faces => { if (faces.length === 0) { log("NO FACES"); } else { log("faces!"); for (let face of faces) { lastFace.x = face.boundingBox.x; lastFace.y = face.boundingBox.y; lastFace.w = face.boundingBox.width; lastFace.h = face.boundingBox.height; } } setTimeout(function(){draw();},0); }).catch((e) => { console.error("Boo, Face Detection failed: " + e); }); if (document.hidden){ timers.lastTime = timers.nowTime || new Date().getTime(); timers.nowTime = new Date().getTime(); var time = 33 - (timers.nowTime - timers.lastTime); timers.activelyProcessing = false; if (time <= 0 ){ timers.timeout = setTimeout(function(){detect();},0); } else { timers.timeout = setTimeout(function(){detect();},time); } } else { timers.timeout = setTimeout(function(){detect();},33); timers.activelyProcessing = false; window.requestAnimationFrame(detect); } }catch(e){errorlog(e);} } function detect(){ if (session.effects !== "1"){return;} if (timers.activelyProcessing){return;} clearTimeout(timers.timeout); timers.activelyProcessing = true; if (!vid.videoWidth){ timers.timeout = setTimeout(function(){detect();},300); timers.activelyProcessing = false; return } ctx_tmp.drawImage(vid, 0, 0, vid.videoWidth, vid.videoHeight); image.onload = processImg; image.src = canvas_tmp.toDataURL(); } function draw() { if (session.effects !== "1"){return;} if (timers.activelyProcessingDraw){return;} clearTimeout(timers.timeoutDraw); timers.activelyProcessingDraw = true; if (!vid.videoWidth){ timers.timeoutDraw = setTimeout(function(){draw();},1000); timers.activelyProcessingDraw = false; //console.log(vid.videoWidth); return } canvas.height = vid.videoHeight; canvas.width = vid.videoWidth; try { ctx.drawImage(vid, parseInt(lastFace.x), parseInt(lastFace.y), parseInt(lastFace.w), parseInt(lastFace.h), 0, 0, vid.videoWidth, vid.videoHeight); }catch(e){} if (document.hidden){ timers.lastTimeDraw = timers.nowTimeDraw || new Date().getTime(); timers.nowTimeDraw = new Date().getTime(); var time = 33 - (timers.nowTimeDraw - timers.lastTimeDraw); if (time <= 0 ){ timers.timeoutDraw = setTimeout(function(){draw();},0); } else { timers.timeoutDraw = setTimeout(function(){draw();},time); } timers.activelyProcessingDraw = false; } else { timers.timeoutDraw = setTimeout(function(){draw();},33); timers.activelyProcessingDraw = false; window.requestAnimationFrame(draw); } } if (window.FaceDetector == undefined) { //console.error('Face Detection not supported'); var faceDetector = false; } else { var faceDetector = new FaceDetector(); setTimeout(function(){detect();},10); setTimeout(function(){draw();},10); } })(); } //////// END CANVAS EFFECTS /////////////////// function getNativeOutputResolution(){ var tracks = session.videoElement.srcObject.getVideoTracks(); if (tracks.length && tracks[0].getSettings){ return tracks[0].getSettings(); } else { return false; } } function remoteStats(msg, UUID){ 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+="
retransmitted_kbps: "+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 , "streamID": session.rpcs[UUID].streamID}, "*"); } } function processStats(UUID){ // for (pc in session.pcs){session.pcs[pc].getStats().then(function(stats) {stats.forEach(stat=>{if (stat.id.includes("RTCIce")){console.log(stat)}})})}; if (!session.rpcs || !(UUID in session.rpcs)){ return; } try { if (session.rpcs[UUID].videoElement.paused){ log("trying to play"); session.rpcs[UUID].videoElement.play().then(_ => { log("playing 8"); session.firstPlayTriggered=true; }).catch(warnlog); } } catch (e){}; if (session.rpcs[UUID].mc){ processMeshcastStats(UUID); } try { session.rpcs[UUID].getStats().then(function(stats){ if (!(UUID in session.rpcs)){return;} setTimeout(processStats, session.statsInterval, UUID); if (!session.rpcs[UUID].stats['Peer-to-Peer Connection']){ session.rpcs[UUID].stats['Peer-to-Peer Connection'] = {}; } stats.forEach(stat=>{ if ((stat.type == "candidate-pair") && (stat.nominated==true)){ session.rpcs[UUID].stats['Peer-to-Peer Connection']._local_ice_id = stat.localCandidateId; session.rpcs[UUID].stats['Peer-to-Peer Connection']._remote_ice_id = stat.remoteCandidateId; session.rpcs[UUID].stats['Peer-to-Peer Connection'].Round_Trip_Time_ms = stat.currentRoundTripTime*1000; } else if ((stat.type=="track") && (stat.remoteSource==true)){ if (stat.id in session.rpcs[UUID].stats){ session.rpcs[UUID].stats[stat.id]._trackID = stat.trackIdentifier; session.rpcs[UUID].stats[stat.id].Buffer_Delay_in_ms = parseInt(1000*(parseFloat(stat.jitterBufferDelay) - session.rpcs[UUID].stats[stat.id]._jitter_delay)/(parseInt(stat.jitterBufferEmittedCount) - session.rpcs[UUID].stats[stat.id]._jitter_count)) || 0; session.rpcs[UUID].stats[stat.id]._jitter_delay = parseFloat(stat.jitterBufferDelay) || 0; session.rpcs[UUID].stats[stat.id]._jitter_count = parseInt(stat.jitterBufferEmittedCount) || 0; if ("frameWidth" in stat){ if ("frameHeight" in stat){ session.rpcs[UUID].stats[stat.id].Resolution = stat.frameWidth+" x "+stat.frameHeight; session.rpcs[UUID].stats[stat.id]._frameWidth = stat.frameWidth; session.rpcs[UUID].stats[stat.id]._frameHeight = stat.frameHeight; } } } else { var media = {}; media._jitter_delay = parseFloat(stat.jitterBufferDelay) || 0; media._jitter_count = parseInt(stat.jitterBufferEmittedCount) || 0; media.Buffer_Delay_in_ms = 0; media._trackID = stat.trackIdentifier; session.rpcs[UUID].stats[stat.id] = media; } } else if (stat.type=="remote-candidate"){ if (("_remote_ice_id" in session.rpcs[UUID].stats['Peer-to-Peer Connection']) && (session.rpcs[UUID].stats['Peer-to-Peer Connection']._remote_ice_id != stat.id )){return;} // not matched to nominated one if ("candidateType" in stat){ session.rpcs[UUID].stats['Peer-to-Peer Connection'].remote_candidateType = stat.candidateType; if (stat.candidateType === "relay"){ if ("relayProtocol" in stat){ session.rpcs[UUID].stats['Peer-to-Peer Connection'].remote_relayProtocol = stat.relayProtocol; } if ("ip" in stat){session.rpcs[UUID].stats['Peer-to-Peer Connection'].remote_relay_IP = stat.ip;} } else { try { delete session.rpcs[UUID].stats['Peer-to-Peer Connection'].local_relayIP; delete session.rpcs[UUID].stats['Peer-to-Peer Connection'].local_relayProtocol; } catch(e){} } } if ("networkType" in stat){ session.rpcs[UUID].stats['Peer-to-Peer Connection'].remote_networkType = stat.networkType; } } else if (stat.type=="local-candidate"){ if (("_local_ice_id" in session.rpcs[UUID].stats['Peer-to-Peer Connection']) && (session.rpcs[UUID].stats['Peer-to-Peer Connection']._local_ice_id != stat.id )){return;} // not matched to nominated one if ("candidateType" in stat){ session.rpcs[UUID].stats['Peer-to-Peer Connection'].local_candidateType = stat.candidateType; if (stat.candidateType === "relay"){ if ("relayProtocol" in stat){ session.rpcs[UUID].stats['Peer-to-Peer Connection'].local_relayProtocol = stat.relayProtocol; } if ("ip" in stat){session.rpcs[UUID].stats['Peer-to-Peer Connection'].local_relayIP = stat.ip;} } else { try { delete session.rpcs[UUID].stats['Peer-to-Peer Connection'].local_relayIP; delete session.rpcs[UUID].stats['Peer-to-Peer Connection'].local_relayProtocol; } catch(e){} } } if ("networkType" in stat){ session.rpcs[UUID].stats['Peer-to-Peer Connection'].remote_networkType = stat.networkType; } } else if (stat.type == "transport"){ if ("bytesReceived" in stat) { if ("_bytesReceived" in session.rpcs[UUID].stats['Peer-to-Peer Connection']){ if (session.rpcs[UUID].stats['Peer-to-Peer Connection']._timestamp){ if (stat.timestamp){ session.rpcs[UUID].stats['Peer-to-Peer Connection'].total_recv_bitrate_kbps = parseInt(8*(stat.bytesReceived - session.rpcs[UUID].stats['Peer-to-Peer Connection']._bytesReceived)/(stat.timestamp - session.rpcs[UUID].stats['Peer-to-Peer Connection']._timestamp)); hideStreamLowBandwidth(session.rpcs[UUID].stats['Peer-to-Peer Connection'].total_recv_bitrate_kbps, UUID); } } } session.rpcs[UUID].stats['Peer-to-Peer Connection']._bytesReceived = stat.bytesReceived; } if ("timestamp" in stat) { session.rpcs[UUID].stats['Peer-to-Peer Connection']._timestamp = stat.timestamp; if (!session.rpcs[UUID].stats['Peer-to-Peer Connection']._timestampStart){ session.rpcs[UUID].stats['Peer-to-Peer Connection']._timestampStart = stat.timestamp; } else { session.rpcs[UUID].stats['Peer-to-Peer Connection'].time_active_minutes = parseInt((stat.timestamp - session.rpcs[UUID].stats['Peer-to-Peer Connection']._timestampStart)/600)/100; } } } else if ((stat.type=="inbound-rtp") && ("trackId" in stat)){ session.rpcs[UUID].stats[stat.trackId] = session.rpcs[UUID].stats[stat.trackId] || {}; session.rpcs[UUID].stats[stat.trackId].Bitrate_in_kbps = parseInt(8*(stat.bytesReceived - session.rpcs[UUID].stats[stat.trackId]._last_bytes)/( stat.timestamp - session.rpcs[UUID].stats[stat.trackId]._last_time)); session.rpcs[UUID].stats[stat.trackId]._last_bytes = stat.bytesReceived || session.rpcs[UUID].stats[stat.trackId]._last_bytes; session.rpcs[UUID].stats[stat.trackId]._last_time = stat.timestamp || session.rpcs[UUID].stats[stat.trackId]._last_time; session.rpcs[UUID].stats._codecId = stat.codecId; session.rpcs[UUID].stats._codecIdTrackId = stat.trackId; if (stat.mediaType=="video"){ session.rpcs[UUID].stats[stat.trackId].type = "Video Track" session.rpcs[UUID].stats[stat.trackId]._type = "video"; if ((session.obsfix) && ("codec" in session.rpcs[UUID].stats) && (session.rpcs[UUID].stats.codec=="video/VP8")){ session.rpcs[UUID].stats[stat.trackId].pliDelta = (stat.pliCount - session.rpcs[UUID].stats[stat.trackId].keyFramesRequested_pli) || 0; session.rpcs[UUID].stats[stat.trackId].nackTrigger = (stat.nackCount - session.rpcs[UUID].stats[stat.trackId].streamErrors_nackCount + session.rpcs[UUID].stats[stat.trackId].nackTrigger) || 0; log("OBS PLI FIX MODE ON"); if ((session.rpcs[UUID].stats[stat.trackId].pliDelta===0) && (session.rpcs[UUID].stats[stat.trackId].nackTrigger >= session.obsfix)){ // heavy packet loss with no pliCount? session.requestKeyframe(UUID); session.rpcs[UUID].stats[stat.trackId].nackTrigger = 0; log("TRYING KEYFRAME"); } else if (session.rpcs[UUID].stats[stat.trackId].pliDelta>0){ session.rpcs[UUID].stats[stat.trackId].nackTrigger = 0; } } else if ((session.obsfix) && ("codec" in session.rpcs[UUID].stats) && (session.rpcs[UUID].stats.codec=="video/VP9")){ session.rpcs[UUID].stats[stat.trackId].pliDelta = (stat.pliCount - session.rpcs[UUID].stats[stat.trackId].keyFramesRequested_pli) || 0; session.rpcs[UUID].stats[stat.trackId].nackTrigger = (stat.nackCount - session.rpcs[UUID].stats[stat.trackId].streamErrors_nackCount + session.rpcs[UUID].stats[stat.trackId].nackTrigger) || 0; log("OBS PLI FIX MODE ON"); if ((session.rpcs[UUID].stats[stat.trackId].pliDelta===0) && (session.rpcs[UUID].stats[stat.trackId].nackTrigger >= (session.obsfix*4) )){ // heavy packet loss with no pliCount? well, VP9 will trigger hopefully not as often. session.requestKeyframe(UUID); session.rpcs[UUID].stats[stat.trackId].nackTrigger = 0; log("TRYING KEYFRAME"); } else if (session.rpcs[UUID].stats[stat.trackId].pliDelta>0){ session.rpcs[UUID].stats[stat.trackId].nackTrigger = 0; } } session.rpcs[UUID].stats[stat.trackId].keyFramesRequested_pli = stat.pliCount || 0; session.rpcs[UUID].stats[stat.trackId].streamErrors_nackCount = stat.nackCount || 0; //warnlog(stat); if ("framesPerSecond" in stat){ session.rpcs[UUID].stats[stat.trackId].FPS = parseInt(stat.framesPerSecond); } else if (("framesDecoded" in stat) && (stat.timestamp)){ var lastFramesDecoded = 0; var lastTimestamp = 0; try{ lastFramesDecoded = session.rpcs[UUID].stats[stat.trackId]._framesDecoded; lastTimestamp = session.rpcs[UUID].stats[stat.trackId]._timestamp; } catch(e){} session.rpcs[UUID].stats[stat.trackId].FPS = parseInt(10*(stat.framesDecoded - lastFramesDecoded)/(stat.timestamp/1000 - lastTimestamp))/10; //session.rpcs[UUID].stats[stat.trackId].FPS = parseInt((stat.framesDecoded - lastFramesDecoded)/(stat.timestamp/1000 - lastTimestamp)); session.rpcs[UUID].stats[stat.trackId]._framesDecoded = stat.framesDecoded; session.rpcs[UUID].stats[stat.trackId]._timestamp = stat.timestamp/1000; } } else if (stat.mediaType=="audio"){ //log("AUDIO LEVEL: "+stat.audioLevel); session.rpcs[UUID].stats[stat.trackId].type = "Audio Track"; session.rpcs[UUID].stats[stat.trackId]._type = "audio"; if ("audioLevel" in stat){ session.rpcs[UUID].stats[stat.trackId].audio_level = parseInt(parseFloat(stat.audioLevel)*10000)/10000.0; } } if ("packetsLost" in stat && "packetsReceived" in stat){ if (!("_packetsLost" in session.rpcs[UUID].stats[stat.trackId])){ session.rpcs[UUID].stats[stat.trackId]._packetsLost = stat.packetsLost; } if (!("_packetsReceived" in session.rpcs[UUID].stats[stat.trackId])){ session.rpcs[UUID].stats[stat.trackId]._packetsReceived = stat.packetsReceived; } if (!("packetLoss_in_percentage" in session.rpcs[UUID].stats[stat.trackId])){ session.rpcs[UUID].stats[stat.trackId].packetLoss_in_percentage = 0; } session.rpcs[UUID].stats[stat.trackId].packetLoss_in_percentage = session.rpcs[UUID].stats[stat.trackId].packetLoss_in_percentage*0.35 + 0.65*((stat.packetsLost-session.rpcs[UUID].stats[stat.trackId]._packetsLost)*100.0)/((stat.packetsReceived-session.rpcs[UUID].stats[stat.trackId]._packetsReceived)+(stat.packetsLost-session.rpcs[UUID].stats[stat.trackId]._packetsLost)) || 0; if (session.rpcs[UUID].signalMeter && (session.rpcs[UUID].stats[stat.trackId]._type==="video")){ if (session.rpcs[UUID].stats[stat.trackId].packetLoss_in_percentage<0.01){ if (session.rpcs[UUID].stats[stat.trackId].Bitrate_in_kbps==0){ session.rpcs[UUID].signalMeter.dataset.level = 0; } else { session.rpcs[UUID].signalMeter.dataset.level = 5; } } else if (session.rpcs[UUID].stats[stat.trackId].packetLoss_in_percentage<0.3){ session.rpcs[UUID].signalMeter.dataset.level = 4; } else if (session.rpcs[UUID].stats[stat.trackId].packetLoss_in_percentage<1.0){ session.rpcs[UUID].signalMeter.dataset.level = 3; } else if (session.rpcs[UUID].stats[stat.trackId].packetLoss_in_percentage<3.5){ session.rpcs[UUID].signalMeter.dataset.level = 2; } else { session.rpcs[UUID].signalMeter.dataset.level = 1; } } session.rpcs[UUID].stats[stat.trackId]._packetsReceived = stat.packetsReceived; session.rpcs[UUID].stats[stat.trackId]._packetsLost = stat.packetsLost; } } else if (("_codecId" in session.rpcs[UUID].stats) && (stat.id == session.rpcs[UUID].stats._codecId)){ if ("mimeType" in stat){ if (session.rpcs[UUID].stats[session.rpcs[UUID].stats._codecIdTrackId]){ session.rpcs[UUID].stats[session.rpcs[UUID].stats._codecIdTrackId].codec = stat.mimeType; } else { session.rpcs[UUID].stats[session.rpcs[UUID].stats._codecIdTrackId] = {}; session.rpcs[UUID].stats[session.rpcs[UUID].stats._codecIdTrackId].codec = stat.mimeType; } } if ("frameHeight" in stat){ if ("frameWidth" in stat){ session.rpcs[UUID].stats.Resolution = parseInt(stat.frameWidth)+" x "+parseInt(stat.frameHeight); } } } }); if (session.buffer!==false){ playoutdelay(UUID); } setTimeout(function(){ session.directorSpeakerMute(); session.directorDisplayMute(); },0); }); } catch (e){errorlog(e);} }; function playoutdelay(UUID){ // applies a delay to all videos try { var target_buffer = session.buffer || 0; target_buffer = parseFloat(target_buffer); if (session.buffer!==false){ // if buffer is set, then session.sync will be set; at least to 0. var receivers = getReceivers2(UUID).reverse(); //session.rpcs[UUID].getReceivers().reverse(); var video_delay = 0; receivers.forEach(function(receiver){ try { for (var tid in session.rpcs[UUID].stats){ if ((typeof( session.rpcs[UUID].stats[tid])=="object") && ("_trackID" in session.rpcs[UUID].stats[tid]) && (session.rpcs[UUID].stats[tid]._trackID===receiver.track.id) && ("Buffer_Delay_in_ms" in session.rpcs[UUID].stats[tid])){ var sync_offset = 0.0; if (session.rpcs[UUID].stats[tid]._sync_offset){ sync_offset = session.rpcs[UUID].stats[tid]._sync_offset; } else { session.rpcs[UUID].stats[tid]._sync_offset = 0; } sync_offset += target_buffer - session.rpcs[UUID].stats[tid].Buffer_Delay_in_ms; // target_Butt if (sync_offset>target_buffer){ sync_offset=target_buffer; } if (session.rpcs[UUID].stats[tid]._type=="audio"){ if (receiver.track.id in session.rpcs[UUID].delayNode){ log("updating audio delay"); var audio_delay = video_delay - session.rpcs[UUID].stats[tid].Buffer_Delay_in_ms + session.sync; // video is typically showing greater delay than video if (audio_delay<0){audio_delay=0;} log("audio_delay : "+audio_delay); log("audioCtx : "+ session.audioCtx.currentTime); session.rpcs[UUID].delayNode[receiver.track.id].delayTime.setValueAtTime(parseFloat(audio_delay/1000.0), session.audioCtx.currentTime+1); session.rpcs[UUID].stats[tid].Audio_Sync_Delay_ms = audio_delay; } } else if (session.rpcs[UUID].stats[tid]._type=="video"){ //log("THIS SHOULD BE BEFORE AUDIO - video track"+session.rpcs[UUID].stats[tid].type); video_delay = session.rpcs[UUID].stats[tid].Buffer_Delay_in_ms; if(sync_offset<0){sync_offset=0;} session.rpcs[UUID].stats[tid]._sync_offset = sync_offset; receiver.playoutDelayHint = parseFloat(sync_offset/1000); // only the video we are going to do the playout delay for; doesn't work well with audio. } } } } catch (e){errorlog(e);} }); } } catch (e){ errorlog("device does not support playout delay"); } }; function printViewStats(menu, UUID) { // Stats for viewing a remote video if (!session.rpcs[UUID]){ menu.innerHTML = "
Remote Publisher Disconnected"; return; } var statsObj = session.rpcs[UUID].stats; var streamID = session.rpcs[UUID].streamID; var scrollLeft = menu.scrollLeft; var scrollTop = menu.scrollTop; 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 + "
(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 += "
" + tmp + "
"; } 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 += "
"; } for (var uuid in session.pcs) { printViewValues(session.pcs[uuid].stats); menu.innerHTML += "
"; } if ((iOS) || (iPad)){ menu.innerHTML += "
"; } try { getById("menuStatsBox").scrollLeft = scrollLeft; getById("menuStatsBox").scrollTop = scrollTop; } catch (e) {} } function publisherMeshcastStats(){ } function updateLocalStats(){ var totalBitrate = 0; var totalBitrate2 = 0; var cpuLimited = false; var conLimited = 0; var totalVideo = 0; var totalAudio = 0; var totalScenes = 0; var meshcastActive = false; if (session.mc && session.mc.getSenders && session.mc.stats){ try { var atot = 0; var senders = session.mc.getSenders(); // for any connected peer, update the video they have if connected with a video already. 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 && sender.track.kind == "video" && sender.track.enabled) { meshcastActive = true; } else if (sender.track && sender.track.kind == "audio" && sender.track.enabled && !session.muted) { meshcastActive = true; } }); //totalAudio += atot; if ("video_bitrate_kbps" in session.mc.stats){ totalBitrate+=session.mc.stats.video_bitrate_kbps || 0; } if ("audio_bitrate_kbps" in session.mc.stats){ totalBitrate+=session.mc.stats.audio_bitrate_kbps || 0; } if ("total_sending_bitrate_kbps" in session.mc.stats){ totalBitrate2+=session.mc.stats.total_sending_bitrate_kbps || 0; } if ("quality_limitation_reason" in session.mc.stats){ if (session.mc.stats.quality_limitation_reason == "cpu"){ cpuLimited=true; } } setTimeout(function(){ if (!session.mc){return;} session.mc.getStats().then(function(stats) { if ("audio_bitrate_kbps" in session.mc.stats){ session.mc.stats.audio_bitrate_kbps=0; } stats.forEach(stat => { if (stat.type == "transport"){ if ("bytesSent" in stat) { if ("_bytesSent" in session.mc.stats){ if (session.mc.stats._timestamp){ if (stat.timestamp){ session.mc.stats.total_sending_bitrate_kbps = parseInt(8*(stat.bytesSent - session.mc.stats._bytesSent)/(stat.timestamp - session.mc.stats._timestamp)); } } } session.mc.stats._bytesSent = stat.bytesSent; } if ("timestamp" in stat) { session.mc.stats._timestamp = stat.timestamp; } } else if (stat.type == "outbound-rtp") { if (stat.kind == "video") { if ("framesPerSecond" in stat) { session.mc.stats.resolution = stat.frameWidth + " x " + stat.frameHeight + " @ " + stat.framesPerSecond; } if ("encoderImplementation" in stat) { session.mc.stats.video_encoder = stat.encoderImplementation; if (stat.encoderImplementation=="ExternalEncoder"){ session.mc.stats._hardwareEncoder = true; // I won't set this to false again, just because once I know it has one, I just need to assume it could always be used unexpectednly session.mc.encoder = true; } else { session.mc.encoder = false; // this may not be actually accurate, but lets assume so. } } if ("qualityLimitationReason" in stat) { if (session.mc.stats.quality_limitation_reason){ if (session.mc.stats.quality_limitation_reason !== stat.qualityLimitationReason){ try{ var miniInfo = {}; miniInfo.qlr = stat.qualityLimitationReason; if ("_hardwareEncoder" in session.mc.stats){ miniInfo.hw_enc = session.mc.stats._hardwareEncoder; } else { miniInfo.hw_enc = null; } session.sendMessage({"miniInfo":miniInfo}); } catch(e){warnlog(e);} } } session.mc.stats.quality_limitation_reason = stat.qualityLimitationReason; } if ("bytesSent" in stat) { if ("_bytesSentVideo" in session.mc.stats){ if (session.mc.stats._timestamp1){ session.mc.stats.video_bitrate_kbps = parseInt(8*(stat.bytesSent - session.mc.stats._bytesSentVideo)/(stat.timestamp - session.mc.stats._timestamp1)); if (stat.timestamp){ } } } session.mc.stats._bytesSentVideo = stat.bytesSent; } if ("nackCount" in stat) { if ("_nackCount" in session.mc.stats){ if (session.mc.stats._timestamp1){ if (stat.timestamp){ session.mc.stats.nacks_per_second = parseInt(10000*(stat.nackCount - session.mc.stats._nackCount)/(stat.timestamp - session.mc.stats._timestamp1))/10; } } } } if ("retransmittedBytesSent" in stat) { if ("_retransmittedBytesSent" in session.mc.stats){ if (session.mc.stats._timestamp1){ if (stat.timestamp){ session.mc.stats.retransmitted_kbps = parseInt(8*(stat.retransmittedBytesSent - session.mc.stats._retransmittedBytesSent)/(stat.timestamp - session.mc.stats._timestamp1)); } } } } if ("nackCount" in stat) { session.mc.stats._nackCount = stat.nackCount; } if ("retransmittedBytesSent" in stat) { session.mc.stats._retransmittedBytesSent = stat.retransmittedBytesSent; } if ("timestamp" in stat) { session.mc.stats._timestamp1 = stat.timestamp; } if ("pliCount" in stat) { session.mc.stats.total_pli_count = stat.pliCount; } if ("keyFramesEncoded" in stat) { session.mc.stats.total_key_frames_encoded = stat.keyFramesEncoded; } } else if (stat.kind == "audio") { if ("bytesSent" in stat) { if (session.mc.stats._bytesSentAudio){ if (session.mc.stats._timestamp2){ if (stat.timestamp){ if ("audio_bitrate_kbps" in session.mc.stats){ session.mc.stats.audio_bitrate_kbps += parseInt(8*(stat.bytesSent - session.mc.stats._bytesSentAudio)/(stat.timestamp - session.mc.stats._timestamp2)); } else { session.mc.stats.audio_bitrate_kbps=0; } } } } } if ("timestamp" in stat) { session.mc.stats._timestamp2 = stat.timestamp; } if ("bytesSent" in stat) { session.mc.stats._bytesSentAudio = stat.bytesSent; } } } else if (stat.type == "remote-candidate") { if ("candidateType" in stat) { session.mc.stats.remote_candidateType = stat.candidateType; if (stat.candidateType === "relay"){ if ("ip" in stat) { session.mc.stats.remote_relay_IP = stat.ip; } if ("relayProtocol" in stat) { session.mc.stats.remote_relayProtocol = stat.relayProtocol; } } else { try { delete session.mc.stats.remote_relay_IP; delete session.mc.stats.remote_relayProtocol; } catch(e){} } } } else if (stat.type == "local-candidate") { if ("candidateType" in stat) { session.mc.stats.local_candidateType = stat.candidateType; if (stat.candidateType === "relay"){ if ("ip" in stat) { session.mc.stats.local_relayIP = stat.ip; } if ("relayProtocol" in stat) { session.mc.stats.local_relayProtocol = stat.relayProtocol; } } else { try { delete session.mc.stats.local_relayIP; delete session.mc.stats.local_relayProtocol; } catch(e){} } } } else if ((stat.type == "candidate-pair" ) && (stat.nominated)) { if ("availableOutgoingBitrate" in stat){ session.mc.stats.available_outgoing_bitrate_kbps = parseInt(stat.availableOutgoingBitrate/1024); } if ("totalRoundTripTime" in stat){ if ("responsesReceived" in stat){ session.mc.stats.average_roundTripTime_ms = parseInt((stat.totalRoundTripTime/stat.responsesReceived)*1000); } } } return; }); return; }); }, 0); } catch(e){errorlog(e);} } for (var uuid in session.pcs) { var atot = 0; var senders = getSenders2(uuid); // for any connected peer, update the video they have if connected with a video already. 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 && sender.track.kind == "video" && sender.track.enabled) { totalVideo+=1 } else if (sender.track && sender.track.kind == "audio" && sender.track.enabled && !session.muted) { atot=1; } }); totalAudio += atot; if ("scene" in session.pcs[uuid]){ if (session.pcs[uuid].scene!==false){ totalScenes+=1; } } 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 (!(UUID in session.pcs)){return;} 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 ("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 (stat.encoderImplementation=="ExternalEncoder"){ session.pcs[UUID].stats._hardwareEncoder = true; // I won't set this to false again, just because once I know it has one, I just need to assume it could always be used unexpectednly session.pcs[UUID].encoder = true; } else { session.pcs[UUID].encoder = false; // this may not be actually accurate, but lets assume so. } } if ("qualityLimitationReason" in stat) { if (session.pcs[UUID].stats.quality_limitation_reason){ if (session.pcs[UUID].stats.quality_limitation_reason !== stat.qualityLimitationReason){ try{ var miniInfo = {}; miniInfo.qlr = stat.qualityLimitationReason; if ("_hardwareEncoder" in session.pcs[UUID].stats){ miniInfo.hw_enc = session.pcs[UUID].stats._hardwareEncoder; } else { miniInfo.hw_enc = null; } session.sendMessage({"miniInfo":miniInfo}, UUID); } catch(e){warnlog(e);} } } session.pcs[UUID].stats.quality_limitation_reason = stat.qualityLimitationReason; } 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 ("candidateType" in stat) { session.pcs[UUID].stats.remote_candidateType = stat.candidateType; if (stat.candidateType === "relay"){ if ("ip" in stat) { session.pcs[UUID].stats.remote_relay_IP = stat.ip; } if ("relayProtocol" in stat) { session.pcs[UUID].stats.remote_relayProtocol = stat.relayProtocol; } } else { try { delete session.pcs[UUID].stats.remote_relay_IP; delete session.pcs[UUID].stats.remote_relayProtocol; } catch(e){} } } } else if (stat.type == "local-candidate") { if ("candidateType" in stat) { session.pcs[UUID].stats.local_candidateType = stat.candidateType; if (stat.candidateType === "relay"){ if ("ip" in stat) { session.pcs[UUID].stats.local_relayIP = stat.ip; } if ("relayProtocol" in stat) { session.pcs[UUID].stats.local_relayProtocol = stat.relayProtocol; } } else { try { delete session.pcs[UUID].stats.local_relayIP; delete session.pcs[UUID].stats.local_relayProtocol; } catch(e){} } } } 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); } } } return; }); return; }); }, 0, uuid); } try{ var headerStats = "🔗 "; headerStats += Object.keys(session.pcs).length || 0; if (meshcastActive){ if (totalAudio){ headerStats += ", 👂 "+totalAudio; } if (totalVideo){ headerStats += ", 👀 "+totalVideo; } headerStats += ", 📡Broadcast"; } else { headerStats += ", 👂 "+totalAudio; headerStats += ", 👀 "+totalVideo; } if (session.roomid){ headerStats += ", 🎬 "+totalScenes+""; } } catch(e){} if (Firefox){ // does not support the current stats system } else if (totalBitrate2>1000){ headerStats += ", 🔼 "+(Math.round(totalBitrate2/10.24)/100) + "-mbps"; } else{ headerStats += ", 🔼 "+totalBitrate2 + "-kbps"; } if (cpuLimited){ headerStats += ", 🔥 CPU Overloaded"; } if (session.cpuLimited!==cpuLimited){ session.cpuLimited = cpuLimited; var miniInfo = {} miniInfo.cpu = cpuLimited; for (var uuid in session.pcs) { //if (session.directorList.indexOf(uuid)>=0){ session.sendMessage({"miniInfo":miniInfo}, uuid); // lets send it to everyone. //} } } try{ if (Object.keys(session.pcs).length){ getById("head5").classList.remove("advanced"); } } catch(e){} getById("head5").innerHTML = headerStats; getById("head5").onclick = function(){ var [menu, innerMenu] = statsMenuCreator(); menu.interval = setInterval(printMyStats,3000, innerMenu); printMyStats(innerMenu); } } 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 { var framerateFPS = track.getSettings().frameRate; if (framerateFPS){ getById(wcs).innerHTML = "Current Video Settings: " + (track.getSettings().width || 0) + "x" + (track.getSettings().height || 0) + "@" + (parseInt(framerateFPS * 100) / 100.0) + "fps"; } else { getById(wcs).innerHTML = "Current Video Settings: " + (track.getSettings().width || 0) + "x" + (track.getSettings().height || 0); } } } ); } catch (e) { errorlog(e); } } function toggleControlBar() { if (getById("controlButtons").style.display != 'none') { // Dont hardcode style here. Copy it over to data-style before changing to none; getById("controlButtons").dataset.style = getById("controlButtons").style.display; getById("controlButtons").style.display = 'none'; } else { // Copy the style over from the data-style attribute. getById("controlButtons").style.display = getById("controlButtons").dataset.style; }; } function toggleMute(apply = false, event=false) { // TODO: I need to have this be MUTE, toggle, with volume not touched. var mouseUp = null; var touchEnd = null; var timeStart = Date.now(); if (event){ mouseUp = document.onmouseup; touchEnd = document.ontouchend; document.onmouseup = function(){ document.onmouseup = mouseUp; document.ontouchend = touchEnd; if (Date.now() - timeStart < 500){ return; } else { toggleMute(); } } document.ontouchend = function(){ document.onmouseup = mouseUp; document.ontouchend = touchEnd; if (Date.now() - timeStart < 300){ return; } else { toggleMute(); } } } 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").classList.remove("float"); getById("mutebutton").classList.add("float2"); getById("mutebutton").classList.add("red"); getById("mutebutton").classList.add("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").classList.add("float"); getById("mutebutton").classList.remove("float2"); getById("mutebutton").classList.remove("red"); getById("mutebutton").classList.remove("puslate"); 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"; //} } postMessageIframe(document.getElementById("screensharesource"), {"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 postMessageIframe(iFrameEle, message){ // iframes seem to only have the contentWindow work on the last placed iframe object, so this checks the dom first. if (iFrameEle){ try{ if (iFrameEle.id && document.getElementById(iFrameEle.id)){ document.getElementById(iFrameEle.id).contentWindow.postMessage(message, '*'); } else { iFrameEle.contentWindow.postMessage(message, '*'); } } catch(e){errorlog(e);} } } 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) { // mute output 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"); if (iOS || iPad){ for (var i = 0; i < sounds.length; ++i) { sounds[i].muted = !sounds[i].muted; sounds[i].muted = session.speakerMuted; } } else { for (var i = 0; i < sounds.length; ++i) { sounds[i].muted = session.speakerMuted; } } } else { session.speakerMuted = false; // unmute output getById("mutespeakertoggle").className = "las la-volume-up my-float toggleSize"; if (!(session.cleanOutput)){ getById("mutespeakerbutton").className = "float"; } var sounds = document.getElementsByTagName("video"); if (iOS || iPad){ // attempting to fix an iOS bug for (var i = 0; i < sounds.length; ++i) { sounds[i].muted = !sounds[i].muted; if (sounds[i].id === "videosource") { // don't unmute ourselves. feedback galore if so. sounds[i].muted = true; continue; } else if (sounds[i].id === "previewWebcam") { sounds[i].muted = true; continue; } else if (sounds[i].id === "screenshare") { sounds[i].muted = true; continue; } else { sounds[i].muted = session.speakerMuted; } } } else { 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) { applyMuteState(UUID); postMessageIframe(session.rpcs[UUID].iframeEle, {"mute":session.speakerMuted}); } pokeIframeAPI("audio-mute-state", session.speakerMuted); if ((iOS) || (iPad)) { resetupAudioOut(); } } function toggleFileshare(UUID=false, event = null){ if (UUID===false){ var string = 'Share a file with the group
'; } else if (session.directorList.indexOf(UUID)>=0){ var string = 'The director requested you share a file with them.
'; } else { var string = 'Someone has requested you share a file with them.
'; } warnUser(string); if (session.hostedFiles){ if (session.hostedFiles.length){ getById("activeShares").innerHTML += "
Files being shared:
";
}
for (var i=0;i"+session.hostedTransfers.length + " file transfers in progress.
";
}
}
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;";
target.style.zIndex = "2";
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";
var sendButton = document.createElement("button");
sendButton.innerHTML = " send messageID: " + streamID + "\
\
\
"; */
if (session.hidesololinks==false){
controls.innerHTML += "\
This is you, the director.
";
}
controls.querySelectorAll('[data-action-type]').forEach((ele) => { // give action buttons some self-reference
ele.dataset.sid = session.streamID;
});
container.innerHTML = buttons;
container.appendChild(controls);
Object.keys(session.sceneList).forEach((scene, index) => {
if (session.showDirector){
if (document.getElementById("container_director")){
if (!(getById("container_director").querySelectorAll('[data-scene="'+scene+'"]').length)){
var newScene = document.createElement("div");
newScene.innerHTML = '';
getById("container_director").appendChild(newScene);
}
}
}
});
var labelID = document.getElementById("label_director");
labelID.onclick = async function(ee){
var oldlabel = ee.target.innerText;
if (session.label===false){
oldlabel = "";
}
window.focus();
var newlabel = await promptAlt(miscTranslations["enter-new-display-name"], false, false, oldlabel);
if (newlabel!==null){
if (newlabel == ""){
newlabel = false;
ee.target.innerText = miscTranslations["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;
}
pokeIframeAPI("control-box", true, true);
}
function shiftPC(ele, shift, director=false){
if (director){
var target = document.getElementById("container_director");
} else {
var target = document.getElementById("container_"+ele.dataset.UUID);
}
target.shifted = true;
if (shift==1){
if (target.nextSibling){
target.parentNode.insertBefore(target.nextSibling, target);
}
} else {
if (target.previousSibling){
target.parentNode.insertBefore(target, target.previousSibling);
}
}
updateLockedElements();
}
function updateLockedElements(){
var eles = getById("guestFeeds").children;
for (var i=0;i";
ele.parentNode.classList.add("locked");
while (currentPosition>parseInt(ele.dataset.locked)){
var node = document.getElementById("container_"+UUID);
parent = node.parentNode,
prev = node.previousSibling,
oldChild = parent.removeChild(node);
parent.insertBefore( oldChild, prev );
currentPosition = Array.prototype.indexOf.call(getById("guestFeeds").children, document.getElementById("container_"+UUID))+1;
}
while ((currentPositioncurrentPosition)){
var node = document.getElementById("container_"+UUID);
parent = node.parentNode,
next = node.nextSibling,
oldChild = parent.removeChild(node);
parent.insertBefore(node, next.nextSibling);
currentPosition = Array.prototype.indexOf.call(getById("guestFeeds").children, document.getElementById("container_"+UUID))+1;
}
}
} else {
ele.dataset.locked = 0;
ele.innerHTML = "";
ele.parentNode.classList.remove("locked");
}
} else {
if (ele.dataset.locked && parseInt(ele.dataset.locked)){
ele.dataset.locked = 0;
ele.innerHTML = "";
ele.parentNode.classList.remove("locked");
} else {
if (getById("guestFeeds")){
ele.dataset.locked = Array.prototype.indexOf.call(getById("guestFeeds").children, document.getElementById("container_"+UUID))+1;
ele.innerHTML = "#"+ele.dataset.locked+"";
ele.parentNode.classList.add("locked");
}
}
}
}
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.UUID = UUID;
container.className = "vidcon directorMargins";
controls.style.display = "block";
controls.id = "controls_" + UUID;
if (session.orderby){
try {
var added = false;
for (var i=0;i streamID.toLowerCase()){
getById("guestFeeds").insertBefore(container, getById("guestFeeds").children[i]);
added = true;
break;
}
}
}
}
if (!added){
getById("guestFeeds").appendChild(container);
}
} catch(e){
getById("guestFeeds").appendChild(container);
}
} else {
getById("guestFeeds").appendChild(container);
}
var buttons = "
===> "+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 = []; // 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 = 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 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 = getById('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 = getById('videoSourceSelect'); const audioOutputSelect = getById('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); } 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); } 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; try{ getById("multiselect1").parentNode.style.display = "none"; } catch(e){} } else { listele.style.display = "none"; } option.value = deviceInfo.deviceId || "default"; option.name = "multiselect" + counter; option.id = "multiselect" + counter; option.label = deviceInfo.label; 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); } 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."); } } }); } }; } 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); } } 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 { 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 = 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. } }); } 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!"); 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 = 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"; 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)); 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; } }; } 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){ 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') { 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"; } 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) { 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; } // enumerateDevices().then(gotDevices2).then(function() { // errolog("!!!!!!!!!!!!!!!!"); // session.screenShareState = false; // pokeIframeAPI("screen-share-ended"); // getById("screensharebutton").classList.add("float"); // getById("screensharebutton").classList.remove("float2"); // }).catch(function(e){ // errorlog("SOMETHING BAD"); // errorlog(e); // }) 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-ended"); var data = {}; data.screenShareState = session.screenShareState; session.sendMessage(data); } 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); } } }); } }; 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(); }; audioOutputSelect.onchange = function() { if ((iOS) || (iPad)) { return; } try { var outputSelect = getById('outputSource3'); session.sink = outputSelect.options[outputSelect.selectedIndex].value; } catch (e) { errorlog(e); } if (!session.sink){return;} try { if (document.getElementById("videosource")){ getById("videosource").setSinkId(session.sink).then(() => { log("New Output Device:" + session.sink); }).catch(error => { errorlog(error); }); } for (UUID in session.rpcs) { try{ if (session.rpcs[UUID].videoElement){ session.rpcs[UUID].videoElement.setSinkId(session.sink).then(() => { log("New Output Device for: " + UUID); }).catch(error => { errorlog(error); }); } } catch(e){warnlog(e);} } } catch (e) { errorlog(e); } } } 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(){ 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 = ' request'; buttonGO.style = "padding: 5px;"; buttonGO.title = "This will ask the remote guest for permission to change"; 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 }; getById("advanced_video_director_" + UUID).appendChild(videoSelect); getById("advanced_video_director_" + UUID).appendChild(buttonGO); } if (document.getElementById("remoteAudioSelect_"+UUID)){ 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;"; var buttonGO = document.createElement("button"); buttonGO.innerHTML = ' request'; buttonGO.style = "padding: 5px;"; buttonGO.title = "This will ask the remote guest for permission to change"; 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;"; var buttonGO = document.createElement("button"); buttonGO.innerHTML = ' request'; buttonGO.style = "padding: 5px;"; buttonGO.title = "This will ask the remote guest for permission to change"; buttonGO.onclick = function(){ var data = {} data.changeSpeaker = audioOutputSelect.value; data.UUID = UUID; session.sendRequest(data, UUID); // Viewer is requesting the PUBLISHER } getById("advanced_audio_director_" + UUID).appendChild(audioOutputSelect); getById("advanced_audio_director_" + UUID).appendChild(buttonGO); getById("advanced_audio_director_" + UUID).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; } } 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(); } } } 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; } } 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"); }); } 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.audioCtx.state == "suspended"){ session.audioCtx.resume(); } } catch(e){warnlog("session.audioCtx.resume(); failed");} 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; } catch (e) { warnlog(e); } if (session.sink){ try { 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"); } }); 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"); } }); } } 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; } //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){
try{
session.rpcs[UUID].videoElement.pause().then(() => {
setTimeout(function(uuid) {
log("win");
try{
session.rpcs[uuid].videoElement.play().then(() => {
log("toggle pause/play");
});
} catch(e){errorlog(e);}
}, 0, UUID);
}).catch(errorlog);
} catch(e){warnlog(e);}
}
}
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) {
if (session.videoElement){
try {
session.videoElement.setSinkId(sinkSet).then(() => {}).catch(error => {
errorlog(error);
});
} catch(e){warnlog("can't use setsink");}
}
for (UUID in session.rpcs) {
try{
if (session.rpcs[UUID].videoElement){
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/', '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;
}
var beforeScreenShare = null; // video
var screenShareAudioTrack = null;
async function toggleScreenShare(reload = false) { ////////////////////////////
if (reload) { // quality = 0, audio = true, videoOnEnd = false) {
await grabScreen(0, true, true).then(res => {
if (res != false) {
session.screenShareState = true;
var data = {};
data.screenShareState = session.screenShareState;
session.sendMessage(data);
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(0,true, true).then(res => {
if (res != false) {
session.screenShareState = true;
var data = {};
data.screenShareState = session.screenShareState;
session.sendMessage(data);
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);
var data = {};
data.screenShareState = session.screenShareState;
session.sendMessage(data);
if (screenShareAudioTrack){
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);
track.stop();
}
});
session.videoElement.srcObject.getAudioTracks().forEach(function(track) {
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);
track.stop();
}
});
}
getById("screensharebutton").classList.add("float");
getById("screensharebutton").classList.remove("float2");
var addedAlready = false;
session.streamSrc.getVideoTracks().forEach(function(track) {
if (beforeScreenShare && (track == beforeScreenShare)){
addedAlready=true;
} else {
session.streamSrc.removeTrack(track);
track.stop();
}
});
session.videoElement.srcObject.getVideoTracks().forEach(function(track) {
if (beforeScreenShare && (track == beforeScreenShare)){
addedAlready=true;
} else {
session.videoElement.srcObject.removeTrack(track);
track.stop();
}
});
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:
}
}
//if (beforeScreenShare || screenShareAudioTrack){
session.videoElement.srcObject = outboundAudioPipeline(); // updateREnderOoutput is just for video if videoElement is already activated.
updateRenderOutpipe(); // this syncs the video
//}
beforeScreenShare = null;
screenShareAudioTrack=null;
toggleSettings(forceShow = true);
updateMixer();
}
}
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 = (constraints=false) => {
return new Promise(async (resolve, reject) => {
try {
if (session.autostart){
if (parseInt(session.screenshare)+"" === session.screenshare){
var sscid = parseInt(session.screenshare)-1;
if (sscid<0){sscid=0;}
const sources = await desktopCapturer.getSources({ types: ['screen'] });
///
var new_constraints = {
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: sources[sscid].id
}
}
};
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 desktopCapturer.getSources({ types: ['window'] });
for (var i=0; i
`;
} else {
selectionElem.innerHTML = `
This is you, the director.
You are also a performer.
ID: " + streamID + "\
\
\
";
if (!session.rpcs[UUID].voiceMeter) {
if (session.meterStyle==1){ // director specific style
session.rpcs[UUID].voiceMeter = getById("voiceMeterTemplate2").cloneNode(true);
} else {
session.rpcs[UUID].voiceMeter = getById("voiceMeterTemplate").cloneNode(true);
session.rpcs[UUID].voiceMeter.style.opacity = 0;
if (session.meterStyle==2){
session.rpcs[UUID].voiceMeter.classList.add("video-meter-2");
session.rpcs[UUID].voiceMeter.classList.remove("video-meter");
} else {
session.rpcs[UUID].voiceMeter.classList.add("video-meter-director");
}
}
session.rpcs[UUID].voiceMeter.id = "voiceMeter_" + UUID;
session.rpcs[UUID].voiceMeter.dataset.level = 0;
session.rpcs[UUID].voiceMeter.classList.remove("advanced");
}
session.rpcs[UUID].remoteMuteElement = getById("muteStateTemplate").cloneNode(true);
session.rpcs[UUID].remoteMuteElement.id = "";
session.rpcs[UUID].remoteMuteElement.style.top = "5px";
session.rpcs[UUID].remoteMuteElement.style.right = "7px";
session.rpcs[UUID].remoteVideoMuteElement = getById("videoMuteStateTemplate").cloneNode(true);
session.rpcs[UUID].remoteVideoMuteElement.id = "";
session.rpcs[UUID].remoteVideoMuteElement.style.top = "5px";
session.rpcs[UUID].remoteVideoMuteElement.style.right = "28px";
session.rpcs[UUID].remoteRaisedHandElement = getById("raisedHandTemplate").cloneNode(true);
session.rpcs[UUID].remoteRaisedHandElement.id = "";
session.rpcs[UUID].remoteRaisedHandElement.style.top = "5px";
session.rpcs[UUID].remoteRaisedHandElement.style.right = "49px";
var videoContainer = document.createElement("div");
videoContainer.id = "videoContainer_" + UUID; // needed to delete on user disconnect
videoContainer.style.margin = "0";
videoContainer.style.position = "relative";
var iframeDetails = document.createElement("div");
iframeDetails.id = "iframeDetails_" + UUID; // needed to delete on user disconnect
iframeDetails.className = "iframeDetails advanced";
controls.innerHTML += "";
controls.innerHTML += "";
var handsID = "hands_" + UUID;
if (session.hidesololinks==false){
controls.innerHTML += "\
";
}
controls.innerHTML += "\
";
controls.querySelectorAll('[data-action-type]').forEach((ele) => { // give action buttons some self-reference
ele.dataset.UUID = UUID;
ele.dataset.sid = streamID;
});
container.innerHTML = buttons;
updateLockedElements();
container.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("advanced");
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("advanced");
}
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("advanced");
} else {
session.rpcs[UUID].batteryMeter.dataset.plugged = "1";
}
}
videoContainer.appendChild(session.rpcs[UUID].batteryMeter);
}
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);
initSceneList(UUID);
syncSceneState(streamID);
syncOtherState(streamID);
pokeIframeAPI("control-box", true, UUID);
}
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 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.taintedSession){
var msg = {};
msg.virtualHangup = false;
session.sendMessage(msg);
}
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;
}
} else if (session.audioDevice===0){
session.publishDirector(clean,false,false);
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://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 = []; // 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 = 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 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 = getById('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 = getById('videoSourceSelect'); const audioOutputSelect = getById('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); } 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); } 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; try{ getById("multiselect1").parentNode.style.display = "none"; } catch(e){} } else { listele.style.display = "none"; } option.value = deviceInfo.deviceId || "default"; option.name = "multiselect" + counter; option.id = "multiselect" + counter; option.label = deviceInfo.label; 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); } 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."); } } }); } }; } 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); } } 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 { 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 = 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. } }); } 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!"); 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 = 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"; 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)); 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; } }; } 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){ 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') { 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"; } 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) { 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; } // enumerateDevices().then(gotDevices2).then(function() { // errolog("!!!!!!!!!!!!!!!!"); // session.screenShareState = false; // pokeIframeAPI("screen-share-ended"); // getById("screensharebutton").classList.add("float"); // getById("screensharebutton").classList.remove("float2"); // }).catch(function(e){ // errorlog("SOMETHING BAD"); // errorlog(e); // }) 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-ended"); var data = {}; data.screenShareState = session.screenShareState; session.sendMessage(data); } 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); } } }); } }; 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(); }; audioOutputSelect.onchange = function() { if ((iOS) || (iPad)) { return; } try { var outputSelect = getById('outputSource3'); session.sink = outputSelect.options[outputSelect.selectedIndex].value; } catch (e) { errorlog(e); } if (!session.sink){return;} try { if (document.getElementById("videosource")){ getById("videosource").setSinkId(session.sink).then(() => { log("New Output Device:" + session.sink); }).catch(error => { errorlog(error); }); } for (UUID in session.rpcs) { try{ if (session.rpcs[UUID].videoElement){ session.rpcs[UUID].videoElement.setSinkId(session.sink).then(() => { log("New Output Device for: " + UUID); }).catch(error => { errorlog(error); }); } } catch(e){warnlog(e);} } } catch (e) { errorlog(e); } } } 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(){ 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 = ' request'; buttonGO.style = "padding: 5px;"; buttonGO.title = "This will ask the remote guest for permission to change"; 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 }; getById("advanced_video_director_" + UUID).appendChild(videoSelect); getById("advanced_video_director_" + UUID).appendChild(buttonGO); } if (document.getElementById("remoteAudioSelect_"+UUID)){ 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;"; var buttonGO = document.createElement("button"); buttonGO.innerHTML = ' request'; buttonGO.style = "padding: 5px;"; buttonGO.title = "This will ask the remote guest for permission to change"; 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;"; var buttonGO = document.createElement("button"); buttonGO.innerHTML = ' request'; buttonGO.style = "padding: 5px;"; buttonGO.title = "This will ask the remote guest for permission to change"; buttonGO.onclick = function(){ var data = {} data.changeSpeaker = audioOutputSelect.value; data.UUID = UUID; session.sendRequest(data, UUID); // Viewer is requesting the PUBLISHER } getById("advanced_audio_director_" + UUID).appendChild(audioOutputSelect); getById("advanced_audio_director_" + UUID).appendChild(buttonGO); getById("advanced_audio_director_" + UUID).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; } } 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(); } } } 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; } } 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"); }); } 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.audioCtx.state == "suspended"){ session.audioCtx.resume(); } } catch(e){warnlog("session.audioCtx.resume(); failed");} 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; } catch (e) { warnlog(e); } if (session.sink){ try { 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"); } }); 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"); } }); } } 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; } //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
-
${sources.map(({id, name, thumbnail, display_id, appIcon}) => `
- `).join('')}
-
${sources.map(({id, name, thumbnail, display_id, appIcon}) => `
- `).join('')}
Include Desktop Audio
Statistics
"; var menuCloseBtn = document.createElement("button"); menuCloseBtn.className="close"; menuCloseBtn.innerHTML="×"; menu.appendChild(menuCloseBtn); var innerMenu = document.createElement("div"); menu.appendChild(innerMenu); menuCloseBtn.addEventListener('click', function(eve) { clearInterval(menu.interval); eve.currentTarget.parentNode.remove(); eve.preventDefault(); eve.stopPropagation(); }); return [menu, innerMenu]; } // WEBCAM session.publishStream = function(v){ // stream is used to generated an SDP log("STREAM SETUP"); if (session.transcript){ setTimeout(function(){setupClosedCaptions();},1000); } session.streamSrc.oninactive = function streamoninactive() { warnlog('Stream inactive'); if (session.videoElement.recording){ session.videoElement.recorder.stop(); } }; if (session.streamSrc.getVideoTracks().length==0){ warnlog("NO VIDEO TRACK INCLUDED"); } if (session.streamSrc.getAudioTracks().length==0){ warnlog("NO AUDIO TRACK INCLUDED"); } var container = document.createElement("div"); container.id = "container"; if (session.cleanOutput){ container.style.height = "100%"; v.style.maxWidth = "100%"; v.style.boxShadow = "none"; } if (session.cover){ container.style.setProperty('height', '100%', 'important'); } container.className = "vidcon"; getById("gridlayout").appendChild(container); v.className = "tile"; //"tile task"; TODO: get working (will add task later on instead) v.muted = true; v.autoplay = true; if (session.mobile){ v.controls = true; } else { v.controls = session.showControls; } v.setAttribute("playsinline",""); v.id = "videosource"; // could be set to UUID in the future v.oncanplay = null; session.videoElement = v; container.appendChild(v); //session.videoElement.srcObject = outboundAudioPipeline(session.streamSrc); toggleMute(true); if (session.nopreview){ v.style.display="none"; container.style.display="none"; } try{ changeAudioOutputDevice(v); }catch(e){errorlog(e);} if (((session.roomid===false || session.roomid==="") && (session.quality===false)) || session.forceMediaSettings){ try { if ((session.quality_wb!==false) && (session.quality===false)){ getById("webcamquality3").elements.namedItem("resolution").value = session.quality_wb; } else if (session.quality!==false){ getById("webcamquality3").elements.namedItem("resolution").value = session.quality; } getById("gear_webcam3").style.display = "inline-block"; getById("webcamquality3").onchange = function(event) { if (parseInt(getById("webcamquality3").elements.namedItem("resolution").value) == 2) { if (session.maxframerate===false){ session.maxframerate = 30; session.maxframerate_q2 = true; } } else if (session.maxframerate_q2){ session.maxframerate = false; session.maxframerate_q2 = false; } activatedPreview = false; session.quality_wb = parseInt(getById("webcamquality3").elements.namedItem("resolution").value); grabVideo(session.quality_wb, "videosource", "select#videoSource3"); }; } catch (e) {errorlog(e);} } var bigPlayButton = document.getElementById("bigPlayButton"); if (bigPlayButton){ bigPlayButton.parentNode.removeChild(bigPlayButton); } if (session.streamID){ session.videoElement.dataset.sid = session.streamID; } if (session.director){ // the director doesn't load a webcam by default anyways. // audio is not mucked with } else if (session.scene!==false){ // it's a scene, and there are no previews in a scene. setTimeout(function(){updateMixer();},10); } else if (session.roomid!==false){ if (session.roomid===""){ if (!(session.view) || (session.view==="")){ if (session.fullscreen){ session.windowed = false; } else { v.className = "myVideo"; //"myVideo task"; TODO: get working session.windowed = true; } getById("mutespeakerbutton").classList.add("advanced"); applyMirror(session.mirrorExclude); container.style.width="100%"; //container.style.height="100%"; container.style.alignItems = "center"; container.backgroundColor = "#666"; setTimeout(function (){dragElement(v);},1000); play(); } else { session.windowed = false; applyMirror(session.mirrorExclude); play(); setTimeout(function(){updateMixer();},10); } } else { //session.cbr=0; // we're just going to override it if (session.stereo==5){ // not a scene or director, so we will assume its a guest. changing to stereo=3 session.stereo=3; } session.windowed = false; applyMirror(session.mirrorExclude); setTimeout(function(){updateMixer();},10); } } else { if (session.fullscreen){ session.windowed = false; } else { v.className = "myVideo"; //"myVideo task"; TODO: get working session.windowed = true; } getById("mutespeakerbutton").classList.add("advanced"); applyMirror(session.mirrorExclude); container.style.width="100%"; //container.style.height="100%"; //container.style.display = "flex"; container.style.alignItems = "center"; container.backgroundColor = "#666"; setTimeout(function (){dragElement(v);},1000); } v.onpause = (event) => { // prevent things from pausing; human or other if (!((event.ctrlKey) || (event.metaKey) )){ log("Video paused; auto playing"); event.currentTarget.play().then(_ => { log("playing 10"); }).catch(warnlog); } }; v.addEventListener('click', function(e) { log("click"); try { if ((e.ctrlKey)||(e.metaKey)){ e.preventDefault(); var [menu, innerMenu] = statsMenuCreator(); menu.interval = setInterval(printMyStats,3000, innerMenu); printMyStats(innerMenu); e.stopPropagation(); return false; } } catch(e){errorlog(e);} }); v.touchTimeOut = null; v.touchLastTap = 0; v.touchCount = 0; v.addEventListener('touchend', function(event) { if (session.disableMouseEvents){return;} 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; var [menu, innerMenu] = statsMenuCreator(); menu.interval = setInterval(printMyStats,3000, innerMenu); printMyStats(innerMenu); event.stopPropagation(); return false; ////// } else { v.touchCount=1; v.touchLastTap = currentTime; v.touchTimeOut = setTimeout(function(vv) { clearTimeout(vv.touchTimeOut); vv.touchLastTap = 0; vv.touchCount=0; }, 5000, v); } }); if (session.welcomeMessage){ getChatMessage(session.welcomeMessage, false, true, true); } updateReshareLink(); pokeIframeAPI('started-camera'); // depreciated pokeIframeAPI('camera-share', true); if (session.videoMutedFlag){ session.videoMuted = true; toggleVideoMute(true); } clearInterval(session.updateLocalStatsInterval); session.updateLocalStatsInterval = setInterval(function(){updateLocalStats();},3000); if (!gotDevices2AlreadyRan){ enumerateDevices().then(gotDevices2); // this is needed for iOS; was previous set to timeout at 100ms, but would be useful everywhere I think } v.dataset.menu = "context-menu-video"; if (!session.cleanOutput){ v.classList.add("task"); // this adds the right-click menu } session.seeding=true; session.seedStream(); }; async function publishScreen2(constraints, audioList=[], audio=true){ // webcam stream is used to generated an SDP log("SCREEN SHARE SETUP"); if (!navigator.mediaDevices.getDisplayMedia){ setTimeout(function(){ if (iOS || iPad){ warnUser("Sorry, but your iOS browser does not support screen-sharing.\n\nPlease see this guide for an alternative method to do so."); } else if (session.mobile){ warnUser("Sorry, your browser does not support screen-sharing.\n\nThe Android native app should support it though."); } else { warnUser("Sorry, your browser does not support screen-sharing.\n\nPlease use the desktop versions of Firefox or Chrome instead."); } },1); return false; } if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) { if (!ElectronDesktopCapture){ if (!(session.cleanOutput && session.cleanish==false)){ warnUser("Enable Elevated Privileges to allow screen-sharing. (right click this window to see that option)"); } return false; } } var streams = []; for (var i=1; i"+fileinfo.name+"
Do you trust them? "; } else if (fileinfo.status === 1){ data.msg = " has a shared a file with you:
"+fileinfo.name+"
"; } else if (fileinfo.status === 2){ data.msg = " has a shared a file with you:
"+fileinfo.name+"
"; } else if (fileinfo.status === 3){ data.msg = " has a shared a file with you:
"+fileinfo.name+"
"; } else if (fileinfo.status === 4){ data.msg = " has a shared a file with you:
"+fileinfo.name+"
"; } else if (fileinfo.status === 5){ data.msg = " has a shared a file with you:
"+fileinfo.name+"
"; } else if (fileinfo.status === 6){ return; } var director=false; // add back in later. if (session.directorList.indexOf(fileinfo.UUID)>=0){ director=true; } if (label) { data.label = label; if (director) { data.label = "" + data.label + ""; } else { data.label = "" + data.label + ""; } } else if (director) { data.label = "Director"; } else { data.label = "Someone"; } data.type = "action"; msgTransferList.push(data); } session.shareFile = function(ele, UUID=false, event=false){ // webcam stream is used to generated an SDP if (session.hostedFiles===false){return;} // disabled for (var i = 0; i < ele.files.length; i++){ // changing from a FileList to an Array. Arrays are easier to modify later on ele.files[i].id = session.generateStreamID(8); // can't be too short, else can be brute forced ele.files[i].state = 1; ele.files[i].restricted = UUID; session.hostedFiles.push(ele.files[i]); } log(session.hostedFiles); //for (var in rpcs and pcs .... goes here if (UUID===false){ for (UUID in session.pcs){ session.provideFileList(UUID); } for (UUID in session.rpcs){ if (UUID in session.pcs){continue;} session.provideFileList(UUID); } } else { session.provideFileList(UUID); } pokeIframeAPI('file-share', true); closeModal(); } session.hostFile = function(ele, event){ // webcam stream is used to generated an SDP log("FILE TRANSFER SETUP"); session.hostedFiles = []; for (var i = 0; i < ele.files.length; i++){ // changing from a FileList to an Array. Arrays are easier to modify later on ele.files[i].id = session.generateStreamID(8); // can't be too short, else can be brute forced ele.files[i].state = 1; session.hostedFiles.push(ele.files[i]); } log(session.hostedFiles); var container = document.createElement("div"); container.id = "container_host"; getById("gridlayout").appendChild(container); if (session.cover){ container.style.setProperty('height', '100%', 'important'); } if (session.roomid!==false){ if ((session.roomid==="") && ((!(session.view)) || (session.view===""))){ } else { log("ROOMID EANBLED"); //log("Update Mixer Event on REsize SET"); //window.addEventListener("resize", updateMixer);// TODO FIX //window.addEventListener("orientationchange", updateMixer);// TODO FIX getById("head3").classList.add('advanced'); getById("head3a").classList.add('advanced'); joinRoom(session.roomid); } } else { getById("head3").classList.remove('advanced'); getById("head3a").classList.remove('advanced'); getById("logoname").style.display = 'none'; } getById("head1").className = 'advanced'; updatePushId() 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"; } updateReshareLink(); pokeIframeAPI('file-share', true); pokeIframeAPI('started-fileshare'); // deprecated clearInterval(session.updateLocalStatsInterval); session.updateLocalStatsInterval = setInterval(function(){updateLocalStats();},3000); session.seeding=true; session.seedStream(); } function updateReshareLink(){ try{ var m = getById("mainmenu"); m.remove(); } catch (e){} var added = ""; if (session.defaultPassword===false){ if (session.password!==false){ added="&pw="+session.password; } else { added="&pw=false"; } } var pie = ""; if (session.customWSS){ if (session.customWSS!==true){ pie = "&pie="+session.customWSS; } } var shareLink = "https://"+location.host+location.pathname+"?view="+session.streamID+added+pie; getById("reshare").href = shareLink; getById("reshare").text = shareLink; getById("reshare").style.width = ((getById("reshare").text.length + 1)*1.15 * 8) + 'px'; pokeIframeAPI('share-link', shareLink); } session.publishFile = function(ele, event){ // webcam stream is used to generated an SDP log("FILE STREAM SETUP"); if (session.transcript){ setTimeout(function(){setupClosedCaptions();},1000); } var files = []; for (var i = 0; i < ele.files.length; i++){ // changing from a FileList to an Array. Arrays are easier to modify later on files.push(ele.files[i]); } log(files); //var type = file.type; var fileURL = URL.createObjectURL(files[0]); var container = document.createElement("div"); container.id = "container"; // transform: scaleX(-1) translate(0px, -50%); if (session.cover){ container.style.setProperty('height', '100%', 'important'); } container.className = "vidcon"; var v = createVideoElement(); if (session.cleanOutput){ container.style.height = "100%"; v.style.maxWidth = "100%"; v.style.boxShadow = "none"; } if (session.streamID){ v.dataset.sid = session.streamID; } getById("gridlayout").appendChild(container); if (session.roomid!==false){ if ((session.roomid==="") && ((!(session.view)) || (session.view===""))){ } else { log("ROOMID EANBLED"); log("Update Mixer Event on REsize SET"); //window.addEventListener("resize", updateMixer);// TODO FIX //window.addEventListener("orientationchange", updateMixer);// TODO FIX getById("head3").classList.add('advanced'); getById("head3a").classList.add('advanced'); joinRoom(session.roomid); } } else { getById("head3").classList.remove('advanced'); getById("head3a").classList.remove('advanced'); getById("logoname").style.display = 'none'; } getById("head1").className = 'advanced'; updatePushId() 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"; } var bigPlayButton = document.getElementById("bigPlayButton"); if (bigPlayButton){ bigPlayButton.parentNode.removeChild(bigPlayButton); } v.autoplay = false; v.controls = true; v.muted = false; if (files.length ==1){ // we don't want to do the complex logic if there is just one video v.loop = true; } else { v.loop = false; // triggers the complex track/rtc logic. } v.setAttribute("playsinline",""); v.src = fileURL; try { if (Firefox){ session.streamSrc = v.mozCaptureStream(); } else { session.streamSrc = v.captureStream(); // gaaaaaaaaaaaahhhhhhhh! } toggleMute(true); } catch (e){ errorlog(e); return; } v.id = "videosource"; // could be set to UUID in the future v.playlist = files; v.addEventListener('ended',myHandler,false); // only fires if the video doesn't loop. function myHandler(e) { log("MY HANDLER TRIGGERED"); var vid = getById("videosource"); log(vid.playlist); vid.playlist.unshift(vid.playlist.pop()); vid.src = URL.createObjectURL(vid.playlist[0]); vid.onloadeddata = function(){ if (Firefox){ session.streamSrc = vid.mozCaptureStream(); } else { session.streamSrc = vid.captureStream(); // gaaaaaaaaaaaahhhhhhhh! } toggleMute(true); session.streamSrc.getTracks().forEach(function(track){ // I'm making an exception I guess -- reversing the role? for (UUID in session.pcs){ if ("realUUID" in session.pcs[UUID]){continue;} var senders = getSenders2(UUID); log(track); if (track.kind == "video"){ 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 // 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 (added) { return; } if (sender.track && sender.track.kind == "video"){ sender.replaceTrack(track); // replace may not be supported by all browsers. eek. added=true; } }); if (added==false){ session.pcs[UUID].addTrack(track, session.streamSrc); setTimeout(function(uuid){session.optimizeBitrate(uuid);},session.rampUpTime, UUID); // 3 seconds lets us ramp up the quality a bit and figure out the total bandwidth quicker } } } catch (e){ errorlog(e); } } else { session.pcs[UUID].addTrack(track, session.streamSrc); } } }); session.refreshScale(); } session.applySoloChat(); // mute streams that should be muted if a director session.applyIsolatedChat(); vid.load(); vid.play().then(_ => { log("playing 2"); }).catch(warnlog); } // no preview doesn't work, so just stop it from doing its thing. v.className = "tile clean fileshare"; session.videoElement = v; container.appendChild(v); changeAudioOutputDevice(v); session.mirrorExclude=true; if (session.director){ } else if (session.scene!==false){ } else if (session.roomid!==false){ if (session.roomid===""){ if (!(session.view) || (session.view==="")){ if (session.fullscreen){ session.windowed = false; } else { v.className = "myVideo clean fileshare"; session.windowed = true; } getById("mutespeakerbutton").classList.add("advanced"); container.style.width="100%"; container.style.alignItems = "center"; container.backgroundColor = "#666"; play(); } else { session.windowed = false; play(); } } else { //session.cbr=0; // we're just going to override it if (session.stereo==5){ session.stereo=3; } session.windowed = false; } applyMirror(session.mirrorExclude); } else { if (session.fullscreen){ session.windowed = false; } else { v.className = "myVideo clean fileshare"; session.windowed = true; } getById("mutespeakerbutton").classList.add("advanced"); container.style.width="100%"; container.style.alignItems = "center"; container.backgroundColor = "#666"; applyMirror(session.mirrorExclude); } v.addEventListener('click', function(e){ log("click"); try { if ((e.ctrlKey)||(e.metaKey)){ e.preventDefault(); var [menu, innerMenu] = statsMenuCreator(); menu.interval = setInterval(printMyStats,3000, innerMenu); printMyStats(innerMenu); e.stopPropagation(); return false; } } catch(e){errorlog(e);} }); v.touchTimeOut = null; v.touchLastTap = 0; v.touchCount = 0; v.addEventListener('touchend', function(event) { if (session.disableMouseEvents){return;} 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; var [menu, innerMenu] = statsMenuCreator(); menu.interval = setInterval(printMyStats,3000, innerMenu); printMyStats(innerMenu); 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; } }); updateReshareLink(); pokeIframeAPI('started-fileshare'); // depreciated pokeIframeAPI('file-share', true); clearInterval(session.updateLocalStatsInterval); session.updateLocalStatsInterval = setInterval(function(){updateLocalStats();},3000); session.seeding=true; if (session.videoMutedFlag){ session.videoMuted = true; toggleVideoMute(true); } session.seedStream(); }; function tryAgain(event) { // audio or video agnostic track reconnect ------------not actually in use,. maybe out of date log("TRY AGAIN TRIGGERED"); warnlog(event); } function enterPressedClick(event, ele) { if (event.keyCode === 13) { event.preventDefault(); ele.click(); } } function enterPressed(event, callback) { // Number 13 is the "Enter" key on the keyboard if (event.keyCode === 13) { event.preventDefault(); callback(); } } function dragElement(elmnt) { if (session.disableMouseEvents){return;} var millis = Date.now(); try { var input = getById("zoomSlider"); var stream = elmnt.srcObject; try { var track0 = stream.getVideoTracks(); } catch (e) { return; } if (!(track0.length)) { return; } track0 = track0[0]; if (track0.getCapabilities) { var capabilities = track0.getCapabilities(); var settings = track0.getSettings(); // Check whether zoom is supported or not. if (!('zoom' in capabilities)) { log('Zoom is not supported by ' + track0.label); return; } // Map zoom to a slider element. input.min = capabilities.zoom.min; input.max = capabilities.zoom.max; input.step = capabilities.zoom.step; input.value = settings.zoom; } } catch (e) { errorlog(e); return; } log("drag on"); elmnt.onmousedown = dragMouseDown; elmnt.onclick = onvideoclick; elmnt.ontouchstart = dragMouseDown; var pos0 = 1; function onvideoclick(e) { log(e); log("onvideoclick"); e = e || window.event; e.preventDefault(); return false; } function dragMouseDown(e) { log(e); log("dragMouseDown"); //closeDragElement(null); //elmnt.controls = session.showControls; e = e || window.event; e.preventDefault(); pos0 = input.value; if (e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel') { var touch = e.touches[0] || e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; pos3 = touch.clientX; pos4 = touch.clientY; } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover' || e.type == 'mouseout' || e.type == 'mouseenter' || e.type == 'mouseleave') { pos3 = e.clientX; pos4 = e.clientY; } document.ontouchup = closeDragElement; document.onmouseup = closeDragElement; document.ontouchmove = elementDrag; document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: if (Date.now() - millis < 100) { return; } millis = Date.now(); if (e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel') { var touch = e.touches[0] || e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; pos1 = touch.clientX; pos2 = touch.clientY; } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover' || e.type == 'mouseout' || e.type == 'mouseenter' || e.type == 'mouseleave') { pos1 = e.clientX; pos2 = e.clientY; } var zoom = parseFloat((pos4 - pos2) * 2 / elmnt.offsetHeight); if (zoom > 1) { zoom = 1.0; } else if (zoom < -1) { zoom = -1.0; } input.value = zoom * (input.max - input.min) + input.min; if (input.value != pos0) { updateCameraConstraints("zoom", input.value, false, false); //track0.applyConstraints({ // advanced: [{ // zoom: input.value // }] //}); } } function closeDragElement(e) { log(e); log("closeDragElement"); //if (e!==null){ // elmnt.controls=true; //} /* stop moving when mouse button is released:*/ document.ontouchup = null; document.onmouseup = null; document.onmousemove = null; document.ontouchmove = null; } } function previewIframe(iframeSrc) { // this is pretty important if you want to avoid camera permission popup problems. You can also call it automatically via: loadIframe();"> , but don't call it before the page loads. var iframe = document.createElement("iframe"); iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;"; iframe.style.width = "100%"; iframe.style.height = "100%"; iframe.style.border = "10px dashed rgb(64 65 62)"; iframeSrc = parseURL4Iframe(iframeSrc); /* if (typeof iframeSrc == "object"){ // special handler. iframeSrc = iframeSrc.parsedSrc; } */ iframe.src = iframeSrc; getById("previewIframe").innerHTML = ""; getById("previewIframe").style.width = "640px"; getById("previewIframe").style.height = "360px"; getById("previewIframe").style.margin = "auto"; getById("previewIframe").appendChild(iframe); } function loadIframe(iframesrc, UUID) { // this is pretty important if you want to avoid camera permission popup problems. You can also call it automatically via: loadIframe();"> , but don't call it before the page loads. /* if (document.getElementById("mainmenu")) { var m = getById("mainmenu"); m.remove(); } */ var iframeID = "iframe_"+UUID; var iframe = document.createElement("iframe"); iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;"; iframe.style.width = "100%"; iframe.style.height = "100%"; iframe.style.border = "10px dashed rgb(64 65 62)"; iframe.id = iframeID; iframe.dataset.UUID = UUID; iframe.loadedYoutubeListen = false; if (session.director){ // } else if (session.scene!==false){ if (session.view){ // specific video to be played iframe.style.display="block"; } else if (session.scene==="0"){ iframe.style.display="block"; } else { // group scene I guess; needs to be added manually iframe.style.display="none"; } } else if (session.roomid!==false){ // } else { iframe.style.display="block"; } if (iframesrc == "") { iframesrc = "./"; iframe.style.border = "0"; } // trusted domains if (iframesrc.startsWith("https://vdo.ninja/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://obs.ninja/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://vmix.ninja/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://backup.vdo.ninja/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://backup.obs.ninja/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://www.youtube.com/")){ iframe.style.border = "0"; setTimeout(function(iframe_id){YoutubeListen(iframe_id);}, 1000, iframeID); // create stats feedback for the director; syncing. } else if (iframesrc.startsWith("https://player.twitch.tv/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://twitch.tv/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://www.twitch.tv/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://vimeo.com/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://player.vimeo.com/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://meshcast.io/")){ //iframesrc = iframesrc.replace("//meshcast.io/", "//meshcast.vdo.ninja/"); iframe.style.border = "0"; // iframe.dataset.meshcast = true; // TODO: this was a bit of a fail if (document.domain==="backup.vdo.ninja"){ document.domain = 'vdo.ninja'; } else if (document.domain==="isolated.vdo.ninja"){ document.domain = 'vdo.ninja'; } } else if (iframesrc.startsWith("https://s10.fun/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://play.rozy.tv/")){ iframe.style.border = "0"; } iframe.src = iframesrc; pokeIframeAPI('iframe-loaded', iframesrc); return iframe } function dropDownButtonAction(ele) { var ele = getById("dropButton"); if (ele) { ele.parentNode.removeChild(ele); getById('container-5').classList.remove('advanced'); getById('container-8').classList.remove('advanced'); getById('container-6').classList.remove('advanced'); getById('container-7').classList.remove('advanced'); } } function updateConstraintSliders() { log("updateConstraintSliders"); if (session.roomid !== false && session.roomid !== "" && session.director !== true && session.forceMediaSettings == false) { if (session.controlRoomBitrate !== false) { listCameraSettings(); } if (session.effects!==false){ //if ((iOS) || (iPad)){ //} else { getById("effectsDiv3").style.display = "block"; getById("effectSelector3").value = session.effects || "0"; //} } } else { listAudioSettings(); listCameraSettings(); //if ((iOS) || (iPad)){ // } else { if (session.effects!==false){ getById("effectsDiv3").style.display = "block"; try{ getById("effectSelector3").value = session.effects || "0"; } catch(E){} } //} } //checkIfPIP(); // this doesn't actually work on iOS still, so whatever. } function checkIfPIP() { try { if (session.videoElement && ((session.videoElement.webkitSupportsPresentationMode && typeof session.videoElement.webkitSetPresentationMode === "function") || (document.pictureInPictureEnabled || !videoElement.disablePictureInPicture))) { // Toggle PiP when the user clicks the button. getById("pIpStartButton").addEventListener("click", function(event) { // if ( (document.pictureInPictureEnabled || !videoElement.disablePictureInPicture)){ //session.videoElement.requestPictureInPicture(); // } else { session.videoElement.webkitSetPresentationMode(session.videoElement.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture"); // } }); getById("pIpStartButton").style.display = "inline-block"; } } catch (e) { errorlog(e); } } function togglePictureInPicture(videoElement) { if (document.pictureInPictureElement) { if (document.pictureInPictureElement.id == videoElement.id){ document.exitPictureInPicture(); pokeIframeAPI('picture-in-picture', false); } else { document.exitPictureInPicture(); pokeIframeAPI('picture-in-picture', false); videoElement.requestPictureInPicture(); pokeIframeAPI('picture-in-picture', true); } } else if (document.pictureInPictureEnabled) { videoElement.requestPictureInPicture(); pokeIframeAPI('picture-in-picture', true); } } function listAudioSettingsPrep() { try { var tracks = session.streamSrc.getAudioTracks(); if (!tracks.length) { warnlog("session.streamSrc contains no audio tracks"); return; } } catch (e) { warnlog(e); return; } var data = []; for (var i = 0; i < tracks.length; i += 1) { track0 = tracks[i]; var trackSet = {}; if (track0.getCapabilities) { trackSet.audioConstraints = track0.getCapabilities(); } else if (Firefox){ // let's pretend like Firefox doesn't actually suck trackSet.audioConstraints = { "autoGainControl": [ true, false ], // "channelCount": { // "max": 2, // "min": 1 // }, // "deviceId": "default", "echoCancellation": [ true, false ], // "groupId": "a3cbdec54a9b6ed473fd950415626f7e76f9d1b90f8c768faab572175a355a17", // "latency": { // "max": 0.01, // "min": 0.01 // }, "noiseSuppression": [ true, false ], // "sampleRate": { // "max": 48000, // "min": 48000 // }, // "sampleSize": { // "max": 16, // "min": 16 /// } }; } if (track0.getSettings) { trackSet.currentAudioConstraints = track0.getSettings(); } trackSet.trackLabel = "unknown or none"; if (track0.label) { trackSet.trackLabel = track0.label; } if (track0.id) { trackSet.deviceID = track0.id; } if (i == 0) { trackSet.equalizer = session.equalizer; // only supporting the first track at the moment. for (var waid in session.webAudios) { // TODO: EXCLUDE CURRENT TRACK IF ALREADY EXISTS ... if (track.id === wa.id){.. try{ trackSet.lowEQ = session.webAudios[waid].lowEQ.gain.value; trackSet.midEQ = session.webAudios[waid].midEQ.gain.value; trackSet.highEQ = session.webAudios[waid].highEQ.gain.value; } catch(e){} break; } } else { trackSet.equalizer = false; } if (i == 0) { trackSet.lowcut = session.lowcut; // only supporting the first track at the moment. if (session.lowcut){ for (var waid in session.webAudios) { // TODO: EXCLUDE CURRENT TRACK IF ALREADY EXISTS ... if (track.id === wa.id){.. try{ trackSet.lowcut = session.webAudios[waid].lowcut1.frequency.value; } catch(e){} break; } } } else { trackSet.lowcut = false; } trackSet.subGain = false; for (var waid in session.webAudios) { // TODO: EXCLUDE CURRENT TRACK IF ALREADY EXISTS ... if (track.id === wa.id){.. try{ if (session.webAudios[waid].subGainNodes && (track0.id in session.webAudios[waid].subGainNodes)){ trackSet.subGain = session.webAudios[waid].subGainNodes[track0.id].gain.value; } break; } catch(e){} } data.push(trackSet); } pokeIframeAPI('listing-audio-settings', data); return data; } function listVideoSettingsPrep() { try { var track0 = session.streamSrc.getVideoTracks(); if (track0.length) { track0 = track0[0]; if (track0.getCapabilities) { session.cameraConstraints = track0.getCapabilities(); } log(session.cameraConstraints); } } catch (e) { warnlog(e); return; } try { if (track0.getSettings) { session.currentCameraConstraints = track0.getSettings(); } } catch (e) { warnlog(e); return; } var msg = {}; msg.trackLabel = "unknown or none"; if (track0.label) { msg.trackLabel = track0.label; } msg.currentCameraConstraints = session.currentCameraConstraints; msg.cameraConstraints = session.cameraConstraints; pokeIframeAPI('listing-video-settings', msg); return msg; } var Final_transcript = ""; var Interim_transcript = ""; var Recognition = null; if ("webkitSpeechRecognition" in window) { var SpeechRecognition = webkitSpeechRecognition; } else if ("SpeechRecognition" in window) { var SpeechRecognition = window.SpeechRecognition; } else { var SpeechRecognition = false; } var TranscriptionCounter = 0; var retriesRecognition = 0; var activeRecognition=false; var timeoutRecognition = null; function setupClosedCaptions() { if (activeRecognition){return;} activeRecognition=true; log("CLOSED CAPTIONING SETUP"); if (SpeechRecognition) { Recognition = new SpeechRecognition(); Recognition.lang = session.transcript; Recognition.continuous = true; Recognition.interimResults = true; Recognition.maxAlternatives = 0; Recognition.onstart = function() { log("started transcription: "+Date.now()); clearTimeout(timeoutRecognition); timeoutRecognition = setTimeout(function(){ retriesRecognition=0; },10000); }; Recognition.onerror = function(event) { if (retriesRecognition<=3){ console.error(event); } errorlog(event); }; Recognition.onend = function(e) { warnlog(e); log("Stopped transcription "+Date.now()); clearTimeout(timeoutRecognition); timeoutRecognition = setTimeout(function() { Recognition.start(); }, parseInt(500*retriesRecognition*retriesRecognition)); // restart it if it fails. retriesRecognition+=1; if (retriesRecognition==3){ console.error("Captioning service is having a problem connecting"); } }; Recognition.onresult = function(event) { Interim_transcript = ''; if (typeof(event.results) == 'undefined') { log(event); return; } for (var i = event.resultIndex; i < event.results.length; ++i) { if (event.results[i].isFinal) { Final_transcript += event.results[i][0].transcript; } else { Interim_transcript += event.results[i][0].transcript; } } if (Final_transcript.length > 0) { log("FINAL:" + Final_transcript); try { var data = {}; data.isFinal = true; data.transcript = Final_transcript; data.counter = TranscriptionCounter; session.sendMessage(data); TranscriptionCounter += 1; Final_transcript = ""; Interim_transcript = ""; pokeIframeAPI('transcription-text', Final_transcript); } catch (e) { errorlog(e); } } else { try { var data = {}; data.isFinal = false; data.transcript = Interim_transcript; data.counter = TranscriptionCounter; session.sendMessage(data); } catch (e) { errorlog(e); Interim_transcript = ""; } } }; Recognition.start(); } } async function requestVideoRecord(ele) { var UUID = ele.dataset.UUID if (ele.classList.contains("pressed")) { var msg = {}; msg.requestVideoRecord = false; msg.UUID = UUID; session.sendRequest(msg, msg.UUID); ele.classList.remove("pressed"); } else { var msg = {}; msg.requestVideoRecord = true; msg.UUID = UUID; window.focus(); var bitrate = await promptAlt(miscTranslations["what-bitrate"], false, false, 6000); if (bitrate) { msg.value = bitrate; session.sendRequest(msg, msg.UUID); ele.classList.add("pressed"); } } pokeIframeAPI('request-video-record', msg.requestVideoRecord, UUID); } function changeOrderDirector(value) { if (session.order==false){ session.order=0; } session.order += parseInt(value) || 0; var elements = document.querySelectorAll('[data-action-type="order-value-director"]'); //log(elements); if (elements[0]){ elements[0].innerText = parseInt(session.order) || 0; } var data = {}; data = {}; data.order = session.order; session.sendPeers(data); pokeIframeAPI('director-order', data.order); } function changeOrder(value, UUID) { var msg = {}; msg.changeOrder = value; msg.UUID = UUID; session.sendRequest(msg, msg.UUID); pokeIframeAPI('change-order', value, UUID); } function requestVideoHack(keyname, value, UUID, ctrl=false) { var msg = {}; msg.requestVideoHack = true; msg.keyname = keyname; msg.value = value; msg.UUID = UUID; msg.ctrl = ctrl; session.sendRequest(msg, msg.UUID); pokeIframeAPI('request-video-setting', {value:value, keyname:keyname, ctrl:ctrl}, UUID); } function requestAudioHack(keyname, value, UUID, deviceID = "default") { // updateCameraConstraints var msg = {}; msg.requestAudioHack = true; msg.keyname = keyname; msg.value = value; msg.UUID = UUID; msg.deviceID = deviceID; session.sendRequest(msg, msg.UUID); pokeIframeAPI('request-audio-setting', {value:value, keyname:keyname, deviceID:deviceID}, UUID); } function requestChangeEQ(keyname, value, UUID, track = 0) { // updateCameraConstraints var msg = {}; msg.requestChangeEQ = true; msg.keyname = keyname; msg.value = value; msg.UUID = UUID; msg.track = track; // pointless atm session.sendRequest(msg, msg.UUID); pokeIframeAPI('request-change-eq', {value:value, keyname:keyname, track:track}, UUID); } function requestChangeSubGain(value, UUID, deviceID) { // updateCameraConstraints var msg = {}; msg.requestChangeSubGain = true; msg.value = value; msg.UUID = UUID; msg.deviceID = deviceID; // pointless atm log(msg); session.sendRequest(msg, msg.UUID); pokeIframeAPI('request-sub-gain', {value:value, deviceID:deviceID}, UUID); } function requestChangeLowcut(value, UUID, track = 0) { // updateCameraConstraints var msg = {}; msg.requestChangeLowcut = true; msg.value = value; msg.UUID = UUID; msg.track = track; // pointless atm session.sendRequest(msg, msg.UUID); pokeIframeAPI('request-low-cut', value, UUID); } function toggleSystemPip(vid) { if (vid.webkitSupportsPresentationMode && (typeof vid.webkitSetPresentationMode === "function")) { vid.webkitSetPresentationMode( vid.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture" ); } else { if (document.pictureInPictureElemen) { document.exitPictureInPicture(); vid.requestPictureInPicture(); } else { vid.requestPictureInPicture(); } } } function updateDirectorsAudio(dataN, UUID) { var audioEle = document.createElement("div"); getById("advanced_audio_director_" + UUID).innerHTML = ""; getById("advanced_audio_director_" + UUID).className = ""; //log(dataN); if (!dataN.length) { return; } for (var n = 0; n < dataN.length; n += 1) { var data = dataN[n]; if (dataN.length==1) { if (data.trackLabel) { var label = document.createElement("span"); label.innerText = data.trackLabel; label.style.marginBottom = "10px"; label.style.display = "block"; label.id = "remoteAudioLabel_"+UUID; audioEle.appendChild(label); } } //if (n !== 0) { //var label = document.createElement("span"); //label.innerText = "Coming Soon"; //audioEle.appendChild(label); // continue; // remove to more than one audio device (assuming other fixes are applied) //} if (data.lowcut!==false && n==0) { var label = document.createElement("label"); var i = "Low_Cut"; label.id = "label_" + i; label.htmlFor = "constraints_" + i; var input = document.createElement("input"); input.min = 50; input.max = 150; input.value = data.lowcut; input.title = "Previously was: "+input.value; input.type = "range"; input.dataset.keyname = i; input.dataset.labelname = "low cut:"; label.innerText = input.dataset.labelname+" "+input.value; input.dataset.track = n; input.dataset.UUID = UUID; input.id = "constraints_" + i; input.style = "display:block; width:100%;"; input.name = "constraints_" + i; input.style.margin = "8px 0"; input.onchange = function(e) { //e.target.title = e.target.value; getById("label_" + e.target.dataset.keyname).innerText = e.target.dataset.labelname + " " + e.target.value; requestChangeLowcut(parseInt(e.target.value), e.target.dataset.UUID, parseInt(e.target.dataset.track)); }; audioEle.appendChild(label); audioEle.appendChild(input); } if (data.equalizer && n==0) { var label = document.createElement("label"); var i = "Low_EQ"; label.id = "label_" + i; label.htmlFor = "constraints_" + i; var input = document.createElement("input"); input.min = -50; input.max = 50; input.value = data.lowEQ; input.title = "Previously was: "+input.value; input.type = "range"; input.dataset.keyname = i; input.dataset.labelname = "low EQ:" label.innerText = input.dataset.labelname+" "+input.value; input.dataset.track = n; input.dataset.UUID = UUID; input.id = "constraints_" + i; input.style = "display:block; width:100%;"; input.name = "constraints_" + i; input.style.margin = "8px 0"; input.onchange = function(e) { getById("label_" + e.target.dataset.keyname).innerText = e.target.dataset.labelname + " " + e.target.value; //changeLowEQ( e.target.value); //e.target.title = e.target.value; requestChangeEQ("low", parseInt(e.target.value), e.target.dataset.UUID, parseInt(e.target.dataset.track)); }; audioEle.appendChild(label); audioEle.appendChild(input); var label = document.createElement("label"); var i = "Mid_EQ"; label.id = "label_" + i; label.htmlFor = "constraints_" + i; var input = document.createElement("input"); input.min = -50; input.max = 50; input.value = data.midEQ; input.title = "Previously was: "+input.value; input.type = "range"; input.dataset.keyname = i; input.dataset.labelname = "mid EQ:"; label.innerText = input.dataset.labelname+" "+input.value; input.dataset.track = n; input.dataset.UUID = UUID; input.id = "constraints_" + i; input.style = "display:block; width:100%;"; input.name = "constraints_" + i; input.style.margin = "8px 0"; input.onchange = function(e) { getById("label_" + e.target.dataset.keyname).innerText = e.target.dataset.labelname + " " + e.target.value; //changeMidEQ( e.target.value); //e.target.title = e.target.value; requestChangeEQ("mid", parseInt(e.target.value), e.target.dataset.UUID, parseInt(e.target.dataset.track)); }; audioEle.appendChild(label); audioEle.appendChild(input); var label = document.createElement("label"); var i = "High_EQ"; label.id = "label_" + i; label.htmlFor = "constraints_" + i; var input = document.createElement("input"); input.min = -50; input.max = 50; input.value = data.highEQ; input.title = "Previously was: "+input.value; input.type = "range"; input.dataset.keyname = i; input.dataset.labelname = "high EQ:"; label.innerText = input.dataset.labelname+" "+input.value; input.dataset.track = n; input.dataset.UUID = UUID; input.id = "constraints_" + i; input.style = "display:block; width:100%;"; input.name = "constraints_" + i; input.style.margin = "8px 0"; input.onchange = function(e) { //e.target.title = e.target.value; getById("label_" + e.target.dataset.keyname).innerText = e.target.dataset.labelname + " " + e.target.value; requestChangeEQ("high", parseInt(e.target.value), e.target.dataset.UUID, parseInt(e.target.dataset.track)); }; audioEle.appendChild(label); audioEle.appendChild(input); } if (dataN.length>1){ if (data.trackLabel) { var label = document.createElement("span"); label.innerText = data.trackLabel; label.style.margin = "20px 0 10px 0"; label.style.display = "block"; label.id = "remoteAudioLabel_"+UUID+"_"+n; audioEle.appendChild(label); } } for (var i in data.audioConstraints) { try { log(i); log(data.audioConstraints[i]); if ((typeof data.audioConstraints[i] === 'object') && (data.audioConstraints[i] !== null) && ("max" in data.audioConstraints[i]) && ("min" in data.audioConstraints[i])) { if (i === "aspectRatio") { continue; } else if (i === "width") { // continue; } else if (i === "height") { // continue; } else if (i === "frameRate") { continue; } else if (i === "latency") { continue; } else if (i === "sampleRate") { continue; } else if (i === "channelCount") { continue; } if (!("deviceID" in data.audioConstraints[i])){continue;} // not going to support older versions. var label = document.createElement("label"); label.id = "label_" + i + "_"+n; label.htmlFor = "constraints_" + i + "_"+n; label.innerText = i + ":"; var input = document.createElement("input"); input.min = data.audioConstraints[i].min; input.max = data.audioConstraints[i].max; if (parseFloat(input.min) == parseFloat(input.max)) { continue; } if (i in data.currentAudioConstraints) { input.value = data.currentAudioConstraints[i]; label.innerText = i + ": " + data.currentAudioConstraints[i]; label.title = "Previously was: " + data.currentAudioConstraints[i]; input.title = "Previously was: " + data.currentAudioConstraints[i]; } else { label.innerText = i; } if ((i === "height") || (i === "width")){ input.title = "Hold CTRL (or cmd) to lock width and height together when changing them"; input.min = 16; } if ("step" in data.audioConstraints[i]) { input.step = data.audioConstraints[i].step; } input.type = "range"; input.dataset.keyname = i; input.dataset.track = n; input.dataset.deviceID = data.deviceID; input.dataset.UUID = UUID; input.id = "constraints_" + i + "_"+n; input.style = "display:block; width:100%;"; input.name = "constraints_" + i + "_"+n; input.onchange = function(e) { //e.target.title = e.target.value; getById("label_" + e.target.dataset.keyname+"_"+e.target.dataset.track ).innerText = e.target.dataset.keyname + ": " + e.target.value; //updateAudioConstraints(e.target.dataset.keyname, e.target.value); requestAudioHack(e.target.dataset.keyname, e.target.value, e.target.dataset.UUID, e.target.dataset.deviceID); }; audioEle.appendChild(label); audioEle.appendChild(input); } else if ((typeof data.audioConstraints[i] === 'object') && (data.audioConstraints[i] !== null)) { if (i == "resizeMode") { continue; } var div = document.createElement("div"); var label = document.createElement("label"); label.id = "label_" + i + "_"+n; label.htmlFor = "constraints_" + i + "_"+n; label.innerText = i + ":"; label.style = "display:inline-block; padding:0;margin: 5px 0px 9px;"; var input = document.createElement("select"); var c = document.createElement("option"); if (data.audioConstraints[i].length > 1) { for (var opts in data.audioConstraints[i]) { log(opts); var opt = new Option(data.audioConstraints[i][opts], data.audioConstraints[i][opts]); input.options.add(opt); if (i in data.currentAudioConstraints) { if (data.audioConstraints[i][opts] == data.currentAudioConstraints[i]) { opt.selected = "true"; } } } } else if (i.toLowerCase == "torch") { var opt = new Option("Off", false); input.options.add(opt); opt = new Option("On", true); input.options.add(opt); } else { continue; } input.id = "constraints_" + i + "_"+n; input.className = "constraintCameraInput"; input.name = "constraints_" + i + "_"+n; input.style = "display:inline; padding:2px; margin:0 10px;"; input.dataset.keyname = i; input.dataset.track = n; input.dataset.deviceID = data.deviceID; input.dataset.UUID = UUID; input.onchange = function(e) { //getById("label_"+e.target.dataset.keyname).innerText =e.target.dataset.keyname+": "+e.target.value; //updateAudioConstraints(e.target.dataset.keyname, e.target.value); requestAudioHack(e.target.dataset.keyname, e.target.value, e.target.dataset.UUID, e.target.dataset.deviceID); log(e.target.dataset.keyname, e.target.value); }; audioEle.appendChild(div); div.appendChild(label); div.appendChild(input); } else if (typeof data.audioConstraints[i] === 'boolean') { var div = document.createElement("div"); var label = document.createElement("label"); label.id = "label_" + i + "_"+n; label.htmlFor = "constraints_" + i + "_"+n; label.innerText = i + ":"; label.style = "display:inline-block; padding:0;margin: 5px 0px 9px;"; label.dataset.keyname = i + "_"+n; var input = document.createElement("select"); var c = document.createElement("option"); var opt = new Option("Off", false); input.options.add(opt); opt = new Option("On", true); input.options.add(opt); input.dataset.deviceID = data.deviceID; input.id = "constraints_" + i + "_"+n; input.className = "constraintCameraInput"; input.name = "constraints_" + i + "_"+n; input.style = "display:inline; padding:2px; margin:0 10px;"; input.dataset.keyname = i; input.dataset.track = n; input.dataset.UUID = UUID; input.onchange = function(e) { //getById("label_"+e.target.dataset.keyname).innerText =e.target.dataset.keyname+": "+e.target.value; //updateAudioConstraints(e.target.dataset.keyname, e.target.value); requestAudioHack(e.target.dataset.keyname, e.target.value, e.target.dataset.UUID, e.target.dataset.deviceID); log(e.target.dataset.keyname, e.target.value); }; audioEle.appendChild(div); div.appendChild(label); div.appendChild(input); } } catch (e) { errorlog(e); } } if (data.subGain!==false) { var label = document.createElement("label"); var i = "Gain"; label.id = "label_" + i + "_" + n; label.htmlFor = "constraints_" + i + "_" + n; var input = document.createElement("input"); input.min = 0; input.max = 200; input.value = data.subGain*100; input.title = "Previously was: "+parseInt(input.value); input.type = "range"; input.dataset.keyname = i + "_" + n; input.dataset.labelname = "Gain:" label.innerText = input.dataset.labelname+" "+parseInt(input.value); input.dataset.track = data.deviceID; input.dataset.UUID = UUID; input.id = "constraints_" + i + "_" + n; input.style = "display:block; width:100%;"; input.name = "constraints_" + i + "_" + n; input.style.margin = "8px 0"; input.onchange = function(e) { getById("label_" + e.target.dataset.keyname).innerText = e.target.dataset.labelname + " " + e.target.value; //changeLowEQ( e.target.value); //e.target.title = e.target.value; requestChangeSubGain(parseInt(e.target.value), e.target.dataset.UUID, e.target.dataset.track); }; audioEle.appendChild(label); audioEle.appendChild(input); } getById("advanced_audio_director_" + UUID).appendChild(audioEle); } } function updateDirectorsVideo(data, UUID) { var videoEle = document.createElement("div"); if (data.trackLabel) { var label = document.createElement("span"); label.innerText = data.trackLabel; label.style.marginBottom = "10px"; label.style.display = "block"; label.id = "remoteVideoLabel_"+UUID; videoEle.appendChild(label); } for (var i in data.cameraConstraints) { try { log(i); log(data.cameraConstraints[i]); if ((typeof data.cameraConstraints[i] === 'object') && (data.cameraConstraints[i] !== null) && ("max" in data.cameraConstraints[i]) && ("min" in data.cameraConstraints[i])) { if (i === "aspectRatio") { continue; } else if (i === "width") { // continue; } else if (i === "height") { // continue; } else if (i === "frameRate") { continue; } else if (i === "latency") { continue; } else if (i === "sampleRate") { continue; } else if (i === "channelCount") { continue; } var label = document.createElement("label"); label.id = "label_" + i; label.htmlFor = "constraints_" + i; label.innerText = i + ":"; var input = document.createElement("input"); input.min = data.cameraConstraints[i].min; input.max = data.cameraConstraints[i].max; if (parseFloat(input.min) == parseFloat(input.max)) { continue; } if (i in data.currentCameraConstraints) { input.value = data.currentCameraConstraints[i]; label.innerText = i + ": " + data.currentCameraConstraints[i]; label.title = "Previously was: " + data.currentCameraConstraints[i]; input.title = "Previously was: " + data.currentCameraConstraints[i]; } else { label.innerText = i; } if ("step" in data.cameraConstraints[i]) { input.step = data.cameraConstraints[i].step; } input.type = "range"; input.dataset.keyname = i; input.id = "constraints_" + i; input.style = "display:block; width:100%;margin: 8px 0;"; input.name = "constraints_" + i; if ((i === "height") || (i === "width")){ input.title = "Hold CTRL (or cmd) to lock width and height together when changing them"; input.min = 16; } input.onchange = function(e) { getById("label_" + e.target.dataset.keyname).innerText = e.target.dataset.keyname + ": " + e.target.value; //updateVideoConstraints(e.target.dataset.keyname, e.target.value); if (CtrlPressed){ requestVideoHack(e.target.dataset.keyname, e.target.value, UUID, true); } else { requestVideoHack(e.target.dataset.keyname, e.target.value, UUID, false); } }; videoEle.appendChild(label); videoEle.appendChild(input); } else if ((typeof data.cameraConstraints[i] === 'object') && (data.cameraConstraints[i] !== null)) { if (i == "resizeMode") { continue; } var div = document.createElement("div"); var label = document.createElement("label"); label.id = "label_" + i; label.htmlFor = "constraints_" + i; label.innerText = i + ":"; label.style = "display:inline-block; padding:0;margin: 5px 0px 9px;"; label.dataset.keyname = i; var input = document.createElement("select"); var c = document.createElement("option"); if (data.cameraConstraints[i].length > 1) { for (var opts in data.cameraConstraints[i]) { log(opts); var opt = new Option(data.cameraConstraints[i][opts], data.cameraConstraints[i][opts]); input.options.add(opt); if (i in data.currentCameraConstraints) { if (data.cameraConstraints[i][opts] == data.currentCameraConstraints[i]) { opt.selected = "true"; } } } } else if (i.toLowerCase == "torch") { var opt = new Option("Off", false); input.options.add(opt); opt = new Option("On", true); input.options.add(opt); } else { continue; } input.id = "constraints_" + i; input.className = "constraintCameraInput"; input.name = "constraints_" + i; input.style = "display:inline; padding:2px; margin:0 10px;"; input.dataset.keyname = i; input.onchange = function(e) { //getById("label_"+e.target.dataset.keyname).innerText =e.target.dataset.keyname+": "+e.target.value; //updateVideoConstraints(e.target.dataset.keyname, e.target.value); if (CtrlPressed){ requestVideoHack(e.target.dataset.keyname, e.target.value, UUID, true); } else { requestVideoHack(e.target.dataset.keyname, e.target.value, UUID, false); } log(e.target.dataset.keyname, e.target.value); }; videoEle.appendChild(div); div.appendChild(label); div.appendChild(input); } else if (typeof data.cameraConstraints[i] === 'boolean') { var div = document.createElement("div"); var label = document.createElement("label"); label.id = "label_" + i; label.htmlFor = "constraints_" + i; label.innerText = i + ":"; label.style = "display:inline-block; padding:0;margin: 5px 0px 9px;"; label.dataset.keyname = i; var input = document.createElement("select"); var c = document.createElement("option"); var opt = new Option("Off", false); input.options.add(opt); opt = new Option("On", true); input.options.add(opt); input.id = "constraints_" + i; input.className = "constraintCameraInput"; input.name = "constraints_" + i; input.style = "display:inline; padding:2px; margin:0 10px;"; input.dataset.keyname = i; input.onchange = function(e) { //getById("label_"+e.target.dataset.keyname).innerText =e.target.dataset.keyname+": "+e.target.value; //updateVideoConstraints(e.target.dataset.keyname, e.target.value); if (CtrlPressed){ requestVideoHack(e.target.dataset.keyname, e.target.value, UUID, true); } else { requestVideoHack(e.target.dataset.keyname, e.target.value, UUID, false); } log(e.target.dataset.keyname, e.target.value); }; videoEle.appendChild(div); div.appendChild(label); div.appendChild(input); } } catch (e) { errorlog(e); } } getById("advanced_video_director_" + UUID).innerHTML = ""; getById("advanced_video_director_" + UUID).appendChild(videoEle); getById("advanced_video_director_" + UUID).className = ""; } /////// function listAudioSettings() { getById("popupSelector_constraints_audio").innerHTML = ""; var tracks = session.streamSrc.getAudioTracks(); if (!tracks.length){ warnlog("session.streamSrc contains no audio tracks"); return } for (var ii = 0; ii< tracks.length; ii++){ track0 = tracks[ii]; if (track0.getCapabilities) { session.audioConstraints = track0.getCapabilities(); } else if (Firefox){ // let's pretend like Firefox doesn't actually suck session.audioConstraints = { "autoGainControl": [ true, false ], // "channelCount": { // "max": 2, // "min": 1 // }, // "deviceId": "default", "echoCancellation": [ true, false ], // "groupId": "a3cbdec54a9b6ed473fd950415626f7e76f9d1b90f8c768faab572175a355a17", // "latency": { // "max": 0.01, // "min": 0.01 // }, "noiseSuppression": [ true, false ], // "sampleRate": { // "max": 48000, // "min": 48000 // }, // "sampleSize": { // "max": 16, // "min": 16 /// } }; } try { if (track0.getSettings) { session.currentAudioConstraints = track0.getSettings(); } } catch (e) { errorlog(e); } ////// if (session.lowcut && ii==0) { // ii==0 implies only track0 is supported by the web audio pipeline currently (or everything after the mixer node) if (getById("popupSelector_constraints_audio").style.display == "none") { getById("advancedOptionsAudio").style.display = "inline-block"; } var label = document.createElement("label"); var i = "Low_Cut"; label.id = "label_" + i; label.htmlFor = "constraints_" + i; label.innerText = "Low Cut:"; var input = document.createElement("input"); input.min = 50; input.max = 400; input.dataset.deviceid = track0.id; // pointless input.type = "range"; input.dataset.keyname = i; input.dataset.labelname = label.innerHTML; input.id = "constraints_" + i; input.style = "display:block; width:100%;"; input.name = "constraints_" + i; for (var webAudio in session.webAudios) { if (session.webAudios[webAudio].lowcut1.frequency) { input.value = session.webAudios[webAudio].lowcut1.frequency.value; label.innerHTML += " " + session.webAudios[webAudio].lowcut1.frequency.value; input.title = input.value; break; } } input.onchange = function(e) { getById("label_" + e.target.dataset.keyname).innerHTML = e.target.dataset.labelname + " " + e.target.value; changeLowCut(e.target.value, e.target.dataset.deviceid); e.target.title = e.target.value; }; getById("popupSelector_constraints_audio").appendChild(label); getById("popupSelector_constraints_audio").appendChild(input); } if (session.equalizer && ii==0) { // ii==0 implies only track0 is supported by the web audio pipeline currently (or everything after the mixer node) if (getById("popupSelector_constraints_audio").style.display == "none") { getById("advancedOptionsAudio").style.display = "inline-block"; } var label = document.createElement("label"); var i = "Low_EQ"; label.id = "label_" + i; label.htmlFor = "constraints_" + i; label.innerHTML = "Low EQ:"; var input = document.createElement("input"); input.min = -50; input.max = 50; input.dataset.deviceid = track0.id; // pointless input.type = "range"; input.dataset.keyname = i; input.dataset.labelname = label.innerHTML; input.id = "constraints_" + i; input.style = "display:block; width:100%;"; input.name = "constraints_" + i; for (var webAudio in session.webAudios) { if (session.webAudios[webAudio].lowEQ.gain) { input.value = session.webAudios[webAudio].lowEQ.gain.value; label.innerHTML += " " + session.webAudios[webAudio].lowEQ.gain.value; input.title = input.value; } } input.onchange = function(e) { getById("label_" + e.target.dataset.keyname).innerHTML = e.target.dataset.labelname + " " + e.target.value; changeLowEQ(e.target.value, e.target.dataset.deviceid); e.target.title = e.target.value; }; getById("popupSelector_constraints_audio").appendChild(label); getById("popupSelector_constraints_audio").appendChild(input); // if (getById("popupSelector_constraints_audio").style.display == "none") { getById("advancedOptionsAudio").style.display = "inline-block"; } var label = document.createElement("label"); var i = "Mid_EQ"; label.id = "label_" + i; label.htmlFor = "constraints_" + i; label.innerHTML = "Mid EQ:"; var input = document.createElement("input"); input.min = -50; input.max = 50; input.dataset.deviceid = track0.id; // pointless input.type = "range"; input.dataset.keyname = i; input.dataset.labelname = label.innerHTML; input.id = "constraints_" + i; input.style = "display:block; width:100%;"; input.name = "constraints_" + i; for (var webAudio in session.webAudios) { if (session.webAudios[webAudio].midEQ.gain) { input.value = session.webAudios[webAudio].midEQ.gain.value; label.innerHTML += " " + session.webAudios[webAudio].midEQ.gain.value; input.title = input.value; } } input.onchange = function(e) { getById("label_" + e.target.dataset.keyname).innerHTML = e.target.dataset.labelname + " " + e.target.value; changeMidEQ(e.target.value, e.target.dataset.deviceid); e.target.title = e.target.value; }; getById("popupSelector_constraints_audio").appendChild(label); getById("popupSelector_constraints_audio").appendChild(input); // if (getById("popupSelector_constraints_audio").style.display == "none") { getById("advancedOptionsAudio").style.display = "inline-block"; } var label = document.createElement("label"); var i = "High_EQ"; label.id = "label_" + i; label.htmlFor = "constraints_" + i; label.innerHTML = "High EQ:"; var input = document.createElement("input"); input.min = -50; input.max = 50; input.dataset.deviceid = track0.id; // pointless input.type = "range"; input.dataset.keyname = i; input.dataset.labelname = label.innerHTML; input.id = "constraints_" + i; input.style = "display:block; width:100%;"; input.name = "constraints_" + i; for (var webAudio in session.webAudios) { if (session.webAudios[webAudio].highEQ.gain) { input.value = session.webAudios[webAudio].highEQ.gain.value; label.innerHTML += " " + session.webAudios[webAudio].highEQ.gain.value; input.title = input.value; } } input.onchange = function(e) { getById("label_" + e.target.dataset.keyname).innerHTML = e.target.dataset.labelname + " " + e.target.value; changeHighEQ(e.target.value, e.target.dataset.deviceid); e.target.title = e.target.value; }; getById("popupSelector_constraints_audio").appendChild(label); getById("popupSelector_constraints_audio").appendChild(input); } //////// if (tracks.length>1){ var label = document.createElement("h4"); label.innerHTML = track0.label; label.style = "text-shadow: 0 0 10px #fff3;" getById("popupSelector_constraints_audio").appendChild(label); } for (var i in session.audioConstraints) { try { log(i); log(session.audioConstraints[i]); if ((typeof session.audioConstraints[i] === 'object') && (session.audioConstraints[i] !== null) && ("max" in session.audioConstraints[i]) && ("min" in session.audioConstraints[i])) { if (i === "aspectRatio") { continue; } else if (i === "width") { // continue; } else if (i === "height") { // continue; } else if (i === "frameRate") { continue; } else if (i === "latency") { continue; } else if (i === "sampleRate") { continue; } else if (i === "channelCount") { continue; } var label = document.createElement("label"); label.id = "label_" + i + "_"+ii; label.htmlFor = "constraints_" + i + "_"+ii; label.innerHTML = i + ":"; var input = document.createElement("input"); input.min = session.audioConstraints[i].min; input.max = session.audioConstraints[i].max; input.dataset.deviceid = track0.id; if (parseFloat(input.min) == parseFloat(input.max)) { continue; } if (getById("popupSelector_constraints_audio").style.display == "none") { getById("advancedOptionsAudio").style.display = "inline-block"; } if (i in session.currentAudioConstraints) { input.value = session.currentAudioConstraints[i]; label.innerHTML = i + ": " + session.currentAudioConstraints[i]; label.title = "Previously was: " + session.currentAudioConstraints[i]; input.title = "Previously was: " + session.currentAudioConstraints[i]; } else { label.innerHTML = i; } if ((i === "height") || (i === "width")){ input.title = "Hold CTRL (or cmd) to lock width and height together when changing them"; input.min = 16; } if ("step" in session.audioConstraints[i]) { input.step = session.audioConstraints[i].step; } input.type = "range"; input.dataset.keyname = i; input.dataset.track = ii; input.id = "constraints_" + i + "_"+ii; input.style = "display:block; width:100%;"; input.name = "constraints_" + i + "_"+ii; input.onchange = function(e) { try { getById("label_" + e.target.dataset.keyname+"_"+ e.target.dataset.track).innerHTML = e.target.dataset.keyname + ": " + e.target.value; applyAudioHack(e.target.dataset.keyname, e.target.value, e.target.dataset.deviceid); e.target.title = e.target.value; }catch(e){errorlog(e);} }; getById("popupSelector_constraints_audio").appendChild(label); getById("popupSelector_constraints_audio").appendChild(input); } else if ((typeof session.audioConstraints[i] === 'object') && (session.audioConstraints[i] !== null)) { if (i == "resizeMode") { continue; } var div = document.createElement("div"); var label = document.createElement("label"); label.id = "label_" + i + "_"+ii; label.htmlFor = "constraints_" + i + "_"+ii; label.innerHTML = i + ":"; label.style = "display:inline-block; padding:0;margin: 15px 0px 29px;"; label.dataset.keyname = i; var input = document.createElement("select"); var c = document.createElement("option"); input.dataset.deviceid = track0.id; if (session.audioConstraints[i].length > 1) { for (var opts in session.audioConstraints[i]) { log(opts); var opt = new Option(session.audioConstraints[i][opts], session.audioConstraints[i][opts]); input.options.add(opt); if (i in session.currentAudioConstraints) { if (session.audioConstraints[i][opts] == session.currentAudioConstraints[i]) { opt.selected = "true"; } } } } else if (i.toLowerCase == "torch") { var opt = new Option("Off", false); input.options.add(opt); opt = new Option("On", true); input.options.add(opt); } else { continue; } if (getById("popupSelector_constraints_audio").style.display == "none") { getById("advancedOptionsAudio").style.display = "inline-block"; } input.id = "constraints_" + i + "_"+ii; input.className = "constraintCameraInput"; input.name = "constraints_" + i + "_"+ii; input.style = "display:inline; padding:2px; margin:0 10px;"; input.dataset.keyname = i; input.onchange = function(e) { applyAudioHack(e.target.dataset.keyname, e.target.value, e.target.dataset.deviceid); log(e.target.dataset.keyname, e.target.value); }; getById("popupSelector_constraints_audio").appendChild(div); div.appendChild(label); div.appendChild(input); } else if (typeof session.audioConstraints[i] === 'boolean') { var div = document.createElement("div"); var label = document.createElement("label"); label.id = "label_" + i + "_"+ii; label.htmlFor = "constraints_" + i + "_"+ii; label.innerHTML = i + ":"; label.style = "display:inline-block; padding:0;margin: 15px 0px 29px;"; label.dataset.keyname = i; var input = document.createElement("select"); var c = document.createElement("option"); input.dataset.deviceid = track0.id; var opt = new Option("Off", false); input.options.add(opt); opt = new Option("On", true); input.options.add(opt); if (getById("popupSelector_constraints_audio").style.display == "none") { getById("advancedOptionsAudio").style.display = "inline-block"; } input.id = "constraints_" + i + "_"+ii; input.className = "constraintCameraInput"; input.name = "constraints_" + i + "_"+ii; input.style = "display:inline; padding:2px; margin:0 10px;"; input.dataset.keyname = i; input.onchange = function(e) { //getById("label_"+e.target.dataset.keyname).innerHTML =e.target.dataset.keyname+": "+e.target.value; //updateAudioConstraints(e.target.dataset.keyname, e.target.value); applyAudioHack(e.target.dataset.keyname, e.target.value, e.target.dataset.deviceid); log(e.target.dataset.keyname, e.target.value); }; getById("popupSelector_constraints_audio").appendChild(div); div.appendChild(label); div.appendChild(input); } } catch (e) { errorlog(e); } } if (tracks.length>1){ for (var webAudio in session.webAudios) { if (session.webAudios[webAudio].subGainNodes && (track0.id in session.webAudios[webAudio].subGainNodes)) { if (getById("popupSelector_constraints_audio").style.display == "none") { getById("advancedOptionsAudio").style.display = "inline-block"; } var label = document.createElement("label"); var i = "Gain"; label.id = "label_" + i + "_" + track0.id; label.htmlFor = "constraints_" + i + "_" + track0.id; label.innerText = "Gain:"; var input = document.createElement("input"); input.min = 0; input.max = 200; input.dataset.deviceid = track0.id; // pointless input.type = "range"; input.dataset.keyname = i; input.dataset.labelname = label.innerHTML; input.id = "constraints_" + i+ "_" + track0.id; input.style = "display:block; width:100%;"; input.name = "constraints_" + i + "_" + track0.id; input.value = session.webAudios[webAudio].subGainNodes[track0.id].gain.value * 100; label.innerHTML += " " + parseInt(session.webAudios[webAudio].subGainNodes[track0.id].gain.value * 100); input.title = parseInt(input.value); input.onchange = function(e) { getById("label_" + e.target.dataset.keyname).innerHTML = e.target.dataset.labelname + " " + e.target.value; changeSubGain(e.target.value, e.target.dataset.deviceid); e.target.title = e.target.value; }; getById("popupSelector_constraints_audio").appendChild(label); getById("popupSelector_constraints_audio").appendChild(input); break; } } } else { for (var webAudio in session.webAudios) { if (session.webAudios[webAudio].gainNode) { if (getById("popupSelector_constraints_audio").style.display == "none") { getById("advancedOptionsAudio").style.display = "inline-block"; } var label = document.createElement("label"); var i = "Gain"; label.id = "label_" + i; label.htmlFor = "constraints_" + i; label.innerText = "Gain:"; var input = document.createElement("input"); input.min = 0; input.max = 200; input.dataset.deviceid = track0.id; // pointless input.type = "range"; input.dataset.keyname = i; input.dataset.labelname = label.innerHTML; input.id = "constraints_" + i; input.style = "display:block; width:100%;"; input.name = "constraints_" + i; input.value = session.webAudios[webAudio].gainNode.gain.value * 100; label.innerHTML += " " + parseInt(session.webAudios[webAudio].gainNode.gain.value * 100); input.title = parseInt(input.value); input.onchange = function(e) { getById("label_" + e.target.dataset.keyname).innerHTML = e.target.dataset.labelname + " " + e.target.value; changeMainGain(e.target.value, e.target.dataset.deviceid); e.target.title = e.target.value; }; getById("popupSelector_constraints_audio").appendChild(label); getById("popupSelector_constraints_audio").appendChild(input); break; } } } } } function applyAudioHack(constraint, value = null, deviceid="default") { if (value == parseFloat(value)) { value = parseFloat(value); value = { exact: value }; } else if (value == "true") { value = true; } else if (value == "false") { value = false; } //////////////// try { var tracks = session.streamSrc.getAudioTracks(); if (tracks.length) { var track0 = tracks[0]; for (var ii = 0;ii
\
and don\'t forget the
OBS Browser Source Link:
' + viewstr + ' \\ This invite link and OBS ingestion link are reusable. Only one person may use a specific invite at a time.
'; var qrcode = new QRCode(getById("qrcode"), { width: 300 , height: 300 , colorDark: "#000000" , colorLight: "#FFFFFF" , useSVG: false }); qrcode.makeCode(sendstr); 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 = ''; 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("span"); newScene.innerHTML = ''; getById("container_" + UUID).appendChild(newScene); } if (session.showDirector){ if (document.getElementById("container_director")){ var newScene = document.createElement("div"); newScene.innerHTML = ''; 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 session.rpcs[videoEle.dataset.UUID].manualBandwidth = session.rpcs[videoEle.dataset.UUID].prePausedBandwidth; session.rpcs[videoEle.dataset.UUID].manualAudioBandwidth = false; delete(session.rpcs[videoEle.dataset.UUID].prePausedBandwidth); videoEle.classList.remove("paused"); videoEle.classList.remove("fadeout"); if (update){ updateMixer(); } }catch(e){errorlog(e);} } function pauseVideo(videoEle, update=true){ session.rpcs[videoEle.dataset.UUID].prePausedBandwidth = session.rpcs[videoEle.dataset.UUID].manualBandwidth; session.rpcs[videoEle.dataset.UUID].manualBandwidth = 0; session.rpcs[videoEle.dataset.UUID].manualAudioBandwidth = 0; session.requestRateLimit(0, videoEle.dataset.UUID, true); videoEle.classList.add("paused"); videoEle.classList.add("fadeout"); if (update){ updateMixer(); } } (function rightclickmenuthing() { // right click menu "use strict"; function clickInsideElement(e, className) { var el = e.srcElement || e.target; if (el.classList.contains(className)) { return el; } else { while (el = el.parentNode) { if (el.classList && el.classList.contains(className)) { 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 = getById("context-menu"); var menuState = 0; 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, "task"); 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, "context-menu__link"); 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 (menutype){ menu = getById(menutype); if (menuState !== 1) { menuState = 1; menuItemSyncState(menu); menu.classList.add("context-menu--active"); document.addEventListener("click", menuClickListener); } } else { menu = getById("context-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); } } function toggleMenuOff() { if (menuState !== 0) { menuState = 0; menu.classList.remove("context-menu--active"); document.removeEventListener("click", menuClickListener); } } 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; } } 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
"; 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 }, "*"); } if (session.chatbutton===false){return;} // messages can still appear as overlays ^ messageList.push(data); messageList = messageList.slice(-100); if (session.beepToNotify) { playtone(); } 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) || ""; var msg = document.createElement("div"); if (messageList[i].type == "sent") { msg.innerHTML = messageList[i].msg + " - " + 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 + messageList[i].msg + " - " + time + ""; msg.classList.add("inMessage"); } else if (messageList[i].type == "alert") { msg.innerHTML = messageList[i].msg + " - " + time + ""; msg.classList.add("inMessage"); } else { msg.innerHTML = messageList[i].msg; msg.classList.add("outMessage"); } document.getElementById("chatBody").appendChild(msg); } showDownloadLinks(); for (var i in msgTransferList) { var time = timeSince(msgTransferList[i].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 defaultRecordingBitrate = false; async function recordVideo(target, event, videoKbps = false) { // event.currentTarget,this.parentNode.parentNode.dataset.UUID var UUID = target.dataset.UUID; var video = session.rpcs[UUID].videoElement; 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); //target.style.backgroundColor = null; //target.innerHTML = ' record local'; return; } } else if ((event.ctrlKey) || (event.metaKey)) { updateLocalRecordButton(UUID, -3); //target.innerHTML = ' ARMED'; //target.style.backgroundColor = "#BF3F3F"; Callbacks.push([recordVideo, target, null, false]); log("Record Video queued"); defaultRecordingBitrate = false; return; } else { defaultRecordingBitrate = false; } log("Record Video Clicked"); if ("recording" in video) { log("ALREADY RECORDING!"); //target.style.backgroundColor = null; //target.innerHTML = ' record local'; 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 window.focus(); videoKbps = await promptAlt(miscTranslations["press-ok-to-record"], false, false, videoKbps); 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 == -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;} 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'; } } } 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'; } } } } function setupSensorData(pollrate = 30) { session.sensors = {}; session.sensors.data = {}; session.sensors.data.sensors = true; if (window.Accelerometer) { 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; session.sensors.data.acc.y = session.sensors.Accelerometer.y; session.sensors.data.acc.z = session.sensors.Accelerometer.z; session.sensors.data.acc.t = parseInt(Math.round(session.sensors.Accelerometer.timestamp)); }); session.sensors.Accelerometer.start(); } if (window.Gyroscope) { 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; session.sensors.data.gyro.y = session.sensors.Gyroscope.y; session.sensors.data.gyro.z = session.sensors.Gyroscope.z; session.sensors.data.gyro.t = parseInt(Math.round(session.sensors.Gyroscope.timestamp)); }); session.sensors.Gyroscope.start(); } if (window.Magnetometer) { 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; session.sensors.data.mag.y = session.sensors.Magnetometer.y; session.sensors.data.mag.z = session.sensors.Magnetometer.z; session.sensors.data.mag.t = parseInt(Math.round(session.sensors.Magnetometer.timestamp)); }); session.sensors.Magnetometer.start(); session.sensors.deviceorientation = false; } else { 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; session.sensors.data.ori.b = e.beta; session.sensors.data.ori.g = e.gamma; 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.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; session.sensors.data.lin.y = session.sensors.LinearAccelerationSensor.y; session.sensors.data.lin.z = session.sensors.LinearAccelerationSensor.z; session.sensors.data.lin.t = parseInt(Math.round(session.sensors.LinearAccelerationSensor.timestamp)); }); session.sensors.LinearAccelerationSensor.start(); } setInterval(function() { session.sendMessage(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; } else { var video = session.videoElement; } if ("recording" in video) { if (action == "stop") { log("Stopping RECORDING!"); video.recorder.stop(); delete(video.recorder); delete(video.recording); return; } else if (action == "start") { log("ALREADY RECORDING!"); 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 (SafariVersion) { var msg = {}; msg.recorder = -3; for (var i = 0;i
This effect will not work",4000); return; } } else if (gpgpuSupport == "Google SwiftShader"){ if (!session.cleanOutput){ warnUser("Hardware acceleration isn't detected.
Please enable it for this effect to work correctly.
Settings -> Advanced -> System -> Use hardware-accleration"); } return; } loadTensorflowJS(); updateRenderOutpipe(); //mainMeshMask(); } else { //loadEffect(session.effects); updateRenderOutpipe(); } if ((session.permaid===false) && (session.roomid===false) && (session.view===false) && (session.director===false)){ updateURL("effects"); } } var effectsLoaded = {}; var JEELIZFACEFILTER = null; function loadEffect(effect){ warnlog("effect:"+effect); var filename = effect.replace(/\W/g, ''); if (effectsLoaded[filename]){ effectsLoaded[filename](); return; } warnlog("Loading Effect: "+effect); var script = document.createElement('script'); script.onload = function() { effectsLoaded[filename] = effectsEngine(effect); effectsLoaded[filename](); if (gpgpuSupport == "Google SwiftShader"){ if (!session.cleanOutput){ warnUser("Hardware acceleration isn't detected.
Please enable it for better performance.
Settings -> Advanced -> System -> Use hardware-accleration"); } } } script.src = "./filters/"+filename+".js?"+parseInt(1000*Math.random()); document.head.appendChild(script); warnUser("Loading custom effects model...",1000); } function loadTensorflowJS(){ if (session.TFJSModel!=null){ return; } log("loadTensorflowJS()"); session.TFJSModel=true; var script = document.createElement('script'); var script2 = document.createElement('script'); var script3 = document.createElement('script'); var script4 = document.createElement('script'); script.onload = function() { document.head.appendChild(script2); } script2.onload = function() { document.head.appendChild(script3); } script3.onload = function() { document.head.appendChild(script4); } script4.onload = function() { async function loadModel(){ session.TFJSModel = await faceLandmarksDetection.load(faceLandmarksDetection.SupportedPackages.mediapipeFacemesh); closeModal(); warnUser("Almost done loading model...",3000); } loadModel(); } script.src = "./thirdparty/tfjs/tf-core.js"; script2.src = "./thirdparty/tfjs/tf-converter.js"; script3.src = "./thirdparty/tfjs/tf-backend-webgl.js"; script4.src = "./thirdparty/tfjs/face-landmarks-detection.js"; warnUser("Downloading a big effects model... may take a minute",15000); script.type = 'text/javascript';script2.type = 'text/javascript';script3.type = 'text/javascript';script4.type = 'text/javascript'; document.head.appendChild(script); } var TFLITELOADING = false; function attemptTFLiteJsFileLoad(){ if (session.tfliteModule!==false){ return true; } warnUser("Loading effects model..."); TFLITELOADING=true; session.tfliteModule={}; if (!document.getElementById("tflitesimdjs")){ var tmpScript = document.createElement('script'); tmpScript.onload = loadTFLiteModel; tmpScript.type = 'text/javascript'; tmpScript.src = "./thirdparty/tflite/tflite-simd.js?ver=2"; tmpScript.id = "tflitesimdjs"; document.head.appendChild(tmpScript); } return false; } async function changeTFLiteImage(ev, ele){ if (ele.files && ele.files[0]) { session.tfliteModule.img = document.querySelector('img'); session.tfliteModule.img.ready=false; session.tfliteModule.img.onload = () => { URL.revokeObjectURL(session.tfliteModule.img.src); // no longer needed, free memory session.tfliteModule.img.ready=true; } session.tfliteModule.img.src = URL.createObjectURL(ele.files[0]); // set src to blob url } else if (ele.tagName.toLowerCase() == "img"){ session.tfliteModule.img = ele session.tfliteModule.img.ready=true; } } async function changeEffectAmount(ev, ele){ session.effectValue = parseInt(ele.value); log("session.effectValue: "+session.effectValue); } async function loadTFLiteModel(){ try { if (session.tfliteModule && (session.tfliteModule.img)){ var img = session.tfliteModule.img; session.tfliteModule = await createTFLiteSIMDModule(); session.tfliteModule.img = img; } else { session.tfliteModule = {}; session.tfliteModule = await createTFLiteSIMDModule(); } if (!session.tfliteModule.simd){ var elements = document.querySelectorAll('[data-warnSimdNotice]') for (let i = 0; i < elements.length; i++) { elements[i].style.display = "inline-block"; } } } catch(e){ warnlog("TF-LITE FAILED TO LOAD"); closeModal(); return; } const modelResponse = await fetch("./thirdparty/tflite/segm_full_v679.tflite"); session.tfliteModule.model = await modelResponse.arrayBuffer(); session.tfliteModule.HEAPU8.set(new Uint8Array(session.tfliteModule.model), session.tfliteModule._getModelBufferMemoryOffset()); session.tfliteModule._loadModel(session.tfliteModule.model.byteLength); session.tfliteModule.activelyProcessing = false; TFLITELOADING = false; closeModal(); if (LaunchTFWorkerCallback){TFLiteWorker();} } function getGuestTarget(type, id){ var element = document.querySelectorAll('[data-action-type="'+type+'"][data-sid="'+id+'"]'); // data-sid="P5MQpia" if (!element.length){ return element = getRightOrderedElement('[data-action-type="'+type+'"][data--u-u-i-d]', id); } else { element = element[0]; } return element; } function getGuestTargetScene(scene, id){ var element = document.querySelectorAll('[data-action-type="addToScene"][data-scene="'+scene+'"][data-sid="'+id+'"]'); // data-sid="P5MQpia" if (!element.length){ return element = getRightOrderedElement('[data-action-type="addToScene"][data-scene="'+scene+'"][data--u-u-i-d]', id); } else { element = element[0]; } return element; } function getGuestTargetGroup(group, id){ var element = document.querySelectorAll('[data-action-type="toggle-group"][data-value="'+group+'"][data-sid="'+id+'"]'); // data-sid="P5MQpia" if (!element.length){ return getRightOrderedElement('[data-action-type="toggle-group"][data-value="'+group+'"][data--u-u-i-d]', id); } else { element = element[0]; } return element; } function targetGuest(guestslot, action, value=null){ if (guestslot){ if ((guestslot == (parseInt(guestslot)+"")) && guestslot<100){ guestslot -=1; } } else { guestslot=1; } warnlog("guestslot "+guestslot); warnlog("action "+action); warnlog("value "+value); if ((action == 0) || (action == "forward")) { var element = getGuestTarget("forward", guestslot); if (element) { directMigrate(element, true, value); // if value is set, it will auto transfer the guest to that room. } } else if ((action == 1) || (action == "addScene")) { if (value == "null" || value == null){ value = 1; } var element = getGuestTargetScene(value, guestslot); // oscid/action/target/value 1/1/scene if (element) { directEnable(element, true); } } else if ((action == 2) || (action == "muteScene")) { var element = getGuestTarget("mute-scene", guestslot); if (element) { directMute(element, true); } } else if ((action == 3) || (action == "mic")) { var element = getGuestTarget("mute-guest", guestslot); if (element) { remoteMute(element, true); } } else if ((action == 4) || (action == "hangup")) { var element = getGuestTarget("hangup", guestslot); if (element) { directHangup(element, true); } } else if ((action == 5) || (action == "soloChat")) { var element = getGuestTarget("solo-chat", guestslot); if (element) { session.toggleSoloChat(element.dataset.UUID); } } else if ((action == 6) || (action == "speaker")) { var element = getGuestTarget("toggle-remote-speaker", guestslot); if (element) { remoteSpeakerMute(element); } } else if ((action == 7) || (action == "display")) { var element = getGuestTarget("toggle-remote-display", guestslot); if (element) { remoteDisplayMute(element); } } else if ((action == 8) || (action == "group")) { if (value == "null" || value == null){ value = 1; } var element = getGuestTargetGroup(value, guestslot); if (element) { changeGroup(element, null, value); } } else if ((action == 12) || (action == "addScene2")) { var element = getGuestTargetScene(2, guestslot); if (element) { directEnable(element, true) } } else if ((action == 13) || (action == "addScene3")) { var element = getGuestTargetScene(3, guestslot); if (element) { directEnable(element, true) } } else if ((action == 14) || (action == "addScene4")) { var element = getGuestTargetScene(4, guestslot); if (element) { directEnable(element, true) } } else if ((action == 15) || (action == "addScene5")) { var element = getGuestTargetScene(5, guestslot); if (element) { directEnable(element, true) } } else if ((action == 16) || (action == "addScene6")) { var element = getGuestTargetScene(6, guestslot); if (element) { directEnable(element, true) } } else if ((action == 17) || (action == "addScene7")) { var element = getGuestTargetScene(7, guestslot); if (element) { directEnable(element, true) } } else if ((action == 18) || (action == "addScene8")) { var element = getGuestTargetScene(8, guestslot); if (element) { directEnable(element, true) } } else if ((action == 19) || (action == "forceKeyframe")) { var element = getGuestTarget("force-keyframe", guestslot); if (element) { requestKeyframeScene(element); } } else if ((action == 20) || (action == "soloVideo")) { var element = getGuestTarget("solo-video", guestslot); if (element) { requestInfocus(element); } } else if ((action == 27) || (action == "volume")){ var element = getGuestTarget("volume", guestslot); if (element) { element.value = parseInt(value) || 100; remoteVolume(element); } } } function oscClient(){ // OSC (websocket / https API hotkey support). The iFrame API method provides greater customization. if (!session.api){return;} warnlog("oscClient started"); var socket = null; var connecting = false; var failedCount = 0; function connect(){ clearTimeout(connecting); if (socket){ if (socket.readyState === socket.OPEN){return;} try{ socket.close(); } catch(e){} } socket = new WebSocket(session.apiserver); socket.onclose = function (){ failedCount+=1; clearTimeout(connecting); connecting = setTimeout(function(){connect();},100*(failedCount-1)); }; socket.onerror = function (){ failedCount+=1; clearTimeout(connecting); connecting = setTimeout(function(){connect();},100*failedCount); }; socket.onopen = function (){ failedCount = 0; try{ socket.send(JSON.stringify({"join":session.api})); } catch(e){ connecting = setTimeout(function(){connect();},1); } }; socket.addEventListener('message', function (event) { if (event.data){ var data = JSON.parse(event.data); if ("msg" in data){ data = data.msg } var resp = processMessage(data); if (resp!==null){ socket.send(JSON.stringify(resp)); log(JSON.stringify(resp)); } } }); } connect(); } function setupCommands(){ var commands = {} commands.raisehand = function(value){raisehand();}; commands.togglehand = function(value){raisehand();}; commands.togglescreenshare = function(value){toggleScreenShare();}; commands.chat = function(value){toggleChat(value);}; commands.speaker = function(value){ if (value === true) { // unmute session.speakerMuted = false; // set toggleSpeakerMute(true); // apply } else if (value === false) { // mute session.speakerMuted = true; // set toggleSpeakerMute(true); // apply } else if (value === "toggle") { // toggle toggleSpeakerMute(); } }; // mute speaker commands.mic = function(value){ if (value === true) { // unmute session.muted = false; // set log(session.muted); toggleMute(true); // apply } else if (value === false) { // mute session.muted = true; // set log(session.muted); toggleMute(true); // apply } else if (value === "toggle") { // toggle toggleMute(); } }; commands.camera = function(value){ if (value === true) { // unmute session.videoMuted = false; // set log(session.videoMuted); toggleVideoMute(true); // apply } else if (value === false) { // mute session.videoMuted = true; // set log(session.videoMuted); toggleVideoMute(true); // apply } else if (value === "toggle") { // toggle toggleVideoMute(); } } commands.hangup = function(value){hangup();}; commands.bitrate = function(value){ if (value===false){ value = 0; } else if (value===true){ value = -1; } else { value = parseInt(value) || 0; } for (var i in session.rpcs) { try { session.requestRateLimit(value, i); } catch (e) { errorlog(e); } } }; commands.getDetails = function(value){ var msg = {}; msg.callback = {}; msg.callback.value = value; msg.callback.action = "getDetails"; msg.callback.result = getDetailedState(); return msg; } commands.reload = function(value){location.reload();}; commands.volume = function(value){ if (value===false){ value = 0; } else if (value===true){ value = 100 } else { value = parseInt(value) || 0; } value = parseFloat(value/100); for (var i in session.rpcs) { try { session.rpcs[i].videoElement.volume = parseFloat(value); } catch (e) { errorlog(e); } } }; commands.forceKeyframe = function(value=null){ session.forcePLI(); }; commands.panning = function(value){ if (value===false){ value = 90; } else if (value===true){ value = 90 } else { value = parseInt(value); } for (var uuid in session.rpcs) { try { adjustPan(uuid, value); // &panning needs to be added to enable. playback only; not mic out. } catch (e) { errorlog(e); } } }; commands.record = function(value){ if (value === false) { // mute if ("recording" in session.videoElement) { recordLocalVideo("stop"); } } else if (value === true){ if ("recording" in session.videoElement) { // already recording } else { recordLocalVideo("start"); } } }; commands.sendChat = function(value){sendChat(value);}; return commands; } var Commands = setupCommands(); function processMessage(data) { try { warnlog(data); if (("target" in data) && (data.target !== "null" && data.target !== null)) { if ("action" in data){ if ("value" in data){ return targetGuest(data.target, data.action, data.value) || null; } else { return targetGuest(data.target, data.action, null) || null; } } } else if ("action" in data){ if (data.action in Commands){ if ("value" in data){ if (data.value=="true"){ data.value=true; } else if (data.value=="false"){ data.value=false; } return Commands[data.action](data.value) || null; } else { return Commands[data.action]() || null; } } } } catch(e){errorlog(e);} return null; } function midiHotkeysNote(note, velocity=false){ if (session.midiHotkeys==1){ if (note == "G3") { // open and close the chat window toggleChat(); } else if (note == "A3") { // mute your audio output toggleMute(); } else if (note == "B3") { // mute your video output toggleVideoMute(); } else if (note == "C4") { // enable / disable screenshare toggleScreenShare(); } else if (note == "D4") { // completely kill your connection/session hangup(); } else if (note == "E4") { // raise your hand; director sees this raisehand(); } else if (note == "F4") { // start/stop local recording recordLocalVideoToggle(); } else if (note == "G4") { // Director Enables their Audio output press2talk(true); } else if (note == "A4") { // Director cut's their audio/video output hangup2(); } } else if (session.midiHotkeys==2){ if (note == "G1") { // open and close the chat window toggleChat(); } else if (note == "A1") { // mute your audio output toggleMute(); } else if (note == "B1") { // mute your video output toggleVideoMute(); } else if (note == "C2") { // enable / disable screenshare toggleScreenShare(); } else if (note == "D2") { // completely kill your connection/session hangup(); } else if (note == "E2") { // raise your hand; director sees this raisehand(); } else if (note == "F2") { // start/stop local recording recordLocalVideoToggle(); } else if (note == "G2") { // Director Enables their Audio output press2talk(true); } else if (note == "A2") { // Director cut's their audio/video output hangup2(); } } else if (session.midiHotkeys==3){ if (note == "C1"){ if (velocity == "0") { // open and close the chat window toggleChat(); } else if (note == "1") { // mute your audio output toggleMute(); } else if (note == "2") { // mute your video output toggleVideoMute(); } else if (note == "3") { // enable / disable screenshare toggleScreenShare(); } else if (note == "4") { // completely kill your connection/session hangup(); } else if (note == "5") { // raise your hand; director sees this raisehand(); } else if (note == "6") { // start/stop local recording recordLocalVideoToggle(); } else if (note == "7") { // Director Enables their Audio output press2talk(true); } else if (note == "8") { // Director cut's their audio/video output hangup2(); } } } } function getRightOrderedElement(selector, guestslot, UUID=false){ var elements = getById("guestFeeds").children; if (!UUID){ for (var i=0;i
ID: " + streamID + "\
\
\
";
if (!session.rpcs[UUID].voiceMeter) {
if (session.meterStyle==1){
session.rpcs[UUID].voiceMeter = getById("voiceMeterTemplate2").cloneNode(true);
} else {
session.rpcs[UUID].voiceMeter = getById("voiceMeterTemplate").cloneNode(true);
session.rpcs[UUID].voiceMeter.style.opacity = 0;
if (session.meterStyle==2){
session.rpcs[UUID].voiceMeter.classList.add("video-meter-2");
session.rpcs[UUID].voiceMeter.classList.remove("video-meter");
} else {
session.rpcs[UUID].voiceMeter.classList.add("video-meter-director");
}
}
session.rpcs[UUID].voiceMeter.id = "voiceMeter_" + UUID;
session.rpcs[UUID].voiceMeter.dataset.level = 0;
session.rpcs[UUID].voiceMeter.classList.remove("advanced");
}
session.rpcs[UUID].remoteMuteElement = getById("muteStateTemplate").cloneNode(true);
session.rpcs[UUID].remoteMuteElement.id = "";
session.rpcs[UUID].remoteMuteElement.style.top = "5px";
session.rpcs[UUID].remoteMuteElement.style.right = "7px";
session.rpcs[UUID].remoteVideoMuteElement = getById("videoMuteStateTemplate").cloneNode(true);
session.rpcs[UUID].remoteVideoMuteElement.id = "";
session.rpcs[UUID].remoteVideoMuteElement.style.top = "5px";
session.rpcs[UUID].remoteVideoMuteElement.style.right = "28px";
session.rpcs[UUID].remoteRaisedHandElement = getById("raisedHandTemplate").cloneNode(true);
session.rpcs[UUID].remoteRaisedHandElement.id = "";
session.rpcs[UUID].remoteRaisedHandElement.style.top = "5px";
session.rpcs[UUID].remoteRaisedHandElement.style.right = "49px";
var videoContainer = document.createElement("div");
videoContainer.id = "videoContainer_" + UUID; // needed to delete on user disconnect
videoContainer.style.margin = "0";
videoContainer.style.position = "relative";
var iframeDetails = document.createElement("div");
iframeDetails.id = "iframeDetails_" + UUID; // needed to delete on user disconnect
iframeDetails.className = "iframeDetails advanced";
controls.innerHTML += "";
controls.innerHTML += "";
var handsID = "hands_" + UUID;
if (session.hidesololinks==false){
controls.innerHTML += "\
";
}
controls.innerHTML += "\
";
controls.querySelectorAll('[data-action-type]').forEach((ele) => { // give action buttons some self-reference
ele.dataset.UUID = UUID;
ele.dataset.sid = streamID;
});
container.innerHTML = buttons;
updateLockedElements();
container.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("advanced");
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.cpu_maxed){
// 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);
}
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);
videoContainer.appendChild(session.rpcs[UUID].videoElement);
container.appendChild(controls);
initSceneList(UUID);
pokeIframeAPI("control-box", true, UUID);
}