togglefullscreen sstype3 fix

index.html

@@ -84,7 +84,7 @@
 		
 		<script type="text/javascript" crossorigin="anonymous"  src="./thirdparty/CodecsHandler.js?ver=48"></script>
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script>
-		<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=676"></script>
+		<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=681"></script>
 		<input id="zoomSlider" type="range" style="display: none;" />
 		<span id="electronDragZone" style="pointer-events: none; z-index:-10; position:absolute;top:0;left:0;width:100%;height:2%;-webkit-app-region: drag;min-height:20px;"></span>
 		<div id="header">
@@ -528,8 +528,9 @@
 							<i class="las la-robot"></i><span data-translate="select-digital-effect"> Digital Video Effects </span>
 						</div>
 						<select id="effectSelector" alt="Digital video effect options"  onchange="effectsDynamicallyUpdate(event, this);">
-							<option value="0" data-translate="no-effects-applied">No effects applied</option>	
+							<option value="0" data-translate="no-effects-applied">No effects applied</option>	track.getCapabilities().backgroundBlur
 							<option value="3" data-translate="blurred-background">Blurred background</option>
+							<option value="13" class="hidden" disabled data-translate="blurred-background-2">Blurred background 2 🧪</option>
 							<option value="4" data-translate="digital-greenscreen">Digital greenscreen</option>	
 							<option value="5" data-translate="virtual-background">Virtual background</option>
 							<option value="6" data-translate="face-mesh" title="experimental">Face mesh (slow load) 👨‍🔬</option>
@@ -1622,11 +1623,9 @@
 							<i class="las la-file-upload"></i>
 							<span data-translate="mirror-guest"> Mirror Video</span>
 						</button>
-						
+						<button class="mainonly advanced" data-action-type="force-keyframe" title="Force the remote sender to issue a keyframe to all scenes, fixing Pixel Smearing issues." onclick="requestKeyframeScene(this);">
-						<button class="mainonly advanced" data-action-type="force-keyframe" style=" background-image: linear-gradient(90deg, #C9F0FF 0%, #FFDFB9 39%, #FFDFDF 70%, #D9FFEC 100%);"  title="Force the remote sender to issue a keyframe to all scenes, fixing Pixel Smearing issues." onclick="requestKeyframeScene(this);">
 							<span data-translate="force-keyframe"> Rainbow Puke Fix</span>
 						</button>
-						
 					</div>
 					
 					<!-- Row of Channels -->
@@ -1866,6 +1865,7 @@
 					<select id="effectSelector3" onchange="effectsDynamicallyUpdate(event, this);">
 						<option value="0" data-translate="no-effects-applied">No effects applied</option>
 						<option value="3" data-translate="blurred-background">Blurred background</option>
+						<option value="13" class="hidden" disabled data-translate="blurred-background-2">Blurred background 2 🧪</option>
 						<option value="4" data-translate="digital-greenscreen">Digital greenscreen</option>	
 						<option value="5" data-translate="virtual-background">Virtual background</option>
 						<option value="6" data-translate="face-mesh" title="experimental">Face mesh (slow load) 👨‍🔬</option>
@@ -2528,7 +2528,7 @@
 
 		
 			var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
-			session.version = "23.8";
+			session.version = "23.9";
 			session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
 			
 			session.defaultPassword = "someEncryptionKey123"; // Change this password if self-deploying for added security/privacy
@@ -2641,11 +2641,11 @@
 			// session.hidehome = true; // If used, 'hide home' will make the landing page inaccessible, along with hiding a few go-home elements.
 			// session.record = false; // uncomment to block users from being able to record via vdo.ninja's built in recording function
 		</script>
-		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=880"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=885"></script>
 		<!-- 
 		// If you wish to change branding, blank offers a good clean start.
 		<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
 		-->
-		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=695"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=702"></script>
 	</body>
 </html>

lib.js

@@ -455,11 +455,25 @@ function isSamsungASeries(){
 	return navigator.userAgent.includes("; SM-A") || false;
 }
 
