2.8.3　MediaRecorder方法

1. isTypeSupported()静态方法

检查当前浏览器是否支持指定的MIME格式。

const canRecord = MediaRecorder.isTypeSupported(mimeType)

• 参数：mimeType，MIME媒体格式。
• 返回值：类型为Boolean，如果支持该mimeType则返回true，否则返回false。

代码清单2-52检测types数组中的mimeType，如果当前浏览器支持此mimeType，则打印YES，如果不支持则打印NO。

代码清单2-52　isTypeSupported示例

const types = ["video/webm",
               "audio/webm",
               "video/webm\;codecs=vp8",
               "video/webm\;codecs=daala",
               "video/webm\;codecs=h264",
               "audio/webm\;codecs=opus",
               "video/mpeg"];
for (let i in types) {
  console.log( "Is " + types[i] + " supported? " +
    (MediaRecorder.isTypeSupported(typ-es[i]) ? "YES" : "NO"));
}

2. requestData()方法

该方法触发dataavailable事件，事件包含Blob格式的录制数据。该方法通常需要周期性调用。

mediaRecorder.requestData()

• 参数：无。
• 返回值：无。如果MediaRecorder.state不是recording，将抛出异常InvalidState。

如代码清单2-53所示，每秒调用一次requestData()方法，并在dataavailable事件处理函数中获取录制数据。

代码清单2-53　requestData()示例

this.mediaRecorder.ondataavailable = (event) => {
  if (event.data.size > 0 ) {
    this.recordedChunks.push(event.data);
  }
};
this.recorderIntervalHandler = setInterval(() => {
  this.mediaRecorder.requestData();
}, 1000);

3. start(timeslice)方法

启动录制，将录制数据写入Blob对象。

mediaRecorder.start(timeslice)

• 参数：timeslice，可选参数，用于设置录制缓存区时长，单位为毫秒（ms）。如果指定了timeslice，当Blob缓存区写满后，触发dataavailable事件，并重新创建一个Blob对象。如果未指定timeslice，则录制数据会始终写入同一个Blob对象，直到调用requestData()方法才会重新创建新的Blob对象。
• 返回值：无。如果调用出错，会抛出异常，如表2-13所示。

表2-13　start异常说明

代码清单2-54启动录制，并将Blob缓存区设置为100ms，缓存区满后触发dataavailable事件。

代码清单2-54　start示例

recorder.ondataavailable = (event) => {
  console.log(' Recorded chunk of size ' + event.data.size + "B");
  recordedChunks.push(event.data);
};

recorder.start(100);

4. MediaRecorder.pause()方法

暂停录制。当调用该方法时，浏览器将产生如下行为。

• 如果MediaRecorder.state的状态为inactive，则抛出异常InvalidStateError，不再执行下面的步骤。
• 将MediaRecorder.state设置为paused。
• 停止向Blob追加数据，等待录制恢复。
• 触发pause事件。

MediaRecorder.pause()

• 参数：无。
• 返回值：无。

5. MediaRecorder.resume()方法

恢复录制。当调用该方法时，浏览器会产生如下行为。

• 如果MediaRecorder.state的状态为inactive，则抛出异常InvalidStateError，不再执行下面的步骤。
• 将MediaRecorder.state设置为recording。
• 继续向Blob追加数据。
• 触发resume事件。

MediaRecorder.resume()

• 参数：无。
• 返回值：无。

代码清单2-55展示了暂停/恢复状态的切换。

代码清单2-55　resume()示例

pause.onclick = () => {
  if(MediaRecorder.state === "recording") {
    //暂停录制
    mediaRecorder.pause();
    } else if(MediaRecorder.state === "paused") {
      //恢复录制
      mediaRecorder.resume();
    }
  }