能,但必须用mediarecorder配合getusermedia或getdisplaymedia获取mediastream,不能直接从导出;需检查mimetype兼容性、处理分片、管理流生命周期并正确下载blob。

能,但必须用 MediaRecorder + getUserMedia(或 getDisplayMedia)配合,不能直接从 <video></video> 标签“导出”——它只是播放器,不提供录制能力。
必须先获取媒体流,不能跳过 getUserMedia 或 getDisplayMedia
MediaRecorder 不接受 URL、<video></video> 元素或文件路径,只认 MediaStream 对象。这意味着你得先拿到真实流:
- 录摄像头:用
navigator.mediaDevices.getUserMedia({ video: true, audio: true }) - 录屏幕:用
navigator.mediaDevices.getDisplayMedia({ video: true, audio: false })(注意:Safari 16.4+ 才支持audio: true录系统声音) - 录 canvas 动画:用
canvas.captureStream(30),但帧率需显式指定,否则默认 0(即不触发帧) - 拒绝权限时会抛
NotAllowedError,必须catch,不能靠if判断“有没有流”来绕过
MediaRecorder 初始化时的 mimeType 决定格式兼容性
不指定 mimeType 时浏览器自动选(通常是 video/webm;codecs=vp8),但不同浏览器支持差异大:
- Chrome/Edge:支持
video/webm;codecs=vp9、video/webm;codecs=av1(需 flag)、video/mp4(仅部分版本) - Firefox:只支持
webm系列,vp8最稳,av1需 Firefox 90+ - Safari:iOS 16.4+/macOS 13.3+ 开始支持
video/mp4,但必须传{ mimeType: 'video/mp4' },且不能加 codecs 参数,否则报错 - 务必用
MediaRecorder.isTypeSupported(mimeType)检查,比如MediaRecorder.isTypeSupported('video/mp4')在 Safari 16.3 返回false
录制结束后的 dataavailable 事件不是“一次触发”,而是分片机制
调用 recorder.stop() 后,dataavailable 事件才触发;但如果传了 timeslice(如 recorder.start(1000)),它会在每秒都触发一次,把视频切成多个 Blob 片段:
- 所有片段类型必须一致,否则
new Blob(chunks, { type })合并后可能无法播放(例如混入audio/webm和video/webm) - 移动端(尤其 iOS Safari)容易在后台切换时中断录制,且不触发
stop或error,建议监听visibilitychange主动stop() -
event.data是原始二进制数据,不是 base64,别误用atob()解码 - 合并前检查
chunks.length,为 0 表示没录到任何数据(常见于流未正确连接或权限被拒后静默失败)
下载生成的 Blob 视频文件,URL.createObjectURL 是唯一可行方式
不能用 fetch 或 XMLHttpRequest 生成可下载链接,因为 Blob 是内存对象,没有 URL:
- 必须用
const url = URL.createObjectURL(blob)创建临时引用 -
<a download="recording.webm" href="%24%7Burl%7D"></a>中的download属性在跨域 iframe 或某些 iOS 场景下会被忽略,此时需用a.click()主动触发 - 用完记得
URL.revokeObjectURL(url),否则内存泄漏(尤其反复录制时) - 不要试图把
Blob转成ArrayBuffer再用FileReader读取——纯属多此一举,Blob本身就能下载、上传、播放
最容易被忽略的是流生命周期管理:录制结束后,mediaStream.getTracks().forEach(t => t.stop()) 必须手动执行,否则摄像头灯常亮、麦克风持续采集,用户感知极差;而这个操作常被遗忘在 stop 事件回调之外。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











