WebCodecs 媒体处理与 OPFS 帧持久化

`title: WebCodecs 媒体处理与 OPFS 帧持久化``categories: Web 开发/前端/数据管理``keywords: WebCodecs,VideoDecoder,帧,OPFS,持久化``description: 使用 WebCodecs 解码媒体并将关键帧持久化到 OPFS，结合索引管理与检索，支持预览与分析场景。`解码与持久化async function decodeAndSave(url) { const res = await fetch(url); const buf = await res.arrayBuffer(); const decoder = new VideoDecoder({ output: async (frame) => { const root = await navigator.storage.getDirectory(); const h = await root.getFileHandle(`frame-${frame.timestamp}.raw`, { create: true }); const w = await h.createWritable(); const data = new Uint8Array(frame.allocationSize ? frame.allocationSize() : 0); // 伪示例 await w.write(data); await w.close(); frame.close(); }, error: console.error, }); decoder.configure({ codec: 'vp09.00.10.08' }); decoder.decode(new EncodedVideoChunk({ type: 'key', timestamp: 0, data: new Uint8Array(buf) })); } 注意WebCodecs 支持需检测；实际数据提取需使用 `VideoFrame` 的 `copyTo` 等方法。