当前位置：首页 > VUE

vue实现屏幕录像功能

2026-01-22 21:29:02VUE

使用MediaDevices API捕获屏幕

在Vue中实现屏幕录像需要调用浏览器的MediaDevices API获取屏幕流。通过navigator.mediaDevices.getDisplayMedia()方法请求用户授权捕获屏幕内容，该方法返回Promise对象：

async function startCapture() {
  try {
    this.stream = await navigator.mediaDevices.getDisplayMedia({
      video: { displaySurface: "monitor" },
      audio: true
    });
  } catch (err) {
    console.error("Error: " + err);
  }
}

使用MediaRecorder录制视频

获得屏幕流后，创建MediaRecorder实例进行录制。需要监听数据可用事件并将数据存入数组：

function startRecording(stream) {
  this.recorder = new MediaRecorder(stream);
  this.chunks = [];

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

  this.recorder.onstop = this.saveRecording;
  this.recorder.start(1000); // 每1秒收集一次数据
}

保存录制结果

录制停止时，将收集的Blob数据合并为完整视频文件并提供下载：

function saveRecording() {
  const blob = new Blob(this.chunks, { type: "video/webm" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = "recording.webm";
  a.click();

  URL.revokeObjectURL(url);
}

Vue组件集成

将上述功能封装为Vue组件，包含开始/停止按钮和状态显示：

<template>
  <div>
    <button @click="start" :disabled="isRecording">开始录制</button>
    <button @click="stop" :disabled="!isRecording">停止录制</button>
    <p>状态: {{ statusText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stream: null,
      recorder: null,
      chunks: [],
      isRecording: false
    };
  },
  computed: {
    statusText() {
      return this.isRecording ? "录制中..." : "准备就绪";
    }
  },
  methods: {
    async start() {
      await this.startCapture();
      this.startRecording(this.stream);
      this.isRecording = true;
    },
    stop() {
      this.recorder.stop();
      this.stream.getTracks().forEach(track => track.stop());
      this.isRecording = false;
    }
  }
};
</script>