可直接用mediarecorder纯前端录制浏览器音视频流生成webm文件；需获取合法媒体流（getusermedia/getdisplaymedia/capturestream）、初始化录制器、收集分片并合并导出。
可以直接用 MediaRecorder 录制浏览器中的音视频流（摄像头+麦克风、屏幕共享、Canvas 动画等），生成 WebM 文件，全程纯前端、无需服务端参与。关键在于获取合法媒体流、正确初始化录制器、收集分片并合并导出。
获取音视频媒体流
根据来源不同，调用对应 API 获取 MediaStream：
- 摄像头+麦克风：
navigator.mediaDevices.getUserMedia({ video: true, audio: true }) - 屏幕共享（含系统音频，需用户手动选择）：
navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }) - Canvas 动画：
canvas.captureStream(30)（推荐设为实际动画帧率，如 30 或 60）
所有方式都必须运行在安全上下文（HTTPS 或 localhost），且需用户明确授权。获取流后，可赋值给 <video></video> 的 srcObject 实现预览。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
创建并启动 MediaRecorder
用获取到的流初始化 MediaRecorder，指定 mimeType: 'video/webm'（最通用、兼容性最好）：
- 推荐写法：
new MediaRecorder(stream, { mimeType: 'video/webm' }) - 避免硬编码不支持的类型（如
video/mp4），可用MediaRecorder.isTypeSupported('video/webm')检测 - 确保流已就绪：检查
stream.getVideoTracks().length > 0（视频）或stream.getAudioTracks().length > 0（音频）
录制与数据收集
录制过程由事件驱动，核心是捕获每个分片 Blob：
- 监听
dataavailable事件，把event.data推入数组（如chunks = []） - 调用
recorder.start()开始；recorder.stop()结束（可绑定按钮或定时器） - 停止后会触发
stop事件，此时确保chunks.length > 0，否则说明未录到有效数据 - 可选：在
stop前调用recorder.requestData()，防止末尾几秒丢失
导出为可下载的 WebM 文件
将所有分片合并为一个 Blob，再生成下载链接：
- 合并：
const blob = new Blob(chunks, { type: 'video/webm' }) - 创建 URL：
const url = URL.createObjectURL(blob) - 构造下载链接：
@#@#@#@#@#@#@#@#@#@0，然后模拟点击 - WebM 文件可在 Chrome、Firefox、Edge、微信内嵌页、PPT 等多数环境直接播放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
