Chrome Bug 897727 - MediaRecorder using Canvas.captureStream() fails for large canvas elements on Android

Paul Kinlan
Available in: English (Original) Español Français 日本語 मानक हिन्दी русский язык tiếng Việt bahasa Indonesia

Am Wochenende habe ich mit einem Boomerang-Effekt-Video-Encoder herumgespielt, man kann es quasi in Echtzeit arbeiten lassen (ich werde es später erklären). Ich habe es auf Chrome auf dem Desktop funktioniert, aber es würde nie richtig in Chrome unter Android funktionieren. Siehe der Code hier.

Es sieht so aus, als wenn Sie captureStream () auf einem verwenden <canvas>das hat eine relativ große Auflösung (1280x720 in meinem Fall) ist die MediaRecorder API nicht in der Lage, die Videos zu codieren und es wird kein Fehler und Sie können nicht feststellen, dass es das Video nicht vor der Zeit codieren kann.

(1) Capture a large res video (from getUM 1280x720) to a buffer for later processing. (2) Create a MediaRecorder with a stream from a canvas element (via captureStream) sized to 1280x720 (3) For each frame captured putImageData on the canvas (4) For each frame call canvasTrack.requestFrame() at 60fps

context.putImageData(frame, 0, 0); canvasStreamTrack.requestFrame();

Demo: https://boomerang-video-chrome-on-android-bug.glitch.me/ Code: https://glitch.com/edit/#!/boomerang-video-chrome-on-android-bug?path=script.js:21:42

What is the expected result?

For the exact demo, I buffer the frames and then reverse them so you would see the video play forwards and backwards (it works on desktop). In generall I would expect all frames sent to the canvas to be processed by the MediaRecorder API - yet they are not.

What happens instead?

It only captures the stream from the canvas for a partial part of the video and then stops. It’s not predicatable where it will stop.

I suspect there is a limit with the MediaRecorder API and what resolution it can encode depending on the device, and there is no way to know about these limits ahead of time.

As far as I can tell this has never worked on Android. If you use https://boomerang-video-chrome-on-android-bug.glitch.me which has a 640x480 video frame it records just fine. The demo works at higher-resolution just fine on desktop.

Ganzen Beitrag lesen.

Wenn du mit der Demo spielen willst, die auf beiden funktioniert, dann klick hier

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium