javascript怎样进行屏幕录制？_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，并在停止后合并为完整视频文件：

星火作家大神

星火作家大神是一款面向作家的AI写作工具

140

查看详情

立即学习“Java免费学习笔记（深入）”；

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

注意事项与兼容性

实际使用中需关注以下几点：

• Chrome、Edge、Firefox 支持较好；Safari 尚未支持 getDisplayMedia
• 录制期间若用户切换到其他标签页或最小化窗口，部分浏览器可能暂停视频轨道（音频不受影响）
• 无法录制受保护内容（如 DRM 视频、某些 iframe 内容）
• 停止录制前务必调用 recorder.stop() 或 stream.getTracks().forEach(t => t.stop()) 清理资源

基本上就这些。不复杂但容易忽略权限和上下文限制，动手前先确保是 https 环境并由用户点击触发。

以上就是javascript怎样进行屏幕录制？_javascript的MediaRecorder API如何使用？的详细内容，更多请关注php中文网其它相关文章！