当前位置：首页 > VUE

vue实现屏幕录像功能

2026-02-23 12:14:08VUE

实现屏幕录像功能的方法

在Vue中实现屏幕录像功能，可以使用浏览器的MediaDevices API和MediaRecorder API。以下是具体实现步骤：

获取屏幕共享权限

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

async function startScreenCapture() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        displaySurface: 'window', // 或 'screen'/'browser'
        width: { ideal: 1920 },
        height: { ideal: 1080 }
      },
      audio: true // 如果需要录制音频
    });
    return stream;
  } catch (err) {
    console.error('Error accessing screen:', err);
    return null;
  }
}

创建录像器实例

获取到视频流后，创建MediaRecorder实例来录制屏幕内容。

function createRecorder(stream, mimeType = 'video/webm') {
  const options = { mimeType };
  const mediaRecorder = new MediaRecorder(stream, options);
  const recordedChunks = [];

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

  return { mediaRecorder, recordedChunks };
}

控制录像过程

提供开始、暂停、继续和停止录像的控制方法。

// 开始录像
function startRecording(mediaRecorder) {
  mediaRecorder.start(1000); // 每1秒收集一次数据
}

// 暂停录像
function pauseRecording(mediaRecorder) {
  mediaRecorder.pause();
}

// 继续录像
function resumeRecording(mediaRecorder) {
  mediaRecorder.resume();
}

// 停止录像
function stopRecording(mediaRecorder) {
  return new Promise((resolve) => {
    mediaRecorder.onstop = resolve;
    mediaRecorder.stop();
  });
}

保存录像文件

录像结束后，将收集的视频数据合并并下载为文件。

function saveRecording(recordedChunks, filename = 'recording.webm') {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
  }, 100);
}

在Vue组件中的实现

将这些功能封装到Vue组件中，提供用户界面控制。

<template>
  <div>
    <button @click="start">开始录制</button>
    <button @click="pause" :disabled="!isRecording">暂停</button>
    <button @click="resume" :disabled="!isPaused">继续</button>
    <button @click="stop" :disabled="!isRecording">停止并保存</button>
    <video ref="preview" autoplay muted></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stream: null,
      mediaRecorder: null,
      recordedChunks: [],
      isRecording: false,
      isPaused: false
    };
  },
  methods: {
    async start() {
      this.stream = await startScreenCapture();
      if (!this.stream) return;

      this.$refs.preview.srcObject = this.stream;
      const { mediaRecorder, recordedChunks } = createRecorder(this.stream);
      this.mediaRecorder = mediaRecorder;
      this.recordedChunks = recordedChunks;

      startRecording(this.mediaRecorder);
      this.isRecording = true;
    },
    pause() {
      pauseRecording(this.mediaRecorder);
      this.isPaused = true;
    },
    resume() {
      resumeRecording(this.mediaRecorder);
      this.isPaused = false;
    },
    async stop() {
      await stopRecording(this.mediaRecorder);
      saveRecording(this.recordedChunks);

      this.stream.getTracks().forEach(track => track.stop());
      this.$refs.preview.srcObject = null;
      this.isRecording = false;
      this.isPaused = false;
    }
  }
};
</script>