Create a gist now

Instantly share code, notes, and snippets.

anonymous /html5videocanvas
Created Feb 23, 2012

What would you like to do?
HTML5 video canvas example - rocha.la
/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* See working example at http://rocha.la/fun-with-pixels-html5-video-canvas
*
*/
var canvasVideo = function()
{
var $ = jQuery,
video = document.getElementById('canvasVideo'),
canvas = document.getElementById('canvasVideoCvs'),
backcvs = document.getElementById('canvasVideoBcvs'),
ctx = canvas.getContext('2d'),
bcv = backcvs.getContext('2d'),
w = canvas.width,
h = canvas.height;
var SELECTED_MODE;
video.addEventListener('play', function(){
if (video.currentTime < 5)
{
video.currentTime = 20;
}
switch (SELECTED_MODE)
{
case "cvsbtnBW":
drawBlackWhiteFrame();
break;
case "cvsbtnSephia":
drawSephiaFrame();
break;
case "cvsbtnInvert":
drawInvertColors();
break;
case "cvsbtnPixelate":
drawPixelFrame(4);
break;
case "cvsbtnChannels":
drawTwoChannels();
break;
default:
drawFrame();
break;
}
}, false);
$('.cvsBtnType').click(function() {
SELECTED_MODE = $(this).attr("id");
if (SELECTED_MODE != "canvasPause") { reloadMode(); }
});
$('#canvasPause').click(function(){
video.pause();
});
$('.cvsBtnType').button();
$('#canvasPause').button();
function reloadMode()
{
video.pause();
var wait = setTimeout(function(){
video.play();
}, 5);
}
function drawFrame() {
bcv.drawImage(video, 0, 0, w, h);
var apx = bcv.getImageData(0, 0, w, h);
ctx.putImageData(apx, 0, 0);
if (video.paused || video.ended) {
return;
}
setTimeout(function() {
drawFrame();
}, 0);
}
function drawInvertColors() {
bcv.drawImage(video, 0, 0, w, h);
var apx = bcv.getImageData(0, 0, w, h);
var data = apx.data;
// Loop through the pixels, turning them grayscale
for(var i = 0; i < data.length; i+=4)
{
var r = data[i],
g = data[i+1],
b = data[i+2];
data[i] = 255-r;
data[i+1] = 255-g;
data[i+2] = 255-b;
}
apx.data = data;
ctx.putImageData(apx, 0, 0);
if (video.paused || video.ended) {
return;
}
setTimeout(function() {
drawInvertColors();
}, 0);
}
function drawTwoChannels() {
bcv.drawImage(video, 0, 0, w, h);
var apx = bcv.getImageData(0, 0, w, h);
var data = apx.data;
// Loop through the pixels, turning them grayscale
for(var i = 0; i < data.length; i+=4)
{
var r = data[i],
g = data[i+1],
b = data[i+2];
data[i] = r;
data[i+1] = g;
data[i+2] = g;
}
apx.data = data;
ctx.putImageData(apx, 0, 0);
if (video.paused || video.ended) {
return;
}
setTimeout(function() {
drawTwoChannels();
}, 0);
}
function drawBlackWhiteFrame() {
bcv.drawImage(video, 0, 0, w, h);
var apx = bcv.getImageData(0, 0, w, h);
var data = apx.data;
for(var i = 0; i < data.length; i+=4)
{
var r = data[i],
g = data[i+1],
b = data[i+2],
gray = (r+g+b)/3;
data[i] = gray;
data[i+1] = gray;
data[i+2] = gray;
}
apx.data = data;
ctx.putImageData(apx, 0, 0);
if (video.paused || video.ended) {
return;
}
setTimeout(function() {
drawBlackWhiteFrame();
}, 0);
}
function drawSephiaFrame() {
bcv.drawImage(video, 0, 0, w, h);
var apx = bcv.getImageData(0, 0, w, h);
var data = apx.data;
for(var i = 0; i < data.length; i+=4)
{
var r = data[i],
g = data[i+1],
b = data[i+2];
data[i] = (r * .393) + (g *.769) + (b * .189)
data[i+1] = (r * .349) + (g *.686) + (b * .168)
data[i+2] = (r * .272) + (g *.534) + (b * .131)
}
apx.data = data;
ctx.putImageData(apx, 0, 0);
if (video.paused || video.ended) {
return;
}
setTimeout(function() {
drawSephiaFrame();
}, 0);
}
function drawPixelFrame(blocksize) {
bcv.drawImage(video, 0, 0, w, h);
//apply pixalate algorithm
for(var x = 1; x < w; x += blocksize)
{
for(var y = 1; y < h; y += blocksize)
{
var pixel = bcv.getImageData(x, y, 1, 1);
ctx.fillStyle = "rgb("+pixel.data[0]+","+pixel.data[1]+","+pixel.data[2]+")";
ctx.fillRect(x, y, x + blocksize - 1, y + blocksize - 1);
}
}
if (video.paused || video.ended) {
return;
}
setTimeout(function () {
drawPixelFrame(blocksize);
}, 0);
}
}
jQuery(function(){
canvasVideo();
});

vamp commented Mar 5, 2015

sorry for notice, but why you can't use "filter" css property with video element?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment