Bug 231598 - REGRESSION (Safari 15): canvas.captureStream results in red video
Summary: REGRESSION (Safari 15): canvas.captureStream results in red video
Status: RESOLVED DUPLICATE of bug 230621
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: Safari 15
Hardware: Mac (Intel) macOS 11
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2021-10-12 11:17 PDT by btham
Modified: 2022-03-28 23:33 PDT (History)
9 users (show)

See Also:

red video (424.30 KB, image/png)
2021-10-15 11:26 PDT, btham
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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
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