前端实现录屏功能并下载视频到本地

实现目标

点击录屏，选择录制的窗口，进行录屏，停止共享时，视频自动下载到本地

实现原理

1. 用 navigator.mediaDevices.getDisplayMedia() 来提示用户去选择和授权捕获展示的内容或部分内容
2. 用 MediaRecorder 来进行媒体录制的接口
3. 创建 a 标签来保存录制数据，并且下载

// 1.getDisplayMedia 来源参考 developer.mozilla.org/zh-CN/docs/… // 2.MediaRecorder 来源参考 developer.mozilla.org/zh-CN/docs/…

实现代码

vue3+ts实现

<script setup lang="ts">
// import { ContentWrap } from '@/components/ContentWrap'
import { ref } from 'vue'
// import { MediaRecorder, DisplayMediaStreamConstraints } from 'typescript'

const mediaRecorder = ref<MediaRecorder | null>(null)
const chunks = ref<BlobPart[]>([])

async function startScreenShare() {
  try {
    const stream = (await navigator.mediaDevices.getDisplayMedia({
      video: true
    })) as MediaStream

    const mime = MediaRecorder.isTypeSupported('video/webm;codecs=h264')
      ? 'video/webm;codecs=h264'
      : 'video/webm'

    mediaRecorder.value = new MediaRecorder(stream, { mimeType: mime })

    mediaRecorder.value.addEventListener('dataavailable', (e) => {
      chunks.value.push(e.data)
    })

    mediaRecorder.value.addEventListener('stop', () => {
      const blob = new Blob(chunks.value, { type: chunks.value[0].type })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = 'video.webm'
      document.body.appendChild(a) // 需要先添加到DOM中才能触发点击
      a.click()
      document.body.removeChild(a) // 下载后移除元素
    })

    mediaRecorder.value.start()
  } catch (error) {
    console.error('Error accessing screen share:', error)
  }
}
</script>

<template>
  <!-- <ContentWrap :title="'levelDemo.menu'"> -->
  <BaseButton size="small" type="primary" class="btn mt-2px" @click="startScreenShare"
    >录屏</BaseButton
  >
  <!-- </ContentWrap> -->
</template>

实现效果

可以实现