html5のvideoタグからcanvasに画像を出力して遊ぶ【JavaScript】 ref: http://qiita.com/sy_sft_/items/fc428f341a8c321b4095

index.html

<video id='world' width="256" height="256" autoplay></video>
<canvas id="canvas"></canvas>
<button onClick="start()">start</button>
<button onClick="stop()">stop</button>
<button id="draw">set canvas</button>

index.js

var video = document.getElementById("video");

document.getElementById("draw").onclick = function(){
    try{
        drawVideo();
    }catch(e){
        alert(e);
    }
};


var localstream;

/*webカメラを起動する*/
function start() {
    if (navigator.webkitGetUserMedia) {

        navigator.webkitGetUserMedia({
            audio: false,
            video: true
        }, function(stream) {
            localstream = stream;
            console.dir(stream.getVideoTracks()[0]);
            var url = window.webkitURL.createObjectURL(stream);
            video.src = url;
        }, function(error) {});

    } else if (navigator.mozGetUserMedia) {

        navigator.mozGetUserMedia({
            video: true
        }, function(stream) {
            video.mozSrcObject = stream;
            video.play();
            streaming = true;
        }, function(err) {
            alert("An error occured! " + err);
        });

    } else if (navigator.getUserMedia) {
        navigator.getUserMedia("audio, video", success, error);
    }
}


/*canvasにvideoを展開*/
function drawVideo(){
    var video = document.getElementById("video");
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.drawImage(video, 0, 0, 260, 260);
}

/*videoをstop*/
function stop() {
    if (video.mozSrcObject) {
        xvideo.pause();
        video.mozSrcObject = null;
    } else {
        if (localstream) {
            localstream.stop();
        }
    }
}