HTML5 Video Filters

Is 2014 too early?

Created by giorgio.beggiora@artigianidelweb.it

Objective

Show in a browser a video with the following controls:

• Grayscale
• Brightness
• Contrast
• RGB channels

Looking for an idea

A VIDEO IN A CANVAS

						var videoElement = document.getElementById('myVideo') ;
						var canvasElement = document.getElementById('myCanvas') ;
						var canvasContext = canvasElement.getContext('2d') ;
						
						canvasContext.drawImage(videoElement,0,0,width,height) ; // loop
					

DEMO

WHAT DO WE NEED?

PERFORMANCE!

DEMO'S CODE 1/3

var videoElement = document.getElementById('v'),
    video_width = videoElement.width,
    video_height = videoElement.height,
    canvasElement = document.getElementById('c'),
    canvasContext = canvasElement.getContext('2d'),
    canvas_width = canvasElement.width,
    canvas_height = canvasElement.height,
    hiddenCanvas = (function(){    
        var c = document.createElement('canvas');
        c.width=video_width;
        c.height=video_height;
        return c;
    })(),
    hiddenContext = hiddenCanvas.getContext('2d'),
    filter_grayscale = false
;

DEMO'S CODE 2/3

function draw() {
    requestAnimationFrame(draw);
    if(videoElement.paused || videoElement.ended) return false;
    hiddenContext.drawImage(videoElement, 0, 0, canvas_width, canvas_height);
    var frame = hiddenContext.getImageData(0, 0, canvas_width, canvas_height),
        frameData = frame.data,
        loop_length = frameData.length / 4
    ;
    // NOTE: getImageData = SAME ORIGIN POLICY! USE CORS IF NEEDED
    // image processing:
    // ...
    // :image processing
    canvasContext.putImageData(frame, 0, 0);
}

DEMO'S CODE 3/3

if(filter_grayscale){
    var l = loop_length;
    while(l--) {
        var index_r = l * 4,
            index_g = index_r + 1,
            index_b = index_r + 2,
            gray = (
                frameData[index_r] + frameData[index_g] + frameData[index_b]
            ) / 3
        ;
        frameData[index_r] = gray;
        frameData[index_g] = gray;
        frameData[index_b] = gray;
    }
}

AND NOW, WHAT DO WE NEED?

MORE PERFORMANCE!

TYPED ARRAYS

• ✓ fast! raw access to memory
• ✓ good browser support (IE10 is good enough)
• ✓ IE10 is good enough
• ✓ IE10 is good enough

AND NOW, WHAT DO WE NEED?

MORE PERFORMANCE!

AND NOW, WHAT DO WE NEED?

MORE PERFORMANCE!

THANK YOU

BY

Giorgio . Beggiora @ artigiani del web . it