How to write a Javascript function to get raster data from Html 5 Video Player?

Question

So, I have a simple video tag on an HTML 5 page that plays OGG video. I want to take my RGB colors in an array format (provided that we know the width and height), for the colors of each pixel (from 1.1 to maxWidth, maxHeight), for example {{R: Color, G: Color, B: Color ), {R: Color, G: Color, B: Color}, ...}

Answer 1

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

, , .
canvas canvas.getContext("2d");
drawImage(sourceVideo, dx, dy) . dx dy 0.
, context.getImageData(sx, sy, w, h),
, id.
pixeldata id.data :
`[r, g, b, a, r, g, b, a, r, g, b, a... ..)

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]
   }
}

, !