当前位置：首页 > VUE

vue怎么实现录屏

2026-02-21 15:07:19VUE

Vue 实现录屏的方法

在 Vue 中实现录屏功能通常需要借助浏览器提供的 Web API 或第三方库。以下是几种常见的实现方式：

使用 MediaDevices API 和 MediaRecorder API

通过浏览器的 MediaDevices 和 MediaRecorder API 可以捕获屏幕并录制视频。

// 在 Vue 组件中实现录屏
export default {
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: true,
          audio: true,
        });
        const mediaRecorder = new MediaRecorder(stream);
        const chunks = [];

        mediaRecorder.ondataavailable = (e) => {
          chunks.push(e.data);
        };

        mediaRecorder.onstop = () => {
          const blob = new Blob(chunks, { type: "video/webm" });
          const url = URL.createObjectURL(blob);
          // 可以下载或播放录制的视频
          const a = document.createElement("a");
          a.href = url;
          a.download = "recording.webm";
          a.click();
        };

        mediaRecorder.start();
        this.mediaRecorder = mediaRecorder; // 保存引用以便停止录制
      } catch (err) {
        console.error("Error:", err);
      }
    },
    stopRecording() {
      if (this.mediaRecorder) {
        this.mediaRecorder.stop();
      }
    },
  },
};

使用第三方库 RecordRTC

RecordRTC 是一个功能强大的库，支持录制屏幕、摄像头和音频。

import RecordRTC from "recordrtc";

export default {
  methods: {
    async startRecording() {
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: true,
      });
      this.recorder = new RecordRTC(stream, {
        type: "video",
      });
      this.recorder.startRecording();
    },
    stopRecording() {
      this.recorder.stopRecording(() => {
        const blob = this.recorder.getBlob();
        const url = URL.createObjectURL(blob);
        // 下载或播放录制的视频
        const a = document.createElement("a");
        a.href = url;
        a.download = "recording.webm";
        a.click();
      });
    },
  },
};

使用 HTML5 的 Canvas 捕获

如果需要录制特定的区域（如 Canvas 内容），可以通过 Canvas 捕获帧并生成视频。

export default {
  methods: {
    startCanvasRecording() {
      const canvas = document.getElementById("myCanvas");
      const stream = canvas.captureStream(30); // 30 FPS
      const mediaRecorder = new MediaRecorder(stream);
      const chunks = [];

      mediaRecorder.ondataavailable = (e) => {
        chunks.push(e.data);
      };

      mediaRecorder.onstop = () => {
        const blob = new Blob(chunks, { type: "video/webm" });
        const url = URL.createObjectURL(blob);
        // 下载或播放录制的视频
        const a = document.createElement("a");
        a.href = url;
        a.download = "canvas-recording.webm";
        a.click();
      };

      mediaRecorder.start();
      this.mediaRecorder = mediaRecorder;
    },
    stopCanvasRecording() {
      if (this.mediaRecorder) {
        this.mediaRecorder.stop();
      }
    },
  },
};

注意事项

浏览器兼容性：getDisplayMedia 和 MediaRecorder 在 Chrome、Firefox 和 Edge 中支持较好，但在 Safari 中可能有限制。
用户权限：调用 getDisplayMedia 会触发用户授权，用户需要手动选择共享的屏幕或窗口。
性能：长时间录制可能会占用较多内存，建议分段录制或优化视频质量。

以上方法可以根据实际需求选择，适合在 Vue 项目中实现录屏功能。

vue怎么实现录屏