Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An HTML5 Video Transformation Example for Benchmarking
<html>
<head>
<title>Video Transformation Benchmarking</title>
<script type="text/javascript" src="benchmark.js"></script>
</head>
<body>
<video id="video" src="myMovie.m4v">
</video>
<canvas id="canvas1">
</canvas>
<canvas id="canvas2">
</canvas>
<script type="text/javascript">
benchmark.register();
</script>
</body>
</html>
var benchmark = {
'video': null,
'videoWidth': null,
'videoHeight': null,
'canvas1': null,
'context1': null,
'canvas2': null,
'context2': null,
'register': function register() {
this.video = document.getElementById("video");
this.canvas1 = document.getElementById("canvas1");
this.context1 = this.canvas1.getContext("2d");
this.canvas2 = document.getElementById("canvas2");
this.context2 = this.canvas2.getContext("2d");
this.video.addEventListener("loadeddata", function loadedData() {
benchmark.videoWidth = this.videoWidth;
benchmark.videoHeight = this.videoHeight;
benchmark.canvas1.width = benchmark.videoWidth;
benchmark.canvas1.height = benchmark.videoHeight;
benchmark.canvas2.width = benchmark.videoWidth;
benchmark.canvas2.height = benchmark.videoHeight;
this.addEventListener("play", benchmark.monitor, false);
});
},
'monitor': function monitor() {
if (benchmark.video.paused || benchmark.video.ended) {
return;
}
benchmark.processFrame();
// call this function again immediately to get the next frame
setTimeout(benchmark.monitor, 0);
},
'processFrame': function processFrame() {
this.context1.drawImage(this.video, 0, 0);
/* console.log('width: ' + this.videoWidth); */
/* console.log('height: ' + this.videoHeight); */
var frame = this.context1.getImageData(0, 0, this.videoWidth, this.videoHeight);
var l = frame.data.length / 4;
// invert colors one pixel at a time
for (var k = 0; k < l; k ++) {
frame.data[k * 4] = 255 - frame.data[k * 4]; // red
frame.data[k * 4 + 1] = 255 - frame.data[k * 4 + 1]; // green
frame.data[k * 4 + 2] = 255 - frame.data[k * 4 + 2]; // blue
// ignore the alpha channel
}
this.context2.putImageData(frame, 0, 0);
}
};
@pr1001

This comment has been minimized.

Copy link
Owner Author

pr1001 commented Jun 4, 2010

In Chrome 5.0.375.55 for OS X there appears to be little performance degradation from having to use an intermediate canvas element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.