How do I access raw pixel data from an HTML5 video player frame?

Question

I've done some google searches on this but can't seem to find a result on how it's done. I want to experiment with image recognition at it's core, not with a library, and I'm trying to figure out how to access a frame's raw pixel data.

How is it done? I want to view the pixel-grid data structure of a single video frame and run formulas on that raw data, to be clear on what I'm asking. I'm pretty good with JavaScript - I'm not looking for some big tutorial on this, I'm just trying to learn how to access the image data from a video frame. For example what methods are used or what properties exist to access the pixel data.

Answer 1

You can draw the video into a canvas . Then from the canvas, use getImageData . It returns an ImageData object which has adata property. It's a Uint8ClampedArray which contains pixel data in rgba sequence.

Answer 2

You draw the video frames into a html5 canvas, then get the pixels from there using getImageData .

The main source for trouble here is the same origin policy: It will only work if the script and the video are on the same host.

This page has some examples for direct access without a library: http://html5doctor.com/video-canvas-magic/