MediaRecorder No blobs are defined

Question

I created a script that allows me to record a video from the canvas with the id "imacanvas". But the problem is that no blobs were created. I think the problem is that the function handleDataAvailable isn't executed. But I don't know why??

Thanks for your help :)

var recordedBlobs;
var recorder;
var stream;

function handleDataAvailable(event) {
  console.log("0");
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
    console.log("1");
  }
}

function startRecord(){
    recordedBlobs = [];

  var canvas = document.getElementById('imacanvas');
  stream = canvas.captureStream(60);

  try {
    recorder = new MediaRecorder(stream);
  } catch (e) {
    console.error('Exception while creating MediaRecorder: ' + e);
    alert('Exception while creating MediaRecorder: '
      + e + '. mimeType: ' + options.mimeType);
    return;
  }

  recorder.ondataavailable = handleDataAvailable;
  recorder.start(10);
}

function stopRecord() {
  recorder.stop();
  console.log('Recorded Blobs: ', recordedBlobs);
}

function download() {
  var blob = new Blob(recordedBlobs, {type: 'video/webm'});
  var url = window.URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'test.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
}

Answer 1

In order to be able to activate the stream captured by HTMLCanvasElement.captureStream() , you need to have initialized its context, and drawn on it.

This must be done before you call captureStream() .

  const chunks_before = []; const stream_before = c.captureStream(60); try { const rec_before = new MediaRecorder(stream_before); rec_before.ondataavailable = e => chunks_before.push(e.data); rec_before.onstop = e => console.log('before : ', chunks_before.length); rec_before.start(); setTimeout(() => { if (rec_before.state === 'recording') rec_before.stop(); }); } catch (e) { console.log('before failed'); } // simply doing this allows us to do it c.getContext('2d').fillRect(0, 0, 20, 20); const chunks_after = []; const stream_after = c.captureStream(60); const rec_after = new MediaRecorder(stream_after); rec_after.ondataavailable = e => chunks_after.push(e.data); rec_after.onstop = e => console.log('after : ', chunks_after.length); rec_after.start(); setTimeout(() => { if (rec_after.state === 'recording') rec_after.stop(); }, 1000); 

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