JavaScript屏幕录制依赖getDisplayMedia获取屏幕流、MediaRecorder录制，需用户手势触发并处理兼容性与权限问题。
JavaScript 实现屏幕录制主要依靠 MediaStream API 中的 navigator.mediaDevices.getDisplayMedia() 方法，它能获取用户当前屏幕（或窗口、标签页）的视频流，再结合 MediaRecorder 进行录制。整个过程不依赖第三方库，但需注意浏览器兼容性与用户授权逻辑。
获取屏幕媒体流（getDisplayMedia）
这是屏幕录制的第一步，用于弹出系统级选择框，让用户决定要共享哪部分内容（整个屏幕、单个窗口、浏览器标签页等）。
- 调用
navigator.mediaDevices.getDisplayMedia({ video: true })，返回一个 Promise，成功后得到一个MediaStream对象 - 必须在用户手势（如点击按钮）触发下调用，否则会被浏览器拒绝（安全限制）
- 可选配置项包括：
video: { cursor: "always" | "motion" | "never" }控制鼠标指针是否显示；audio: true在部分浏览器（如 Edge）中支持捕获系统音频，但 Chrome 不支持（需另配音频流）
录制媒体流（MediaRecorder）
拿到 MediaStream 后，用 MediaRecorder 实例开始录制，它会将音视频数据按指定格式（如 video/webm）分块输出为 Blob。
- 创建实例：
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' }); - 监听
dataavailable事件，每次触发时拿到一个Blob片段，可暂存到数组中：chunks.push(event.data); - 调用
recorder.start()开始录制，recorder.stop()停止（也会触发最后一次dataavailable） - 录制结束后，用
new Blob(chunks, { type: 'video/webm' })合并所有片段，生成完整视频文件
播放与下载录制结果
录制完成的 Blob 可直接用于预览或下载。
立即学习“Java免费学习笔记（深入）”；
- 预览：创建
URL.createObjectURL(blob)，赋值给的src属性即可播放 - 下载：创建隐藏的
标签，设置href为 blob URL，download属性指定文件名，然后模拟点击 - 注意：blob URL 需在使用后及时释放，调用
URL.revokeObjectURL(url)防止内存泄漏
常见问题与注意事项
实际使用中容易遇到权限、兼容性和功能限制问题。
- Chrome 和 Edge 支持最好；Firefox 支持但默认禁用音频；Safari 当前不支持
getDisplayMedia - 若需录制系统声音，Chrome 无原生方案，需借助桌面应用（如 Electron）或扩展程序注入音频流
- 录制过程中用户切换共享源（如从“整个屏幕”切到“某个窗口”），流会中断，需重新请求
- 建议添加错误处理：监听
recorder.onerror和getDisplayMedia().catch()，提示用户操作失败原因
