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>
posted @ 2025-01-03 09:52  世界险恶你要内心强大  阅读(335)  评论(0)    收藏  举报