| Summary: | MediaRecorder with canvas captureStream() produces blank video | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Ashley Gullen <ashley> |
| Component: | WebRTC | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | amatsak, bekeanloinse, Civillainscorpion, dahalls, eric.carlson, evawillms183, gesturesatellitedgg, hillaryrodham824, jerry, jimmiemeyers180, jonlee, kkinnunen, Kongpheng.Nanthavongsa, pauldconlin, qtvtauizepyhhe, reg2405, Urgot68, webkit-bug-importer, wellsedith352, youennf |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
|
Description
Ashley Gullen
2021-08-27 08:34:44 PDT
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. I'm afraid I can't answer these questions, and that only the implementers could... You may want to open an issue on Chromium's bug tracker. On my mac OS computer, I get 15.087 with your new codepen (no significant change with or without audio track...). https://dinosaur-game.io How do we get the devs to at least confirm this? This happens to the latest TP 133. I wonder if issue is due to auto-play https://cannacraftcorner.com constraint violation. Console logs https://pureplantpleasures.com follows. Great rhythm and challenging gameplay! Even though it's simple, https://friday-nightfunkin.io Friday Night Funkin' is really addictive and makes me want to play more. I think whether problem is related to auto-play restriction violation. Console logs follows. https://dordle.io How can we get the developers to confirm this? https://papalouie.io This happens with the latest TP 133. This issue was marked a duplicate of 230613 which was apparently fixed in 2022. I'm not an Apple developer, but if there are still issues you should file a new issue, I doubt anyone from Apple is going to track comments on an old and apparently already fixed issue. As a workaround, consider using the getDisplayMedia() method to record the entire screen, if that is a feasible alternative for your use case. Another approach could be to periodically capture canvas snapshots and compile them into a video manually, though this is more complex and less efficient. https://subwaysurfersgame.io |