JavaScript怎样实现屏幕录制_JavaScript中MediaRecorder API有哪些功能
JavaScript 可通过 MediaRecorder API 实现浏览器端屏幕录制，核心步骤为：获取屏幕流 → 创建录制器 → 开始录制 → 停止并导出 Blob；需 HTTPS/localhost 环境及用户授权，支持分片、码率控制，但 Safari 不支持，且无法录制系统音频。
JavaScript 可以通过 MediaRecorder API 实现浏览器端的屏幕录制，无需插件或服务器中转，但需用户主动授权屏幕共享权限。核心流程是：获取屏幕媒体流 → 创建 MediaRecorder 实例 → 开始录制 → 停止并导出视频 Blob。
如何用 JavaScript 录制屏幕
关键步骤如下：
- 调用
navigator.mediaDevices.getDisplayMedia()请求屏幕共享权限（注意：仅在安全上下文（HTTPS 或 localhost）中可用） - 将返回的
MediaStream（含视频轨，可选音频轨）传给new MediaRecorder(stream) - 监听
dataavailable事件收集分段Blob，或使用stop()后统一获取最终 Blob - 用
URL.createObjectURL(blob)生成可下载链接，或通过FileReader转为 base64
示例片段：
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });const recorder = new MediaRecorder(stream);
recorder.start();
recorder.ondataavailable = e => { if (e.data.size > 0) chunks.push(e.data); };
recorder.onstop = () => { const blob = new Blob(chunks, { type: 'video/webm' }); };
MediaRecorder API 的主要功能
它提供轻量、标准化的客户端媒体录制能力，支持以下特性：
-
多格式支持：输出类型取决于浏览器和传入流，常见为
video/webm（含 VP8/VP9）或video/mp4（部分 Chromium 支持，需指定 mimeType） -
灵活控制：支持
start()、pause()、resume()、stop()，可分段录制或实时处理 -
事件驱动：提供
start、dataavailable、stop、error等事件，便于状态管理和异常处理 -
可配置编码参数：通过
mimeType和bitsPerSecond控制码率与体积（如new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9', bitsPerSecond: 2_000_000 })）
注意事项和常见限制
实际使用中需留意：
- Chrome/Firefox 支持较好，Safari 对
getDisplayMedia和 MediaRecorder 的支持有限（截至 Safari 17，仍不支持屏幕录制） - 无法直接录制系统音频（如背景音乐），仅能捕获当前标签页播放的音频（需配合
audio: true和mediaDevices.getUserMedia混音，有兼容性风险） - 录制过程若页面被切换或失焦，部分浏览器会自动暂停录制（尤其移动端）
- 大文件录制时建议启用
recorder.start(timeslice)分片，避免内存暴涨
替代方案简述
当 MediaRecorder 不适用时，可考虑：
- 使用
CanvasCaptureMediaStream+requestAnimationFrame手动逐帧捕获画布内容（适合录 Canvas 动画） - 后端方案：通过 WebRTC 将流推送至 SFU/MCU 服务器，由服务端合成录制（如使用 FFmpeg 或 Mediasoup）
- 桌面应用桥接：Electron 或 Tauri 中调用原生 API（如 Windows GDI / macOS AVFoundation）实现更完整控制
