Handle enterpictureinpicture media session action

Author: beaufortfrancois

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 %}
 

media-session/video-conferencing.js

@@ -27,6 +27,23 @@ togglePipButton.addEventListener("click", async () => {
   }
 });
 
+autoPipCheckbox.addEventListener('input', () => {
+  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.');

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() {
+    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() {