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()。

三、可能遇到的坑

1、在微信浏览器中，可能会遇到弹出摄像头授权后，依旧没法唤醒摄像头的情况。这是因为在微信浏览器中，video标签不会自动播放的原因，需要我们在摄像头初始化完成后，触发一下video的play方法。

videoEle.play()

2、在ios系统中，video标签播放的时候可能会默认弹出全屏播放（安卓手机可能没有这种情况）。要解决这种情况，可以在video标签里添加一个playsinline属性，限制一下。

<video width="400" height="300" autoplay muted playsinline ></video>

3、把录制的视频数据转化为可播放的blob数据时，可能在移动设备上会出现播放不了的情况，这有可能是转化数据格式的原因，可以尝试设置为常用的mp4格式，其他格式可参考Media Types的官方文档。

const blob = new Blob(chunks, { type: 'video/mp4' })

videoURL = URL.createObjectURL(blob)

4、要生成多段视频数据文件，我们需要在录制好一段视频后，执行录制停止事件，再重新开启录制才行，不然只是暂停后再录制，只会是生成一个视频数据而已。

5、在iOS设备上播放通过JavaScript录制的视频，你需要确保视频编码和协议支持是兼容的。iOS支持的视频格式包括MP4，并且通常需要使用H.264编码。

如果你是通过MediaRecorder API录制视频，确保视频和音频使用的是兼容的编码和分辨率。

如果你需要录制视频，并且要确保它可以在iOS上播放，你可以使用MediaRecorder API，并确保设置正确的mimeType为video/mp4和audio/mp4（如果使用音频的话）。

// 创建MediaRecorder实例