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>
正道的光终将来临,当太阳升起的时候,光芒总会普照大地温暖人间。些许的阴霾也终会有被阳光洒满的一天