How to write JavaScript function to obtain bitmap data from HTML 5 Video player?

Question

So I have simple video tag on HTML 5 page playing OGG video. I want to take Its RGB colors in the format of the array (assuming we know width and height) containing colors for each pixel (from pixel 1,1 to maxWidth,maxHeight) like

{{R:Color, G:Color, B:Color}, {R:Color, G:Color, B:Color} ,...}

Answer 1

You can use the HTML5 Canvas element's drawImage function.
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

Basically, you create a canvas with the same size as your video.
Then, you acquire the canvas's context with canvas.getContext("2d");
call the drawImage(sourceVideo, dx, dy) function of the context. dx and dy should both be 0.
Then, get the canvas's imagedata via context.getImageData(sx, sy, w, h);
Store the above image data into a variable, i'll call it id.
Your pixeldata array is stored in id.data in the format:
`[r, g, b, a, r, g, b, a, r, g, b, a... etc]

var canvas = document.createElement("canvas");
canvas.width = video.width;
canvas.height= video.height;

var context= canvas.getContext("2d");
context.drawImage(sourceVideo, 0, 0);
var id = context.getImageData(0,0,video.width, video.height);
for(var y = 0; y < video.height; y++)
{
   for(var x = 0; x < video.width; x++)
   {
      //r = id.data[y*video.width + x + 0]
      //g = id.data[y*video.width + x + 1]
      //b = id.data[y*video.width + x + 2]
      //a = id.data[y*video.width + x + 3]
   }
}

Hope that helps!