当前位置：首页 > VUE

vue实现录制视频

2026-02-18 01:10:06VUE

Vue 实现录制视频的方法

在Vue中实现视频录制功能，可以通过浏览器提供的MediaDevices API和MediaRecorder API来完成。以下是具体实现步骤：

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

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

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

创建视频预览

将获取到的MediaStream绑定到video元素上，实现实时预览。

vue实现录制视频

function setupVideoPreview(videoElement, stream) {
  videoElement.srcObject = stream;
  videoElement.play();
}

初始化媒体录制器

使用MediaRecorder API创建录制器实例，并设置相关事件处理器。

function setupMediaRecorder(stream, options = { mimeType: 'video/webm' }) {
  const mediaRecorder = new MediaRecorder(stream, options);
  const recordedChunks = [];

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

  return { mediaRecorder, recordedChunks };
}

开始和停止录制

控制录制过程的开始和结束。

vue实现录制视频

function startRecording(mediaRecorder) {
  mediaRecorder.start();
}

function stopRecording(mediaRecorder) {
  return new Promise((resolve) => {
    mediaRecorder.onstop = () => {
      resolve();
    };
    mediaRecorder.stop();
  });
}

生成视频文件

将录制的数据块合并为Blob对象，并创建可下载的URL。

function generateVideoBlob(recordedChunks) {
  return new Blob(recordedChunks, { type: 'video/webm' });
}

function createVideoUrl(blob) {
  return URL.createObjectURL(blob);
}

Vue组件实现示例

将上述功能整合到Vue组件中。

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

<script>
export default {
  data() {
    return {
      stream: null,
      mediaRecorder: null,
      recordedChunks: [],
      isRecording: false,
      videoUrl: null
    };
  },
  async mounted() {
    try {
      this.stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      });
      this.$refs.videoPreview.srcObject = this.stream;
    } catch (err) {
      console.error('Error:', err);
    }
  },
  beforeDestroy() {
    if (this.stream) {
      this.stream.getTracks().forEach(track => track.stop());
    }
  },
  methods: {
    startRecording() {
      const { mediaRecorder, recordedChunks } = setupMediaRecorder(this.stream);
      this.mediaRecorder = mediaRecorder;
      this.recordedChunks = recordedChunks;
      this.mediaRecorder.start();
      this.isRecording = true;
    },
    async stopRecording() {
      await stopRecording(this.mediaRecorder);
      this.isRecording = false;
      const blob = generateVideoBlob(this.recordedChunks);
      this.videoUrl = createVideoUrl(blob);
    }
  }
};
</script>