Bug 252765 – Picture-in-Picture API requestPictureInPicture() method fails in webview and some other circumstances

• Status: NEW
• Component: Media

[Evan]

When launching a webpage via email link (e.g. via gmail app) on iOS 16.3 and trying to then call requestPictureInPicture() on video element on the page, the following error is logged:

NotSupportedError: The video element does not support the Picture-in-Picture mode.

Just before calling this method, the following are verified:

video.readyState == 4
video.disablePictureInPicture == false
document.pictureInPictureEnabled == true
document.pictureInPictureElement == null

Action is triggered by user action.

This behavior can be reproduced using the online MDN example:
1. Launch link via application on iOS (not directly in Safari - I used link in an email from the gmail app):
https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API#examples
2. Go to the 'Examples' section on this page and click the 'Toggle Picture-in-Picture' button.
3. Observe the NotSupportedError in the console log.

[Sam Sneddon [:gsnedders]]

What browser do you have selected in Gmail for links to open in? Safari?

[Evan]

(In reply to Sam Sneddon [:gsnedders] from comment #1)
> What browser do you have selected in Gmail for links to open in? Safari?

Safari.

[Evan]

It appears that requestPictureInPicture() is also unsupported if the video element source is camera (via getUserMedia()).

This is true regardless of whether or not the request is made in a webview or in pure Safari.

This can be reproduced with this example URL:
https://ejdesmarais.github.io/pictureInPictureTester/

1. Go to the above link in Safari (not in a webview)
2. Allow camera permission when asked
3. Click the "PiP (Web API)" button. This calls requestPictureInPicture on the video element.
4. Observe the NotSupportedError in the console log, or on the screen.
5. Click the 'Use mp4 instead' button. This will reload the page and use a mp4 as the video source instead of the GUM source.
6. Click the "PiP (Web API)" button. Picture-in-picture will activate as expected.

[Radar WebKit Bug Importer]

<rdar://problem/106101712>