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).
By the way, the Safari Technology Preview version I am using to reproduce this issue is STP 132.
<rdar://problem/84224839>
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?
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.
Thanks for the report, it is still a problem *** This bug has been marked as a duplicate of bug 230621 ***
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