[Webkit-unassigned] [Bug 241152] New: A black screen appears in a muted video element outside the viewport

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=241152

            Bug ID: 241152
           Summary: A black screen appears in a muted video element
                    outside the viewport
           Product: WebKit
           Version: Safari 15
          Hardware: Other
                OS: Other
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Media
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: simmkyu at amazon.com

Created attachment 459903

  --> https://bugs.webkit.org/attachment.cgi?id=459903&action=review

a black video element

Problem:
In macOS and iOS Safari, a video element shows a black screen if they are not visible on the page.

A video element should have the following properties set to cause the issue.
- muted = true
- srcObject = null

Suppose you set the "srcObject" to a new video stream when the video element is outside the browser's viewport.
The video element shows a black screen.


Steps to reproduce:
1. Use macOS or iOS Safari.
2. Open https://codepen.io/simmkyu/pen/abqqoNd in Safari. This demo is based on the official WebRTC PeerConnection sample that requires Wi-Fi connection. See Appendix A for more information.
3. Choose "Start" to enable the left video.
4. Choose "Call" to enable the right video using WebRTC peer connection.
5. Zoom into the "Call" and "Hang Up" sections. Ensure that the right video is not visible.
6. Choose "Hang Up" to turn off the right video.
7. Wait for 5 seconds. Do not scroll or touch the web page.
8. Choose "Call" again. Scroll down to confirm that the right video element shows a black screen.


Actual results:
- The right video element shows a black screen.


Expected results:
- The right video element should show the left video's content. Refresh the browser tab and run the "Steps to reproduce" section again while the portion of the right video element is visible. The right video element will show the left video's stream.


Workaround:
- When the video element shows a black screen, call the "HTMLMediaElement.play" API.


Tested environments:
- MacBook Pro 2019 (macOS 11.6.5, Safari 15.5)
- iPhone 13 Pro (iOS 15.5)
- iPhone X (iOS 15.4)
- iPad Pro (iOS 15.4.1)
- iPad Pro (iOS 14.7.1)


Additional information:
- The bug does not occur if the portion of a video element is visible.
- The bug does not occur in iOS Chrome.
- The bug does not occur if a video element succeeds in rendering the content more than once. (i.e., if you fail to reproduce the issue, refresh the browser tab and run the "Steps to reproduce" section again.)
- The black screen video element does not recover even after setting srcObject to another video stream or rotating iOS devices. You have to refresh the browser tab or call the "HTMLMediaElement.play" API.
- "HTMLMediaElement.paused" is "true". Safari automatically updates "paused" to "true" when a video element is hidden.


Appendix A: About the CodePen demo
- The demo is based on the WebRTC PeerConnection sample: https://webrtc.github.io/samples/src/content/peerconnection/pc1/
- The demo makes two changes to the WebRTC sample: 1) muted = true and 2) srcObject = null.
- The demo does not work on cellular network. Use Wi-Fi to reproduce the issue.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220531/3983b652/attachment-0001.htm>