Bug 262479 – Picture-in-picture is broken if srcObject is video stream (Safari 17 on macOS 14)

• Component: Media
• Status: RESOLVED FIXED

[Stefan Benicke]

Created attachment 468021 [details]
Screenshot broken pip on Safari 17 macOS 14

Picture-in-picture on video elements is broken if srcObject is set to a video stream.

What happens is that the video element shows the picture-in-picture display, but no pip-window. Furthermore the Javascript API document.pictureInPictureElement is null and document.exitPictureInPicture() doesn't work and the video element keeps showing the black picture-in-picture state display.

As a quick workaround, I've found out that it works if:

```js
video.controls = true;
video.srcObject = stream;
video.controls = false;
```

Best regards,
Stefan

[Stefan Benicke]

Created attachment 468022 [details]
HTML/Javascript demo file

Use "Start Peer Connection" and then "Start Pip" on one of the videos with the camera stream to see the error.

Reload the page.

Use "Start Peer Connection with video controls" and then "Start Pip" on one of the videos with the camera stream to see it working.

[Alexey Proskuryakov]

Thank you for the report. Could you please clarify if this worked in earlier Safari versions for you? We can also test ourselves, but it's better to have your confirmation too.

[Stefan Benicke]

Created attachment 468059 [details]
Screenshot of pip working in Safari 17 on macOS Ventura

Here's a screenshot to proof that this issue is related to the operating system. In Safari 17 on macOS 13.5.2 (Ventura) the Picture-in-picture is working correctly.

[Radar WebKit Bug Importer]

<rdar://problem/116465668>

[youenn fablet]

Pull request: https://github.com/WebKit/WebKit/pull/19113

[EWS]

Committed 269403@main (36e3488b2736): <https://commits.webkit.org/269403@main>

Reviewed commits have been landed. Closing PR #19113 and removing active labels.

[Danny Moerkerke]

This still only works with the workaround from Stefan Benicke in Safari 17.1 and doesn't work at all in Safari on iOS 17.1.1 with a stream as srcObject.

[youenn fablet]

Have you tried iOS 17.2 beta?

[Danny Moerkerke]

This still doesn't work on iOS 17.3 when the srcObject is a video stream like the webcam. 

It throws this error: NotSupportedError: The video element does not support the Picture-in-Picture mode.

On macOS Sonoma 14.3 starting Picture in Picture works but stopping Picture in Picture  renders a video element with a black picture.

[youenn fablet]

(In reply to Danny Moerkerke from comment #9)
> This still doesn't work on iOS 17.3 when the srcObject is a video stream
> like the webcam. 
> 
> It throws this error: NotSupportedError: The video element does not support
> the Picture-in-Picture mode.

This is an expected limitation on iOS right now
I filed https://bugs.webkit.org/show_bug.cgi?id=268732.

> On macOS Sonoma 14.3 starting Picture in Picture works but stopping Picture
> in Picture  renders a video element with a black picture.

I am not exactly sure why it does not work in 14.3.
I tried on Sonoma 14.4 and it works fine for me.
Ditto with Safari Tech Preview.
Can you try either STP or Sonoma latest beta?

[Danny Moerkerke]

To reproduce:

- Visit https://whatpwacando.today/media

- click the + in the bottom left corner of the demo
- start web cam
- click PiP button, PiP starts
- exit PiP mode, video is displayed but only part of the top left, seems like a aspect ratio bug

[youenn fablet]

(In reply to Danny Moerkerke from comment #11)
> To reproduce:
> 
> - Visit https://whatpwacando.today/media
> 
> - click the + in the bottom left corner of the demo
> - start web cam
> - click PiP button, PiP starts
> - exit PiP mode, video is displayed but only part of the top left, seems
> like a aspect ratio bug

I can reproduce the rendering bug when exiting Pip mode.
The bug gets fixed quickly but the transition is not smooth and should probably be fixed.

[youenn fablet]

The rendering bug is similar to rendering bugs triggered by UI side compositing.
I filed https://bugs.webkit.org/show_bug.cgi?id=268750 to keep track of this.

[Danny Moerkerke]

It now works as expected in Safari 18 on macOS Sequoia 15.0.
It still doesn't work on iOS 18 when the srcObject is a video stream like the webcam. 

It throws this error: NotSupportedError: The video element does not support the Picture-in-Picture mode.

[youenn fablet]

(In reply to Danny Moerkerke from comment #14)
> It now works as expected in Safari 18 on macOS Sequoia 15.0.
> It still doesn't work on iOS 18 when the srcObject is a video stream like
> the webcam. 
> 
> It throws this error: NotSupportedError: The video element does not support
> the Picture-in-Picture mode.

https://bugs.webkit.org/attachment.cgi?id=468022 does work for me on iOS 18.
Do you have a test site where the issue reproes?

[Danny Moerkerke]

(In reply to youenn fablet from comment #15)
> (In reply to Danny Moerkerke from comment #14)
> > It now works as expected in Safari 18 on macOS Sequoia 15.0.
> > It still doesn't work on iOS 18 when the srcObject is a video stream like
> > the webcam. 
> > 
> > It throws this error: NotSupportedError: The video element does not support
> > the Picture-in-Picture mode.
> 
> https://bugs.webkit.org/attachment.cgi?id=468022 does work for me on iOS 18.
> Do you have a test site where the issue reproes?

It works but *not* when the app is added to the Home Screen.

[youenn fablet]

> It works but *not* when the app is added to the Home Screen.

OK, let's file a new bug for this one.

[Danny Moerkerke]

(In reply to youenn fablet from comment #17)
> > It works but *not* when the app is added to the Home Screen.
> 
> OK, let's file a new bug for this one.

I need to file another one? 
Hope it doesn’t go to the bottom of the stack…

[youenn fablet]

I filed https://bugs.webkit.org/show_bug.cgi?id=280627, thanks for the report.