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.
The video has the expected duration, but just displays all black.
Video to show canvas content that was recorded.
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().
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:
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 (156184.108.40.206.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
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 ***