Getting raw data from video

Benchmark created by Ivan Kuckir on

Description

I was wandering what is the fastest way to get raw data (ArrayBufferView) from video element. I am going to do this in 2 ways: - draw video to classic canvas, get data from classic canvas - draw video to webgl canvas, get data from webgl canvas

Preparation HTML

<script>
  var c = document.createElement('canvas');
  c.width = c.height = 512;
  var gl = c.getContext('experimental-webgl');

  var tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);

  var fbo = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  gl.viewport(0, 0, 640, 360);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);

  var video = document.createElement('video');
  video.src = 'http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm';
  
  var typedArray = new Uint8Array(640 * 360 * 4);
  
  var canvas = document.createElement('canvas');
  canvas.width = 640;
  canvas.height = 360;
  var cctx = canvas.getContext('2d');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
via classic canvas
cctx.drawImage(video, 0, 0, 640, 360);
var result = cctx.getImageData(0, 0, 640, 360).data;
ready
via webgl canvas
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
gl.readPixels(0,0, 640,360, gl.RGBA, gl.UNSIGNED_BYTE, typedArray);
var result = typedArray;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Ivan Kuckir on