ウェブカメラで撮影した映像をブラウザでプレビューする

Chrome、Firefox限定です。

JavaScript

(function(win, doc, $) {

    "use strict";
    
    init();
    
    function init() {
        $(".start").on("click", useCamera).trigger("click");
    }

    function useCamera() {
        navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia ||  navigator.mozGetUserMedia || navigator.msGetUserMedia);    
    
        if (navigator.getUserMedia) {
            navigator.getUserMedia ({video: true, audio: false}, handleSuccess, handleError);
        }
    }
    
    function handleSuccess(localMediaStream) {
        var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(localMediaStream);
            video.play();
        
        $(".stop").on("click", function() {
            localMediaStream.stop();
        });
    }

    function handleError(evt) {
        console.log(evt);
    }
    
})(this, document, $);

デモ

※ カメラへのアクセスを許可してください。