当前位置：首页 > VUE

vue实现录屏

2026-01-18 01:25:24VUE

Vue 实现录屏的方法

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

安装依赖（可选）

如果需要更复杂的录屏功能（如屏幕共享），可以安装 recordrtc 库：

vue实现录屏

npm install recordrtc

获取屏幕流

使用 navigator.mediaDevices.getDisplayMedia 获取屏幕流：

async function getScreenStream() {
  return await navigator.mediaDevices.getDisplayMedia({
    video: { mediaSource: 'screen' },
    audio: true // 可选，是否录制音频
  });
}

录制屏幕

通过 MediaRecorder 录制屏幕流：

vue实现录屏

let mediaRecorder;
let recordedChunks = [];

async function startRecording() {
  const stream = await getScreenStream();
  mediaRecorder = new MediaRecorder(stream);

  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);
    // 下载或播放录制的视频
    const a = document.createElement('a');
    a.href = url;
    a.download = 'recording.webm';
    a.click();
  };

  mediaRecorder.start();
}

停止录制

调用 MediaRecorder.stop() 停止录制：

function stopRecording() {
  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop();
    recordedChunks = [];
  }
}

在 Vue 组件中使用

将上述逻辑封装到 Vue 组件中：

<template>
  <div>
    <button @click="startRecording">开始录屏</button>
    <button @click="stopRecording">停止录屏</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      recordedChunks: []
    };
  },
  methods: {
    async startRecording() {
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: { mediaSource: 'screen' },
        audio: true
      });
      this.mediaRecorder = new MediaRecorder(stream);
      this.mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          this.recordedChunks.push(event.data);
        }
      };
      this.mediaRecorder.onstop = () => {
        const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'recording.webm';
        a.click();
      };
      this.mediaRecorder.start();
    },
    stopRecording() {
      if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
        this.mediaRecorder.stop();
        this.recordedChunks = [];
      }
    }
  }
};
</script>