vue3版本的录制视频上传案例

HTML5 提供了一种简单而强大的方式来实现视频录制和上传功能。

通过使用 HTML5 的 video 元素和 MediaRecorder 接口，我们可以在浏览器中录制视频，并将其上传到服务器。

原理解释

1. 使用 getUserMedia 方法获取用户的摄像头和麦克风权限。
2. 创建 video 元素，将摄像头的视频流绑定到 video 元素上，实时显示摄像头的画面。
3. 创建 MediaRecorder 对象，将 video 元素的画面录制为视频。
4. 监听 dataavailable 事件，在录制过程中获取视频的数据块。
5. 将数据块存储为 Blob 对象，并上传到服务器。

6. 使用 URL.createObjectURL 方法把blob对象转化为对象url，赋值给video元素，进行预览已录制的视频。

注意

要创建对象 URL，可以使用 window.URL.createObjectURL() 方法，并传入 File 或 Blob 对象。如果不再需要相应数据，最好释放它占用的内容。但只要有代码在引用对象 URL，内存就不会释放。要手工释放内存，可以把对象 URL 传给 URL.revokeObjectURL()。

案例代码（vue3版本）

实现的主要功能：

• 打开设备摄像头进行预览
• 关闭摄像头
• 开始录制视频
• 暂停录制视频
• 继续录制视频
• 停止录制视频
• 重新录制视频
• 上传录制视频