录带滤镜视频需将滤镜处理置于录制前：摄像头流→video预览→canvas实时绘制+滤镜→capturestream()生成流→mediarecorder录制；注意ios需muted/autoplay/playsinline、固定宽高、loadeddata后绘制、限制滤镜频率、优先用video/webm封装。
要录下带滤镜的视频，关键不是先录再加效果，而是让滤镜处理发生在录制“之前”——即把加好滤镜的 canvas 实时画面作为录制源。整个链路是：摄像头流 → video 元素 → canvas 绘制+滤镜 → captureStream() 生成流 → MediaRecorder 录制。
第一步：获取并预览原始视频流
用 getUserMedia 拿到摄像头权限，把流赋给 <video></video> 元素：
- 必须设置
autoplay、muted和playsinline（尤其 iOS 需要） - 显式写死
width和height（比如640x480），避免 canvas 绘制时因缩放失真 - 监听
loadeddata事件后再开始绘制，否则第一帧可能是黑的
第二步：在 canvas 上实时加滤镜并稳定绘制
创建 <canvas></canvas>，用 requestAnimationFrame 循环绘制 video 帧，并在绘制后立即做像素处理：
- 调用
ctx.drawImage(video, 0, 0, canvas.width, canvas.height) - 用
ctx.getImageData(0, 0, w, h)取出像素数组（Uint8ClampedArray，RGBA 排列） - 遍历每个像素，按需修改 R/G/B 值（如灰度：
avg = (r + g + b) / 3，再赋给三通道） - 用
ctx.putImageData()把处理后的帧写回 canvas - 为防卡顿，可限制处理频率（例如每 2–3 帧处理一次），或对大画布改用 WebGL 加速
第三步：从 canvas 创建可录制的媒体流
调用 canvas.captureStream(fps) 获取 MediaStream：
-
fps是建议帧率（如30），实际取决于绘制节奏 - 务必检查返回值是否非 null（Safari 16.4+ 才支持，旧版需降级为截图合成）
- 验证流中是否有视频轨道：
stream.getVideoTracks().length > 0 - 不推荐设
video/mp4；video/webm全平台稳定，MP4 仅 Chromium 111+ 支持，Firefox 完全不认
第四步：用 MediaRecorder 开始录制
拿到流后初始化 MediaRecorder，注意几个易错点：
- 确保 recorder.state === 'inactive' 再调
start() - 监听
dataavailable收集 Blob 数据块，存入数组 - 停止前调
recorder.requestData()，防止末尾几秒丢失 - 导出时用
new Blob(chunks, {type: 'video/webm'})生成最终文件 - 若需 MP4，只能前端用 ffmpeg.wasm 转封装，但内存开销大、手机端慎用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
