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异常说明

050-01

代码清单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();
    }
  }