vue实现视频录制
实现视频录制的基本思路
在Vue中实现视频录制通常需要借助浏览器的MediaDevices API和MediaRecorder API。核心流程包括获取用户摄像头/麦克风权限、录制媒体流、保存录制结果。
获取用户媒体设备权限
使用navigator.mediaDevices.getUserMedia获取摄像头和麦克风的访问权限。该方法返回一个Promise，解析后得到媒体流对象。
async function startCapture() {
try {
return await navigator.mediaDevices.getUserMedia({
audio: true,
video: true
});
} catch (err) {
console.error("Error accessing media devices:", err);
}
}初始化MediaRecorder
获得媒体流后，可以初始化MediaRecorder对象。需要监听dataavailable事件来收集录制的数据块。
function setupRecorder(stream) {
const options = { mimeType: 'video/webm' };
const recorder = new MediaRecorder(stream, options);
const chunks = [];
recorder.ondataavailable = (e) => {
if (e.data.size > 0) chunks.push(e.data);
};
recorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
// 处理录制完成的视频
};
return recorder;
}在Vue组件中集成
将这些功能封装到Vue组件中，管理录制状态和视频数据。
<template>
<div>
<video ref="videoPreview" autoplay muted></video>
<button @click="startRecording">开始录制</button>
<button @click="stopRecording">停止录制</button>
<a v-if="videoUrl" :href="videoUrl" download="recorded.webm">下载视频</a>
</div>
</template>
<script>
export default {
data() {
return {
mediaStream: null,
mediaRecorder: null,
videoUrl: null
};
},
methods: {
async startRecording() {
this.mediaStream = await startCapture();
this.$refs.videoPreview.srcObject = this.mediaStream;
this.mediaRecorder = setupRecorder(this.mediaStream);
this.mediaRecorder.start();
},
stopRecording() {
this.mediaRecorder.stop();
this.mediaStream.getTracks().forEach(track => track.stop());
}
}
};
</script>处理录制完成的视频
在onstop回调中，可以创建视频URL供下载或播放。
recorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
this.videoUrl = URL.createObjectURL(blob);
};添加录制时间限制
可以通过定时器设置自动停止录制，避免过长的录制。
this.mediaRecorder.start();
this.stopTimer = setTimeout(() => {
this.stopRecording();
}, 60000); // 60秒后自动停止注意事项
- 不同浏览器支持的视频格式可能不同，
video/webm是最广泛支持的格式。 - 在HTTPS环境或localhost下才能使用
getUserMedia。 - 录制前需要用户明确授权摄像头和麦克风访问权限。
