Question

我创建了一个脚本，允许我从画布上录制id为“imacanvas”的视频。但问题是没有创建blob。我认为问题是函数handleDataAvailable没有被执行。但我不知道为什么??

感谢您的帮助：）

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

为了能够激活HTMLCanvasElement.captureStream()捕获的流，您需要初始化其上下文并在其上绘制。

必须在致电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>

MediaRecorder没有定义blob

1 个答案: