无需登录 数据私有 本地保存

屏幕捕获演示 - getDisplayMedia API 实时预览

多媒体 开发工具 getDisplayMedia 共享 屏幕捕获 演示
1
0
0
0
屏幕捕获预览

点击下方按钮，选择要共享的屏幕、窗口或标签页

|
就绪 分辨率: -- 帧率: -- 录制中 00:00
提示：点击「开始捕获」后，浏览器会弹出选择窗口，您可以选择整个屏幕、特定窗口或浏览器标签页进行共享。捕获的音频（如系统声音）仅在您勾选"包含音频"时才会被包含。
常见问题与知识点

getDisplayMedia 是 WebRTC 标准中的一部分，属于 Screen Capture API。它允许网页应用捕获用户屏幕、窗口或浏览器标签页的内容，并以视频流（MediaStream）的形式返回。与传统的屏幕共享不同，该 API 需要用户明确选择要共享的内容，确保了隐私安全。它在 Chrome 72+、Edge 79+、Firefox 66+、Safari 13+ 中得到广泛支持。

浏览器弹出的选择器通常提供三种选项：整个屏幕（多显示器时可选具体屏幕）、特定窗口（如某个打开的应用窗口）、浏览器标签页（Chrome/Edge支持）。选择标签页时，浏览器会在该标签页上显示一个共享指示器。您可以根据需要灵活选择，非常适合教程录制、演示展示等场景。
目前 getDisplayMedia API 在移动端的支持非常有限。大多数移动浏览器（包括 iOS Safari 和 Android Chrome）不完全支持屏幕捕获功能。Android 平台部分浏览器可能支持，但体验因设备而异。如果您需要在移动端进行屏幕录制，建议使用系统自带录屏功能。本工具主要在桌面端浏览器上使用。

勾选"包含音频"后，getDisplayMedia 会尝试捕获系统音频（如正在播放的视频声音、系统提示音等）。需要注意：
① 部分浏览器默认不捕获音频，需要用户在权限弹窗中额外确认；
② 捕获的是"输出音频"而非麦克风输入；
③ 预览视频默认静音播放以避免回声，录制文件中会包含音频轨道；
④ Firefox 和 Safari 对音频捕获的支持相对有限。

截图使用 Canvas API，将视频当前帧绘制到 Canvas 上，然后导出为 PNG 格式。截图分辨率与捕获源的实际分辨率一致（通过 video.videoWidth 和 video.videoHeight 获取），不会损失画质。PNG 是无损压缩格式，保留了原始帧的所有细节。截图自动触发浏览器下载，文件名包含时间戳方便管理。

录制使用 MediaRecorder API，输出格式为 WebM（VP8/VP9编码），这是浏览器原生支持的视频编码格式。文件大小取决于录制时长和屏幕内容的复杂度：静态画面（如文档编辑）体积较小，动态内容（如视频播放、游戏）体积较大。粗略估算，1080p分辨率下每分钟约 5-30MB。录制文件可通过 VLC、PotPlayer 等播放器打开，或转换为 MP4 格式。

这取决于捕获类型：
① 捕获整个屏幕：被共享的窗口通常不知道自己在被捕获，但浏览器标签页上会显示共享指示器（如 Chrome 的红色边框或标签页图标变化）；
② 捕获浏览器标签页：该标签页顶部会显示"正在共享"的提示条；
③ 捕获特定窗口：该窗口应用程序层面通常无感知，但操作系统可能显示状态栏图标。

常见原因及解决方法：
① 用户在弹窗中点击了取消 — 这是正常的，重新点击"开始捕获"即可；
② HTTPS 要求 — getDisplayMedia 必须在 HTTPS 环境下使用（localhost 除外）；
③ 浏览器不支持 — 请使用最新版 Chrome、Edge 或 Firefox；
④ 权限被禁止 — 检查浏览器设置中的屏幕录制权限是否被阻止；
⑤ 已有其他应用在捕获 — 同时只能有一个屏幕捕获会话。
🔧 相关工具