通过调用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，就能实现基础的屏幕录制功能，适合做录屏工具、教学演示等场景。
以上就是如何利用浏览器API实现屏幕捕获与录制功能？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523376.html
微信扫一扫 
支付宝扫一扫 
