<template>  
  <h1>网页实现屏幕的录制</h1>
  <button @click="shareScreen" >开始</button>
</template>

<script setup lang="ts">   
//触发共享桌面
const shareScreen = async () => { 
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: false //不捕获音频
  });
  
  //检查多媒体是否支持videoh264格式
  const mime = MediaRecorder.isTypeSupported("video/webm;codecs=h264") ? "video/webm;codecs=h264" : "video/webm";
  
  //创建媒体流
  const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });
  
  //创建媒体流数组
  const chunks: any[] = [];
  
  //把每一段媒体流传入数组内
  mediaRecorder.addEventListener("dataavailable", function (e:any) {
    chunks.push(e.data);
  });
  
  //媒体流停止的时候做处理
  mediaRecorder.addEventListener("stop", () => {
    const blob = new Blob(chunks, { type: chunks[0].type });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "video.webm";
    a.click();
  });

  //启动媒体流
  mediaRecorder.start();
};
</script>