当前位置：首页 > VUE

vue实现视频录制

2026-03-09 13:34:25VUE

Vue 实现视频录制的方法

使用 Vue 实现视频录制可以通过浏览器的 MediaDevices API 和 MediaRecorder API 完成。以下是具体实现步骤：

获取用户媒体权限

需要先请求用户授权访问摄像头和麦克风，使用 navigator.mediaDevices.getUserMedia 方法。该方法返回一个 Promise，解析后得到媒体流（MediaStream）。

vue实现视频录制

async function getMediaStream(constraints) {
  try {
    return await navigator.mediaDevices.getUserMedia(constraints);
  } catch (err) {
    console.error('Error accessing media devices:', err);
    throw err;
  }
}

初始化 MediaRecorder

获取媒体流后，可以初始化 MediaRecorder 对象。需要传入媒体流和可选的配置项（如 MIME 类型）。

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

录制视频并保存

通过 MediaRecorder 的 start 和 stop 方法控制录制过程。录制数据通过 ondataavailable 事件获取，最终将数据保存为文件。

vue实现视频录制

function startRecording(mediaRecorder, duration = 5000) {
  let recordedChunks = [];

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

  mediaRecorder.onstop = () => {
    const blob = new Blob(recordedChunks, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    // 可以通过 <a> 标签下载或显示视频
    const a = document.createElement('a');
    a.href = url;
    a.download = 'recorded-video.webm';
    a.click();
  };

  mediaRecorder.start(duration); // 每 `duration` 毫秒触发一次 ondataavailable
}

在 Vue 组件中集成

将上述逻辑封装到 Vue 组件中，通过按钮触发录制和停止。

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

<script>
export default {
  data() {
    return {
      mediaStream: null,
      mediaRecorder: null,
    };
  },
  methods: {
    async startRecording() {
      const constraints = { video: true, audio: true };
      this.mediaStream = await getMediaStream(constraints);
      this.$refs.videoElement.srcObject = this.mediaStream;

      this.mediaRecorder = setupMediaRecorder(this.mediaStream);
      startRecording(this.mediaRecorder);
    },
    stopRecording() {
      if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
        this.mediaRecorder.stop();
        this.mediaStream.getTracks().forEach(track => track.stop());
      }
    },
  },
  beforeDestroy() {
    if (this.mediaStream) {
      this.mediaStream.getTracks().forEach(track => track.stop());
    }
  },
};
</script>

兼容性处理

不同浏览器支持的 MIME 类型可能不同，可以通过 MediaRecorder.isTypeSupported 检测支持的格式。

function getSupportedMimeType() {
  const mimeTypes = [
    'video/webm;codecs=vp9',
    'video/webm;codecs=vp8',
    'video/webm;codecs=h264',
    'video/mp4;codecs=h264',
  ];
  return mimeTypes.find(mimeType => MediaRecorder.isTypeSupported(mimeType));
}