Detect color change inside canvas video

Question

I have an Angular project, which uses JSMPpeg library for displaying live-stream video inside canvas. Is there any way to add some listener on frame change, which could detect color on specific part of the canvas? Basically, I need to detect when specific part on the stream video becomes green. I have noticed that there's specific option in JSMpeg:

onVideoDecode(decoder, time) A callback that is called after each decoded and rendered video frame

Probably it should help with detecting frame change, but haven't succeed on implementing it and I still have no ideas about detecting color. Is it even possible?

Thanks

Answer 1

If it's a 2d canvas you can get a pixel with

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

if it's a webgl canvas you can get a pixel with

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;

in both cases r, g, and b will be in values from 0 to 255

So you can either check for colors in some rgb range or convert to some other color space