当前位置：首页 > VUE

vue实现录视频

2026-02-20 05:07:05VUE

Vue 实现视频录制功能

在Vue中实现视频录制功能可以通过浏览器的MediaDevices API和MediaRecorder API完成。以下是实现步骤和代码示例：

引入必要的API

浏览器提供的navigator.mediaDevices.getUserMedia方法可以获取摄像头和麦克风的访问权限。MediaRecorder用于录制媒体流。

// 检查浏览器兼容性
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
  alert('您的浏览器不支持视频录制功能');
}

获取媒体权限并显示视频

在Vue组件的methods中创建方法获取摄像头访问权限，并将视频流显示在<video>元素上。

methods: {
  async startCamera() {
    try {
      this.stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      });
      this.$refs.videoElement.srcObject = this.stream;
    } catch (error) {
      console.error('无法访问摄像头:', error);
    }
  }
}

实现录制功能

初始化MediaRecorder并设置录制数据的处理方式。

methods: {
  startRecording() {
    this.recordedChunks = [];
    this.mediaRecorder = new MediaRecorder(this.stream);

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

    this.mediaRecorder.start();
  }
}

停止录制并生成视频文件

停止录制后将数据片段合并为Blob对象，并创建可下载的视频文件。

methods: {
  stopRecording() {
    this.mediaRecorder.stop();

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

组件模板示例

<template>
  <div>
    <video ref="videoElement" autoplay muted></video>
    <button @click="startCamera">开启摄像头</button>
    <button @click="startRecording" :disabled="!stream">开始录制</button>
    <button @click="stopRecording" :disabled="!mediaRecorder">停止录制</button>
    <video v-if="recordedVideoUrl" :src="recordedVideoUrl" controls></video>
    <a v-if="recordedVideoUrl" :href="recordedVideoUrl" download="recorded-video.webm">下载视频</a>
  </div>
</template>

注意事项

需要在HTTPS环境或localhost下才能使用媒体设备API
不同浏览器支持的视频格式可能不同，可考虑使用video/mp4等格式
录制前需要用户明确授权摄像头和麦克风访问权限
移动设备上可能有额外的限制和要求

完整组件代码

export default {
  data() {
    return {
      stream: null,
      mediaRecorder: null,
      recordedChunks: [],
      recordedVideoUrl: null
    };
  },
  methods: {
    async startCamera() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true
        });
        this.$refs.videoElement.srcObject = this.stream;
      } catch (error) {
        console.error('无法访问摄像头:', error);
      }
    },
    startRecording() {
      this.recordedChunks = [];
      this.mediaRecorder = new MediaRecorder(this.stream);

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

      this.mediaRecorder.start();
    },
    stopRecording() {
      this.mediaRecorder.stop();

      this.mediaRecorder.onstop = () => {
        const blob = new Blob(this.recordedChunks, {
          type: 'video/webm'
        });
        this.recordedVideoUrl = URL.createObjectURL(blob);
      };
    }
  },
  beforeDestroy() {
    if (this.stream) {
      this.stream.getTracks().forEach(track => track.stop());
    }
  }
};

以上实现提供了基本的视频录制功能，可以根据需求进一步扩展，如添加录制时长限制、视频滤镜等功能。

vue实现录视频