HTML5 提供了 MediaRecorder API 来实现录屏功能。以下是一个简单的例子，展示如何使用 MediaRecorder 来录制视频：
<!DOCTYPE html>
<html>
<head>
<title>Media Recorder Example</title>
</head>
<body>
<button id="start-recording">开始录制</button>
<button id="stop-recording" disabled>停止录制</button>
<button id="download-recording" disabled>下载录制</button>
<script>
const startRecordingButton = document.getElementById('start-recording');
const stopRecordingButton = document.getElementById('stop-recording');
const downloadButton = document.getElementById('download-recording');
let mediaRecorder;
let recordedBlobs;
startRecordingButton.addEventListener('click', () => {
navigator.mediaDevices.getDisplayMedia({ video: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
recordedBlobs = [];
mediaRecorder.ondataavailable = event => {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
};
mediaRecorder.start();
stopRecordingButton.disabled = false;
console.log('Recording started');
})
.catch(error => console.error('Error:', error));
});
stopRecordingButton.addEventListener('click', () => {
mediaRecorder.stop();
stopRecordingButton.disabled = true;
console.log('Recording stopped');
});
mediaRecorder.onstop = () => {
const superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });
downloadButton.href = URL.createObjectURL(superBuffer);
downloadButton.download = 'recording.webm';
downloadButton.disabled = false;
};
</script>
</body>
</html>这段代码中，我们首先获取屏幕媒体流，然后创建 MediaRecorder 实例来录制视频。录制开始和结束时相关按钮会被禁用或启用。录制停止时，录制的视频会被保存到一个 Blob 中，并可以通过创建一个临时的 URL 并设置下载链接来进行下载。