当前位置：首页 > VUE

vue实现录像功能

2026-01-19 10:23:20VUE

使用Vue实现录像功能

在Vue中实现录像功能通常需要结合浏览器的MediaDevices API和HTML5的<video>、<canvas>元素。以下是实现步骤：

获取用户摄像头权限

通过navigator.mediaDevices.getUserMedia获取摄像头访问权限。该方法返回一个Promise，解析为MediaStream对象。

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    // 处理stream
  } catch (err) {
    console.error('Error accessing media devices:', err);
  }
}

在Vue组件中显示视频流

将获取的视频流绑定到<video>元素的srcObject属性上。

<template>
  <div>
    <video ref="videoElement" autoplay></video>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording">停止录制</button>
  </div>
</template>

<script>
export default {
  methods: {
    async startRecording() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true
        });
        this.$refs.videoElement.srcObject = this.stream;
      } catch (err) {
        console.error('Error:', err);
      }
    }
  }
}
</script>

实现录像功能

使用MediaRecorder API录制视频流。创建MediaRecorder实例并监听数据可用事件。

async startRecording() {
  try {
    this.stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    this.$refs.videoElement.srcObject = this.stream;

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

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

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

    this.mediaRecorder.start();
  } catch (err) {
    console.error('Error:', err);
  }
},

stopRecording() {
  if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
    this.mediaRecorder.stop();
    this.stream.getTracks().forEach(track => track.stop());
  }
}

显示录制结果

创建下载链接或直接在页面上播放录制的视频。

<template>
  <div>
    <video ref="videoElement" autoplay></video>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording">停止录制</button>
    <video v-if="recordedVideoUrl" :src="recordedVideoUrl" controls></video>
    <a v-if="recordedVideoUrl" :href="recordedVideoUrl" download="recorded-video.webm">下载视频</a>
  </div>
</template>

优化用户体验

添加状态管理，防止重复点击和异常情况处理。

data() {
  return {
    stream: null,
    mediaRecorder: null,
    chunks: [],
    recordedVideoUrl: null,
    isRecording: false
  };
},

methods: {
  async startRecording() {
    if (this.isRecording) return;

    try {
      this.isRecording = true;
      // 其余代码...
    } catch (err) {
      this.isRecording = false;
      console.error('Error:', err);
    }
  },

  stopRecording() {
    if (!this.isRecording) return;

    if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
      this.mediaRecorder.stop();
      this.stream.getTracks().forEach(track => track.stop());
      this.isRecording = false;
    }
  }
}