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` 等方法。