<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀏覽器錄屏與播放</title>
</head>
<body>
<!-- 開始錄制按鈕 -->
<button id="startRecord">開始錄制</button>
<!-- 停止錄制按鈕 -->
<button id="stopRecord" disabled>停止錄制</button>
<!-- 播放錄制視頻的視頻元素 -->
<video id="recordedVideo" controls autoplay style="height: 500px;width: 800px;"></video>
<script >
// 獲取 DOM 元素
const startRecordButton = document.getElementById('startRecord');
const stopRecordButton = document.getElementById('stopRecord');
const recordedVideo = document.getElementById('recordedVideo');
// 存儲錄制的視頻數據塊
let mediaRecorder;
let recordedChunks = [];
// 請求屏幕共享流
async function getScreenStream() {
try {
// 請求獲取屏幕和音頻流
return await navigator.mediaDevices.getDisplayMedia({
video: {
width: { ideal: 1920 },
height: { ideal: 1080 },
frameRate: { ideal: 30 }
},
audio: true
}).then(stream => {
let videoTrack = stream.getVideoTracks()[0];
console.log(videoTrack)
document.getElementById('recordedVideo').srcObject = stream;
return stream;
})
} catch (error) {
console.error('無法獲取屏幕共享流:', error);
return null;
}
}
// 開始錄制
async function startRecording() {
const stream = await getScreenStream();
// if (stream) {
// // 創建 MediaRecorder 實例
// mediaRecorder = new MediaRecorder(stream);
// // 監聽數據可用事件，將數據塊添加到 recordedChunks 數組
// mediaRecorder.ondataavailable = (event) => {
// if (event.data.size > 0) {
// recordedChunks.push(event.data);
// }
// };
// // 監聽錄制停止事件，將數據塊合并成 Blob 并展示在視頻元素中
// mediaRecorder.onstop = () => {
// const blob = new Blob(recordedChunks, { type: 'video/webm' });
// recordedChunks = [];
// const url = URL.createObjectURL(blob);
// recordedVideo.src = url;
// };
// // 開始錄制
// mediaRecorder.start();
// startRecordButton.disabled = true;
// stopRecordButton.disabled = false;
// }
}
// 停止錄制
function stopRecording() {
if (mediaRecorder && mediaRecorder.state!== 'inactive') {
mediaRecorder.stop();
startRecordButton.disabled = false;
stopRecordButton.disabled = true;
}
}
// 綁定按鈕事件
startRecordButton.addEventListener('click', startRecording);
stopRecordButton.addEventListener('click', stopRecording);
</script>
</body>
</html>
浙公網安備 33010602011771號