当前位置：首页 > VUE

vue实现录屏功能

2026-02-21 23:55:57VUE

使用Vue实现录屏功能

录屏功能通常需要借助浏览器的MediaDevices API和MediaRecorder API来实现。以下是实现步骤：

获取屏幕共享权限

使用navigator.mediaDevices.getDisplayMedia方法请求用户授权获取屏幕共享流。该方法返回一个Promise，解析为包含屏幕视频流的MediaStream对象。

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

创建媒体录制器

使用MediaRecorder API来录制获取到的媒体流。可以指定录制格式和编码参数。

function createMediaRecorder(stream, mimeType = 'video/webm') {
  const options = {
    mimeType: mimeType,
    bitsPerSecond: 128000 // 设置比特率
  };

  const mediaRecorder = new MediaRecorder(stream, options);
  const recordedChunks = [];

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

  return {
    recorder: mediaRecorder,
    chunks: recordedChunks
  };
}

开始和停止录制

控制录制过程的开始和结束，并在结束时生成可下载的视频文件。

function startRecording(mediaRecorder) {
  mediaRecorder.start(1000); // 每1秒收集一次数据
  console.log('Recording started');
}

function stopRecording(mediaRecorder, chunks) {
  return new Promise((resolve) => {
    mediaRecorder.onstop = () => {
      const blob = new Blob(chunks, {
        type: 'video/webm'
      });
      const videoUrl = URL.createObjectURL(blob);
      resolve(videoUrl);
    };
    mediaRecorder.stop();
  });
}

在Vue组件中集成

将这些功能封装到Vue组件中，提供开始、停止和下载录屏的界面控制。

vue实现录屏功能

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录屏</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录屏</button>
    <a v-if="videoUrl" :href="videoUrl" download="recording.webm">下载录屏</a>
    <video v-if="videoUrl" :src="videoUrl" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      videoUrl: null,
      mediaRecorder: null,
      recordedChunks: [],
      stream: null
    };
  },
  methods: {
    async startRecording() {
      this.stream = await startScreenCapture();
      if (this.stream) {
        const { recorder, chunks } = createMediaRecorder(this.stream);
        this.mediaRecorder = recorder;
        this.recordedChunks = chunks;
        startRecording(this.mediaRecorder);
        this.isRecording = true;
      }
    },
    async stopRecording() {
      if (this.mediaRecorder) {
        this.videoUrl = await stopRecording(this.mediaRecorder, this.recordedChunks);
        this.isRecording = false;
        this.stream.getTracks().forEach(track => track.stop());
      }
    }
  }
};
</script>