不能直接替代，但它是更精准的选择——requestvideoframecallback严格绑定视频解码帧输出时刻，避免丢帧、重复帧和黑屏问题，而requestanimationframe仅对齐浏览器渲染帧率（约60fps），无法匹配视频真实帧率。
requestVideoFrameCallback 能否替代 requestAnimationFrame 做视频滤镜？
不能直接替代，但它是更精准的选择。requestAnimationFrame 的回调时机由浏览器渲染帧率决定，而 requestVideoFrameCallback 的触发严格绑定到视频解码帧输出时刻——这意味着你不会错过帧、不会处理重复帧、也不会在视频尚未解码完成时强行读取 canvas 内容（常见黑屏或旧帧问题）。
关键区别在于：前者“约等于”60fps，后者“就是视频源的真实帧率”，尤其在 24/30/50/60/120fps 混合内容或硬件加速解码场景下，时间对齐精度差一帧，滤镜延迟感就非常明显。
如何用 requestVideoFrameCallback + OffscreenCanvas 实现零主线程阻塞的滤镜
主线程做图像计算（如卷积、YUV 转 RGB、WebGL 绘制）会卡住视频帧调度。正确路径是把耗时操作卸载到 Worker + OffscreenCanvas：
-
HTMLVideoElement必须设置playsinline和webkit-playsinline（iOS），且需用户手势触发播放，否则requestVideoFrameCallback不会触发 - 在主线程调用
video.requestVideoFrameCallback(callback)，callback 中立即调用video.getVideoPlaybackQuality()可检查是否发生丢帧（droppedVideoFrames > 0） - 用
video.transferControlToOffscreen()创建OffscreenCanvas，再将它传入 Worker；Worker 内通过createImageBitmap(video)或ctx.drawImage(video, ...)获取帧数据 - 滤镜逻辑（如高斯模糊、色相偏移）应在 Worker 的
OffscreenCanvas.getContext('2d')或 WebGL 上执行，完成后调用transferToImageBitmap()回传给主线程绘制
为什么 getVideoPlaybackQuality() 返回的 totalVideoFrames 总是 0？
这个值只在视频已开始播放、且至少触发过一次 requestVideoFrameCallback 后才开始累加。常见误操作：
- 在
video.addEventListener('loadeddata', ...)里就调用getVideoPlaybackQuality()—— 此时视频未解码首帧，返回全 0 - 视频处于
paused状态，requestVideoFrameCallback不会触发，自然无统计 - 使用
MediaStream（如摄像头）时，需确保track.enabled = true且流已连接到video.srcObject，否则部分浏览器（如 Safari）不报告帧数
验证方式：在 callback 第一次执行时打印 getVideoPlaybackQuality()，此时 totalVideoFrames 应 ≥ 1。
Chrome 114+ 下 requestVideoFrameCallback 报错 “NotSupportedError: This element does not support video frame callbacks”
不是浏览器 bug，而是元素状态不满足硬性前提：
-
video.readyState必须 ≥HAVE_CURRENT_DATA（即已有当前帧可播放），仅HAVE_METADATA不够 -
video.videoWidth和video.videoHeight必须 > 0 —— 网络流未出第一帧、或src是无效 blob URL 时这两个值为 0 - 若使用
srcObject，需确认 MediaStreamTrack 处于 live 状态：track.readyState === 'live'，且未被track.stop() - 某些 DRM 视频或受保护的 HLS 流（如 Apple FairPlay）明确禁用该 API，此时只能降级回
requestAnimationFrame+video.currentTime插值估算
最稳妥的调用时机是监听 video 的 playing 事件，在事件回调中首次调用 requestVideoFrameCallback。
真正难的不是调通 API，而是处理不同设备上视频帧到达的抖动——比如安卓低端机解码延迟突增 3 帧，或者 iOS Safari 在后台标签页中暂停回调却不通知。这些边界情况没法靠单个 API 解决，得靠 performance.now() 记录帧时间戳 + 滑动窗口平滑帧间隔来动态调整滤镜 pipeline 的缓冲策略。
