WASM 媒体处理：音视频编解码、转码与滤镜

□ 服务器转码：延迟高 + 带宽贵 + 数据出域
□ 原生 App 转码：每平台单独开发、分发更新难
□ WASM 转码：浏览器内原生态 FFmpeg、跨平台、零安装
→ 适合：剪辑工具、格式转换器、封面生成、隐私敏感处理

import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';
const ffmpeg = new FFmpeg();
await ffmpeg.load({ coreURL: '.../@ffmpeg/core/umd/ffmpeg-core.js',
  wasmURL: '.../@ffmpeg/core/umd/ffmpeg-core.wasm' });

// 输入写入虚拟 FS（MEMFS）→ 转码（参数同 CLI）→ 读出
const input = await fetchFile(videoBlob);
await ffmpeg.writeFile('input.mp4', input);
await ffmpeg.exec(['-i', 'input.mp4', '-c:v', 'libx264', '-c:a', 'aac', 'output.mp4']);
const out = await ffmpeg.readFile('output.mp4');   // Uint8Array → Blob

// WebCodecs 解码一帧（示意）
const decoder = new VideoDecoder({ output: (frame) => draw(frame) });
decoder.configure({ codec: 'vp09.00.10.08', codedWidth: 1920, codedHeight: 1080 });
decoder.decode(encodedChunk);   // EncodedVideoChunk

// MP4(H.264) → WebM(VP9)
await ffmpeg.exec(['-i', 'input.mp4', '-c:v', 'libvpx-vp9', '-b:v', '0', '-crf', '30', 'output.webm']);
// 转码矩阵：H.265=-c:v libx265 -crf 28；GIF=-vf fps=10,scale=480:-1；抽音频=-vn -c:a libmp3lame

// 取第 2 秒一帧做封面
await ffmpeg.exec([
  '-i', 'input.mp4',
  '-ss', '00:00:02', '-frames:v', '1',
  '-q:v', '2', 'thumb.jpg'
]);

// 滤镜链：缩放 + 裁剪 + 旋转
await ffmpeg.exec(['-i', 'input.mp4', '-vf',
  'scale=1280:720,crop=640:360:0:0,rotate=90*PI/180', '-c:a', 'copy', 'output.mp4']);
// 加水印：-i logo.png + -filter_complex [0:v][1:v]overlay=10:10

□ 抽帧：-vf fps=30 frame_%04d.png
□ 处理：每帧在 canvas/worker 里改（绘图、加标注）
□ 拼回：-framerate 30 -i frame_%04d.png -c:v libx264 out.mp4

// core-mt + 多线程转码
const ffmpeg = new FFmpeg();
await ffmpeg.load({
  coreURL: '.../@ffmpeg/core-mt/.../ffmpeg-core.js',
  wasmURL: '.../@ffmpeg/core-mt/.../ffmpeg-core.wasm',
});
ffmpeg.setLogging(true);
await ffmpeg.exec(['-i', 'input.mp4', '-threads', '4', '-c:v', 'libx264', 'out.mp4']);

宿主页必须加：
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
→ 否则 SharedArrayBuffer 不可用，多线程直接失败

□ MEMFS 全量进内存：一个 2GB 视频 → 2GB WASM 堆，直接 OOM
□ 输入 + 中间帧 + 输出三份拷贝：峰值可达输入数倍
□ 线性内存上限：WASM 默认 2GiB（可 ALLOW_MEMORY_GROWTH）
→ 大文件必须走「流式/分块」，不能整文件喂给 MEMFS

方案 A：抽帧流式——只把需要的帧送进 WASM
  fetch 视频 → 按字节范围读 chunk → 送 VideoDecoder → 帧级处理
方案 B：分段转码——把视频切成 N 段，逐段进 ffmpeg.wasm，最后合并
  → 单段内存可控，可并行，可用 Web Worker 分摊
方案 C：只处理元数据/首帧——thumbnail 只需下载头部字节范围

// 用 Range 请求分段（伪代码），单段内存可控、可并行
const SEG = 10 * 1024 * 1024;
for (let start = 0; start < total; start += SEG) {
  const buf = await fetch(url, { headers: { Range: `bytes=${start}-${start+SEG-1}` } });
  await ffmpeg.writeFile(`seg_${i}.ts`, new Uint8Array(await buf.arrayBuffer()));
  await ffmpeg.exec(['-i', `seg_${i}.ts`, '-c:v', 'copy', `seg_${i}.out.ts`]);
}
// 最后 concat 合并：ffmpeg -f concat -safe 0 -i list.txt out.mp4

□ WebGPU 适合：滤镜（模糊/锐化/调色）、缩放、叠加、颜色转换
□ 不适合：编码器本身（编码走 WebCodecs/硬件，或继续 CPU）
□ 典型管线：解码（WebCodecs/ffmpeg）→ 帧入 WebGPU 纹理 → GPU 滤镜 → 回读帧 → 编码
// WebGPU 示例：device.createTexture(...) → 拷入 VideoFrame → compute/shader → 回读

# 编译 ffmpeg 到 wasm32-wasi（裁剪组件）
clang --target=wasm32-wasi -O2 -c ffmpeg 相关源码 -o ffmpeg.wasm
# 边缘 Worker：/convert?url=...&fmt=webm → 取源流 → 现场转码 → 返回

边缘媒体处理价值：
□ 降源站带宽：转码结果就近缓存（CDN 缓存命中率高）
□ 低延迟：用户 → 边缘节点就近处理，不回源中心
□ 动态适配：按设备/网络现场选编码与码率
□ 注意：边缘节点内存/CPU 配额有限，只适合小文件与轻量处理