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

At the weekend I was playing around with a Boomerang effect video encoder, you can kinda get it working in near real-time (I’ll explain later). I got it working on Chrome on Desktop, but it would never work properly on Chrome on Android. See the code here.
It looks like when you use captureStream() on a <canvas> that has a relatively large resolution (1280×720 in my case) the MediaRecorder API won’t be able to encode the videos and it won’t error and you can’t detect that it can’t encode the video ahead of time.

<p>At the weekend I was playing around with a Boomerang effect video encoder, you can kinda get it working in near real-time (I'll explain later). I got it working on Chrome on Desktop, but it would never work properly on Chrome on Android. See <a href="https://glitch.com/edit/#!/boomerang-video-chrome-on-android-bug?path=script.js:86:22">the code here</a>.</p>
<p>It looks like when you use <code>captureStream()</code> on a <code><canvas></code> that has a relatively large resolution (1280×720 in my case) the MediaRecorder API won't be able to encode the videos and it won't error and you can't detect that it can't encode the video ahead of time.</p>
<blockquote>
<p>(1) Capture a large res video (from getUM 1280×720) to a buffer for later processing.
(2) Create a MediaRecorder with a stream from a canvas element (via captureStream) sized to 1280×720
(3) For each frame captured putImageData on the canvas
(4) For each frame call canvasTrack.requestFrame() at 60fps</p>
<p>context.putImageData(frame, 0, 0);
canvasStreamTrack.requestFrame();</p>
<p>Demo: <a href="https://boomerang-video-chrome-on-android-bug.glitch.me/">https://boomerang-video-chrome-on-android-bug.glitch.me/</a>
Code: <a href="https://glitch.com/edit/#!/boomerang-video-chrome-on-android-bug?path=script.js:21:42">https://glitch.com/edit/#!/boomerang-video-chrome-on-android-bug?path=script.js:21:42</a></p>
<h1 id="what-is-the-expected-result">What is the expected result?</h1>
<p>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.</p>
<h2 id="what-happens-instead">What happens instead?</h2>
<p>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.</p>
<p>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.</p>
<p>As far as I can tell this has never worked on Android. If you use <a href="https://boomerang-video-chrome-on-android-bug.glitch.me">https://boomerang-video-chrome-on-android-bug.glitch.me</a> which has a 640×480 video frame it records just fine. The demo works at higher-resolution just fine on desktop.</p>
</blockquote>
<p><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=897727">Read full post</a>.</p>
<p>If you want to play around with the demo that works on both then <a href="https://boomerang-video-chrome.glitch.me">click here</a></p>


Print Share Comment Cite Upload Translate
APA
Paul Kinlan | Sciencx (2024-03-29T09:53:23+00:00) » Chrome Bug 897727 – MediaRecorder using Canvas.captureStream() fails for large canvas elements on Android. Retrieved from https://www.scien.cx/2018/10/22/chrome-bug-897727-mediarecorder-using-canvas-capturestream-fails-for-large-canvas-elements-on-android/.
MLA
" » Chrome Bug 897727 – MediaRecorder using Canvas.captureStream() fails for large canvas elements on Android." Paul Kinlan | Sciencx - Monday October 22, 2018, https://www.scien.cx/2018/10/22/chrome-bug-897727-mediarecorder-using-canvas-capturestream-fails-for-large-canvas-elements-on-android/
HARVARD
Paul Kinlan | Sciencx Monday October 22, 2018 » Chrome Bug 897727 – MediaRecorder using Canvas.captureStream() fails for large canvas elements on Android., viewed 2024-03-29T09:53:23+00:00,<https://www.scien.cx/2018/10/22/chrome-bug-897727-mediarecorder-using-canvas-capturestream-fails-for-large-canvas-elements-on-android/>
VANCOUVER
Paul Kinlan | Sciencx - » Chrome Bug 897727 – MediaRecorder using Canvas.captureStream() fails for large canvas elements on Android. [Internet]. [Accessed 2024-03-29T09:53:23+00:00]. Available from: https://www.scien.cx/2018/10/22/chrome-bug-897727-mediarecorder-using-canvas-capturestream-fails-for-large-canvas-elements-on-android/
CHICAGO
" » Chrome Bug 897727 – MediaRecorder using Canvas.captureStream() fails for large canvas elements on Android." Paul Kinlan | Sciencx - Accessed 2024-03-29T09:53:23+00:00. https://www.scien.cx/2018/10/22/chrome-bug-897727-mediarecorder-using-canvas-capturestream-fails-for-large-canvas-elements-on-android/
IEEE
" » Chrome Bug 897727 – MediaRecorder using Canvas.captureStream() fails for large canvas elements on Android." Paul Kinlan | Sciencx [Online]. Available: https://www.scien.cx/2018/10/22/chrome-bug-897727-mediarecorder-using-canvas-capturestream-fails-for-large-canvas-elements-on-android/. [Accessed: 2024-03-29T09:53:23+00:00]
rf:citation
» Chrome Bug 897727 – MediaRecorder using Canvas.captureStream() fails for large canvas elements on Android | Paul Kinlan | Sciencx | https://www.scien.cx/2018/10/22/chrome-bug-897727-mediarecorder-using-canvas-capturestream-fails-for-large-canvas-elements-on-android/ | 2024-03-29T09:53:23+00:00
https://github.com/addpipe/simple-recorderjs-demo