How to Trigger Picture-in-Picture on Tab Switch Without User Activation Error

Video SDK Web
1

Description
I’m trying to automatically trigger Picture-in-Picture (PiP) when the user switches to another tab or minimizes/hides the browser window.

Currently, I’m using the visibilitychange event to detect tab switches and then trigger PiP:

    document.addEventListener('visibilitychange', async () => {
      if (document.hidden && !document.pictureInPictureElement) {
        this.onActivatePip();
      }
    });

However, this approach often throws the following error if the user hasn’t interacted with the document beforehand:

NotAllowedError: Failed to execute 'requestWindow' on 'DocumentPictureInPicture': 
Document PiP requires user activation.

I also tried listening to the enterpictureinpicture event as suggested in this source, using navigator.mediaSession.setActionHandler:

    navigator.mediaSession.setActionHandler('enterpictureinpicture', () => {
      this.onActivatePip();
    });

However, this event handler doesn’t get triggered when integrating with Zoom Video SDK.

How can I reliably trigger Picture-in-Picture when the user switches tabs or hides the window, without running into the Document PiP requires user activation error?

What’s the best practice for handling PiP in this context?

Which Web Video SDK version?
2.1.0

Device (please complete the following information):

  • Device: Mac
  • OS: 15.1
  • Browser: Chrome
  • Browser Version: 134.0.6998.166
2

Hey @lmtruong1512

Thanks for your feedback.

It appears to be a browser limitation, and unfortunately, we currently don’t have a workaround for it.

Thanks
Vic

2 Likes