JavaScript屏幕录制教程：MediaRecorderAPI详解

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript如何实现屏幕录制？MediaRecorder API使用教程》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

JavaScript可通过MediaRecorder API配合getDisplayMedia()实现浏览器内屏幕录制，需用户授权且仅限HTTPS或localhost安全上下文，须在用户手势触发下调用，支持Chrome、Edge、Firefox，Safari暂不支持。

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) 释放内存

注意事项与兼容性