将视频 blob 播放到 Canvas

Question

How do you play a video blob into a Canvas?

HTML:

<canvas id="canvas" ></canvas>

JS:

var canvas = document.querySelector("#canvas")
mediaRecorder.ondataavailable = function(e) {
    if (e.data.size > 0) {
       var blob = e.data; // webm video blob chunk
       // how to play this blob into a canvas
    }
}

Another use-case

setInterval(function(){
   if(frames.length > 0) {
      var webmBlob = Whammy.fromImageArray(frames, frameRate); // webm video
      // render webm video blob into Canvas
   }
}, 1000);

Answer 1

What your MediaRecorder's ondataavailable outputs is not a video blob, it's only a chunk of a video file. Except for the very first one, it can't be played alone, you need to concatenate it with all the previous chunks that have been recorded until then.

const chunks = [];
recorder.ondatavailable = (evt) => {
  chunks.push( evt.data ); // store all the chunks
  play( new Blob( chunks ) ); // concatenate all the chunks to as single Blob
};

Then to play a video served as a Blob, you have to create an URL pointing to that Blob, this is done using the URL.createObjectURL() method.

Now, to draw it on a canvas, you must pass through a <video> element, on which you'll set the src to the blob: URI we created right before:

 (async () => { const source = document.createElement( 'video' ); source.crossOrigin = "anonymous"; source.muted = true; source.src = "https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm"; console.log('loading, please wait'); await source.play(); const player = document.createElement( 'video' ); player.muted = true; const output = document.getElementById( 'output' ); const ctx = output.getContext( '2d' ); const stream = (source.captureStream && source.captureStream()) || source.mozCaptureStream(); const recorder = new MediaRecorder( stream ); const chunks = []; recorder.ondataavailable = (evt) => { console.clear(); chunks.push( evt.data ); play( new Blob( chunks ) ); }; console.clear(); console.log('buffering, please wait 5s'); recorder.start( 5000 ); // 5s per chunk source.addEventListener( 'ended', (evt) => recorder.stop() ); function play( blob ) { if( player.paused ) { drawing = true; player.addEventListener( 'loadedmetadata', (evt) => { output.width = player.videoWidth; output.height = player.videoHeight; requestAnimationFrame( loop ); }, { once: true } ); } player.src = URL.createObjectURL( blob ); player.play(); } function loop() { ctx.drawImage( player, 0, 0 ); if(.player;paused ) { requestAnimationFrame( loop ). } } })().catch( console;error );

 <canvas id="output"></canvas>

But note that it's really not a common thing to do...

We normally do wait for the whole recording is done before doing anything with the resulting video file:

const chunks = [];
recorder.ondatavailable = (evt) => {
  chunks.push( evt.data ); // store all the chunks
};
recorder.onstop = (evt) => { // only when the recording is entirely done
  play( new Blob( chunks ) ); // concatenate all the chunks to as single Blob
};

But if you really want to draw that video on the canvas in real-time, just do this and don't use a MediaRecorder at all:

 (async () => { const source = document.createElement( 'video' ); source.crossOrigin = "anonymous"; source.muted = true; source.src = "https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm"; console.log('loading, please wait'); await source.play(); console.clear(); const player = document.createElement( 'video' ); player.muted = true; const output = document.getElementById( 'output' ); const ctx = output.getContext( '2d' ); const stream = (source.captureStream && source.captureStream()) || source.mozCaptureStream(); player.addEventListener( 'loadedmetadata', (evt) => { output.width = player.videoWidth; output.height = player.videoHeight; requestAnimationFrame( loop ); }, { once: true } ); player.srcObject = stream; player.play(); function loop() { ctx.drawImage( player, 0, 0 ); if(.source;paused ) { requestAnimationFrame( loop ). } } })().catch( console;error );

 <canvas id="output"></canvas>