MediaRecorder：把实时媒体流封装成文件
captureStream、Chunk、Blob 与录制状态
录制一个程序生成的 Canvas 媒体流，收集数据块并生成可回放、可下载的 WebM 文件。
先明确本课目标
从 Canvas 创建 MediaStream
收集 dataavailable Chunk
处理 start、stop 与 MIME 能力检测
MediaRecorder 像一台面向 MediaStream 的录像机：Track 持续送入帧，Recorder 编码并周期性吐出 Chunk，最后由 Blob 封装。
为什么录制结果要先收集 Chunk？
MediaRecorder 在录制过程中异步编码 MediaStream，并通过 dataavailable 事件交付一个或多个 Blob 片段；停止后再组合可得到完整结果。
javascriptconst chunks = [];
const recorder = new MediaRecorder(stream);
recorder.ondataavailable = ({ data }) => {
if (data.size) chunks.push(data);
};
recorder.onstop = () => {
const recording = new Blob(chunks, { type: recorder.mimeType });
video.src = URL.createObjectURL(recording);
};
recorder.start(1000);- 准备片段数组 每次 dataavailable 都可能交付一个新的编码片段。
- 设置 timeslice start 参数可要求浏览器周期性产生 Chunk，时间并非严格保证。
- 停止后封装 用 Recorder 实际 mimeType 创建 Blob，再生成回放 URL。
一段实时媒体流被转成浏览器可回放的录制文件，同时保留分片上传的可能。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
把摄像头 Track 与 Web Audio 处理后的音频 Track 合并成一段录制。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
核心讲解
录制输入永远是流
MediaRecorder 接受 MediaStream，因此摄像头、麦克风、Canvas 捕获或组合 Track 都能走同一录制流程。
Chunk 不是立即可播放的承诺
dataavailable 提供编码数据片段，通常在 stop 后组合成 Blob。具体 MIME 与 Codec 必须通过 isTypeSupported 检测。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
MediaRecorder 交付完整录制流程，WebCodecs 交付可组合的底层编码零件。
WebGL
WebCodecs 直接接收 VideoFrame/AudioData，允许精确控制队列、时间戳和编码配置。
WebGPU
Recorder 直接接收 MediaStream，处理编码细节并输出可组合的 Blob Chunk。
常规录制优先 MediaRecorder；只有帧级控制成为核心需求时才下沉到 WebCodecs。