MediaRecorder - 提供了轻松记录媒体的功能

MediaRecorder 是 MediaStream Recording API 的接口，提供了轻松记录媒体的功能。它是使用 MediaRecorder() 构造函数创建的。

构造函数

MediaRecorder()

创建一个新的 MediaRecorder 对象，传入一个 MediaStream 来记录。可以使用选项来设置容器的 MIME 类型（例如 "video/webm" 或 "video/mp4"）以及音频和视频轨道的比特率或单个总比特率。

实例

if (navigator.mediaDevices) {
  console.log('支持 getUserMedia。');

  var constraints = { audio: true };
  var chunks = [];

  navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {

    var mediaRecorder = new MediaRecorder(stream);

    visualize(stream);

    record.onclick = function() {
      mediaRecorder.start();
      console.log(mediaRecorder.state);
      console.log("录音开始了");
      record.style.background = "red";
      record.style.color = "black";
    }

    stop.onclick = function() {
      mediaRecorder.stop();
      console.log(mediaRecorder.state);
      console.log("录音停止了");
      record.style.background = "";
      record.style.color = "";
    }

    mediaRecorder.onstop = function(e) {
      console.log("MediaRecorder.stop() 调用后可用的数据。");

      var clipName = prompt('输入声音片段的名称');

      var clipContainer = document.createElement('article');
      var clipLabel = document.createElement('p');
      var audio = document.createElement('audio');
      var deleteButton = document.createElement('button');

      clipContainer.classList.add('clip');
      audio.setAttribute('controls', '');
      deleteButton.innerHTML = "删除";
      clipLabel.innerHTML = clipName;

      clipContainer.appendChild(audio);
      clipContainer.appendChild(clipLabel);
      clipContainer.appendChild(deleteButton);
      soundClips.appendChild(clipContainer);

      audio.controls = true;
      var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
      chunks = [];
      var audioURL = URL.createObjectURL(blob);
      audio.src = audioURL;
      console.log("录音停止了");

      deleteButton.onclick = function(e) {
        evtTgt = e.target;
        evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
      }
    }

    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }
  })
  .catch(function(err) {
    console.log('发生以下错误：' + err);
  })
}

此代码实例的灵感来自 Web Dictaphone 演示。为简洁起见，省略了一些逻辑；参考来源获取完整代码。

规范

规范	状态	备注
MediaStream Recording	工作草案	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. 在 Firefox 58 之前，在使用 getUserMedia() 获取的流上使用 code>MediaStream.addTrack()，然后尝试记录结果流将导致仅记录没有添加轨道的原始流（严重错误）。

2. 在 Chrome 49 之前，只支持视频，不支持音频。

3. 从 Firefox 71 开始， mimeType 的行为更加一致。例如，它现在即使在录制停止后也会返回媒体类型。

相关链接

• 使用 MediaRecorder API
• Web 录音机: MediaRecorder + getUserMedia + Web Audio API 可视化演示，作者 Chris Mills (源于 GitHub.)
• 录制媒体元素
• simpl.info MediaStream Recording 实例，作者 Sam Dutton.
• navigator.mediaDevices.getUserMedia
• OpenLang：使用 MediaDevices 的 HTML5 视频语言实验室 Web 应用程序和用于视频录制的 MediaStream Recording API（源于 GitHub）