";
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 && session.infocus==true){
var button = container.querySelector('[data-button]');
if (!button){
button = document.createElement("div");
}
button.id = "button_videosource";
button.dataset.button = true;
if (session.infocus){
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 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 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 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 += "
"; } 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; if (session.mc){ 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) { totalVideo+=1 } else if (sender.track && sender.track.kind == "audio" && sender.track.enabled && !session.muted) { atot=1; } }); 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; headerStats += ", 👂 "+totalAudio; headerStats += ", 👀 "+totalVideo; if (session.roomid){ headerStats += ", 🎬 "+totalScenes+""; } } catch(e){} headerStats += ", 🔼 "+totalBitrate2 + "-kbps"; if (cpuLimited){ headerStats += ", 🔥 CPU Overloaded"; } 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) { // TODO: I need to have this be MUTE, toggle, with volume not touched. log("muting"); if (session.director) { if (!session.directorEnabledPPT) { log("Director doesn't have PPT enabled yet"); // director has not enabled PTT yet. return; } } if (apply) { session.muted = !session.muted; // we flip here as we are going to flip again in a second. } //try{var ptt = getById("press2talk");} catch(e){var ptt=false;} if (session.muted == false) { session.muted = true; getById("mutetoggle").className = "las la-microphone-slash my-float toggleSize"; if (!(session.cleanOutput)){ getById("mutebutton").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({"mute":session.speakerMuted}, '*'); } 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) { session.speakerMuted = true; getById("mutespeakertoggle").className = "las la-volume-mute my-float toggleSize"; if (!(session.cleanOutput)){ getById("mutespeakerbutton").className = "float2 red"; } var sounds = document.getElementsByTagName("video"); for (var i = 0; i < sounds.length; ++i) { sounds[i].muted = session.speakerMuted; } } else { session.speakerMuted = false; getById("mutespeakertoggle").className = "las la-volume-up my-float toggleSize"; if (!(session.cleanOutput)){ getById("mutespeakerbutton").className = "float"; } var sounds = document.getElementsByTagName("video"); for (var i = 0; i < sounds.length; ++i) { if (sounds[i].id === "videosource") { // don't unmute ourselves. feedback galore if so. continue; } else if (sounds[i].id === "previewWebcam") { continue; } else if (sounds[i].id === "screenshare") { continue; } else { sounds[i].muted = session.speakerMuted; } } } for (var UUID in session.rpcs) { applyMuteState(UUID); postMessageIframe(session.rpcs[UUID].iframeEle, {"mute":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;";
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 message\
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;
}
}
function shiftPC(ele, shift){
var UUID = ele.dataset.UUID;
var target = document.getElementById("container_"+UUID);
if (shift==1){
if (target.nextSibling){
target.parentNode.insertBefore(target.nextSibling, target);
}
} else {
if (target.previousSibling){
target.parentNode.insertBefore(target, target.previousSibling);
}
}
}
function createControlBox(UUID, soloLink, streamID) {
if (document.getElementById("deleteme")) {
getById("deleteme").parentNode.removeChild(getById("deleteme"));
}
var controls = getById("controls_blank").cloneNode(true);
var container = document.createElement("div");
container.id = "container_" + UUID; // needed to delete on user disconnect
container.className = "vidcon directorMargins";
controls.style.display = "block";
controls.id = "controls_" + UUID;
getById("guestFeeds").appendChild(container);
var buttons = "
===> "+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 { width: { min: 640 } , height: { min: 360 } }; 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"); } 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);} } function playtone(screen = false, tonename="testtone") { 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) { 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, eleName = 'previewWebcam') { // true unmirrors as its already mirrored var transFlip = ""; var transNorm = ""; if ((eleName == 'videosource') && (session.windowed)) { transFlip = " translate(0, 50%)"; transNorm = " translate(0, -50%)"; } if (session.mirrored == 2) { mirror = true; } else if (session.mirrored === 0) { mirror = true; } if (mirror) { if (session.mirrored && session.flipped) { getById(eleName).style.transform = " scaleX(-1) scaleY(-1)" + transFlip; getById(eleName).classList.add("mirrorControl"); } else if (session.mirrored) { getById(eleName).style.transform = "scaleX(-1)" + transNorm; getById(eleName).classList.add("mirrorControl"); } else if (session.flipped) { getById(eleName).style.transform = "scaleY(-1) scaleX(1)" + transFlip; getById(eleName).classList.remove("mirrorControl"); } else { getById(eleName).style.transform = "scaleX(1)" + transNorm; getById(eleName).classList.remove("mirrorControl"); } } else { if (session.mirrored && session.flipped) { getById(eleName).style.transform = " scaleX(1) scaleY(-1)" + transFlip; getById(eleName).classList.remove("mirrorControl"); } else if (session.mirrored) { getById(eleName).style.transform = "scaleX(1)" + transNorm; getById(eleName).classList.remove("mirrorControl"); } else if (session.flipped) { getById(eleName).style.transform = "scaleY(-1) scaleX(-1)" + transFlip; getById(eleName).classList.add("mirrorControl"); } else { getById(eleName).style.transform = "scaleX(-1)" + transNorm; getById(eleName).classList.add("mirrorControl"); } } if (eleName == 'previewWebcam'){ var rotate = 0; if (session.forceRotate!==false){ if (session.rotate){ rotate = session.forceRotate + parseInt(session.rotate); } else { rotate = session.forceRotate; } } else { rotate = session.rotate; } if (rotate && (rotate>=360)){ rotate-=360; } if (rotate){ if (getById(eleName).style.transform){ getById(eleName).style.transform += " rotate("+rotate+"deg)"; } else { getById(eleName).style.transform = "rotate("+rotate+"deg)"; } getById(eleName).classList.add("rotate"); } else { getById(eleName).classList.remove("rotate"); } } else { getById(eleName).classList.remove("rotate"); } getById(eleName).rotated = rotate; } 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 = session.streamSrc; } 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) {
await grabScreen(quality = 0, audio = true, videoOnEnd = true).then(res => {
if (res != false) {
session.screenShareState = true;
getById("screensharebutton").classList.add("float2");
getById("screensharebutton").classList.remove("float");
enumerateDevices().then(gotDevices2).then(function() {});
}
});
return;
}
if (session.screenShareState == false) { // adding a screen
await grabScreen(quality = 0, audio = true, videoOnEnd = true).then(res => {
if (res != false) {
session.screenShareState = true;
getById("screensharebutton").classList.add("float2");
getById("screensharebutton").classList.remove("float");
enumerateDevices().then(gotDevices2).then(function() {});
}
});
} else { // removing a screen . session.screenShareState already true true /////////////////////////////////
session.screenShareState = false;
pokeIframeAPI("screen-share-ended");
if (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");
//if (beforeScreenShare) {
//cleanupMediaTracks();
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();
//}
beforeScreenShare = null;
screenShareAudioTrack=null;
toggleSettings(forceShow = true);
//enumerateDevices().then(gotDevices2).then(function(){
//grabVideo();
//grabAudio();
// toggleSettings(forceShow=true);
//});
}
}
var ElectronDesktopCapture = false;
if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) { // this enables Screen Capture in Electron
try {
const { desktopCapturer} = require('electron'); // This is definitely Electron specific. Requires Node Integration to be on, which is a potential security hazzard
window.navigator.mediaDevices.getDisplayMedia = (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;
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"];
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,3000, 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;
session.rpcs[UUID].batteryMeter.classList.remove("advanced");
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;}
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");
}
session.rpcs[UUID].batteryMeter.title = level+"% 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";
} 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);
}
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 { width: { min: 640 } , height: { min: 360 } }; 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"); } 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);} } function playtone(screen = false, tonename="testtone") { 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) { 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, eleName = 'previewWebcam') { // true unmirrors as its already mirrored var transFlip = ""; var transNorm = ""; if ((eleName == 'videosource') && (session.windowed)) { transFlip = " translate(0, 50%)"; transNorm = " translate(0, -50%)"; } if (session.mirrored == 2) { mirror = true; } else if (session.mirrored === 0) { mirror = true; } if (mirror) { if (session.mirrored && session.flipped) { getById(eleName).style.transform = " scaleX(-1) scaleY(-1)" + transFlip; getById(eleName).classList.add("mirrorControl"); } else if (session.mirrored) { getById(eleName).style.transform = "scaleX(-1)" + transNorm; getById(eleName).classList.add("mirrorControl"); } else if (session.flipped) { getById(eleName).style.transform = "scaleY(-1) scaleX(1)" + transFlip; getById(eleName).classList.remove("mirrorControl"); } else { getById(eleName).style.transform = "scaleX(1)" + transNorm; getById(eleName).classList.remove("mirrorControl"); } } else { if (session.mirrored && session.flipped) { getById(eleName).style.transform = " scaleX(1) scaleY(-1)" + transFlip; getById(eleName).classList.remove("mirrorControl"); } else if (session.mirrored) { getById(eleName).style.transform = "scaleX(1)" + transNorm; getById(eleName).classList.remove("mirrorControl"); } else if (session.flipped) { getById(eleName).style.transform = "scaleY(-1) scaleX(-1)" + transFlip; getById(eleName).classList.add("mirrorControl"); } else { getById(eleName).style.transform = "scaleX(-1)" + transNorm; getById(eleName).classList.add("mirrorControl"); } } if (eleName == 'previewWebcam'){ var rotate = 0; if (session.forceRotate!==false){ if (session.rotate){ rotate = session.forceRotate + parseInt(session.rotate); } else { rotate = session.forceRotate; } } else { rotate = session.rotate; } if (rotate && (rotate>=360)){ rotate-=360; } if (rotate){ if (getById(eleName).style.transform){ getById(eleName).style.transform += " rotate("+rotate+"deg)"; } else { getById(eleName).style.transform = "rotate("+rotate+"deg)"; } getById(eleName).classList.add("rotate"); } else { getById(eleName).classList.remove("rotate"); } } else { getById(eleName).classList.remove("rotate"); } getById(eleName).rotated = rotate; } 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 = session.streamSrc; } 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
Update your Electron Capture app and then enable Elevated Privileges (right click) to access screen-sharing."); } return false; } } if (quality == 0) { // I'm going to go with default quality in most cases, as I assume Dynamic screenshare is going to want low-fps / high def. var width = { ideal: 1920 }; var height = { ideal: 1080 }; } else if (quality == 1) { var width = { ideal: 1280 }; var height = { ideal: 720 }; } else if (quality == 2) { var width = { ideal: 640 }; var height = { ideal: 360 }; } else if (quality >= 3) { // lowest var width = { ideal: 320 }; var height = { ideal: 180 }; } if (session.width) { width = { ideal: session.width }; } if (session.height) { height = { ideal: session.height }; } var constraints = { // this part is a bit annoying. Do I use the same settings? I can add custom setting controls here later audio: { echoCancellation: false, // For screen sharing, we want it off by default. autoGainControl: false , noiseSuppression: false } , video: { width: width , height: height } //,cursor: {exact: "none"} }; if (session.screensharecursor){ constraints.video.cursor = ["always", "motion"]; } else { try { let supportedConstraints = navigator.mediaDevices.getSupportedConstraints(); if (supportedConstraints.cursor) { constraints.video.cursor = "never"; } } catch(e){ warnlog("navigator.mediaDevices.getSupportedConstraints() not supported"); } } if (session.echoCancellation === true) { constraints.audio.echoCancellation = true; } if (session.autoGainControl === true) { constraints.audio.autoGainControl = true; } if (session.noiseSuppression === true) { constraints.audio.noiseSuppression = true; } if (audio == false) { constraints.audio = false; } if (session.framerate) { constraints.video.frameRate = session.framerate; } else if (session.maxframerate !== false){ // not limiting screen share's fps with quality=2 due to gaming centric nature constraints.video.frameRate = { ideal: session.maxframerate, max: session.maxframerate }; } if (session.screenshareVideoOnly){ constraints.audio = false; } return navigator.mediaDevices.getDisplayMedia(constraints).then(function(stream) { log("adding video tracks 2245"); var eleName = "videosource"; try { if (session.streamSrc) { session.streamSrc.getVideoTracks().forEach(function(track) { //track.stop(); beforeScreenShare = track; session.streamSrc.removeTrack(track); log("stopping video track"); }); if (session.videoElement.srcObject){ session.videoElement.srcObject.getVideoTracks().forEach(function(track) { //track.stop(); session.videoElement.srcObject.removeTrack(track); log("stopping video track 2"); }); } else { session.videoElement.srcObject = session.streamSrc; } } else { session.streamSrc = createMediaStream(); session.videoElement.srcObject = session.streamSrc; log("CREATE NEW STREAM"); } } catch (e) { warnlog(e); } try { stream.getVideoTracks()[0].onended = function(e) { // if screen share stops, warnlog(e); session.streamSrc.getVideoTracks().forEach(function(track) { session.streamSrc.removeTrack(track); track.stop(); log("stopping video track 3"); }); if (session.videoElement.srcObject){ session.videoElement.srcObject.getVideoTracks().forEach(function(track) { session.videoElement.srcObject.removeTrack(track); track.stop(); log("stopping video track 4"); }); } else { session.videoElement.srcObject = session.streamSrc; } 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(); } }); screenShareAudioTrack=null; senderAudioUpdate(); } session.screenShareState = false; pokeIframeAPI("screen-share-ended"); getById("screensharebutton").classList.add("float"); getById("screensharebutton").classList.remove("float2"); if (videoOnEnd == true) { if (beforeScreenShare) { session.streamSrc.addTrack(beforeScreenShare); // updateRenderOutpipe beforeScreenShare = null; } updateRenderOutpipe(); toggleSettings(forceShow = true); //grabVideo(eleName='videosource', selector="select#videoSource3"); } else { grabScreen(); } }; } catch (e) { log("No Video selected; screensharing?"); } stream.getTracks().forEach(function(track) { addScreenDevices(track); session.streamSrc.addTrack(track, stream); // Lets not add the audio to this preview; echo can be annoying }); updateRenderOutpipe(); if (stream.getAudioTracks().length){ screenShareAudioTrack = stream.getAudioTracks()[0]; senderAudioUpdate(); } session.applySoloChat(); // mute streams that should be muted if a director session.applyIsolatedChat(); applyMirror(true, eleName); return true; }).catch(function(err) { errorlog(err); if ((err.name == "NotAllowedError") || (err.name == "PermissionDeniedError")) { // User Stopped it. } else { if (audio == true) { setTimeout(function() { grabScreen(quality, false); }, 1); } if (!(session.cleanOutput)) { setTimeout(function(e) { errorlog(e); }, 1, err); // TypeError: Failed to execute 'getDisplayMedia' on 'MediaDevices': Audio capture is not supported } } return false; }); } function toggleRoomSettings(){ toggle(getById('roomSettings')); if (document.getElementById("modalBackdrop")){ getById("modalBackdrop").innerHTML = ''; // Delete modal getById("modalBackdrop").remove(); } else { zindex = 25; getById('roomSettings').style.zIndex = 25; var modalTemplate = ``; document.body.insertAdjacentHTML("beforeend", modalTemplate); // Insert modal at body end document.getElementById("modalBackdrop").addEventListener("click", toggleRoomSettings); document.getElementById('trbSettingInput').value = session.totalRoomBitrate; document.getElementById('trbSettingInputFeedback').innerHTML = session.totalRoomBitrate; } } function changeTRB(ele){ session.totalRoomBitrate = parseInt(ele.value); var msg = {}; msg.directorSettings={}; msg.directorSettings.totalRoomBitrate=session.totalRoomBitrate; session.sendMessage(msg); } function sendMediaDevices(UUID){ enumerateDevices().then(function(deviceInfos){ var data = {}; data.UUID = UUID; data.mediaDevices = deviceInfos; session.sendMessage(data, data.UUID); }); } function changeVideoDevice(index, quality=0){ enumerateDevices().then(gotDevices2).then(function() { activatedPreview=false; document.getElementById("videoSource3").selectedIndex = index+""; grabVideo(quality, "videosource", "#videoSource3"); }); } function changeAudioDevice(index){ enumerateDevices().then(gotDevices2).then(function() { activatedPreview=false; var audioSelect = document.getElementById("audioSource3").querySelectorAll("input"); for (var i = 0; i < audioSelect.length; i++) { audioSelect[i].checked = false; } audioSelect[index-1].checked = true; grabAudio("#audioSource3"); }); } function changeVideoDeviceById(deviceID, UUID=false){ enumerateDevices().then(gotDevices2).then(function() { var opts = document.getElementById("videoSource3").options; var index = false for (var opt, j = 0; opt = opts[j]; j++) { if (opt.value == deviceID) { index = j; break; } } if (index!==false){ if (document.getElementById("videoSource3").selectedIndex === j){ // this is just refreshing the device. activatedPreview=false; grabVideo(0, "videosource", "#videoSource3", callback=UUID); } else if (UUID && !session.consent){ window.focus(); confirmAlt("Allow the director to change your video device to:\n\n"+opts[index].text+" ?").then(res=>{ if (res){ document.getElementById("videoSource3").selectedIndex = j; activatedPreview=false; grabVideo(0, "videosource", "#videoSource3", callback=UUID); } else { try { var data = {}; data.UUID = UUID; data.rejected = "changeCamera"; session.sendMessage(data, data.UUID); } catch(e){} } }); } else { document.getElementById("videoSource3").selectedIndex = j; activatedPreview=false; grabVideo(0, "videosource", "#videoSource3", callback=UUID); } } }); } function changeAudioDeviceById(deviceID, UUID=false){ if (UUID && !session.consent){ window.focus(); confirmAlt("Allow the director to change your audio mic source").then(res=>{ if (res){ enumerateDevices().then(gotDevices2).then(function() { var audioSelect = document.getElementById("audioSource3").querySelectorAll("input"); for (var i = 0; i < audioSelect.length; i++) { if (audioSelect[i].value == deviceID){ audioSelect[i].checked=true; } else { audioSelect[i].checked = false; } } activatedPreview=false; grabAudio("#audioSource3", callback=UUID); }); } else { try { var data = {}; data.UUID = UUID; data.rejected = "changeMicrophone"; session.sendMessage(data, data.UUID); } catch(e){} } }); } else { enumerateDevices().then(gotDevices2).then(function() { var audioSelect = document.getElementById("audioSource3").querySelectorAll("input"); for (var i = 0; i < audioSelect.length; i++) { if (audioSelect[i].value == deviceID){ audioSelect[i].checked=true; } else { audioSelect[i].checked = false; } } activatedPreview=false; grabAudio("#audioSource3", callback=UUID); }); } } function changeAudioOutputDeviceById(deviceID, UUID=false){ warnlog(deviceID); if (document.getElementById("outputSource3")){ enumerateDevices().then(gotDevices2).then(function() { var index = false if (document.getElementById("outputSource3")){ var opts = document.getElementById("outputSource3").options; for (var opt, j = 0; opt = opts[j]; j++) { if (opt.value == deviceID) { index = j; break; } } } if (UUID && !session.consent){ window.focus(); confirmAlt("Allow the director to change your audio's speaker to:\n\n"+opts[index].text+" ?").then(res=>{ if (res){ if (index!==false){ document.getElementById("outputSource3").selectedIndex = index; } session.sink = deviceID; resetupAudioOut(); var data = {}; data.UUID = UUID; sendMediaDevices(data.UUID); session.sendMessage(data, data.UUID); } else { try { var data = {}; data.UUID = UUID; data.rejected = "changeSpeaker"; session.sendMessage(data, data.UUID); } catch(e){} } }); } else { if (index!==false){ document.getElementById("outputSource3").selectedIndex = index; } session.sink = deviceID; resetupAudioOut(); } }); } else { session.sink = deviceID; resetupAudioOut(); } } function checkBasicStreamsExist(){ if (!session.streamSrc) { session.streamSrc = createMediaStream(); } if (!session.videoElement) { if (document.getElementById("videosource")) { session.videoElement = document.getElementById("videosource"); } else if (document.getElementById("previewWebcam")) { session.videoElement = document.getElementById("previewWebcam"); } else { session.videoElement = createVideoElement(); session.videoElement.srcObject = outboundAudioPipeline(); toggleMute(true); } } } var getUserMediaRequestID = 0; var grabVideoUserMediaTimeout = null; var grabVideoTimer = null; async function grabVideo(quality = 0, eleName = 'previewWebcam', selector = "select#videoSourceSelect", callback = false) { if (activatedPreview == true) { log("activated preview return 2"); return; } if (session.miconly){return;} activatedPreview = true; log("Grabbing video: " + quality); if (grabVideoTimer) { clearTimeout(grabVideoTimer); } log("element:" + eleName); var wasDisabled = true; try { if (session.streamSrc) { if (session.canvasWebGL){ session.canvasWebGL.remove() session.canvasWebGL=null; } if (session.canvasSource){ session.canvasSource.srcObject.getTracks().forEach(function(trk) { session.canvasSource.srcObject.removeTrack(trk); trk.stop(); wasDisabled=false; }); } session.streamSrc.getVideoTracks().forEach(function(track) { session.streamSrc.removeTrack(track); track.stop(); wasDisabled=false; }); if (session.videoElement.srcObject) { session.videoElement.srcObject.getVideoTracks().forEach(function(track) { session.videoElement.srcObject.removeTrack(track); track.stop(); session.videoElement.load(); wasDisabled=false; }); } else { session.videoElement.srcObject = outboundAudioPipeline(); } } else { session.streamSrc = createMediaStream(); session.videoElement.srcObject = session.streamSrc; // brand new stream; doesn't have audio yet log("CREATE NEW STREAM"); } } catch (e) { errorlog(e); } session.videoElement.controls = false; log("selector: " + selector); var videoSelect = document.querySelector(selector); // document.querySelector("videoSource3").value == "ZZZ" log(videoSelect); var mirror = false; getById("cameraTip1").classList.add("advanced"); if (!videoSelect || videoSelect.value == "ZZZ") { // if there is no video, or if manually set to audio ready, then do this step. warnlog("ZZZ SET - so no VIDEO"); if ((eleName == "previewWebcam") && document.getElementById("previewWebcam")){ if (session.autostart) { publishWebcam(); // no need to mirror as there is no video... return; } else { log("4462"); updateStats(); if (document.getElementById("gowebcam")) { document.getElementById("gowebcam").dataset.ready = "true"; if (document.getElementById("gowebcam").dataset.audioready == "true"){ document.getElementById("gowebcam").disabled = false; document.getElementById("gowebcam").innerHTML = miscTranslations["start"]; } } } } else { // If they disabled the video but not in preview mode; but actualy live. We will want to remove the stream from the publishing // we don't want to do this otherwise, as we are "replacing" the track in other cases. // this does cause a problem, as previous bitrate settings & resolutions might not be applied if switched back.... must test for (UUID in session.pcs) { if ("realUUID" in session.pcs[UUID]){continue;} // do not apply to screen shares. // for any connected peer, update the video they have if connected with a video already. var senders = getSenders2(UUID); 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 = false; getById("mutevideobutton").classList.add("advanced"); // hide the mute button, so they can't unmute while no video. //session.pcs[UUID].removeTrack(sender); // replace may not be supported by all browsers. eek. //errorlog("DELETED SENDER"); } }); } var msg = {}; msg.videoMuted = true; session.sendMessage(msg); } // end } else { var sq = 0; if (session.quality === false) { sq = session.quality_wb; } else if (session.quality > 2) { // 1080, 720, and 360p sq = 2; // hacking my own code. TODO: ugly, so I need to revisit this. } else { sq = session.quality; } if (session.director && (quality !== false)){ // URL-based quality won't matter if DIRECTOR; // quality = quality; } else if ((quality === false) || (quality < sq)) { quality = sq; // override the user's setting } if ((iOS || iPad) && safariVersion()<15) { // iOS will not work correctly at 1080p; likely a h264 codec issue. if (quality == 0) { quality = 1; } } var constraints = { audio: false, video: getUserMediaVideoParams(quality, (iOS || iPad)) }; log("Quality selected:" + quality); if (session.facingMode){ constraints.video.facingMode = { exact: session.facingMode }; // user or environment } else if ((iOS) || (iPad)) { constraints.video.deviceId = { exact: videoSelect.value }; // iPhone 6s compatible ? Needs to be exact for iPhone 6s } else if (navigator && navigator.userAgent && navigator.userAgent.indexOf("Firefox")>=0){ // is firefox. constraints.video.deviceId = { exact: videoSelect.value }; // Firefox is a dick. Needs it to be exact. } else if (videoSelect.options[videoSelect.selectedIndex].text.includes("NDI Video")) { // NDI does not like "EXACT" constraints.video.deviceId = videoSelect.value; // NDI is fucked up } else { constraints.video.deviceId = { exact: videoSelect.value }; // Default. Should work for Logitech, etc. } if (session.width) { constraints.video.width = { exact: session.width }; // manually specified - so must be exact } if (session.height) { constraints.video.height = { exact: session.height }; } if (session.framerate) { constraints.video.frameRate = { exact: session.framerate }; } else if (session.maxframerate != false){ constraints.video.frameRate = { ideal: session.maxframerate, max: session.maxframerate }; } if (session.ptz){ if (constraints.video && constraints.video!==true){ if (getChromeVersion() && getChromeVersion()>80){ constraints.video.pan=true; constraints.video.tilt=true; constraints.video.zoom=true; } } } var obscam = false; var mirrorcheck = false; log(videoSelect.options[videoSelect.selectedIndex].text); if (videoSelect.options[videoSelect.selectedIndex].text.startsWith("OBS-Camera")) { // OBS Virtualcam mirror = true; obscam = true; } else if (videoSelect.options[videoSelect.selectedIndex].text.startsWith("OBS Virtual Camera")) { // OBS Virtualcam mirror = true; obscam = true; } else if (videoSelect.options[videoSelect.selectedIndex].text.startsWith("Dummy video device")) { // Linuxv mirror = true; } else if (videoSelect.options[videoSelect.selectedIndex].text.startsWith("vMix Video")) { // vMix mirror = true; } else if (videoSelect.options[videoSelect.selectedIndex].text.startsWith("screen-capture-recorder")) { // screen-capture-recorder mirror = true; } else if (videoSelect.options[videoSelect.selectedIndex].text.includes(" back")) { // Android mirror = true; } else if (videoSelect.options[videoSelect.selectedIndex].text.includes(" rear")) { // Android mirror = true; } else if (videoSelect.options[videoSelect.selectedIndex].text.includes("NDI Video")) { // NDI Virtualcam mirror = true; } else if (videoSelect.options[videoSelect.selectedIndex].text.startsWith("Back Camera")) { // iPhone and iOS mirror = true; } else if (videoSelect.options[videoSelect.selectedIndex].text.toLowerCase().includes("c922")) { if ((session.quality!==2) && !session.cleanOutput){ getById("cameraTipContext1").innerHTML = "Tip: To achieve 60-fps with a C922 webcam, low-light compensation needs to be turned off, exposure set to auto, and 720p used."; getById("cameraTip1").classList.remove("advanced"); } } else if (videoSelect.options[videoSelect.selectedIndex].text.toLowerCase().includes("cam link")) { if (!session.cleanOutput){ getById("cameraTipContext1").innerHTML = "Tip: A Cam Link may glitch green/purple if accessed elsewhere while already in use."; getById("cameraTip1").classList.remove("advanced"); } } else if (session.mobile){ mirrorcheck = true; mirror = false; } else { mirror = false; } session.mirrorExclude = mirror; log(constraints); clearTimeout(grabVideoUserMediaTimeout); getUserMediaRequestID += 1; grabVideoUserMediaTimeout = setTimeout(function(gumID, callback2) { navigator.mediaDevices.getUserMedia(constraints).then(function(stream) { if (getUserMediaRequestID !== gumID) { warnlog("GET USER MEDIA CALL HAS EXPIRED"); stream.getTracks().forEach(function(track) { stream.removeTrack(track); track.stop(); log("stopping old track"); }); return; } log("adding video tracks 2412"); checkBasicStreamsExist(); stream.getVideoTracks().forEach(function(track) { try{ if (mirrorcheck){ const capabilities = track.getCapabilities(); if ("facingMode" in capabilities){ if (capabilities.facingMode == "environment"){ mirror=true; session.mirrorExclude = mirror; //applyMirror(mirror, eleName); } } } } catch(e){} session.streamSrc.addTrack(track); // tracks previously removed. try{ track.onended = function(e) { // hurrah! warnlog(e); refreshVideoDevice(); } } catch(e){errorlog(e);} if (session.mobile){ if (!(iPad || iOS)){ try{ updateSavedVideoSettings(track); } catch(e){errorlog(e);} } } }); updateRenderOutpipe(); // senderAudioUpdate if (wasDisabled && !session.videoMuted){ var msg = {}; msg.videoMuted = session.videoMuted; session.sendMessage(msg); } applyMirror(mirror, eleName); if ((eleName == "previewWebcam") && document.getElementById("previewWebcam")){ if (session.autostart) { publishWebcam(); } else { log("4620"); if (document.getElementById("gear_webcam")) { updateStats(obscam); } if (document.getElementById("gowebcam")) { document.getElementById("gowebcam").dataset.ready = "true"; if (document.getElementById("gowebcam").dataset.audioready == "true"){ document.getElementById("gowebcam").disabled = false; document.getElementById("gowebcam").innerHTML = miscTranslations["start"]; } } } } else if (getById("gear_webcam3").style.display === "inline-block") { updateStats(obscam); } // Once crbug.com/711524 is fixed, we won't need to wait anymore. This is // currently needed because capabilities can only be retrieved after the // device starts streaming. This happens after and asynchronously w.r.t. // getUserMedia() returns. if (grabVideoTimer) { clearTimeout(grabVideoTimer); if ((eleName == "previewWebcam") && document.getElementById("previewWebcam")){ session.videoElement.controls = true; } } if (getById("popupSelector_constraints_video")) { getById("popupSelector_constraints_video").innerHTML = ""; } if (getById("popupSelector_constraints_audio")) { getById("popupSelector_constraints_audio").innerHTML = ""; } if (getById("popupSelector_constraints_loading")) { getById("popupSelector_constraints_loading").style.display = ""; } grabVideoTimer = setTimeout(function(callback3, mirr) { makeImages(true); if (getById("popupSelector_constraints_loading")) { getById("popupSelector_constraints_loading").style.display = "none"; } if ((eleName == "previewWebcam") && document.getElementById("previewWebcam")){ session.videoElement.controls = true; } else { updateConstraintSliders(); } if (callback3){ try { var data = {}; data.UUID = callback3; data.videoOptions = listVideoSettingsPrep(); sendMediaDevices(data.UUID); session.sendMessage(data, data.UUID); } catch(e){} } updateForceRotate(mirr); dragElement(session.videoElement); }, 1000, callback2, mirror); // focus log("DONE - found stream"); }).catch(function(e) { activatedPreview = false; warnlog(e); if (e.name === "OverconstrainedError") { warnlog(e.message); log("Resolution or framerate didn't work"); } else if (e.name === "NotReadableError") { if (quality <= 10) { grabVideo(quality + 1, eleName, selector); } else if (session.facingMode){ session.facingMode = false; grabVideo(false, eleName, selector); // restart. } else { if (!(session.cleanOutput)) { if (iOS) { warnUser("An error occured. Closing existing tabs in Safari may solve this issue."); } else { warnUser("Error: Could not start video source.\n\nTypically this means the Camera is already be in use elsewhere. Most webcams can only be accessed by one program at a time.\n\nTry a different camera or perhaps try re-plugging in the device."); } } activatedPreview = true; if (getById('gowebcam')) { getById('gowebcam').innerHTML = "Problem with Camera"; } } return; } else if (e.name === "NavigatorUserMediaError") { if (getById('gowebcam')) { getById('gowebcam').innerHTML = "Problem with Camera"; } if (!(session.cleanOutput)) { warnUser("Unknown error: 'NavigatorUserMediaError'"); } return; } else if (e.name === "timedOut") { activatedPreview = true; if (getById('gowebcam')) { getById('gowebcam').innerHTML = "Problem with Camera"; } if (!(session.cleanOutput)) { warnUser(e.message); } return; } else { errorlog("An unknown camera error occured"); } if (quality <= 10) { grabVideo(quality + 1, eleName, selector); } else if (session.facingMode){ session.facingMode = false; grabVideo(false, eleName, selector); // restart. } else { errorlog("********Camera failed to work"); activatedPreview = true; if (getById('gowebcam')) { getById('gowebcam').innerHTML = "Problem with Camera"; } if (!(session.cleanOutput)) { if (session.width || session.height || session.framerate) { warnUser(" Camera failed to load.\n\nPlease ensure your camera supports the resolution and framerate that has been manually specified. Perhaps use &quality=0 instead."); } else { warnUser(" Camera failed to load.\n\nPlease make sure it is not already in use by another application.\n\nPlease make sure you have accepted the camera permissions."); } } } }); }, 100, getUserMediaRequestID, callback); } } function updateRenderOutpipe(){ // video only. log("updateRenderOutpipe()"); if (session.canvasWebGL){ session.canvasWebGL.remove() session.canvasWebGL=null; } if (session.canvasSource){ session.canvasSource.srcObject.getTracks().forEach(function(trk) { session.canvasSource.srcObject.removeTrack(trk); //trk.stop(); }); } if (session.videoElement.srcObject) { session.videoElement.srcObject.getVideoTracks().forEach(function(track) { session.videoElement.srcObject.removeTrack(track); //track.stop(); //session.videoElement.load(); }); } else if (session.streamSrc){ session.videoElement.srcObject = outboundAudioPipeline(); } if (session.streamSrc){ session.streamSrc.getVideoTracks().forEach(function(track) { track = applyEffects(track); // updates with the correct track session.streamSrc if (track){ // video tracks are already removed from sources/elements. grabVideo() does that to start with; so time to just add the video! //session.streamSrc.addTrack(track); warnlog("video effects were just applied"); session.videoElement.srcObject.addTrack(track); toggleVideoMute(true); } if (session.mc && session.mc.getSenders){ // should only be 0 or 1 video sender, ever. var added = false; session.mc.getSenders().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. sender.track.enabled = true; added = true; } }) if (added == false) { session.mc.addTrack(track, session.videoElement.srcObject); // can't replace, so adding } } for (UUID in session.pcs) { try { if ("realUUID" in session.pcs[UUID]){continue;} if (((iOS) || (iPad)) && (session.pcs[UUID].guest == true)) { warnlog("iOS and GUest detected"); } else 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; var senders = getSenders2(UUID); 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. sender.track.enabled = true; added = true; } }); if (added == false) { session.pcs[UUID].addTrack(track, session.videoElement.srcObject); // can't replace, so adding 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); } } session.refreshScale(); }); } } async function grabAudio(selector = "#audioSource", trackid = null, override = false, callback = false) { // trackid is the excluded track if (activatedPreview == true) { log("activated preview return 2"); return; } activatedPreview = true; log("TRACK EXCLUDED:" + trackid); try { if (session.videoElement.srcObject) { var audioSelect = document.querySelector(selector).querySelectorAll("input"); var audioExcludeList = []; for (var i = 0; i < audioSelect.length; i++) { try { if ("screen" == audioSelect[i].dataset.type) { // skip already excluded ---------- !!!!!! DOES THIS MAKE SENSE? TODO: CHECK if (audioSelect[i].checked) { audioExcludeList.push(audioSelect[i]); } } } catch (e) { errorlog(e); } } session.videoElement.srcObject.getAudioTracks().forEach(function(track) { // TODO: Confirm that I even need this? for (var i = 0; i < audioExcludeList.length; i++) { try { if (audioExcludeList[i].label == track.label) { warnlog("DONE"); return; } } catch (e) {} } if (trackid && (track.id == trackid)) { warnlog("SKIPPED EXCLUDED TRACK?"); return; } session.videoElement.srcObject.removeTrack(track); track.stop(); }); session.streamSrc.getAudioTracks().forEach(function(track) { for (var i = 0; i < audioExcludeList.length; i++) { try { if (audioExcludeList[i].label == track.label) { warnlog("EXCLUDING TRACK; PROBABLY SCREEN SHARE"); return; } } catch (e) {} } if (trackid && (track.id == trackid)) { warnlog("SKIPPED EXCLUDED TRACK?"); return; } session.streamSrc.removeTrack(track); track.stop(); }); } else { // if no stream exists if (!session.streamSrc){ session.streamSrc = createMediaStream(); } else { errorlog("THIS SHOULDNT HAPPEN - audio hybrid exists"); var audioSelect = document.querySelector(selector).querySelectorAll("input"); var audioExcludeList = []; for (var i = 0; i < audioSelect.length; i++) { try { if ("screen" == audioSelect[i].dataset.type) { // skip already excluded ---------- !!!!!! DOES THIS MAKE SENSE? TODO: CHECK if (audioSelect[i].checked) { audioExcludeList.push(audioSelect[i]); } } } catch (e) { errorlog(e); } } session.streamSrc.getAudioTracks().forEach(function(track) { for (var i = 0; i < audioExcludeList.length; i++) { try { if (audioExcludeList[i].label == track.label) { warnlog("EXCLUDING TRACK; PROBABLY SCREEN SHARE"); return; } } catch (e) {} } if (trackid && (track.id == trackid)) { warnlog("SKIPPED EXCLUDED TRACK?"); return; } session.streamSrc.removeTrack(track); track.stop(); }); } log("CREATE NEW SOURCE FOR AUDIO"); } } catch (e) { errorlog(e); } var streams = await getAudioOnly(selector, trackid, override); // Get audio streams warnlog(streams); try { for (var i = 0; i < streams.length; i++) { streams[i].getAudioTracks().forEach(function(track) { session.streamSrc.addTrack(track); // add video track to the preview video }); } } catch(e){errorlog(e);} senderAudioUpdate(callback); } function senderAudioUpdate(callback=false){ try { session.videoElement.srcObject = outboundAudioPipeline(); toggleMute(true); if (session.videoElement.srcObject.getAudioTracks()) { var tracks = session.videoElement.srcObject.getAudioTracks(); if (session.mc && session.mc.getSenders){ session.mc.getSenders().forEach((sender) => { // disable senders that aren't part of the active tracks var good = false; if (sender.track && sender.track.id && (sender.track.kind == "audio")) { tracks.forEach(function(track) { if (track.id == sender.track.id) { good = true; } }); } else { // video or something else; ignore it. return; } if (good) { return; } sender.track.enabled = false; //session.mc.removeTrack(sender); // Apparently removeTrack causes renogiation; also kills send/recv. avoid }); if (tracks.length) { tracks.forEach(function(track) { var matched = false; session.mc.getSenders().forEach((sender) => { // is the track in the current sender list? if (sender.track && sender.track.id && (sender.track.kind == "audio")) { warnlog(sender.track.id + " " + track.id); if (sender.track.id == track.id) { warnlog("MATCHED 1"); matched = true; } } }); if (matched) { // track already in the current sender list; skip return; } var added = false; session.mc.getSenders().forEach((sender) => { if (added) { return; } if (sender.track && (sender.track.kind == "audio") && (sender.track.enabled == false)) { // replace instead of add new tracks; make sure to enable old tracks being replaced sender.replaceTrack(track); sender.track.enabled = true; added = true; warnlog("ADDED 2"); } }); if (added) { return; } var sender = session.mc.addTrack(track, session.videoElement.srcObject); // didn't replace , since no old disabled tracks available, so let's add a new track. }); } else { if (session.mc.getSenders){ session.mc.getSenders().forEach((sender) => { // disable all senders, since no tracks available. if (sender.track && sender.track.kind == "audio") { sender.track.enabled = false; // (trying this instead) //session.pcs[UUID].removeTrack(sender); // Apparently removeTrack causes renogiation; also kills send/recv. } }); } } } for (UUID in session.pcs) { if ("realUUID" in session.pcs[UUID]){continue;} // do not process the screen share audio if (session.pcs[UUID].allowAudio == true) { var senders = getSenders2(UUID); senders.forEach((sender) => { var good = false; if (sender.track && sender.track.id && (sender.track.kind == "audio")) { tracks.forEach(function(track) { if (track.id == sender.track.id) { good = true; } }); } else { // video or something else; ignore it. return; } if (good) { return; } sender.track.enabled = false; //session.pcs[UUID].removeTrack(sender); // Apparently removeTrack causes renogiation; also kills send/recv. }); if (tracks.length) { tracks.forEach(function(track) { var matched = false; var senders = getSenders2(UUID); senders.forEach((sender) => { if (sender.track && sender.track.id && (sender.track.kind == "audio")) { warnlog(sender.track.id + " " + track.id); if (sender.track.id == track.id) { warnlog("MATCHED 1"); matched = true; } } }); if (matched) { return; } var added = false; var senders = getSenders2(UUID); senders.forEach((sender) => { if (added) { return; } if (sender.track && (sender.track.kind == "audio") && (sender.track.enabled == false)) { sender.replaceTrack(track); sender.track.enabled = true; added = true; warnlog("ADDED 2"); } }); if (added) { return; } var sender = session.pcs[UUID].addTrack(track, session.videoElement.srcObject); }); } else { var senders = getSenders2(UUID); senders.forEach((sender) => { if (sender.track && sender.track.kind == "audio") { sender.track.enabled = false; // (trying this instead) //session.pcs[UUID].removeTrack(sender); // Apparently removeTrack causes renogiation; also kills send/recv. } }); } } } session.applySoloChat(); // mute streams that should be muted if a director session.applyIsolatedChat(); } try { if (toggleSettingsState){ updateConstraintSliders(); } } catch(e){} if (callback){ try{ var data = {}; data.UUID = callback; data.audioOptions = listAudioSettingsPrep(); sendMediaDevices(data.UUID); session.sendMessage(data, data.UUID); } catch(e){} } } catch (e) { errorlog(e); } if (document.getElementById("gowebcam")) { document.getElementById("gowebcam").dataset.audioready = true; if (document.getElementById("gowebcam").dataset.ready && (document.getElementById("gowebcam").dataset.ready=="true")){ document.getElementById("gowebcam").disabled = false; document.getElementById("gowebcam").innerHTML = miscTranslations["start"]; } } } // WEBCAM session.publishDirector = async function(clean, vdevice=false, adevice=true){ // stream is used to generated an SDP ; true,false,false log("DIRECTOR STREAM SETUP"); if (getById("press2talk").dataset.enabled == true){log("already enabled");return;} getById("press2talk").dataset.enabled = true; if (session.videoElement){ var v = session.videoElement; } else { var v = createVideoElement(); session.videoElement = v; } if (session.streamID){ session.videoElement.dataset.sid = session.streamID; } v.id = "videosource"; // could be set to UUID in the future v.muted = true; v.autoplay = true; v.controls = false; v.setAttribute("playsinline",""); session.streamSrc = createMediaStream(); v.srcObject = session.streamSrc; // blank, no worries. we dont need outbound. var quality = 1; var framerate = 30; if (session.quality!==false){ quality = parseInt(session.quality) || 0; if (quality>2){quality=2;} else if (quality<0){quality = 0;} } if (session.showDirector){ if (quality<2){ framerate = 60; } } if (session.framerate!==false){ framerate = parseInt(session.framerate) || 30; } if (session.maxframerate){ if (framerate > session.maxframerate){ framerate = session.maxframerate || framerate; } } if (vdevice){ if (vdevice===true){ vdevice = {}; } if (quality===0){ vdevice.width = {ideal:1920}; //{deviceId: {exact: deviceInfo.deviceId}}; vdevice.height = {ideal:1080}; vdevice.framerate = {ideal:framerate}; } else if (quality===1){ vdevice.width = {ideal:1280}; //{deviceId: {exact: deviceInfo.deviceId}}; vdevice.height = {ideal:720}; vdevice.framerate = {ideal:framerate}; } else if (quality===2){ vdevice.width = {ideal:640}; //{deviceId: {exact: deviceInfo.deviceId}}; vdevice.height = {ideal:360}; vdevice.framerate = {ideal:framerate}; } if (session.framerate){ vdevice.framerate.ideal = parseInt(session.framerate) || 30; } if (session.maxframerate){ vdevice.framerate.max = parseInt(session.maxframerate) || 60; } if (session.width){ vdevice.width = {exact: session.width}; //{deviceId: {exact: deviceInfo.deviceId}}; } if (session.height){ vdevice.height = {exact: session.height}; //{deviceId: {exact: deviceInfo.deviceId}}; } } var constraints = {audio: adevice, video: vdevice}; if (session.audioInputChannels){ if (constraints.audio === true){ constraints.audio = {}; constraints.audio.channelCount = session.audioInputChannels; } else if (constraints.audio){ constraints.audio.channelCount = session.audioInputChannels; } } //if (session.echoCancellation===false){ if (constraints.audio === true){ constraints.audio = {}; } if (constraints.audio){ if (session.echoCancellation===false || session.autoGainControl===false || session.noiseSuppression===false){ if (session.echoCancellation===false){ constraints.audio.echoCancellation=false; } else { constraints.audio.echoCancellation=true; } if (session.autoGainControl===false){ constraints.audio.autoGainControl=false; } else { constraints.audio.autoGainControl=true; } if (session.noiseSuppression===false){ constraints.audio.noiseSuppression=false; } else { constraints.audio.noiseSuppression=true; } } } if (constraints.audio ===false && constraints.video ===false){ for (UUID in session.pcs){ try { session.initialPublish(UUID); // Start publishing! } catch(e){errorlog(e);} } try{ createDirectorCam(v, clean); } catch(e){errorlog(e);} } else { getUserMediaRequestID+=1; var gumID = getUserMediaRequestID; navigator.mediaDevices.getUserMedia(constraints).then(function(stream){ // very simple. if (getUserMediaRequestID !== gumID) { warnlog("GET USER MEDIA CALL HAS EXPIRED 2"); stream.getTracks().forEach(function(track) { stream.removeTrack(track); track.stop(); log("stopping old track"); }); return; } session.streamSrc = stream; v.srcObject = outboundAudioPipeline(); // not blank, so now we worry //toggleMute(true); // createDirectorCam does this for us in a second. for (UUID in session.pcs){ try { session.initialPublish(UUID); // Start publishing! } catch(e){errorlog(e);} } try{ createDirectorCam(v, clean); } catch(e){errorlog(e);} }); } changeAudioOutputDevice(v); try { getById("webcamquality3").elements.namedItem("resolution").value = 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) {} 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"); }).catch(warnlog); } }; v.addEventListener('click', function(e) { // show stats of video if double clicked 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);} }); if (session.directorEnabledPPT){ return; } if (session.videoMutedFlag){ session.videoMuted = true; toggleVideoMute(true); } session.directorEnabledPPT = true; if (session.seeding){ return; } session.seeding=true; session.seedStream(); }; function createDirectorCam(vid) { getById("press2talk").innerHTML = ""; getById("press2talk").outerHTML = ""; if (document.getElementById("videoContainer_director")){ getById("videoContainer_director").appendChild(vid); } else { getById("miniPerformer").appendChild(vid); } vid.title = "This is the preview of the Director's audio and video output."; vid.id = "videosource"; session.muted = false; toggleMute(true); getById("mutebutton").classList.remove("advanced"); getById("screensharebutton").classList.remove("advanced"); getById("hangupbutton2").classList.remove("advanced"); toggleSettings(); if (urlParams.has('permaid')) { updateURL("permaid=" + session.streamID); } else { updateURL("push=" + session.streamID); } } function statsMenuCreator(){ if (getById("menuStatsBox")){ clearInterval(getById("menuStatsBox").interval); getById("menuStatsBox").remove(); } var menu = document.createElement("div"); menu.id = "menuStatsBox"; menu.className = "debugStats remotestats"; getById('main').appendChild(menu); menu.style.left = parseInt(Math.random()*10)+15+"px" menu.style.top = parseInt(Math.random()*10)+"px" menu.innerHTML="
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 v.dataset.menu = "context-menu-video"; v.muted = true; v.autoplay = true; if (session.mobile){ v.controls = true; } else { v.controls = false; } 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);} } /* if (session.mirrored && session.flipped){ v.style.transform = "scaleX(1) scaleY(-1) "; } else if (session.mirrored){ v.style.transform = "scaleX(1) "; } else if (session.flipped){ v.style.transform = "scaleY(-1) scaleX(-1)"; } else { v.style.transform = "scaleX(-1) "; } */ //applyMirror(session.mirrorExclude, 'videosource'); 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, 'videosource'); 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, 'videosource'); 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, 'videosource'); 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, 'videosource'); 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"); }).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'); 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 } 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("Your Electron app does not support Screen Capture.Update your Electron Capture app and then enable Elevated Privileges to access screen-sharing."); } return false; } } var streams = []; for (var i=1; i
Update your Electron Capture app and then enable Elevated Privileges to access screen-sharing."); } return false; } } if ((err.name == "NotAllowedError") || (err.name == "PermissionDeniedError")){ // User Stopped it. session.screenShareState=false; pokeIframeAPI("screen-share-ended"); return false; } else { if (audio==true){ constraints.audio=false; if (!(session.cleanOutput)){ setTimeout(function(){warnUser(err);},1); // TypeError: Failed to execute 'getDisplayMedia' on 'MediaDevices': Audio capture is not supported } return publishScreen2(constraints, audioList, false); } else { if (!(session.cleanOutput)){ setTimeout(function(){warnUser(err);},1); // TypeError: Failed to execute 'getDisplayMedia' on 'MediaDevices': Audio capture is not supported } return false; } } }); }; function cancelFile(ele){ var idx = ele.dataset.tid; try{ transferList[idx].dc.close(); } catch(e){} transferList[idx].status = 5; updateDownloadLink(idx); } function requestFile(ele){ var idx = ele.dataset.tid; transferList[idx].status = 1; var fid = ele.dataset.fid; var UUID = ele.dataset.uuid; var msg = {}; msg.requestFile = fid; msg.UUID = UUID; session.sendRequest(msg, msg.UUID); updateDownloadLink(idx); } var transferList = []; var msgTransferList = []; function addDownloadLink(fileList, UUID, pc){ if (session.nodownloads){return;} // downloads are blocked log(fileList); if (!fileList || !fileList.length){return;} for (var i = 0; i< fileList.length; i++){ fileList[i].UUID = UUID; fileList[i].completed = 0; fileList[i].status = 0; fileList[i].time = Date.now(); fileList[i].pc = pc[UUID]; transferList.push(fileList[i]); } if (session.chatbutton===false){return;} // messages can still appear as overlays updateMessages(); if (session.beepToNotify) { playtone(); } 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 updateDownloadLink(idx){ idx = parseInt(idx); var elements = document.querySelectorAll('[data-tid="'+idx+'"]'); if (elements[0]) { if (transferList[idx].status === 0){ elements[0].innerHTML = "Download it here"; } else if (transferList[idx].status === 1){ elements[0].innerHTML = "Requested"; //elements[0].onclick='cancelFile(this);' } else if (transferList[idx].status === 2){ elements[0].innerHTML = "Downloading: "+parseInt(transferList[idx].completed*100)+"%"; elements[0].onclick = function(){cancelFile(this);} } else if (transferList[idx].status === 3){ elements[0].innerHTML = "Completed"; elements[0].onclick = null; elements[0].disabled = true; } else if (transferList[idx].status === 4){ elements[0].innerHTML = "No longer available"; elements[0].onclick = null; elements[0].disabled = true; } else if (transferList[idx].status === 5){ elements[0].innerHTML = "Cancelled"; elements[0].onclick = null; elements[0].disabled = true; } } } function showDownloadLinks(){ if (session.nodownloads){return;} // downloads are blocked msgTransferList=[]; if (!transferList || !transferList.length){return;} for (var i = 0; i< transferList.length; i++){ fileShareMessage(transferList[i], i); } } function fileShareMessage(fileinfo, idx){ fileinfo.name = sanitizeChat(fileinfo.name); // keep it clean. var label = false; if (fileinfo.pc){ if (fileinfo.pc.label) { label = sanitizeLabel(fileinfo.pc.label); } } var data = {}; if (fileinfo.status === 0){ data.msg = " has a shared a file with you:
"+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+"
"; } 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 = "recv"; 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); } 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'; if (urlParams.has('permaid')){ updateURL("permaid="+session.streamID); } else { updateURL("push="+session.streamID); } getById("head1").className = 'advanced'; getById("head2").className = 'advanced'; if (!(session.cleanOutput)){ getById("chatbutton").className="float"; getById("hangupbutton").className="float"; getById("controlButtons").style.display="flex"; getById("helpbutton").style.display = "inherit"; getById("reportbutton").style.display = ""; } else { getById("controlButtons").style.display="none"; } updateReshareLink(); pokeIframeAPI('started-fileshare'); 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; } } getById("reshare").href = "https://"+location.host+location.pathname+"?view="+session.streamID+added+pie; getById("reshare").text = "https://"+location.host+location.pathname+"?view="+session.streamID+added+pie; getById("reshare").style.width = ((getById("reshare").text.length + 1)*1.15 * 8) + 'px'; } 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_file"; 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'; if (urlParams.has('permaid')){ updateURL("permaid="+session.streamID); } else { updateURL("push="+session.streamID); } getById("head1").className = 'advanced'; getById("head2").className = 'advanced'; if (!(session.cleanOutput)){ getById("chatbutton").className="float"; getById("hangupbutton").className="float"; getById("controlButtons").style.display="flex"; getById("helpbutton").style.display = "inherit"; getById("reportbutton").style.display = ""; } else { getById("controlButtons").style.display="none"; } 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 { session.streamSrc = v.captureStream(); // gaaaaaaaaaaaahhhhhhhh! toggleMute(true); } catch (e){ errorlog(e); return; } v.className = "tile clean fileshare"; 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(){ session.streamSrc=vid.captureStream(); 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"); }).catch(warnlog); } // no preview doesn't work, so just stop it from doing its thing. container.appendChild(v); changeAudioOutputDevice(v); if (session.mirrored && session.flipped){ v.style.transform = "scaleX(1) scaleY(-1) "; } else if (session.mirrored){ v.style.transform = "scaleX(1) "; } else if (session.flipped){ v.style.transform = "scaleY(-1) scaleX(-1)"; } else { v.style.transform = "scaleX(-1) "; } session.mirrorExclude=true; if (session.director){ } else if (session.scene!==false){ //setTimeout(function(){updateMixer();},1);// TODO FIX } 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"); applyMirror(session.mirrorExclude, 'videosource'); container.style.width="100%"; //container.style.height="100%"; container.style.alignItems = "center"; container.backgroundColor = "#666"; play(); } else { session.windowed = false; applyMirror(session.mirrorExclude, 'videosource'); play(); //setTimeout(function(){updateMixer();},1);// TODO FIX } } else { //session.cbr=0; // we're just going to override it if (session.stereo==5){ session.stereo=3; } session.windowed = false; applyMirror(session.mirrorExclude, 'videosource'); //setTimeout(function(){updateMixer();},1); // TODO FIX } } else { if (session.fullscreen){ session.windowed = false; } else { v.className = "myVideo clean fileshare"; session.windowed = true; } getById("mutespeakerbutton").classList.add("advanced"); applyMirror(session.mirrorExclude, 'videosource'); container.style.width="100%"; //container.style.height="100%"; //container.style.display = "flex"; container.style.alignItems = "center"; container.backgroundColor = "#666"; } 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'); 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 = false; 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 < 50) { 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); //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)"; if (iframesrc == "") { iframesrc = "./"; } if (iframesrc.startsWith("https://") || iframesrc.startsWith("http://")){ var domain = (new URL(iframesrc)); domain = domain.hostname; log(domain); if ((domain=="www.youtube.com") || (domain=="youtube.com")){ var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/; var match = iframesrc.match(regExp); var vidid = (match&&match[7].length==11)? match[7] : false; if(vidid){ iframesrc = "https://www.youtube.com/embed/"+vidid+"?autoplay=1&modestbranding=1"; log(iframesrc); } } else if (domain=="www.twitch.tv"){ if (iframesrc.includes("twitch.tv/popout/")){ // this is a twitch live chat window iframesrc = iframesrc.replace("/popout/","/embed/"); iframesrc = iframesrc.replace("?popout=","?parent="+location.hostname); iframesrc = iframesrc.replace("?popout","?parent="+location.hostname); if (iframesrc.includes("darkpopout=")){ iframesrc = iframesrc.replace("?darkpopout=","?darkpopout=&parent="+location.hostname); } else { iframesrc = iframesrc.replace("?darkpopout","?darkpopout&parent="+location.hostname); } } else { var vidid = iframesrc.split('/').pop().split('#')[0].split('?')[0]; if (vidid){ iframesrc = "https://player.twitch.tv/?channel="+vidid+"&parent="+location.hostname; log(iframesrc); } } } else if (domain=="twitch.tv"){ if (iframesrc.includes("twitch.tv/popout/")){ // this is a twitch live chat window iframesrc = iframesrc.replace("/popout/","/embed/"); iframesrc = iframesrc.replace("?popout=","?parent="+location.hostname); iframesrc = iframesrc.replace("?popout","?parent="+location.hostname); if (iframesrc.includes("darkpopout=")){ iframesrc = iframesrc.replace("?darkpopout=","?darkpopout=&parent="+location.hostname); } else { iframesrc = iframesrc.replace("?darkpopout","?darkpopout&parent="+location.hostname); } } else { var vidid = iframesrc.split('/').pop().split('#')[0].split('?')[0]; if (vidid){ iframesrc = "https://player.twitch.tv/?channel="+vidid+"&parent="+location.hostname; log(iframesrc); } } } else if ((domain=="www.vimeo.com") || (domain=="vimeo.com")){ iframesrc = iframesrc.replace("//vimeo.com/","//player.vimeo.com/video/"); iframesrc = iframesrc.replace("//www.vimeo.com/","//player.vimeo.com/video/"); log(iframesrc); } } 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) { // 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)"; 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://youtube.com/")){ iframe.style.border = "0"; } else if (iframesrc.startsWith("https://www.youtube.com/")){ iframe.style.border = "0"; } 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"; } if (document.getElementById("mainmenu")) { var m = getById("mainmenu"); m.remove(); } iframe.src = 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 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 (navigator && navigator.userAgent && navigator.userAgent.indexOf("Firefox")>=0){ // 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); } 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; 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 = ""; } 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"); } } } 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); } function changeOrder(value, UUID) { var msg = {}; msg.changeOrder = value; msg.UUID = UUID; session.sendRequest(msg, msg.UUID); } function requestVideoHack(keyname, value, UUID) { var msg = {}; msg.requestVideoHack = true; msg.keyname = keyname; msg.value = value; msg.UUID = UUID; session.sendRequest(msg, msg.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); } 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); } 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); } 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); } 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 ("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; 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); requestVideoHack(e.target.dataset.keyname, e.target.value, UUID); }; 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); requestVideoHack(e.target.dataset.keyname, e.target.value, UUID); 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); requestVideoHack(e.target.dataset.keyname, e.target.value, UUID); 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 (navigator && navigator.userAgent && navigator.userAgent.indexOf("Firefox")>=0){ // 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 ("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); } } } function safariVersion() { try { var ver = navigator.appVersion.split("Version/"); if (ver.length > 1) { ver = ver[1].split(" Safari"); } if (ver.length > 1) { ver = ver[0].split("."); } if (ver.length > 1) { ver = parseInt(ver[0]); } else { ver = 0; } } catch (e) { return 0; } return ver; } 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 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) { taskItemInContext = clickInsideElement(e, "task"); if (taskItemInContext) { e.preventDefault(); e.stopPropagation(); if (taskItemInContext.dataset && taskItemInContext.dataset.menu){ toggleMenuOn(taskItemInContext.dataset.menu); } 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) { if (menutype){ menu = getById(menutype); if (menuState !== 1) { menuState = 1; 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); } } } 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") { //copyFunction(taskItemInContext.href); } else if (link.getAttribute("data-action") === "Cast") { //copyFunction(taskItemInContext.href); } else if (link.getAttribute("data-action") === "Controls") { //copyFunction(taskItemInContext.href); } 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(); } contextListener(); })(); function popupMessage(e, message = "Copied to Clipboard") { // right click menu if (session.cleanOutput){return;} var posx = 0; var posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } posx += 10; var menu = getById("messagePopup"); menu.innerHTML = "
"; 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") { 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 (msgTransferList[i].type == "sent") { msg.innerHTML = msgTransferList[i].msg + " - " + time + ""; msg.classList.add("outMessage"); } else if (msgTransferList[i].type == "recv") { 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; 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; } const {readable, writable} = new TransformStream({ transform: (chunk, ctrl) => chunk.arrayBuffer().then(b => ctrl.enqueue(new Uint8Array(b))) }); readable.pipeTo(streamSaver.createWriteStream(filename + '.webm')); var writer = writable.getWriter(); video.recorder.writer = writer; video.recorder.stop = function() { if (!video.recording) { errorlog("ALREADY STOPPED"); updateLocalRecordButton(UUID, -1); return; } 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(() => { writer.close(); updateLocalRecordButton(UUID, -1); delete(video.recorder); delete(video.recording); }, 1200); }; 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); writer.write(event.data); //////////// if (video.recording) { updateLocalRecordButton(UUID, (parseInt((Date.now() - timestamp) / 1000) || 0)); } } } 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 == -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() { 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) { // event.currentTarget,this.parentNode.parentNode.dataset.UUID var audioKbps = false; 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
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;
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"];
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,3000, 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);
}