vue3 vite 前端录制浏览器界面视频并保存下载

jjw_zyfx2026-08-28 12:17

1、首先需要安装

复制代码

npm install recordrtc

2、在App.vue中作如下修改

js 复制代码

<template>
  <div>
    <button @click="startRecording">开始录屏</button>
    <button @click="stopRecording" v-if="isRecording">停止录屏</button>
    <button v-if="videoBlob" @click="downloadVideo">下载视频</button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import RecordRTC from 'recordrtc';

const isRecording = ref(false);
const recorder = ref(null);
const videoBlob = ref(null);

const startRecording = async () => {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
    recorder.value = new RecordRTC(stream, { type: 'video' });
    recorder.value.startRecording();
    isRecording.value = true;
  } catch (error) {
    console.error('无法获取屏幕媒体流', error);
  }
};
const downloadVideo = () => {
  if (videoBlob.value) {
    const url = URL.createObjectURL(videoBlob.value);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'screen-recording.webm'); // 可以更改文件类型和名称
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
};
const stopRecording = () => {
  if (recorder.value) {
    recorder.value.stopRecording(() => {
      videoBlob.value = recorder.value.getBlob();
      console.log('视频录制完成', videoBlob.value);
      isRecording.value = false;
    });
  }
};
</script>

<style scoped>
</style>