当前位置：首页 > VUE

vue实现录屏功能

2026-01-21 08:28:05VUE

Vue 实现录屏功能

在 Vue 中实现录屏功能通常需要结合浏览器的 MediaDevices API 和 Canvas 技术。以下是实现录屏功能的关键步骤。

获取用户屏幕流

使用 navigator.mediaDevices.getDisplayMedia 方法获取屏幕流。该方法会弹出用户授权对话框，允许用户选择要录制的屏幕区域。

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true // 可选，是否录制音频
    });
    return stream;
  } catch (error) {
    console.error('Error accessing screen:', error);
  }
}

创建 MediaRecorder 实例

获取屏幕流后，使用 MediaRecorder API 创建录屏实例并开始录制。

let mediaRecorder;
let recordedChunks = [];

async function startRecording() {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: true
  });

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

停止录制并保存文件

录制完成后，将收集的数据块合并为 Blob 对象，并创建下载链接。

function stopRecording() {
  mediaRecorder.stop();
  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();
    recordedChunks = [];
  };
}

在 Vue 组件中集成

将上述功能封装到 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() {
      try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: true,
          audio: true
        });
        this.mediaRecorder = new MediaRecorder(stream);
        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' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'recording.webm';
        a.click();
        this.recordedChunks = [];
      };
    }
  }
};
</script>