Bug 241808

Summary:	Using canvas.context.drawImage() of a video in a requestAnimationFrame loop to copy a video yields low frame-rate
Product:	WebKit	Reporter:	dave
Component:	Canvas	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Major	CC:	ap, dino, jer.noble, jmadelaine91, simon.fraser, webkit-bug-importer, youennf
Priority:	P2	Keywords:	InRadar
Version:	Safari 15
Hardware:	Mac (Apple Silicon)
OS:	macOS 12

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.