jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
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
<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>
Ready to run.
Test | Ops/sec | |
---|---|---|
via classic canvas |
| ready |
via webgl canvas |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.