如何利用 requestVideoFrameCallback 实时采集并分析视频帧实现前端滤镜-js教程-PHP中文网

不能。requestvideoframecallback仅提供帧时间戳和元信息，不返回像素数据；需配合offscreencanvas+capturestream()实现滤镜，因setinterval不可控且drawimage会阻塞主线程，而该api与合成器同步、真正每帧一次。

如何利用 requestvideoframecallback 实时采集并分析视频帧实现前端滤镜

requestVideoFrameCallback 能不能直接拿帧数据？

不能。它只提供 video 元素当前渲染帧的元信息（时间戳、metadata），不返回像素数据。想做滤镜，必须配合 OffscreenCanvas + captureStream() + requestVideoFrameCallback 三者协同——前者负责读像素，后者驱动时机，中间层负责流转。

为什么不用 drawImage + setInterval？

setInterval 时间不可控，容易跳帧或重复采样，尤其在页面失焦或低性能设备上
drawImage 同步调用会阻塞主线程，高分辨率视频下明显卡顿
requestVideoFrameCallback 是浏览器原生帧同步机制，与 compositor 步调一致，真正“每帧一次”
必须搭配 OffscreenCanvas 在 worker 中解码+处理，否则仍会阻塞 UI

最小可行滤镜链怎么搭？

核心流程：媒体流 → video 元素 → OffscreenCanvas 拷贝 → Web Worker 中 getImageData → 处理像素 → putImageData → 回传到主屏显示。关键点：

video 必须设 playsinline muted autoplay，且已触发 play()（用户手势后）
调用 requestVideoFrameCallback 前，确保 video.videoWidth > 0，否则回调不触发
OffscreenCanvas 尺寸需与 video 当前尺寸严格一致，否则拉伸失真；建议监听 resize 事件动态重设
Web Worker 中不能访问 document 或 canvas.getContext('2d')，所有绘图操作必须在主线程完成，worker 只做纯计算

示例片段（主线程）：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

const canvas = document.getElementById('filterCanvas').transferControlToOffscreen();
const ctx = canvas.getContext('2d');
<p>video.requestVideoFrameCallback(() => {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 此时可调用 postMessage 把 canvas.getImageData(0,0,w,h) 发给 worker
});</p>