实现真正低延迟视频分析需用 requestVideoFrameCallback，它精准绑定帧提交时机，避免 timeupdate 等事件与渲染脱钩；必须链式重注册、异常捕获、安全提取像素（如 YUV 平面），并做好兼容降级。
能直接拿到解码后的原始帧数据，且比 drawImage + requestAnimationFrame 至少快 1–2 帧——这是实现真正低延迟视频分析的底线条件。
为什么不能只靠 timeupdate 或 waiting/playing 事件
这些事件触发时机和视频帧实际提交到屏幕完全脱钩。比如在 iOS 上播放 HLS 流时，timeupdate 可能在卡顿后仍持续触发；而 waiting 在部分 Android 设备上压根不触发。它们反映的是播放器状态机，不是渲染管线状态。
常见错误现象包括：
- 卡顿检测失效：广告同步错位、加载态始终不显示
- 美颜滤镜“拖影”：处理逻辑滞后于画面，导致特征点跟踪漂移
- 直播状态误判：明明已卡住，UI 还显示“正在流畅播放”
根本原因在于：这些事件不绑定帧提交行为，无法感知浏览器合成器是否真把这一帧推了出去。
requestVideoFrameCallback 的注册必须是链式重入的
它不是一次性监听器，而是单次触发回调。想持续接收帧，必须在回调内部立刻重新调用 video.requestVideoFrameCallback(callback)，否则下一次帧就收不到。
实操要点：
- 首次注册需在
loadeddata或canplay后，避免 video 尚未准备好就调用报错 - 回调中若发生异常（如
VideoFrame转换失败），必须try/catch，否则链式调用中断，后续帧全部丢失 - 不要在回调里做耗时操作（如大图卷积），否则会阻塞合成线程，反而加剧丢帧
典型结构：
const onFrame = (now, metadata) => {
try {
const frame = new VideoFrame(video);
// 分析逻辑（建议尽快释放 frame）
frame.close();
} catch (e) {
console.warn('frame process error', e);
}
// 必须重注册，否则停止接收
video.requestVideoFrameCallback(onFrame);
};
video.requestVideoFrameCallback(onFrame);
拿到 VideoFrame 后怎么安全提取像素数据
VideoFrame 默认是 GPU 纹理引用，不能直接读取像素。要分析就得转成 ImageData 或 ArrayBuffer，但这个过程本身有开销，且受跨域限制。
关键注意事项：
- 必须确保
video元素设置了crossOrigin="anonymous"，否则copyTo()抛SecurityError - 优先用
frame.copyTo(imageBitmap)→createImageBitmap()→getImageData()，比 canvasdrawImage+getImageData快约 30% - 不要重复创建
OffscreenCanvas，复用一个实例并提前调用getContext('2d') - Chrome 114+ 支持
frame.planes直接访问 YUV 平面，省去 RGB 转换，适合纯亮度/运动分析
示例（YUV 平面快速读取）：
if ('planes' in frame && frame.planes.length > 0) {
const yPlane = frame.planes[0];
const yData = new Uint8Array(yPlane.buffer, yPlane.byteOffset, yPlane.byteLength);
// 直接对 yData 做均值/方差/边缘检测等轻量分析
}
兼容性与降级路径必须写死在初始化逻辑里
requestVideoFrameCallback 目前仅 Chrome 114+ / Firefox 125+ 原生支持，Safari 完全不支持。不能只靠 "requestVideoFrameCallback" in HTMLVideoElement.prototype 判断就启用，还要结合 UA 和实际能力探测。
容易被忽略的细节：
- 某些 Chromium 内核浏览器（如 Electron 22）虽支持 API，但
VideoFrame构造函数不可用，需 fallback 到captureStream().getVideoTracks()[0]+getSettings()估算帧率 - 降级时若用
requestAnimationFrame+drawImage，务必加video.readyState === HAVE_ENOUGH_DATA校验，否则频繁黑帧 - 移动端 WebView（尤其安卓 X5）常静默禁用该 API，需在初始化时主动触发一次并检查回调是否执行
真正的难点不在“怎么写”，而在“怎么稳”——帧数据流一旦中断，下游所有分析模块都会失步。所以注册、重入、错误捕获、降级切换，每个环节都得带状态标记和日志埋点，不能只靠 console.log。
