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，并在停止后合并为完整视频文件：

标签： javascript java 浏览器 edge safari ai stream