vue共享屏幕功能

let stream = null
try {
    stream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: true
    })
    video.value.srcObject = stream
    dumpOptionsInfo()
    const ctx = canvas.value.getContext('2d')
    // devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率，能够更好还原真实的视频场景
    const ratio = window.devicePixelRatio || 1
    ctx.scale(ratio, ratio)
    // canvas大小与图片大小保持一致，截图没有多余
    canvas.value.width = video.value.offsetWidth * ratio
    canvas.value.height = video.value.offsetHeight * ratio
    timer.value = setInterval(() = > {
        ctx.drawImage(video.value, 0, 0, canvas.value.width, canvas.value.height)
        const imgUrl = canvas.value.toDataURL('image/jpeg')
        console.log('imgUrl: ', imgUrl)
    }, 5000)
} catch (e) {
    console.log(e)
}
// 监控手动关闭屏幕共享
const videoTrack = video.value.srcObject.getVideoTracks()[0]
videoTrack.addEventListener('ended', handleStop)

const dumpOptionsInfo = () = > {
    const videoTrack = video.value.srcObject.getVideoTracks()[0]
    console.info('Track settings:')
    console.info(JSON.stringify(videoTrack.getSettings(), null, 2))
    console.info('Track constraints:')
    console.info(JSON.stringify(videoTrack.getConstraints(), null, 2))
}
const handleStop = () = > {
    clearInterval(timer.value)
    let tracks = video.value.srcObject.getTracks()
    tracks.forEach((track: {
        stop: () = > any
    }) = > track.stop())
    video.value.srcObject = null
}