Using MediaRecorder to record a MediaStream from the canvas captureStream() method appears to only produce a blank video in Safari 15 / TP 130 on macOS 12 beta (21A5304g). Demo URL: https://downloads.scirra.com/labs/screenrecording/ Steps to reproduce: 1. Click 'Record canvas' 2. Wait a few seconds 3. Click 'Stop recording' A video file will then be downloaded. Observed result: The video has the expected duration, but just displays all black. Expected result: Video to show canvas content that was recorded. Other notes: This appears to work correctly on iOS 14, so may be unique to macOS. Also note we have reports that a flickery video is recorded on Safari 14 on macOS, but we can't easily test that right now. Finally the 'Record screen' option - using getDisplayMedia() - appears to work correctly, so this looks like an issue specific to using MediaRecorder with canvas captureStream().
<rdar://problem/82724497>
We ran into the same problem (except with a bit more erratic behavior) when using a canvas for realtime video modification. It looks like it's not MediaRecorder specific but rather captureStream producing a bad stream. Here's a codepen that demonstrates the issue: https://codepen.io/alx-khovansky/pen/KKqgeNw It has a video source that is rendered to a canvas, which is then rendered to a different video element using captureStream. Works in Safari 14 but not in TP.
I'm also seeing this. It's captureStream generating blank video. One example is https://experiments.withgoogle.com/webcam-displacement This works on Safari 14.1.2 but not on TP 131 (both Big Sur).
> It looks like it's not MediaRecorder specific but rather captureStream > producing a bad stream. Right, this is also my understanding.
Broken on Safari 15 now :(
How do we get the devs to at least confirm this? This happens to the latest TP 133.
Issue still reproducible on Safari version 15.1 (15612.2.9.1.30, 15612). Another way to reproduce: * Open https://webrtc.github.io/samples/src/content/capture/canvas-video/ * Using mouse, move teapot on the left side around, by holding down left-click and dragging your mouse around * Notice that teapot on the right doesn't mirror the left teapot's movement I wonder if issue is due to auto-play constraint violation. Console logs follows. MediaElementSession::clientWillBeginAutoplaying(74E6F415461C6466) state = Autoplaying HTMLMediaElement::setShouldDelayLoadEvent(74E6F415461C6466) true MediaElementSession::removeBehaviorRestriction(74E6F415461C6466) removed RequirePageConsentToLoadMedia MediaElementSession::autoplayPermitted(74E6F415461C6466) Returning FALSE because element is not visible in the viewport MediaElementSession::beginInterruption(74E6F415461C6466) state = Autoplaying, interruption type = InvisibleAutoplay, interruption count = 0
Adding on here that this is affecting capture for Flipgrid in Safari 15. We can fall back to a standard video element -> MediaRecorder capture, but that removes our ability to provide all of the canvas enabled effects. For a quick fix for this bug, we are just disabling capture on Safari 15. @youenn - anything else I can help provide to diagnose?
*** This bug has been marked as a duplicate of bug 230613 ***
Finally, sewing is an important life skill to have. It’s a skill that can come in handy in a variety of situations and can be useful for both professional and personal reasons. Knowing how to sew can also give you a sense of accomplishment, as it’s a skill that you can use for the rest of your life. https://teamsewing.com/best-serger-sewing-machine/
The same thing happened with the latest TP 133. How do I get the developers to confirm this? https://flappy-bird.co
Issue still reproducible on Safari version 15.1 (15612.2.9.1.30, 15612). Another way to reproduce: * Open https://webrtc.github.io/samples/src/content/capture/canvas-video/https://run3online.pro * Using mouse, move teapot on the left side around, by holding down left-click and dragging your mouse around * Notice that teapot on the right doesn't mirror the left teapot's movement I wonder if issue is due to auto-play constraint violation. Console logs follows. MediaElementSession::clientWillBeginAutoplaying(74E6F415461C6466) state = Autoplaying HTMLMediaElement::setShouldDelayLoadEvent(74E6F415461C6466) true MediaElementSession::autoplayPermitted(74E6F415461C6466) Returning FALSE because element is not visible in the viewport MediaElementSession::removeBehaviorRestriction(74E6F415461C6466) removed RequirePageConsentToLoadMedia, interruption count = 0
Demo URL: /downloads.scirralabs/screenrecording/https://run3online.pro Steps to reproduce: 1. Click 'Record canvas' 2. Wait a few seconds 3. Click 'Stop recording' A video file will then be downloaded.