Vue3中使用MediaRecorder接口进行视频录制

<template>
    <button @click="handleScreenRecording">录制</button>
</template>

<script setup>
import { ref } from 'vue'

const videoChunks = ref([])
const mediaRecorder = ref(null)

// 屏幕录制
const handleScreenRecording = async () => {
    if (!navigator.mediaDevices.getUserMedia) return
    try {
        // 提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）
        const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })
        // 录制格式,判断限制选项中设定的参数是否支持
        const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=h264') ? 'video/webm;codecs=h264' : ''
        if (!mimeType) return
        mediaRecorder.value = new MediaRecorder(stream, { mimeType })
        // 保存数据(数据有效)
        mediaRecorder.value.addEventListener('dataavailable', (e) => {
            videoChunks.value.push(e.data)
        })
        // 停止录制
        mediaRecorder.value.addEventListener('stop', () => {
            blobToFileSave(videoChunks.value)
            mediaRecorder.value = null
            videoChunks.value.length = 0
        })
        // 暂停录制
        mediaRecorder.value.addEventListener('pause', () => {
            console.log('暂停录制')
        })
        // 恢复录制
        mediaRecorder.value.addEventListener('resume', () => {
            console.log('恢复录制')
        })
        // 录制错误
        mediaRecorder.value.addEventListener('error', (err) => {
            console.log(err)
        })
        // 开始录制
        mediaRecorder.value.start()
    } catch (error) {
        console.log('选择和授权error', error)
    }
}

// 将blob数据转化为mp4格式，并保存到本地
const blobToFileSave = (blobData, type = 'video/mp4') => {
    const blob = new Blob(blobData, { type })
    const uri = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    document.body.appendChild(a)
    a.style.display = 'none'
    a.href = uri
    a.download = +new Date() + '.mp4'
    // 下载文件
    a.click()
    // 释放内存
    window.URL.revokeObjectURL(uri)
    document.body.removeChild(a)
}

</script>