-function getChromeVersion() {
+function getChromiumVersion() {
 	var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
 	return raw ? parseInt(raw[2], 10) : false;
 }
 
+function getiOSVersion(){
+	try {
+		var agent = navigator.userAgent;
+		var start = agent.indexOf("OS ");
+		if( ( agent.indexOf("iPhone") > -1 || agent.indexOf("iPad") > -1 ) && start > -1 ){
+			return window.Number( agent.substr( start + 3, 3 ).replace("_","." ) );
+		}
+		return 0;
+	} catch (e) {
+		return 0;
+	}
+	return 0;
+}
+
 function safariVersion() {
 	var ver = 0;
 	try {
@@ -490,12 +504,22 @@ try{
 	var Firefox = navigator.userAgent.indexOf("Firefox")>=0;
 	if (Firefox){
 		Firefox = parseInt(navigator.userAgent.split("irefox/").pop()) || true;
-		
 	} 
 	var Android = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile");
-	var ChromeVersion = getChromeVersion();
+	var ChromiumVersion = getChromiumVersion();
 	var OperaGx = isOperaGX();
-	var SafariVersion = safariVersion();
+	var SafariVersion = safariVersion() || getiOSVersion();  // I should rename this to webkit
+
+	if (iOS || iPad){ // iOS doesn't yet allow actual browsers, cause it's abusing its duopoly.
+		if (SafariVersion){
+			if (Firefox){
+				Firefox = false; //  I should rename this to gecko
+			}
+			if (ChromiumVersion){
+				ChromiumVersion = false; // I should rename this to chromium
+			}
+		}
+	}
 	var SamsungASeries = isSamsungASeries();
 	var isVingester = navigator.userAgent.indexOf("Vingester")>=0;
 
@@ -2841,6 +2865,7 @@ function setupIncomingScreenTracking(v, UUID){  // SCREEN  element.
 	}, { once: true });
 	
 	v.onpause = (event) => { // prevent things from pausing; human or other
+
 		if (v.dataset.UUID && session.rpcs[v.dataset.UUID] && (session.rpcs[v.dataset.UUID].manualBandwidth === 0)){
 			return true;
 		}
@@ -5564,7 +5589,7 @@ function updateMixerRun(e=false){  // this is the main auto-mixing code.  It's a
 					vid.style.maxWidth = "100vh";
 					vid.style.maxHeight = "100vw";
 					
-					if (ChromeVersion && ChromeVersion<77){
+					if (ChromiumVersion && ChromiumVersion<77){
 						if (!animated && (parseInt(container.style.width)>parseInt(holder.style.height))){
 							vid.style.position = "relative";
 							vid.style.objectFit = "contain"; //contain;
@@ -9645,7 +9670,7 @@ function playoutdelay(UUID){  // applies a delay to all videos
 						if ((typeof( session.rpcs[UUID].stats[tid])=="object") && ("_trackID" in session.rpcs[UUID].stats[tid]) && (session.rpcs[UUID].stats[tid]._trackID===receiver.track.id) && (session.rpcs[UUID].stats[tid]._type == receiver.track.kind) && ("Jitter_Buffer_ms" in session.rpcs[UUID].stats[tid])){
 							
 
-							if (ChromeVersion<=103){ // I don't know the exact version, except I know OBS Studio is 103 and it uses the old way still.netwqor
+							if (ChromiumVersion<=103){ // I don't know the exact version, except I know OBS Studio is 103 and it uses the old way still.netwqor
 								var sync_offset = 0.0;
 								
 								if (session.rpcs[UUID].stats[tid]._sync_offset){
@@ -12834,14 +12859,18 @@ async function directPageReload(ele, event) {
 }
 
 
-async function directTimer(ele,  event=false) { // A directing room only is controlled by the Director, with the exception of MUTE.
+async function directTimer(ele,  event=false, manualSetTime=false) { // A directing room only is controlled by the Director, with the exception of MUTE.
 	log("directTimer");
 	var msg = {};
 	ele.classList.remove("blue");
 	ele.classList.remove("red");
 	if (!event || (!((event.ctrlKey) || (event.metaKey)))) {
 		if (ele.value == 0 || ele.value == 2) {
+			if (manualSetTime!==false){
+				var getTime = parseFloat(manualSetTime) || 0;
+			} else {
 				var getTime = await promptAlt("Time to set count down timer", false, false, parseInt(getById("overlayClockContainer").dataset.initial), true);
+			}
 			if (getTime===null){return;}
 			getById("overlayClockContainer").dataset.initial = parseInt(getTime);
 			ele.value = 1;
@@ -12877,10 +12906,15 @@ async function directTimer(ele,  event=false) { // A directing room only is cont
 	}
 	
 	if (ele.dataset.UUID){
-		session.sendRequest(msg, ele.dataset.UUID);
+		if (session.sendRequest(msg, ele.dataset.UUID)){
-	} else {
+			return true;
-		session.sendRequest(msg);
 		}
+	} else {
+		if (session.sendRequest(msg)){
+			return true;
+		}
+	}
+	return false;
 }
 
 function toggleClock(){
@@ -20450,7 +20484,7 @@ function reconnectDevices(event) { ///  TODO: Perhaps change this to only if the
 var vingesterFixed = false;
 function resetupAudioOut(ele=false, forceReset=false) { // this re-sets ALL output devices / sources 
 	log("resetupAudioOut");
-	if (iOS || iPad || SafariVersion || (ChromeVersion && session.mobile)) { // TODO : TEST TO SEE IF THIS WORKS WITH SAFARI? it might.
+	if (iOS || iPad || SafariVersion || (ChromiumVersion && session.mobile)) { // TODO : TEST TO SEE IF THIS WORKS WITH SAFARI? it might.
 		if (ele){return;}
 		for (var UUID in session.rpcs) {
 			if (session.rpcs[UUID].videoElement){
@@ -22176,7 +22210,7 @@ async function grabVideo(quality = 0, eleName = 'previewWebcam', selector = "sel
 		
 		if (session.ptz){
 			if (constraints.video && constraints.video!==true){
-				if (ChromeVersion && ChromeVersion>80){
+				if (ChromiumVersion && ChromiumVersion>80){
 					constraints.video.pan=true;
 					constraints.video.tilt=true;
 					constraints.video.zoom=true;
@@ -22254,7 +22288,7 @@ async function grabVideo(quality = 0, eleName = 'previewWebcam', selector = "sel
 			mirror = false;
 		}
 		
-		if (SamsungASeries && ChromeVersion){
+		if (SamsungASeries && ChromiumVersion){
 			if (!session.cleanOutput){
 				//getById("cameraTipContext1").innerHTML = getTranslation("samsung-a-series");
 				miniTranslate(getById("cameraTipContext1"),"samsung-a-series");
@@ -22275,7 +22309,7 @@ async function grabVideo(quality = 0, eleName = 'previewWebcam', selector = "sel
 		getUserMediaRequestID += 1;
 		var gumMediaID = getUserMediaRequestID;
 		var delayStart = 100;
-		if (ChromeVersion>110){ // aded july 16th; speed up camera switching.
+		if (ChromiumVersion>110){ // aded july 16th; speed up camera switching.
 			delayStart = 20;
 		} else if (Firefox){
 			delayStart = 500; // cause firefox is buggy as crap
@@ -22494,6 +22528,15 @@ async function grabVideo(quality = 0, eleName = 'previewWebcam', selector = "sel
 						}
 					}
 					
+					try {
+						if (session.pip3){
+							if (!eleName.pip){
+								eleName.pip=true;
+								toggleSystemPip(session.videoElement, true);
+							}
+						}
+					} catch(e){}
+					
 					 // this will reset scaling for all viewers of this stream. I also call it when aspect ratio, width, or height is changed via applyConstraints
 					
 					dragElement(session.videoElement);
@@ -22510,7 +22553,7 @@ async function grabVideo(quality = 0, eleName = 'previewWebcam', selector = "sel
 					
 				warnlog(e);
 				if (e.name === "OverconstrainedError") {
-					warnlog(e.message);
+					warnlog(e.message || e);
 					log("Resolution or frameRate didn't work");
 				} else if (e.name === "NotReadableError"){
 					if (quality <= 10) {
@@ -23613,6 +23656,7 @@ async function press2talk(clean = false) {
 		session.videoElement.dataset.sid = session.streamID;
 	}
 	
+
 	// videosource
 	session.videoElement.muted = true;
 	session.videoElement.autoplay = true;
@@ -23717,6 +23761,7 @@ async function press2talk(clean = false) {
 				}
 			}
 			
+			
 			if (session.videoMutedFlag){
 				session.videoMuted = true;
 				toggleVideoMute(true);
@@ -26061,6 +26106,7 @@ function requestChangeLowcut(value, UUID, track = 0) { // updateAudioConstraints
 }
 
 function toggleSystemPip(vid) {
+	try{
 	  if (vid.webkitSupportsPresentationMode && (typeof vid.webkitSetPresentationMode === "function")) {
 		vid.webkitSetPresentationMode(
 			vid.webkitPresentationMode === "picture-in-picture"
@@ -26075,6 +26121,9 @@ function toggleSystemPip(vid) {
 				vid.requestPictureInPicture();
 			}
 	  }
+	} catch(e){
+		errorlog(e);
+	}
 }
 
 function updateDirectorsAudio(dataN, UUID) {
@@ -29043,7 +29092,7 @@ async function updateCameraConstraints(constraint, value = null, ctrl=false, UUI
 	} else if ((constraint=="whiteBalanceMode") && (value=="continuous")){
 		var constraits = {[constraint]: value};
 		
-		if (session.mobile && ChromeVersion){ // trying to fix the issue that chrome mobile has.
+		if (session.mobile && ChromiumVersion){ // trying to fix the issue that chrome mobile has.
 			constraits.colorTemperature = 5000;
 		}
 		
@@ -29967,7 +30016,7 @@ async function requestBasicPermissions(constraint = {video: true, audio: true},
 						setTimeout(function() {
 							if (window.obsstudio){
 								warnUser("Permissions denied.\n\nTo access the camera or microphone from within OBS, please refer to:\n<a href='https://docs.vdo.ninja/guides/share-webcam-from-inside-obs'>docs.vdo.ninja/guides/share-webcam-from-inside-obs</a>.", false, false);
-							} else if (ChromeVersion && !session.mobile){
+							} else if (ChromiumVersion && !session.mobile){
 								warnUser("<h1>Camera/mic permissions denied</h1>\nPlease ensure you have allowed the mic/camera permissions in your browser, such as like:\n\n<img src='./media/permissions_chrome.jpg' />\n\nFor further help on how to resolve this issue, please refer to:\n\n<a target='_blank' href='https://docs.vdo.ninja/common-errors-and-known-issues/enable-camera-microphone-permissions'>https://docs.vdo.ninja/common-errors-and-known-issues/enable-camera-microphone-permissions</a>.", false, false);
 							} else {
 								warnUser("Permission access to the camera or microphone was denied.\n\nPlease ensure you have allowed the mic/camera permissions in your browser.\n\nFor guides on how to resolve this issue, please refer to:\n\n<a target='_blank' href='https://docs.vdo.ninja/common-errors-and-known-issues/enable-camera-microphone-permissions'>https://docs.vdo.ninja/common-errors-and-known-issues/enable-camera-microphone-permissions</a>.", false, false);
@@ -29980,9 +30029,9 @@ async function requestBasicPermissions(constraint = {video: true, audio: true},
 				} else {
 					//permission denied in browser 
 					if (!(session.cleanOutput)) {
-						setTimeout(function() {
+						setTimeout(function(err) {
 							warnUser(err);
-						}, 1);
+						}, 1,err);
 					}
 				}
 				warnlog("trying to list webcam again");
@@ -33390,7 +33439,7 @@ function addAudioPipeline(UUID, track){  // INBOUND AUDIO EFFECTS ; audio tracks
 		session.rpcs[UUID].inboundAudioPipeline[trackid].mediaStream = createMediaStream();
 		session.rpcs[UUID].inboundAudioPipeline[trackid].mediaStream.addTrack(track);
 		
-		if (ChromeVersion && session.audioEffects){ // I'm going to deprecate this.
+		if (ChromiumVersion && session.audioEffects){ // I'm going to deprecate this.
 			session.rpcs[UUID].inboundAudioPipeline[trackid].mutedAudio = createAudioElement(); // TODO: I don't know if this mutedAudio thing matters any more, in recent versions of Chrome, since it won't play even if muted.
 			session.rpcs[UUID].inboundAudioPipeline[trackid].mutedAudio.muted = true;
 			session.rpcs[UUID].inboundAudioPipeline[trackid].mutedAudio.playsinline = true; // ## Added Oct 9th 2022. Not sure it's does anything, but might help with iPhones?
@@ -35136,8 +35185,28 @@ function targetGuest(target, action, value=null){
 			element.value = parseInt(value) || 0;
 			return remoteVolume(element);
 		}
+	} else if (action == "startRoomTimer"){
+		var element = getGuestTarget("create-timer", target);
+		if (element) {
+			element.value = 0;
+			return directTimer(element, false, value);
+		}
+	} else if (action == "pauseRoomTimer"){
+		var element = getGuestTarget("create-timer", target);
+		if (element) {
+			if (element.value == 3){
+				return directTimer(element, {ctrlKey:true});
+			} else {
+				return directTimer(element, {ctrlKey:true});
+			}
+		}
+	} else if (action == "stopRoomTimer"){
+		var element = getGuestTarget("create-timer", target);
+		if (element) {
+			element.value = 1;
+			return directTimer(element);
+		}
 	}
-
 	return false;
 }
 async function startPublishing(){
@@ -35625,7 +35694,7 @@ function whipOut(){
 			setEncodings(sender, settings, function(sendr){
 				var settings = {};
 				
-				var chromeVersion = getChromeVersion();
+				var chromeVersion = getChromiumVersion();
 				if (chromeVersion>80){ // just because
 					settings.scaleResolutionDownBy = null;
 				} else {

main.js

@@ -142,7 +142,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 	}
 
 	if (!isIFrame && !window.obsstudio){
-		if (ChromeVersion===65){
+		if (ChromiumVersion===65){
 			 // pass, since probably manycam and that's bugged
 		} else if (getStorage("redirect") == "yes") {
 			setStorage("redirect", "", 0);
@@ -468,7 +468,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		session.audioEffects = false; // disable audio inbound effects also.
 		session.audioMeterGuest = false;
 	} else if (iOS || iPad) {
-		if (SafariVersion<16){
+		if (SafariVersion && SafariVersion<16){
 			getById("oldiOSWarning").classList.remove('hidden');
 		}
 		session.mobile = true;
@@ -522,7 +522,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 	} else {
 		log("MAKE DRAGGABLE");
 		delayedStartupFuncs.push([makeDraggableElement, document.getElementById("subControlButtons")]);
-		if (SafariVersion && !ChromeVersion){ // if desktop Safari, so macOS, give a note saying it sucks
+		if (SafariVersion && !ChromiumVersion){ // if desktop Safari, so macOS, give a note saying it sucks
 			getById("SafariWarning").classList.remove("hidden");
 		}
 	}
@@ -2296,6 +2296,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		//session.manual=true;
 		//innerHTML = 
 	}
+	if (urlParams.has('pip3') || urlParams.has('mypip') || urlParams.has('pipme')){
+		session.pip3 = true;
+	}
 	
 	if (urlParams.has('keyframeinterval') || urlParams.has('keyframerate') || urlParams.has('keyframe') || urlParams.has('fki')) {
 		log("keyframeRate ENABLED");
@@ -2396,7 +2399,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 				var ver1 = window.obsstudio.pluginVersion.split(".");
 
 				if (ver1.length == 3) { // Should be 3, but disabled3
-					if ((ver1.length == 3) && (parseInt(ver1[0]) == 2) && (ChromeVersion < 76) && (macOS)) {
+					if ((ver1.length == 3) && (parseInt(ver1[0]) == 2) && (ChromiumVersion < 76) && (macOS)) {
 						updateURL("streamlabs");
 						getById("main").innerHTML = "<div style='background-color:black;color:white;' data-translate='obs-macos-not-supported'><h1>Update OBS Studio to v26.1.2 or newer; older versions and StreamLabs OBS are not supported on macOS.\
 						<br /><i><small><small>download here: <a href='https://github.com/obsproject/obs-studio/releases'>https://github.com/obsproject/obs-studio/releases</a></small></small></i>\
@@ -3487,7 +3490,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 	}
 
 	if (urlParams.has('buffer') || urlParams.has('buffer2')) { // needs to be before sync
-		if ((ChromeVersion > 50) && (ChromeVersion< 78)){
+		if ((ChromiumVersion > 50) && (ChromiumVersion< 78)){
 		} else {
 			session.buffer = parseFloat(urlParams.get('buffer')) || parseFloat(urlParams.get('buffer2')) || 0;
 			log("buffer Changed: " + session.buffer);
@@ -3507,7 +3510,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 	}
 
 	if (urlParams.has('sync')) {
-		if ((ChromeVersion > 50) && (ChromeVersion< 78)){
+		if ((ChromiumVersion > 50) && (ChromiumVersion< 78)){
 			
 		} else {
 			session.sync = parseFloat(urlParams.get('sync'));
@@ -3585,7 +3588,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 	
 	
 	
-	//if (!(ChromeVersion>=57)){
+	//if (!(ChromiumVersion>=57)){
 	//	getById("effectSelector").disabled=true;
 	//	getById("effectSelector3").disabled=true;
 	//	getById("effectSelector").title = "Effects are only support on Chromium-based browsers";
@@ -4257,7 +4260,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		delayedStartupFuncs.push([previewWebcam]); 
 	}
 	
-	//if (!session.director && ((ChromeVersion == 86) || (ChromeVersion == 77) || (ChromeVersion == 62) || (ChromeVersion == 51)) && (((session.permaid===false) && session.view) || (session.scene!==false))){
+	//if (!session.director && ((ChromiumVersion == 86) || (ChromiumVersion == 77) || (ChromiumVersion == 62) || (ChromiumVersion == 51)) && (((session.permaid===false) && session.view) || (session.scene!==false))){
 	//	session.studioSoftware = true; // vmix
 	if (window.obsstudio){
 		session.studioSoftware = true;
@@ -6244,12 +6247,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 					event.preventDefault(); 
 					event.stopPropagation();
 					return;
-				} else if (event.keyCode == 83) { // S
+				} else if (event.keyCode == 83) { 
 					toggleScreenShare()();
 					event.preventDefault(); 
 					event.stopPropagation();
 					return;
-				} else if (event.keyCode == 68) { // S
+				} else if (event.keyCode == 68) { 
 					if (!drawOnScreenObject){
 						drawOnScreen();
 					} else {
@@ -6258,6 +6261,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 					event.preventDefault(); 
 					event.stopPropagation();
 					return;
+				} else if (event.keyCode == 80) { // S
+					if (session.videoElement){
+						togglePictureInPicture(session.videoElement);
+						event.preventDefault(); 
+						event.stopPropagation();
+						return;
+					}
 				}
 			}
 		}