Bug 241808 - Using canvas.context.drawImage() of a video in a requestAnimationFrame loop to copy a video yields low frame-rate
Summary: Using canvas.context.drawImage() of a video in a requestAnimationFrame loop t...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: Safari 15
Hardware: Mac (Apple Silicon) macOS 12
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-06-21 09:13 PDT by dave
Modified: 2022-08-12 21:18 PDT (History)
7 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description dave 2022-06-21 09:13:38 PDT
When using the canvas context.drawImage() method, in a requestAnimationFrame loop, to copy a video playing at 60fps the canvas does not get updated at 60fps. The resulting canvas appears to update at a much lower framerate compared to the video.

Expected results: The canvas should update at the same rate as the playing video.
Comment 1 Sam Sneddon [:gsnedders] 2022-06-21 14:25:02 PDT
Presumably GPU Process IPC?
Comment 2 Simon Fraser (smfr) 2022-06-21 14:33:43 PDT
Do you have a test case you can point us to?
Comment 3 dave 2022-06-22 01:33:20 PDT
Here is a basic test case: https://graceful-speculoos-27352e.netlify.app

Safari: Canvas output on right is laggy.

Chrome: No Lag.

Firefox: No lag.

Thanks for looking into this.
Comment 4 Radar WebKit Bug Importer 2022-06-28 09:14:15 PDT
<rdar://problem/96066407>
Comment 5 Jonathan Madelaine 2022-08-12 21:18:23 PDT
We have also been experiencing this bug.

Our product is a video review platform, and we've had numerous customers experiencing low frame rate when using Safari. It's hard to review a video when you're seeing a fraction of the true frame rate, so this is a significant issue for us.