当前位置：首页 > VUE

vue实现录制视频

2026-01-17 08:37:49VUE

实现视频录制的基本步骤

使用Vue实现视频录制需要结合浏览器的MediaDevices API和MediaRecorder API。以下是一个完整的实现方案：

安装必要依赖

在Vue项目中安装vue-video-recorder或直接使用原生API：

npm install vue-video-recorder

组件实现方案

创建视频录制组件（使用原生API）：

<template>
  <div>
    <video ref="videoPreview" autoplay muted></video>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录制</button>
    <video ref="videoPlayback" controls v-if="recordedBlob"></video>
    <a :href="videoUrl" download="recorded-video.webm" v-if="videoUrl">下载视频</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaStream: null,
      mediaRecorder: null,
      recordedBlob: null,
      isRecording: false,
      videoUrl: null
    }
  },
  methods: {
    async startRecording() {
      try {
        this.mediaStream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true
        });
        this.$refs.videoPreview.srcObject = this.mediaStream;

        this.mediaRecorder = new MediaRecorder(this.mediaStream);
        const chunks = [];

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

        this.mediaRecorder.onstop = () => {
          this.recordedBlob = new Blob(chunks, { type: 'video/webm' });
          this.videoUrl = URL.createObjectURL(this.recordedBlob);
          this.$refs.videoPlayback.src = this.videoUrl;
        };

        this.mediaRecorder.start();
        this.isRecording = true;
      } catch (error) {
        console.error('Error accessing media devices:', error);
      }
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.mediaStream.getTracks().forEach(track => track.stop());
      this.isRecording = false;
    }
  },
  beforeDestroy() {
    if (this.mediaStream) {
      this.mediaStream.getTracks().forEach(track => track.stop());
    }
    if (this.videoUrl) {
      URL.revokeObjectURL(this.videoUrl);
    }
  }
}
</script>

使用第三方库方案

使用vue-video-recorder库简化实现：

<template>
  <div>
    <video-recorder
      @start="onStart"
      @stop="onStop"
      @error="onError"
      @upload="onUpload"
    ></video-recorder>
    <video :src="videoUrl" controls v-if="videoUrl"></video>
  </div>
</template>

<script>
import { VideoRecorder } from 'vue-video-recorder';

export default {
  components: {
    VideoRecorder
  },
  data() {
    return {
      videoUrl: null
    }
  },
  methods: {
    onStart() {
      console.log('Recording started');
    },
    onStop(blob) {
      this.videoUrl = URL.createObjectURL(blob);
    },
    onError(error) {
      console.error('Recording error:', error);
    },
    onUpload(blob) {
      // 处理上传逻辑
    }
  }
}
</script>

注意事项

浏览器兼容性：不同浏览器支持的视频格式可能不同，建议测试目标浏览器环境。
权限处理：首次访问时需要用户授权摄像头和麦克风权限。
移动端适配：在移动设备上可能需要处理横竖屏切换问题。
文件大小限制：长时间录制可能导致内存问题，建议设置分片录制或限制单次录制时长。
格式选择：常见的录制格式包括webm和mp4，可根据需求选择。
服务器上传：如需保存到服务器，需要使用FormData上传Blob对象。

扩展功能

添加录制时长限制：

// 在startRecording方法中添加
setTimeout(() => {
  if (this.isRecording) {
    this.stopRecording();
  }
}, 60000); // 60秒后自动停止

添加视频质量选项：

const constraints = {
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 },
    frameRate: { ideal: 30 }
  },
  audio: true
};
this.mediaStream = await navigator.mediaDevices.getUserMedia(constraints);