当前位置：首页 > VUE

vue实现视频录制

2026-03-30 01:20:45VUE

使用Vue实现视频录制

在Vue中实现视频录制功能可以通过浏览器的MediaDevices API和MediaRecorder API完成。以下是具体实现方法：

引入依赖

确保项目已安装Vue 2或Vue 3。若需处理视频文件，可额外安装file-saver库：

vue实现视频录制

npm install file-saver

获取摄像头权限

通过navigator.mediaDevices.getUserMedia请求摄像头和麦克风权限：

async startCamera() {
  try {
    this.stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    this.$refs.videoElement.srcObject = this.stream;
  } catch (error) {
    console.error("Error accessing media devices:", error);
  }
}

模板中需放置<video>元素并绑定ref：

vue实现视频录制

<video ref="videoElement" autoplay muted></video>

初始化录制器

创建MediaRecorder实例并监听数据事件：

initRecorder() {
  this.mediaRecorder = new MediaRecorder(this.stream);
  this.chunks = [];

  this.mediaRecorder.ondataavailable = (event) => {
    if (event.data.size > 0) {
      this.chunks.push(event.data);
    }
  };

  this.mediaRecorder.onstop = () => {
    const blob = new Blob(this.chunks, { type: "video/webm" });
    this.recordedVideoUrl = URL.createObjectURL(blob);
  };
}

控制录制过程

提供开始、停止和保存视频的方法：

startRecording() {
  this.chunks = [];
  this.mediaRecorder.start();
  this.isRecording = true;
}

stopRecording() {
  this.mediaRecorder.stop();
  this.isRecording = false;
}

saveVideo() {
  const blob = new Blob(this.chunks, { type: "video/webm" });
  saveAs(blob, "recorded-video.webm"); // 使用file-saver保存文件
}

完整组件示例

<template>
  <div>
    <video ref="videoElement" autoplay muted></video>
    <button @click="startCamera">开启摄像头</button>
    <button @click="startRecording" :disabled="!stream || isRecording">开始录制</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录制</button>
    <button @click="saveVideo" :disabled="!recordedVideoUrl">保存视频</button>
    <video v-if="recordedVideoUrl" :src="recordedVideoUrl" controls></video>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      stream: null,
      mediaRecorder: null,
      chunks: [],
      isRecording: false,
      recordedVideoUrl: null
    };
  },
  methods: {
    // 上述方法...
  },
  beforeUnmount() {
    if (this.stream) {
      this.stream.getTracks().forEach(track => track.stop());
    }
  }
};
</script>