不能。mediarecorder本身不产生媒体流,需配合getdisplaymedia()获取屏幕流,该api需用户手势触发、https环境及iframe显式授权,再通过mediarecorder编码封装分段blob。

MediaRecorder API 能直接录屏幕吗?
不能。浏览器里没有“一键录屏”的 HTML 标签或原生属性,MediaRecorder 本身不产生媒体流,它只负责编码和封装——真正决定“录什么”的是它接收的 MediaStream。所以关键在怎么拿到屏幕画面流。
如何用 getDisplayMedia() 获取屏幕流?
这是目前唯一标准、跨浏览器(Chrome 72+、Edge 79+、Firefox 69+)可用的录屏入口。它会弹出系统级选择框,让用户选窗口、标签页或整个屏幕。
常见错误现象:NotAllowedError(没用户手势触发)、SecurityError(非 HTTPS 或 iframe 未加 allow="display-capture")。
- 必须由用户显式交互触发(如点击按钮),不能 onload 自动调用
- HTTP 站点下
getDisplayMedia()会被静默拒绝,本地file://协议也不行 - 若嵌在 iframe 中,需显式声明:
<iframe allow="display-capture"></iframe> - 可选参数控制质量:
{video: {mediaSource: 'screen', frameRate: 15}},但frameRate是提示值,实际取决于系统负载
MediaRecorder 录制时要注意哪些坑?
拿到 stream 后,MediaRecorder 才真正开始工作。但它对输入流很敏感,尤其屏幕流默认没有音频轨道,容易导致录制无声或格式异常。
- 务必检查流中是否有音轨:
stream.getAudioTracks().length > 0,否则MediaRecorder可能静默失败或生成无声音频流 - 推荐显式指定 mimeType:
new MediaRecorder(stream, {mimeType: 'video/webm;codecs=vp9'}),避免 Chrome 默认用avc1导致 Firefox 播放失败 -
dataavailable事件返回的Blob是分段的,不是完整视频文件;拼接靠前端 JS(如new Blob(chunks))或后端合并,别误以为一次事件就是成品 - 调用
stop()前确保已监听dataavailable,否则最后一段数据可能丢失
为什么录出来的视频卡顿或体积巨大?
屏幕内容变化少,但 VP8/VP9 编码器仍按帧率持续输出关键帧,尤其滚动网页或动画时,编码压力陡增。这不是代码写错了,而是媒体管道的固有特性。
- 降低
frameRate(如设为10)比调分辨率更有效控体积 - 避免同时录制系统音频(
audio: true在getDisplayMedia()中仅 Chrome 支持,且需额外权限,多数场景没必要 - 不要用
canvas.captureStream()替代getDisplayMedia()——它只能捕获单个 canvas,且性能差、不支持跨源 iframe 内容 - 移动端 Safari 完全不支持
getDisplayMedia(),所谓“HTML 屏幕录制”在 iOS 上现阶段就是不可行
真正难的从来不是调几个 API,而是理解流从哪儿来、到哪儿去、中间谁在丢帧、谁在静默拒绝——这些链路一环断,整个录制就停在黑屏或报错里。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











