HTML5视频录制API入门教程

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《HTML5视频录制API使用教程》，聊聊，希望可以帮助到正在努力赚钱的你。

可直接在网页中捕获并录制用户摄像头视频流：先用getUserMedia获取媒体流并预览，再通过MediaRecorder API录制为WebM格式，最后合并Blob导出下载；若不支持则回退至Canvas逐帧捕获合成。

如果您希望在网页中直接捕获用户的摄像头视频流并进行录制，则可以利用HTML5提供的MediaRecorder API与getUserMedia接口。以下是实现此功能的具体步骤：

一、检查浏览器兼容性与获取媒体流

MediaRecorder API并非在所有浏览器中都完全支持，需先确认当前环境是否具备录制能力，并通过navigator.mediaDevices.getUserMedia请求访问用户摄像头和麦克风权限。该步骤是后续录制操作的前提。

1、使用navigator.mediaDevices.getUserMedia({video: true, audio: true})发起媒体设备访问请求。

2、在Promise成功回调中，将返回的MediaStream对象赋值给stream变量。

3、将stream设置为元素的srcObject属性以实现本地预览。

4、若拒绝权限或设备不可用，捕获NotAllowedError或NotFoundError异常并提示用户请确保已允许摄像头和麦克风访问。

二、初始化MediaRecorder实例

MediaRecorder对象用于接收MediaStream轨道数据并编码为指定格式的媒体片段。必须在获得有效MediaStream后创建，且需确认其state为inactive才可调用start()方法。

1、检测window.MediaRecorder是否存在，否则提示当前浏览器不支持MediaRecorder API。

2、创建实例：const recorder = new MediaRecorder(stream, {mimeType: 'video/webm;codecs=vp8'});

3、监听dataavailable事件，该事件在每次录制分片生成时触发，用于收集Blob数据。

4、监听stop和error事件，分别处理录制结束与异常中断场景。

三、启动与停止录制

录制行为由MediaRecorder实例的start()和stop()方法控制。start可接受毫秒参数设定自动停止时间，但通常采用手动触发方式以增强交互可控性。

1、绑定按钮点击事件，在其中调用recorder.start()开始捕获音视频轨道数据。

2、再次点击同一按钮时，判断recorder.state === 'recording'，满足则执行recorder.stop()。

3、在dataavailable事件回调中，将每次产生的event.data（Blob类型）推入数组recordedChunks。

4、停止后检查recordedChunks.length，若为0则说明未生成有效数据，提示录制失败，请检查设备状态及权限设置。

四、导出录制结果为可下载文件

录制结束后，所有分片Blob需合并为单一Blob对象，并构造URL供用户下载。该过程不涉及服务器传输，全部在客户端完成。

1、使用new Blob(recordedChunks, {type: 'video/webm'})合并所有片段。

2、调用URL.createObjectURL(mergedBlob)生成临时对象URL。

3、创建元素，设置href为该URL，download属性为'recording.webm'。