requestvideoframecallback适合浏览器端按需采集高质量时间可控帧，非传统关键帧提取工具；它低延迟、高精度、对齐合成管线，优于seek+drawimage方案。
requestVideoFrameCallback 不是用来“提取关键帧”的传统工具，它本身不识别 I 帧或 GOP 结构，而是按视频实际解码帧节奏逐帧回调。但正因它低延迟、高精度、与合成管线对齐，**非常适合在浏览器端按需采集高质量、时间可控的视频帧（包括真正有内容的关键视觉帧）**——尤其适合预览缩略图、动作快照、审核抽帧等场景。
为什么不用 seek + drawImage？
传统方案靠 video.currentTime = t → 等 loadeddata/seeked → drawImage，问题明显：
- seek 是异步且不可靠的：可能停在黑帧、编码边界外、甚至卡住；
- 频繁 seek 会触发大量解码重置，CPU 升高、内存抖动；
- drawImage 调用滞后于实际显示帧，容易多采或漏采，尤其在高帧率视频中；
- 无法保证帧像素数据已就绪，常需额外等待或降级 fallback。
requestVideoFrameCallback 的正确使用姿势
核心思路是：**播放一次视频，用 rVFC 按需“捕获”你真正关心的时刻对应的帧**，而非靠时间戳硬跳。操作分三步：
- 确保视频可播：video 必须已加载元数据（loadedmetadata）、静音（muted）或由用户手势触发（如 click），且设 playsinline（iOS 必需）；
- 设定采样逻辑：例如“每 2 秒取一帧”，或“在检测到运动/人脸时触发 capture”，而不是固定间隔调用；
- 在回调中安全提取像素：用 VideoFrame.copyTo 输出 RGBA，或直接传给 OffscreenCanvas/WebGL，避免主线程阻塞。
实现实时帧采集与保存的关键细节
以下代码片段展示如何在播放中稳定截取 5 张缩略图：
const thumbnails = [];
const targetTimes = [2, 4, 6, 8, 10]; // 秒级目标时刻
let nextIndex = 0;
const captureFrame = (now, metadata) => {
if (nextIndex >= targetTimes.length) return;
const targetSec = targetTimes[nextIndex];
if (video.currentTime >= targetSec - 0.05 && video.currentTime // 此刻最接近目标时间，立即提取
const frame = new VideoFrame(video, {
visibleRect: { x: 0, y: 0, width: video.videoWidth, height: video.videoHeight }
});
const canvas = new OffscreenCanvas(frame.displayWidth, frame.displayHeight);
const ctx = canvas.getContext('2d');
frame.copyTo(ctx.getImageData(0, 0, frame.displayWidth, frame.displayHeight).data, { format: 'rgba' });
thumbnails.push(canvas.transferToImageBitmap());
nextIndex++;
}
video.requestVideoFrameCallback(captureFrame);
};
video.addEventListener('loadedmetadata', () => {
if ('requestVideoFrameCallback' in video) {
video.requestVideoFrameCallback(captureFrame);
}
});
性能与兼容性注意事项
这不是“开箱即用”的 API，几个硬约束必须处理：
- 仅 Chrome 114+、Edge 114+、Firefox 125+ 支持，Safari 当前无计划支持；
- VideoFrame 默认为 YUV420，copyTo({format: 'rgba'}) 触发硬件加速转换，但务必确保目标尺寸匹配 frame.displayWidth/displayHeight（不是 video.videoWidth）；
- 每次使用后必须调用 frame.close()，否则持续占用 GPU 内存；
- 若用于长时间录制或批量抽帧，建议搭配 Web Worker 处理编码（如 Canvas2Image + Blob），避免阻塞渲染主线程。
