通过调用getDisplayMedia()获取屏幕流并使用MediaRecorder录制，可实现浏览器端屏幕捕获与本地保存，需注意HTTPS环境、用户主动触发及浏览器兼容性限制。
实现屏幕捕获与录制功能主要依赖浏览器提供的 MediaDevices.getDisplayMedia() 和 MediaRecorder API。这两个API配合使用，可以捕获用户的屏幕内容并进行本地录制。
1. 请求屏幕捕获权限
通过 getDisplayMedia() 方法请求用户授权共享屏幕。与 getUserMedia() 不同，它专门用于捕获屏幕内容。
示例代码：
async function startCapture() {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: false // 屏幕音频可能需要额外权限或系统支持
});
document.getElementById('video').srcObject = stream;
return stream;
} catch (err) {
console.error("屏幕捕获失败:", err);
}
}
2. 使用 MediaRecorder 录制视频流
获取到屏幕流后，使用 MediaRecorder 将其录制为视频文件。
示例代码：
let recorder;
let recordedChunks = [];
function startRecording(stream) {
recordedChunks = [];
recorder = new MediaRecorder(stream);
recorder.ondataavailable = event => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
recorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'screen-recording.webm';
a.click();
};
recorder.start(100); // 每100ms生成一个数据块
}
3. 控制录制的开始与停止
绑定按钮事件来控制录制流程。
document.getElementById('startBtn').onclick = async () => {
const stream = await startCapture();
if (stream) startRecording(stream);
};
document.getElementById('stopBtn').onclick = () => {
if (recorder && recorder.state !== 'inactive') {
recorder.stop();
// 停止所有轨道以释放资源
const tracks = stream.getTracks();
tracks.forEach(track => track.stop());
}
};
4. 注意事项与兼容性
- 必须在 HTTPS 环境下运行，否则 API 无法使用
- 部分浏览器不支持捕获音频（如 Chrome 默认不录系统声音）
- 用户必须主动触发（如点击按钮）才能调用
getDisplayMedia() - Firefox 和 Chrome 支持较好，Safari 部分支持
- 移动端支持有限，通常不可用
getDisplayMedia 和 MediaRecorder，就能实现基础的屏幕录制功能，适合做录屏工具、教学演示等场景。 
