Picture-in-Picture (PiP) requires repeated user interaction on tab switch – needs smoother experience like Google Meet

[SantuK21]

Currently, when using PiP in our web app (e.g., for video calling), the browser prompts for user interaction every time a tab switch triggers the PiP mode via document.visibilitychange.
This disrupts the experience, especially compared to platforms like Google Meet where PiP continues seamlessly when switching tabs. #

[steimelchrome]

Using document.visiblitychange isn't what Google Meet is doing. They're using the enterpictureinpicture Media Session action. See here for more details:

https://developer.chrome.com/blog/automatic-picture-in-picture
https://developer.chrome.com/blog/automatic-picture-in-picture-media-playback

[SantuK21]

i am not using a video tag to do pip instead i am using a iframe so i need to use await documentPictureInPicture.requestWindow(); i cant directly use media session action for iframe right??

[steimelchrome]

Media Session is usable from an iframe, though I'm surprised documentPictureInPicture is working for you from an iframe. I thought Chrome prevented iframes from opening a document pip window? Or maybe I'm misunderstanding what you mean

[SantuK21]

"I'm working with a project called Simple Meeting Server, which is used for video calls and multiparty video calls built using WebRTC. It's being embedded in a website using an <iframe>. I'm trying to open that iframe in Picture-in-Picture (PiP) mode using documentPictureInPicture.requestWindow(). By using a visibility change event listener and manipulating the DOM, I'm able to move it to PiP, and it's working. However, the main issue is that it requires user interaction to trigger PiP. I can share the code snippet if you can help me with this.

[steimelchrome]

Oh I see so you're putting the iframe into a pip window. If the code that registers the document.visiblitychange event listener instead does:

navigator.mediaSession.setActionHandler("enterpictureinpicture", () => {
    documentPictureInPicture.requestWindow();
    // other document pip setup-code (e.g. moving the iframe into the pip window) goes here.
});

Then I believe it should work

[SantuK21]

navigator.mediaSession.setActionHandler("enterpictureinpicture", () => { }) ,
this method wont trigger as the video is in iframe so there is no solution to open pip until the user interacts right?

[steimelchrome]

Are you saying you tried it and it didn't work or that you don't think it'd work? Depending on how your video works, it's quite possible that setting navigator.mediaSession.setActionHandler() on the main frame will work. Chrome has to select which navigator.mediaSession to use (since it only uses one per tab and each tab can have multiple frames with their own). So if the main frame sets that and the iframe doesn't have a non-mediastream video playing, then Chrome will use the main frame's navigator.mediaSession. However, if the iframe has non-mediasteam video playing and the main frame doesn't, then it'll use the iframe's navigator.mediaSession.

Even if your iframe is the used navigator.mediaSession, what you can do is set navigator.mediaSession.setActionHandler("enterpictureinpicture", ()=>{...}); in your iframe, and have that notify the main frame via some sort of postMessage to say that it should start picture-in-picture

[SantuK21]

i tried it didn't work its entering navigator.mediaSession.setActionHandler("enterpictureinpicture", ()=>{...}) in this handler let me give you what i did.

if i print if(mediaSession in navigator) it gives true but doesn't enter the below handler

navigator.mediaSession.setActionHandler("enterpictureinpicture", ()=>{ documentPictureInPicture.requestWindow({
width: 400,
height: 300
}).then(pipWindow => {
console.log("PiP window opened");
$scope.pipWindow = pipWindow;
$scope.pipEnabled = true;
$scope.$applyAsync();

    // Prepare PiP window styling
    const style = pipWindow.document.createElement("style");
    style.textContent = `
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: black;
      }
      iframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
      }
    `;
    pipWindow.document.head.appendChild(style);

    // Move iframe to PiP window
    pipWindow.document.body.appendChild(iframe);

    // Handle PiP window closure
    pipWindow.addEventListener("pagehide", () => {

      // Check if iframe still exists in PiP window
      if(pipWindow.document.body.contains(iframe)) {
        // Move back to original parent
        if($scope.originalIframeParent) {
          if($scope.originalIframeNextSibling) {
            $scope.originalIframeParent.insertBefore(iframe, $scope.originalIframeNextSibling);
          } else {
            $scope.originalIframeParent.appendChild(iframe);
          }
        }
      }

      // Clean up state
      $scope.pipEnabled = false;
      $scope.pipWindow = null;
      $scope.$applyAsync();
    });

  }).catch(err => {
    console.error("Failed to enter PiP:", err);
    $scope.pipEnabled = false;
    $scope.$applyAsync();
  });

})

[steimelchrome]

What are you doing to try to trigger the handler? Are you switching tabs within the same window while your website is using camera/microphone?

Also, have you tried that code in both the main frame and the iframe?