Handle enterpictureinpicture media session action

GoogleChrome · Oct 16, 2023 · 1de1b35 · 1de1b35
1 parent 2bb27d9
commit 1de1b35
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/media-session/video-conferencing.html b/media-session/video-conferencing.html
@@ -19,6 +19,7 @@ <h3>Background</h3>
 <video playsinline autoplay muted></video>
 <button id="openCameraButton">Open Camera</button>
 <button id="togglePipButton">Toggle Picture-in-Picture</button>
+<input id="autoPipCheckbox" type="checkbox">Automatically enter Picture-in-Picture</button>
 
 {% include output_helper.html %}
 

diff --git a/media-session/video-conferencing.js b/media-session/video-conferencing.js
@@ -27,6 +27,23 @@ togglePipButton.addEventListener("click", async () => {
   }
 });
 
+autoPipCheckbox.addEventListener("input",g () => {
+  try {
+    if (!autoPipCheckbox.checked) {
+      // Disable automatically enter Picture-in-Picture.
+      navigator.mediaSession.setActionHandler("enterpictureinpicture", null);
+      return;
+    }
+    // Request browser to automatically enter Picture-in-Picture when eligible.
+    navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
+      log('> Video is eligible for Automatic Picture-in-Picture.');
+      await video.requestPictureInPicture();
+    });
+  } catch (error) {
+    log('Warning! The "enterpictureinpicture" media session action is not supported.');
+  }
+});
+
 try {
   navigator.mediaSession.setActionHandler('togglemicrophone', () => {
     log('> User clicked "Toggle Mic" icon.');

diff --git a/media-session/video.js b/media-session/video.js
@@ -128,6 +128,18 @@ try {
   log('Warning! The "seekto" media session action is not supported.');
 }
 
+
+/* Enter Picture-in-Picture (supported since Chrome 120) */
+
+try {
+  navigator.mediaSession.setActionHandler('enterpictureinpicture', async function(event) {
+    log('> User clicked "Enter Picture-in-Picture" icon.');
+    await video.requestPictureInPicture();
+  });
+} catch(error) {
+  log('Warning! The "enterpictureinpicture" media session action is not supported.');
+}
+
 /* Utils */
 
 function getAwesomePlaylist() {