Get raw pixel data from HTML5 video
canvas, html, video
Solution
Please read
https://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript
Because you don't actually show any code, mention the browser or give out information about the video (resolution, FPS, encoding) it is impossible to tell why your code is slow or why it creating show much garbage. Real-time video effects with Javasrcipt are possible with some resolution constrain.
Here is an Mozilla example of real-time video filtering using .
https://developer.mozilla.org/samples/video/chroma-key/index.xhtml https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
You won't get any raw access to video data without blitting a video frame on `<canvas>` first. However, I believe this operation should be HW accelerated as it happens all in GPU memory. Downloading pixels down from GPU manipulating them in Javascript and then uploading back to the display memory might be the slowest step for high resolution.
Optimization tips
Consider skipping frames (process effects in lower FPS)
Server-side HTML5 video rendering Rendering HTML5 animation server-side?
Problem
I would like to get the raw data (TypedArray or something) from video element and manipulate them with JavaScript. Currently I create a new canvas, draw the video into canvas and then get the image data. ``` ctx.drawImage(myVideo); var data = ctx.getImageData(0, 0, w, h).data; ``` It works fine, but it drains a CPU (putting the video to canvas and copying back from canvas) and it creates a lot of garbage (about 50 MB each second). Is there any other simpler solution? It would be great if I could pass my own buffer to getImageData(...). BTW. drawing video with WebGL and loading it back from GPU is not any faster :( http://jsperf.com/getting-raw-data-from-video