<template>  
  <h1>網(wǎng)頁實現(xiàn)屏幕的錄制</h1>
  <button @click="shareScreen" >開始</button>
</template>

<script setup lang="ts">   
//觸發(fā)共享桌面
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";
  
  //創(chuàng)建媒體流
  const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });
  
  //創(chuàng)建媒體流數(shù)組
  const chunks: any[] = [];
  
  //把每一段媒體流傳入數(shù)組內(nèi)
  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>