navigator.mediaDevices.getDisplayMedia指定显示录制当前标签页

<template>

  <div>

    <div class="flex">

      <!-- <el-button class="" @click="startRecording">开始录制</el-button> -->

      <!-- <el-button  class="" @click="stopRecording" :disabled="!isRecording">停止录制</el-button> -->

      <!-- <el-button  class="" @click="seeRecording" :disabled="!isRecording">查看录制</el-button>

      <el-button @click="downloadVideo" v-if="videoURL">下载视频</el-button> -->

      <!-- <a  class="bg-aquablue-def c-white-def lh30 p-w15 m-l10 br5 fs14" v-if="videoURL" :href="videoURL" download="recording.webm">下载视频</a> -->

    </div>

    <el-dialog

    title="查看录像"

    v-model="dialogVisible"

    width="800"

    :before-close="handleClose"

  >

  <audio  v-if="audioURL" :src="audioURL" controls></audio>

  <video class="w-p100 h-p100" v-if="videoURL" :src="videoURL" controls></video>

</el-dialog>

   

   

  </div>

</template>

<script setup>

import { ref } from "vue";

const audioURL=ref('')

const isRecording = ref(false);

const videoURL = ref(null);

const mediaRecorder = ref(null);

const recordedChunks = ref([]);

const dialogVisible=ref(false)

onMounted(() => {

  startRecording()

  console.log('进入页面');

});

 

onBeforeUnmount(() => {

  stopRecording()

  downloadVideo()

  console.log('离开页面');

});

// / 下载视频的函数

function downloadVideo() {

    if (videoURL.value) {

        const link = document.createElement('a');

        link.href = videoURL.value;

        link.download = 'recording.webm'; // 设置下载文件名

        document.body.appendChild(link); // 将链接添加到文档中

        link.click(); // 触发点击事件

        document.body.removeChild(link); // 下载后移除链接

    } else {

        console.error('视频 URL 不存在');

    }

}

const handleClose=()=>{

  dialogVisible.value=false

}

const seeRecording=()=>{

  dialogVisible.value=true

}

const startRecording = async () => {

console.log("开始录制")

  try {

    const stream = await navigator.mediaDevices.getDisplayMedia({

      video: true,

      audio: true, // 录制音频

      preferCurrentTab: true//设置默认窗口为当前标签页

    });

    recordedChunks.value = [];

    mediaRecorder.value = new MediaRecorder(stream);

    mediaRecorder.value.ondataavailable = (event) => {

      if (event.data.size > 0) {

        recordedChunks.value.push(event.data);

      }

    };

    mediaRecorder.value.onstop = async() => {

      const blob = new Blob(recordedChunks.value, { type: "video/webm" });

      videoURL.value = URL.createObjectURL(blob);

      // 释放媒体流

      stream.getTracks().forEach((track) => track.stop());

    };

    mediaRecorder.value.start();

    isRecording.value = true;

  } catch (err) {

    console.error("Error accessing display media.", err);

  }

};

const readFromBlobOrFile = (blob) =>

  new Promise((resolve, reject) => {

    const fileReader = new FileReader();

    fileReader.onload = () => {

      resolve(fileReader.result);

    };

    fileReader.onerror = ({

      target: {

        error: { code },

      },

    }) => {

      reject(Error(`File could not be read! Code=${code}`));

    };

    fileReader.readAsArrayBuffer(blob);

  });

const stopRecording = () => {

  if (mediaRecorder.value) {

    mediaRecorder.value.stop();

    isRecording.value = false;

  }

};

</script>

<style scoped>

/* 添加样式，如果需要 */

</style>