html5のvideoタグからcanvasに画像を出力して遊ぶ【JavaScript】

概要

html5のvideoタグでwebカメラを起動する.
videoタグの動画をcanvasに出力(スクショみたいに).

環境

windows10+Firefox or Chrome.
ハードは変更せずubuntu+Firefoxで起動したところ動かなかった←解決方法Linux + motion + webcamでライブ監視カメラを設置する.

ソース

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();
        }
    }
}

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>

補足

setIntervalでdrawVideoを回すと動的なものを作ることも可能.