当前位置：首页 > VUE

vue实现录像

2026-01-07 22:36:38VUE

Vue 实现录像功能

在 Vue 中实现录像功能通常需要借助浏览器的 MediaDevices API 和 MediaRecorder API。以下是实现步骤：

获取用户摄像头和麦克风权限

使用 navigator.mediaDevices.getUserMedia 方法请求用户授权访问摄像头和麦克风。该方法返回一个 Promise，解析后得到一个 MediaStream 对象。

vue实现录像

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    // 将 stream 传递给视频元素或 MediaRecorder
  } catch (error) {
    console.error('Error accessing media devices:', error);
  }
}

创建 MediaRecorder 实例

使用 MediaRecorder 对象录制媒体流。需要传入上一步获取的 MediaStream 对象和可选的配置项。

const mediaRecorder = new MediaRecorder(stream, {
  mimeType: 'video/webm'
});

处理录制数据

通过监听 dataavailable 事件获取录制的数据块，并将这些数据块存储起来。

vue实现录像

const recordedChunks = [];

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

开始和停止录制

调用 MediaRecorder 的 start 和 stop 方法控制录制过程。

mediaRecorder.start(); // 开始录制

// 停止录制
mediaRecorder.stop();
mediaRecorder.onstop = () => {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const videoUrl = URL.createObjectURL(blob);
  // 可以将 videoUrl 赋值给 <a> 标签供用户下载，或显示在 <video> 元素中
};

在 Vue 组件中集成

将上述逻辑封装到 Vue 组件中，结合模板和响应式数据管理录制状态。

<template>
  <div>
    <video ref="videoElement" autoplay muted></video>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording">停止录制</button>
    <a v-if="videoUrl" :href="videoUrl" download="recording.webm">下载录像</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stream: null,
      mediaRecorder: null,
      recordedChunks: [],
      videoUrl: null
    };
  },
  methods: {
    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, {
          mimeType: 'video/webm'
        });

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

        this.mediaRecorder.start();
      } catch (error) {
        console.error('Error:', error);
      }
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.mediaRecorder.onstop = () => {
        const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
        this.videoUrl = URL.createObjectURL(blob);
        this.stream.getTracks().forEach(track => track.stop());
      };
    }
  }
};
</script>