Bug 243519 - AbortError when using video element play API
Summary: AbortError when using video element play API
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebRTC (show other bugs)
Version: Safari 15
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-08-03 16:32 PDT by Venkatesh Devale
Modified: 2022-08-22 01:33 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Venkatesh Devale 2022-08-03 16:32:33 PDT
We are receiving below AbortError when playing video element on turning video based on a user gesture (click). The below bug was filed but is still not fixed in iOS 15.6 as well as macOS 12.4 Safari 15.6. I have not tested the technology preview though.
https://bugs.webkit.org/show_bug.cgi?id=241152

To workaround the above bug we added below code when a video stream is attached to video element's srcObject and the video element needs to be played:
```
// In Safari, a hidden video element can show a black screen.
// See https://bugs.webkit.org/show_bug.cgi?id=241152 for more information.
if (requiresVideoPlayWorkaround() && videoElement.paused) {
  videoElement.play();
}
```


Now, the workaround has started giving us the AbortError:
Detailed Error:
[Error] Fatal error: this was going to be caught, but should not have been thrown. – AbortError: The operation was aborted.
AbortError: The operation was aborted.
    fatal (Prod:2:986193)
    fatal
    (anonymous function) (Prod:2:985999)
[Log] [DEMO] AbortError: The operation was aborted. (Prod, line 2)
[Error] Unhandled Promise Rejection: AbortError: The operation was aborted.
    (anonymous function)
    rejectPromise

From trial and error I came to know if I comment out the videoElement.play() or our workaround then we do not run into AbortError, but, then the earlier black video bug is reproducible again when remote attendees are in meeting over a WebRTC peerconnection.

System tested on:
iOS 15.6 Safari
macOS 12.4 Safari 15.5


The codepath runs on a user gesture which is a button click from user.

Per suggestion in the resolved bug, I tried wrapping the srcObject setting inside a IntersectionObserver, but still get the AbortError:
const callback: IntersectionObserverCallback = (entries: IntersectionObserverEntry[]) => { 
  if(entries[0].isIntersecting) {
    if (videoElement.srcObject !== videoStream) {
      videoElement.srcObject = videoStream;
      // In Safari, a hidden video element can show a black screen.
      // See https://bugs.webkit.org/show_bug.cgi?id=241152 for more information.
      if (new DefaultBrowserBehavior().requiresVideoPlayWorkaround() && videoElement.paused) {
        videoElement.play();
      }
    }
  }
};

if (!!window.IntersectionObserver) {
  const observer = new IntersectionObserver(callback);
  observer.observe(videoElement);
}

This bug is resolved fix now:
https://bugs.webkit.org/show_bug.cgi?id=241152

Could you please help us here? Or is the bug resolved and yet not released in Safari?
Comment 1 Venkatesh Devale 2022-08-03 16:49:15 PDT
Tested the Safari technology preview as well and we get the same AbortError on video element play API.
Comment 2 Venkatesh Devale 2022-08-03 16:52:28 PDT
I used intersection observer to check for the video element's visibility and then play it.
Comment 3 Radar WebKit Bug Importer 2022-08-10 16:34:31 PDT
<rdar://problem/98477600>
Comment 4 youenn fablet 2022-08-22 01:33:17 PDT
@Venkatesh, could you provide a repro case (like a jsfiddle) with your workaround so that we can look at this issue more easily?