- WebRTC技术详解:从0到1构建多人视频会议系统
- 栗伟
- 738字
- 2021-04-20 11:41:33
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(); } }