Bug 231598

Summary: REGRESSION (Safari 15): canvas.captureStream results in red video
Product: WebKit Reporter: btham
Component: CanvasAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: dino, eric.carlson, jer.noble, kkinnunen, rychouwei, smoley, tom, webkit-bug-importer, youennf
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Mac (Intel)   
OS: macOS 11   
Attachments:
Description Flags
red video none

btham
Reported 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).
Attachments
red video (424.30 KB, image/png)
2021-10-15 11:26 PDT, btham 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
btham
Comment 1 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.
Radar WebKit Bug Importer
Comment 2 2021-10-13 17:22:11 PDT
<rdar://problem/84224839>
Smoley
Comment 3 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?
btham
Comment 4 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.
Kimmo Kinnunen
Comment 5 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 ***
rychouwei
Comment 6 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
Note You need to log in before you can comment on or make changes to this bug.