时间戳

首页 > 解决方案 > 检测画布视频中的颜色变化

angular - 检测画布视频中的颜色变化

问题描述

我有一个 Angular 项目，它使用JSMPpeg 库在画布内显示实时流视频。有没有办法在帧更改时添加一些侦听器，可以检测画布特定部分的颜色？基本上，我需要检测流视频上的特定部分何时变为绿色。我注意到 JSMpeg 中有特定的选项：

onVideoDecode(decoder, time) 在每个解码和渲染的视频帧之后调用的回调

可能它应该有助于检测帧变化，但没有成功实现它，我仍然没有关于检测颜色的想法。甚至可能吗？

谢谢

标签： angularcanvasstreamwebgljsmpeg

解决方案

如果它是一个 2d 画布，你可以得到一个像素

const ctx = someCanvas.getContext('2d');
const imgData = ctx.getImageData(x, y, 1, 1);
const [r, g, b] = imgData.data;

如果它是一个 webgl 画布，你可以得到一个像素

const gl = someCanvas.getContext('webgl');
const data = new Uint8Array(4);
// in WebGL y = 0 is bottom of canvas
gl.readPixel(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, data);
const [r, g, b] = data;

在这两种情况下，r、g 和 b 的值都在 0 到 255 之间

因此，您可以检查某些 rgb 范围内的颜色或转换为其他颜色空间

推荐阅读