关于MediaRecorder的使用

简介

由于我的业务场景是进行canvas的录制，所以并没有写音视频的DEMO，但是原理是一致的，都是如何捕获媒体流。

关键文档

Blob 的使用

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

canvas 如何捕获MediaStream

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/captureStream

如何获取系统摄像头和麦克风

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

如何录制

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder/MediaRecorder

修复视频meta信息

https://github.com/yusitnikov/fix-webm-duration

关键步骤

0. 捕获canvas流

   // 同理 其它任何可以获取流的方式都行，比如摄像头，麦克风
   let stream = canvas.captureStream(120)
   let mediaRecorder = new MediaRecorder(stream)

1. 监听文件流

   mediaRecorder.ondataavailable = function (e) {
     chunks.push(e.data);
   }

2. 生成Blob文件

   var blob = new Blob(chunks, { 'type': 'video/webm\;codecs=h264' });
   video.src = URL.createObjectURL(blob);

3. 下载

   if (window.navigator.msSaveOrOpenBlob) {
     navigator.msSaveBlob(blob, filename);
   } else {
     const link = document.createElement('a');
     const body = document.querySelector('body');
     link.href = window.URL.createObjectURL(blob);
     link.download = filename;
     link.style.display = 'none';
     body.appendChild(link);
     link.click();
     body.removeChild(link);
     window.URL.revokeObjectURL(link.href);
   }

DEMO

// ELLA_RECORD
  let recordBtn = document.getElementById('ELLA_RECORD')
  if (recordBtn) {
    let canvas = document.querySelector('canvas');
    let chunks = [];
    let starttime = 0;
    let mediaRecorder = new MediaRecorder(canvas.captureStream(120))
    mediaRecorder.onstop = function (e) {
      console.log("recorder stopped");
      let filename = `EBR${new Date().getTime()}.webm`
      let duration = Date.now() - starttime;
      let blob = new Blob(chunks, { 'type': 'video/webm' });
      chunks = [];
      webmFix(blob, duration, fixedBlob => {
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(fixedBlob, filename);
        } else {
          const link = document.createElement('a');
          const body = document.querySelector('body');
          link.href = window.URL.createObjectURL(fixedBlob);
          link.download = filename;
          link.style.display = 'none';
          body.appendChild(link);
          link.click();
          body.removeChild(link);
          window.URL.revokeObjectURL(link.href);

          // 如果需要在页面上展示，就用这段代码
          // let video = document.createElement('video');
          // video.style.width = '320px'
          // video.controls = true;
          // video.setAttribute('controls', '');
          // video.src = link.href
          // document.body.appendChild(video);
        }
      })
    }
    mediaRecorder.ondataavailable = function (e) {
      chunks.push(e.data);
    }
    recordBtn.onclick = function () {
      if (mediaRecorder.state === 'inactive') {
        starttime = Date.now()
        mediaRecorder.start();
        recordBtn.innerHTML = '录制中'
        recordBtn.style.background = "red";
        recordBtn.style.color = "black";
        console.log(mediaRecorder.state);
      } else {
        mediaRecorder.stop();
        recordBtn.innerHTML = '录制'
        console.log(mediaRecorder.state);
        recordBtn.style.background = "";
        recordBtn.style.color = "";
      }
    }
  }