Skip to content

Instantly share code, notes, and snippets.

Created February 23, 2012 00:55
Show Gist options
  • Save anonymous/1888841 to your computer and use it in GitHub Desktop.
Save anonymous/1888841 to your computer and use it in GitHub Desktop.
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
Copy link

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