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)，赋值给<video></video>的src属性即可播放 - 下载：创建隐藏的
<a></a>标签，设置href为 blob URL，download属性指定文件名，然后模拟点击 - 注意：blob URL 需在使用后及时释放，调用
URL.revokeObjectURL(url)防止内存泄漏
常见问题 与注意事项
实际使用中容易遇到权限、兼容性和功能限制问题。
- Chrome 和 Edge 支持最好；firefox 支持但默认禁用音频；safari 当前不支持
getDisplayMedia - 若需录制系统声音，Chrome 无原生方案，需借助桌面应用（如 electron）或扩展程序注入音频流
- 录制过程中用户切换共享源（如从“整个屏幕”切到“某个窗口”），流会中断，需重新请求
- 建议添加错误处理：监听
recorder.onerror和getDisplayMedia().catch()，提示用户操作失败原因
