Bug 262479

Summary: Picture-in-picture is broken if srcObject is video stream (Safari 17 on macOS 14)
Product: WebKit Reporter: Stefan Benicke <stefan.benicke>
Component: MediaAssignee: youenn fablet <youennf>
Status: RESOLVED FIXED    
Severity: Normal CC: ap, drmoerkerke, jer.noble, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 17   
Hardware: Unspecified   
OS: macOS 14   
See Also: https://bugs.webkit.org/show_bug.cgi?id=280627
Attachments:
Description Flags
Screenshot broken pip on Safari 17 macOS 14
none
HTML/Javascript demo file
none
Screenshot of pip working in Safari 17 on macOS Ventura none

Stefan Benicke
Reported 2023-10-02 05:36:55 PDT
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
Attachments
Screenshot broken pip on Safari 17 macOS 14 (1.73 MB, image/png)
2023-10-02 05:36 PDT, Stefan Benicke 		no flags
Details
HTML/Javascript demo file (5.50 KB, text/html)
2023-10-02 05:39 PDT, Stefan Benicke 		no flags
Details
Screenshot of pip working in Safari 17 on macOS Ventura (5.02 MB, image/png)
2023-10-04 02:00 PDT, Stefan Benicke 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Stefan Benicke
Comment 1 2023-10-02 05:39:35 PDT
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
Comment 2 2023-10-03 10:00:55 PDT
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
Comment 3 2023-10-04 02:00:58 PDT
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
Comment 4 2023-10-04 08:23:40 PDT
<rdar://problem/116465668>
youenn fablet
Comment 5 2023-10-16 07:53:27 PDT
Pull request: https://github.com/WebKit/WebKit/pull/19113
EWS
Comment 6 2023-10-17 01:22:12 PDT
Committed 269403@main (36e3488b2736): <https://commits.webkit.org/269403@main> Reviewed commits have been landed. Closing PR #19113 and removing active labels.
Danny Moerkerke
Comment 7 2023-11-17 03:29:28 PST
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
Comment 8 2023-11-17 03:33:55 PST
Have you tried iOS 17.2 beta?
Danny Moerkerke
Comment 9 2024-01-31 00:20:55 PST
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
Comment 10 2024-02-05 00:21:17 PST
(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
Comment 11 2024-02-05 01:29:21 PST
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
Comment 12 2024-02-05 08:56:12 PST
(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
Comment 13 2024-02-05 08:58:44 PST
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
Comment 14 2024-09-17 02:14:17 PDT
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
Comment 15 2024-09-29 11:17:41 PDT
(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
Comment 16 2024-09-29 13:03:04 PDT
(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
Comment 17 2024-09-30 09:30:01 PDT
> 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
Comment 18 2024-09-30 10:55:13 PDT
(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
Comment 19 2024-09-30 11:28:33 PDT
I filed https://bugs.webkit.org/show_bug.cgi?id=280627, thanks for the report.
Note You need to log in before you can comment on or make changes to this bug.