vue共享屏幕功能

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getDisplayMedia

使用方法：https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Capture_API/Using_Screen_Capture#capturing_shared_audio

WebRTC demo：https://mozilla.github.io/webrtc-landing/

<template>

　　<video ref="video" autoplay="true" style="width: 500px; height: 300px"></video>

　　<canvas ref="canvas" style="display: none"></canvas>

</template>

 

<script lang="ts" setup>

　import { onMounted, ref } from 'vue'


  const canvas = ref()
  const video = ref()
  const timer = ref()
 

　onMounted(async () => {

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
}