&pipall added

2026-01-11 13:48:38 +00:00 · 2023-08-03 16:26:59 -04:00 · 2023-08-03 16:26:59 -04:00 · 9b8ec9adb3
commit 9b8ec9adb3
parent db09fe5880
9 changed files with 708 additions and 324 deletions
--- a/check.html
+++ b/check.html
@ -639,6 +639,12 @@
 						clearInterval(interval);
 						return;
 					}
+					
+					if (timer == 0){
+						iframe.contentWindow.postMessage({ bitrate: 2500 }, "*");
+						bitrate.target = 2500;
+						updateData("target", bitrate.target);
+					}
 					if (timer == 30){
 						iframe.contentWindow.postMessage({ bitrate: 4000 }, "*");
 						bitrate.target = 4000;
@ -665,7 +671,7 @@
 			}

 		
-			var testType= "webcam&quality=-1&css=speedtest.css";
+			var testType= "webcam&quality=0&css=speedtest.css";
 			if (urlParams.has("screen") || urlParams.has("ss") || urlParams.has("screenshare") || urlParams.has("screentest")) {
 				document.getElementById("screen").innerHTML = '<a href="./speedtest" style="color: #CCC;">Test webcam-streaming performance here</a>';
 				testType = "quality=0&screenshare&css=speedtest.css"
--- a/index.html
+++ b/index.html
@ -56,9 +56,16 @@
 		<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
 		<meta name="msapplication-TileColor" content="#da532c" />
 		<meta name="theme-color" content="#ffffff" />
-		<link rel="stylesheet" href="./main.css?ver=350" />
+		<link rel="stylesheet" href="./main.css?ver=354" />
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script>
 		<style id="lightbox-animations" type="text/css"></style>
+		
+		<!-- Until Chrome v115 ends ; pip2 -->
+		<meta http-equiv="origin-trial" content="AoalTVyEOoiQninAV09SzviYaAtRKuTfDIsMUNQLIg1/+ZWOpXEFOL+GQGqkQzkkszPrK26oGzB1hIF3beHJjAMAAABeeyJvcmlnaW4iOiJodHRwczovL3Zkby5uaW5qYTo0NDMiLCJmZWF0dXJlIjoiRG9jdW1lbnRQaWN0dXJlSW5QaWN0dXJlQVBJIiwiZXhwaXJ5IjoxNjk0MTMxMTk5fQ==">
+		
+		<!-- Until Chrome v117 ends ; blur -->
+		<meta http-equiv="origin-trial" content="Aqwjtr1IS9AdkcWCFAOHtMMmsKDy8Ti58hQBbHkR/HnloiMhkW17cYgnkiLgOH9zuTDC/o4GquQ0MHe9tqT51wcAAABdeyJvcmlnaW4iOiJodHRwczovL3Zkby5uaW5qYTo0NDMiLCJmZWF0dXJlIjoiTWVkaWFDYXB0dXJlQmFja2dyb3VuZEJsdXIiLCJleHBpcnkiOjE2OTg5Njk1OTl9">
+		
 		<!-- <link rel="manifest" href="manifest.json" /> -->
 			<!-- ios support 
 			<link rel="apple-touch-icon" href="images/icons/icon-72x72.png" />
@ -72,7 +79,7 @@
 			<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
 		-->
 	</head>
-	<body id="main" class="hidden" onload="main()">
+	<body id="main" class="main hidden" onload="main()">
 		<span itemprop="image" itemscope itemtype="image/png">
 			<link itemprop="url" href="./media/vdoNinja_logo_full.png" />
 		</span>
@ -81,9 +88,9 @@
 			<link itemprop="url" href="./media/vdoNinja_logo_full.png" />
 		</span>
 		
-		<script type="text/javascript" crossorigin="anonymous"  src="./thirdparty/CodecsHandler.js?ver=47"></script>
+		<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=675"></script>
+		<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=676"></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">
@ -202,6 +209,9 @@
                    </div>
                    <div id="fullscreenPage" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Full-screen the page" alt="Full-screen the page" aria-label="Full screen"  onclick="fullscreenPageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
                        <i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-expand-arrows-alt"></i>
+                    </div>
+					<div id="PictureInPicturePage" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Picture-in-Picture the video mix" alt="Picture-in-Picture the page" aria-label="Picture-in-Picture"  onclick="PictureInPicturePageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
+                        <i id="PictureInPicturePageToggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-external-link-square-alt"></i>
                    </div>
                    <div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cycle the Cameras"  onclick="cycleCameras()" class="hidden float"  tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Cycle Cameras" alt="Cycle the Cameras">
                        <i id="settingstoggle" class="toggleSize las la-sync-alt"></i> 
@ -493,8 +503,8 @@
 					<br style="line-height: 0;" />
 					<div id="headphonesDiv" class="audioMenu">
 						<div class="title">
-						<i class="las la-headphones"></i><span data-translate="select-output-source"> Audio Output Destination
-						</span><button id="testtonebutton" onclick="playtone()" class="white" type="button">Test</button></div>
+							<i class="las la-headphones"></i><span data-translate="select-output-source"> Audio Output Destination</span><button onclick="playtone()" class="testtonebutton" type="button">Test</button>
+						</div>
 						<select id="outputSource" alt="Audio output device" ></select>
 						<div id="headphoneTip1" class="cameraTip hidden">
 							<i class="las la-info-circle"></i>
@ -648,7 +658,9 @@
 					<div id="headphonesDiv2">
                        <div class="title">
                            <i class="las la-headphones"></i>
-                            <span data-translate="select-output-source"> Audio Output Destination: <button onclick="playtone(true)" class="white" style="padding:3px 5px 2px 5px; margin:0; margin-left:15px; position: relative; " type="button">Test</button></span>
+                            <span data-translate="select-output-source"> Audio Output Destination: 
+							</span>
+							<button onclick="playtone(true)" class="testtonebutton" style="padding:3px 5px 2px 5px; margin:0; margin-left:15px; position: relative;" type="button">Test</button>
 						</div>
                        <select id="outputSourceScreenshare" onclick="requestOutputAudioStream();">
 							<option value="default">
@ -1830,6 +1842,7 @@
 					<div class="title">
 						<i class="las la-headphones"></i>
 						<span data-translate="select-output-source"> Audio Output Destination: </span>
+						<button onclick="playtone()" class="testtonebutton" type="button">Test</button>
 					</div>
 					<select id="outputSource3" ></select>
 				</span>
@ -2034,6 +2047,12 @@
 						<span data-translate="picture-in-picture">Picture-in-picture</span>
 					</a>
 				</li>
+				<li class="context-menu__item hidden">
+					<a href="#" class="context-menu__link" data-action="PiP2">
+						<i class="las la-external-link"></i>
+						<span data-translate="picture-in-picture-all">Picture-in-picture all</span>
+					</a>
+				</li>
 				<li class="context-menu__item">
 					<a href="#" class="context-menu__link" data-action="FullWindow">
 						<i class="las la-external-link"></i>
@ -2628,11 +2647,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=870"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=879"></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=686"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=694"></script>
 	</body>
 </html>
--- a/lib.js
+++ b/lib.js
--- a/main.css
+++ b/main.css
@ -1198,7 +1198,7 @@ button.glyphicon-button.active.focus {
 	outline: none !important;
 }

-#main {
+.main {
 	-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
 	-webkit-tap-highlight-color: transparent !important;
 	outline: 0px !important;
@ -1658,14 +1658,17 @@ div[data-action-type='toggle-group'] {
 	display: none;
 	-webkit-app-region: no-drag;
 }
-#testtonebutton{
+.testtonebutton{
 	margin: 0 0 0 15px;
-	padding: 2px 10px 0px 10px;
+	padding: 0px 10px 0px 10px !important;
+	font-size: 84%;
+	border-radius: 5px!important;
+    box-shadow: 10px 8px 32px -10px #8883;
 }
-#testtonebutton:hover{
+.testtonebutton:hover{
 	background-color:#DDD
 }
-#testtonebutton:active{
+.testtonebutton:active{
 	background-color:#AAA
 }
 select{
@ -4838,6 +4841,8 @@ input:checked + .slider:before {
 	content: "\f105"; }
 .la-angle-left:before {
 	content: "\f104"; }
+.la-external-link-square-alt:before  {
+	content: "\f360"; }
 .la-plus-square:before {
 	content: "\f0fe"; }
 .la-microphone-slash:before {
@ -5462,6 +5467,7 @@ button.toggleSettings,
    border-radius: 3px;
    padding: 5px;
    max-width: 216px;
+	margin: 5px;
 }

 .roomnotes {
--- a/main.js
+++ b/main.js
@ -237,6 +237,11 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		session.ptz=true;
 	}
 	
+	if (urlParams.has('notios')){
+		iOS=false;
+		iPad=false;
+	}
+
 	if (urlParams.has('optimize')) {
 		session.optimize = parseInt(urlParams.get('optimize')) || 0;
 	}
@ -476,8 +481,19 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 				msg.requestSceneUpdate = true;
 				session.sendMessage(msg);
 			}
-			
-			if ( window.matchMedia("(orientation: portrait)").matches ) {
+			if (screen && screen.orientation && screen.orientation.type){
+				if (screen.orientation.type.includes("portrait")){
+					document.getElementsByTagName("html")[0].style.height = "100vh";
+					setTimeout(function(){
+						document.getElementsByTagName("html")[0].style.height = "100%";
+					}, 1000);
+				} else if (screen.orientation.type.includes("landscape")){
+					document.getElementsByTagName("html")[0].style.height = "100vh";
+					setTimeout(function(){
+						document.getElementsByTagName("html")[0].style.height = "100%";
+					}, 1000);
+				} 
+			} else if ( window.matchMedia("(orientation: portrait)").matches ) {
 				document.getElementsByTagName("html")[0].style.height = "100vh";
 				setTimeout(function(){
 					document.getElementsByTagName("html")[0].style.height = "100%";
@ -824,7 +840,11 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		}
 	}
 	
-	// fullScreenPage
+	if (urlParams.has('pip2') || urlParams.has('pipall')){ // just an alternative; might be compoundable
+		if (documentPictureInPicture){
+			getById("PictureInPicturePage").classList.remove("hidden");
+		}
+	}

 	if (urlParams.has('midi') || urlParams.has('hotkeys')) {
 		session.midiHotkeys = urlParams.get('midi') || urlParams.get ('hotkeys') || 1;
@ -1137,6 +1157,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		getById("head1a").classList.remove('hidden');
 		getById("main").classList.add('appmode');
 		getById("jumptoroomButton").innerText = "Join Room";
+
+		if (getStorage("jumptoURL")){
+			 getById('joinbyURL').value = getStorage("jumptoURL");
+		}
 	}

 	if (session.screenshare !== false) {
@ -2963,13 +2987,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 	if (urlParams.has('nofec')){ // disables error control / throttling -- currently on audio
 		session.noFEC = true;
 	}
-	if (urlParams.has('nonacks')){ // disables error control / throttling.
+	if (urlParams.has('nonacks') || urlParams.has('nonack')){ // disables error control / throttling.
 		session.noNacks = true;
 	}
 	if (urlParams.has('nopli')){ // disables error control / throttling.
 		session.noPLIs = true;
 	}
-	if (urlParams.has('noremb')){ // disables error control / throttling.
+	if (urlParams.has('noremb')){ // disables Receiver Estimated Maximum Bitrate (throttling)
 		session.noREMB = true;
 	}

@ -5877,7 +5901,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 					applySceneState();
 				}
 			}
-			warnUser("Network connection lost.");
+			if (location.hostname === "vdo.ninja"){
+				warnUser(getTranslation("no-network-details"));
+			} else {
+				warnUser(getTranslation("no-network"));
+			}
+			
 		} else {
 			log("VDO.Ninja has no network connectivity and can't work properly.");
 		}
@ -5947,7 +5976,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		if (!session.cleanOutput) {
 			// Remove last inserted modal; Could be improved by tagging the
 			// modal elements and only removing modals tagged 'offline'
-			userWarnings = document.querySelectorAll('.alertModal');
+			let userWarnings = document.querySelectorAll('.alertModal');
 			closeModal(userWarnings[userWarnings.length- 1]);
 		} else {
 		  log(
@ -6123,9 +6152,16 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		}
 		
 		if (event.key === "Escape") {
+			log("escape pressed; checking to see if modal box opened and will close");
 			if (document.fullscreenElement) {
 				document.exitFullscreen();
 				//updateMixer();
+			}  else {
+				
+				let userWarnings = document.querySelectorAll('.alertModal, .promptModal');
+				if (userWarnings.length){
+					closeModal(userWarnings[userWarnings.length- 1]);
+				}
 			}
 			return;
 		}
--- a/results.html
+++ b/results.html
@ -300,6 +300,9 @@
 						}
 						if (data.info.platform){
 							document.getElementById("details").innerHTML += "<br /><b>Platform (os):</b> "+data.info.platform+"<br />";
+							if (data.info.platform.toLowerCase() == "macintel"){
+								document.getElementById("details").innerHTML += "<i>(Intel or Apple Silicon)</i><br />";
+							}
 						}
 						if (data.info.gpGPU){
 							document.getElementById("details").innerHTML += "<br /><b>GPU:</b> "+data.info.gpGPU+"<br />";
--- a/thirdparty/CodecsHandler.js
+++ b/thirdparty/CodecsHandler.js
@ -296,33 +296,9 @@ var CodecsHandler = (function() {
            throw 'Invalid arguments.';
        }

-		sdp = sdp.replace('a=rtcp-fb:35 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:35 nack pli\r\n', 'a=rtcp-fb:35 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:96 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:96 nack pli\r\n', 'a=rtcp-fb:96 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:97 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:97 nack pli\r\n', 'a=rtcp-fb:97 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:98 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:98 nack pli\r\n', 'a=rtcp-fb:98 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:99 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:99 nack pli\r\n', 'a=rtcp-fb:99 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:100 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:100 nack pli\r\n', 'a=rtcp-fb:100 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:102 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:102 nack pli\r\n', 'a=rtcp-fb:102 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:108 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:108 nack pli\r\n', 'a=rtcp-fb:108 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:124 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:124 nack pli\r\n', 'a=rtcp-fb:124 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:123 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:123 nack pli\r\n', 'a=rtcp-fb:123 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:125 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:125 nack pli\r\n', 'a=rtcp-fb:125 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:126 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:126 nack pli\r\n', 'a=rtcp-fb:126 pli\r\n');
-		sdp = sdp.replace('a=rtcp-fb:127 nack\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:127 nack pli\r\n', 'a=rtcp-fb:127 pli\r\n');
-		
+		sdp = sdp.replace(/a=rtcp-fb:(\d+) nack\r\n/g, '');
+		sdp = sdp.replace(/a=rtcp-fb:(\d+) nack pli\r\n/g, 'a=rtcp-fb:$1 pli\r\n');
+		sdp = sdp.replace(/a=rtcp-fb:(\d+) pli nack\r\n/g, 'a=rtcp-fb:$1 pli\r\n');
        return sdp;
    }
 	
@ -330,19 +306,8 @@ var CodecsHandler = (function() {
        if (!sdp || typeof sdp !== 'string') {
            throw 'Invalid arguments.';
        }
-		sdp = sdp.replace('a=rtcp-fb:35 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:96 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:97 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:98 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:99 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:100 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:102 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:108 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:124 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:123 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:125 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:126 goog-remb\r\n', '');
-		sdp = sdp.replace('a=rtcp-fb:127 goog-remb\r\n', '');
+
+		sdp = sdp.replace(/a=rtcp-fb:(\d+) goog-remb\r\n/g, '');
 		
        return sdp;
    }
@ -352,32 +317,9 @@ var CodecsHandler = (function() {
            throw 'Invalid arguments.';
        }
 		
-		sdp = sdp.replace('a=rtcp-fb:35 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:35 nack pli\r\n', 'a=rtcp-fb:35 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:96 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:96 nack pli\r\n', 'a=rtcp-fb:96 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:97 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:97 nack pli\r\n', 'a=rtcp-fb:97 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:98 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:98 nack pli\r\n', 'a=rtcp-fb:98 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:99 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:99 nack pli\r\n', 'a=rtcp-fb:99 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:100 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:100 nack pli\r\n', 'a=rtcp-fb:100 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:102 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:102 nack pli\r\n', 'a=rtcp-fb:102 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:108 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:108 nack pli\r\n', 'a=rtcp-fb:108 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:124 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:124 nack pli\r\n', 'a=rtcp-fb:124 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:123 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:123 nack pli\r\n', 'a=rtcp-fb:123 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:125 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:125 nack pli\r\n', 'a=rtcp-fb:125 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:126 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:126 nack pli\r\n', 'a=rtcp-fb:126 nack\r\n');
-		sdp = sdp.replace('a=rtcp-fb:127 pli\r\n', '');
-        sdp = sdp.replace('a=rtcp-fb:127 nack pli\r\n', 'a=rtcp-fb:127 nack\r\n');
+		sdp = sdp.replace(/a=rtcp-fb:(\d+) pli\r\n/g, '');
+		sdp = sdp.replace(/a=rtcp-fb:(\d+) nack pli\r\n/g, 'a=rtcp-fb:$1 nack\r\n');
+		sdp = sdp.replace(/a=rtcp-fb:(\d+) pli nack\r\n/g, 'a=rtcp-fb:$1 nack\r\n');
 		
        return sdp;
    }
--- a/translations/blank.json
+++ b/translations/blank.json
@ -383,6 +383,7 @@
    "show-controls-video": "Show control bar",
    "hide-controls-video": "Hide control bar",
    "picture-in-picture": "Picture-in-picture",
+	"picture-in-picture": "Picture-in-picture all",
    "full-window": "Full-window",
    "shrink-window": "Shrink-window",
    "pause-stream": "Pause stream",
--- a/webrtc.js
+++ b/webrtc.js