Slit Camera (Web RTC)

HTML

<video id="video"></video>
<canvas id="canvas" width="500" height="500"></canvas>
<div id="intro">Move around slowly in front of your webcam</div>
<div id="error">
    <h2>Web RTC unavailable :(</h2>
    <p>Try <a href="http://google.com/chrome" target="_blank">Chrome</a></p>
</div>

CSS

html, body {
    font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
    padding: 0;
    margin: 0;
}

#video {
    display: none;
}

#intro {
    background: rgba(0,0,0,0.8);
    position: absolute;
    font-size: 11px;
    line-height: 16px;
    padding: 4px 10px;
    opacity: 0.8;
    height: 16px;
    width: 100%;
    color: #fff;
    left: 0;
    top: 0;
}

#error {
    position: absolute;
    padding: 20px;
    display: none;
    left: 0;
    top: 0;
}

JavaScript

/*
 * A little experiment inspired by: http://goo.gl/DsFsL
 * @author Justin Windle
 * @see http://soulwire.co.uk
 */

navigator.getUserMedia =
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia;

window.URL =
    window.URL ||
    window.webkitURL;

var video = document.getElementById( 'video' );
var canvas = document.getElementById( 'canvas' );
var context = canvas.getContext( '2d' );
var sw, sh;
var fov = 1;
var px = 0;

navigator.getUserMedia( { video: true }, function( stream ) { 
  
    video.autoplay = true;
    video.src = window.URL.createObjectURL( stream );
    video.addEventListener( 'loadedmetadata', init );
    video.addEventListener( 'play', draw );
  
}, function(error) {
    console.log(error);
    document.getElementById( 'error' ).style.display = 'block';
});

function init() {
    sw = video.videoWidth;
    sh = video.videoHeight;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function draw() {
    
    var sx = sw * 0.5 - fov * 0.5;
    var dx = px;
    
    context.drawImage( video, sx, 0, fov, sh, dx, 0, fov, canvas.height );
    
    px += fov;
    px = px % canvas.width;
    
    setTimeout( draw, 1000/60 );
}