屏幕录制共享

1.screen流

import {ref} from 'vue'
const videoDom = ref(null)
const startVideo =  async () => {
  // 获得视频流
    const steam = await navigator.mediaDevices.getDisplayMedia({ video: true });

  // const steam = await navigator.mediaDevices.getDisplayMedia({video : true})
  videoDom.value.srcObject = steam
  // 获得数据后回调
  videoDom.value.onloadedmetadata = () => videoDom.value.play()
 // 获取支持类型
 const mine = MediaRecorder.isTypeSupported('video/webm; codecs=vp9')?'video/webm; codecs=vp9' : 'video/webm'
  // 创建媒体记录器
  const mediaRecorder = new MediaRecorder(steam,{
    mineType : mine
  })
  // 存储单位
  const chunks = []
  mediaRecorder.addEventListener('dataavailable',e=>{
    chunks.push(e.data)
  })
  mediaRecorder.addEventListener('stop',() => {
    // 获取视频blob
      const blob = new Blob(chunks, { type: chunks[0].type });
      // 创建url
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'video.webm';
      a.click();
  })
  mediaRecorder.start()
}

2.userCamera流

import {onMounted,ref} from 'vue'
<!-- video作为摄像头dom -->
const videoDom = ref(null)
 <!-- canvas作为获取图片的载体 -->
const canvas = ref(null)

const takePhoto = () => {
  // 获取canvas content对象
  const content = canvas.value.getContext('2d')
  // 将这一帧渲染进canvas，并截图
  content.drawImage(videoDom.value,0,0,videoDom.value.width,videoDom.value.height)
  const url = canvas.value.toDataURL('image/png')
  const a = document.createElement('a');
  a.href = url;
  a.download = 'video.png';
  a.click();
}
onMounted(async()=>{
  // 统一video和canvas的尺寸
  videoDom.value.width = videoDom.value.height = canvas.value.height = canvas.value.width = 400
  const {width,height} = videoDom.value 
  const constraints = {
    video : {
      height,
      width
    }
  }
  //获取媒体流,媒体设备
  const stream = await navigator.mediaDevices.getUserMedia(constraints)
  videoDom.value.srcObject = stream
  videoDom.value.onloadedmetadata = () => videoDom.value.play()
})