JavaScript屏幕录制教程：MediaRecorder使用详解

本文详解了如何利用JavaScript的MediaRecorder API结合getDisplayMedia()在浏览器中实现安全、合规的屏幕录制功能，涵盖用户授权触发、跨浏览器兼容性（Chrome/Edge/Firefox支持，Safari暂不支持）、流获取与配置、分段录制与数据收集、视频合并下载等核心步骤，并强调了HTTPS或localhost安全上下文、用户手势触发、资源清理及DRM内容限制等关键注意事项，帮助开发者快速落地实用、稳定的网页端录屏能力。

JavaScript 本身不能直接录制屏幕，但可以通过 MediaRecorder API 配合 getDisplayMedia() 获取屏幕流，实现浏览器内的屏幕录制。这个功能需要用户主动授权，且仅在安全上下文（https 或 localhost）中可用。

获取屏幕媒体流

调用 navigator.mediaDevices.getDisplayMedia() 请求用户选择要共享的屏幕、窗口或标签页。它返回一个 Promise，成功后得到一个 MediaStream 对象：

• 必须在用户手势（如点击按钮）触发的回调中调用，否则会被浏览器阻止
• 可传入约束对象，例如 { video: true, audio: false }（屏幕录制通常不捕获系统音频，Chrome 目前不支持系统音频捕获）
• Firefox 支持捕获窗口音频（需显式设置 audio: true 并选择带声音的源）

创建并启动 MediaRecorder

拿到 stream 后，用它初始化 MediaRecorder 实例：

• const recorder = new MediaRecorder(stream);
• 监听 dataavailable 事件，该事件在每次生成录像片段（Blob）时触发
• 调用 recorder.start() 开始录制；可传毫秒值指定分段时长（如 recorder.start(1000) 每秒触发一次 dataavailable）
• 录制中可通过 recorder.state 查看当前状态（"inactive" / "recording" / "paused"）

处理录制数据与下载

在 dataavailable 事件中收集 Blob，并在停止后合并为完整视频文件：

• 定义数组 let chunks = [];，在 dataavailable 中执行 chunks.push(event.data);
• 监听 stop 事件，用 new Blob(chunks, { type: 'video/webm' }) 合并（注意 MIME 类型需与实际录制格式一致，常见为 video/webm）
• 创建 URL 并触发下载：const url = URL.createObjectURL(blob);，再用 下载
• 记得调用 URL.revokeObjectURL(url) 释放内存

注意事项与兼容性