当前位置：首页 > VUE

vue实现录屏

2026-03-10 07:08:26VUE

Vue 实现录屏的方法

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

获取用户屏幕流

使用 navigator.mediaDevices.getDisplayMedia 方法获取屏幕流。该方法会弹出权限请求，用户需要选择共享的屏幕或窗口。

async function getScreenStream() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        mediaSource: 'screen',
      },
      audio: true, // 如果需要录制音频
    });
    return stream;
  } catch (error) {
    console.error('Error accessing screen:', error);
    return null;
  }
}

初始化 MediaRecorder

获取屏幕流后，可以通过 MediaRecorder 录制流数据。

vue实现录屏

function startRecording(stream) {
  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'video/webm', // 录制格式
  });

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

  mediaRecorder.start();
  return mediaRecorder;
}

在 Vue 组件中整合功能

将录屏逻辑封装到 Vue 组件中，方便调用和管理状态。

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

<script>
export default {
  data() {
    return {
      isRecording: false,
      mediaRecorder: null,
      stream: null,
    };
  },
  methods: {
    async startRecording() {
      this.stream = await getScreenStream();
      if (this.stream) {
        this.mediaRecorder = startRecording(this.stream);
        this.isRecording = true;
      }
    },
    stopRecording() {
      if (this.mediaRecorder) {
        this.mediaRecorder.stop();
        this.stream.getTracks().forEach(track => track.stop());
        this.isRecording = false;
      }
    },
  },
};
</script>