Bug 231598

Summary:

REGRESSION (Safari 15): canvas.captureStream results in red video

Product:

WebKit

Reporter:

btham

Component:

Canvas

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

dino, eric.carlson, jer.noble, kkinnunen, rychouwei, smoley, tom, webkit-bug-importer, youennf

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

Mac (Intel)

OS:

macOS 11

Attachments:

Description	Flags
red video	none

Description btham 2021-10-12 11:17:23 PDT

Calling captureStream() on an HTML canvas will give me a MediaStream that I can attach as a source object to a video element. However, when I do this, the resulting video is red.

This only occurs on Safari 15 and Safari Technology Preview. It does not occur on Safari 14.

Here is a JSFiddle that reproduces the issue: https://jsfiddle.net/x8pz4u2y/1/. Click on the "Start" button to start capturing the canvas, which flashes between blue and green every second. Note that you may need to resize the window to get the video element to show in Safari 15 for some reason (which may be a separate bug but my main concern is that the resulting video is red).

Comment 1 btham 2021-10-12 11:24:43 PDT

By the way, the Safari Technology Preview version I am using to reproduce this issue is STP 132.

Comment 2 Radar WebKit Bug Importer 2021-10-13 17:22:11 PDT

<rdar://problem/84224839>

Comment 3 Smoley 2021-10-14 12:01:58 PDT

Thanks for filing, This does not reproduce for me on the latest macOS Monterey beta 10 (21A5552a) or on STP 133. Are you still seeing this issue on those builds?

Comment 4 btham 2021-10-15 11:26:48 PDT

Created attachment 441408 [details]
red video

Just upgraded to STP 133 but still having the same issue.

I'm on macOS 11.5.2 by the way.

Comment 5 Kimmo Kinnunen 2021-10-28 00:04:59 PDT

Thanks for the report, it is still a problem

*** This bug has been marked as a duplicate of bug 230621 ***

Comment 6 rychouwei 2022-03-28 23:33:52 PDT

This issue still not fixed.

1. generate a canvas and a 2d context.
2. fill random number to canvas by context.fillText();
3. canvas.captureStream() and use video tag to play canvas mediaStream

can be reproduced on Mac Safari 15.4

https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/trtc/webrtc/test/rychou-test/canvas-safari/index.html