17370845950

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 可直接用于预览或下载。

• 预览：创建 URL.createObjectURL(blob)，赋值给 的 src 属性即可播放
• 下载：创建隐藏的 标签，设置 href 为 blob URL，download 属性指定文件名，然后模拟点击
• 注意：blob URL 需在使用后及时释放，调用 URL.revokeObjectURL(url) 防止内存泄漏

常见问题与注意事项

实际使用中容易遇到权限、兼容性和功能限制问题。

• Chrome 和 Edge 支持最好；Firefox 支持但默认禁用音频；Safari 当前不支持 getDisplayMedia
• 若需录制系统声音，Chrome 无原生方案，需借助桌面应用（如 Electron）或扩展程序注入音频流
• 录制过程中用户切换共享源（如从“整个屏幕”切到“某个窗口”），流会中断，需重新请求
• 建议添加错误处理：监听 recorder.onerror 和 getDisplayMedia().catch()，提示用户操作失败原因