みかづきブログ その3

3ヶ月つづけてみました。

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

前回つかったモック にキャプチャー機能をつけてみました。
挙動としてはキャプチャボタンを押した際にcanvasにコピーしているだけです。

JavaScript

(function(win, doc, $) {
    
    "use strict";
    
    win.app = {};
        
})(this, document, $);

(function(win, doc, $, ns) {

    "use strict";
    
    function Preview(canvas, video) {
        var $video = $(video),
            ctx = canvas.getContext("2d");
        
        _init();
        
        function _init() {
            canvas.style.display = "none";
        }
        
        function _adjustSize() {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
        }
        
        function capture() {
            _adjustSize();
            canvas.style.display = "block";
            video.style.display = "none";
            ctx.drawImage(video, 0, 0);
        }
        
        return {
            capture: capture
        };
    }
    
    ns.Preview = Preview;
    
})(this, document, $, app);


(function(win, doc, $, ns) {

    "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 = doc.querySelector("video"),
            canvas = doc.querySelector("canvas"),
            preview;
        
        video.style.display = "block";
        video.src = window.URL.createObjectURL(localMediaStream);
        video.play();
        
        preview = new ns.Preview(canvas, video)
        
        $(".stop").on("click", function() {
            localMediaStream.stop();
        });
        
        $(".capture").on("click", function() {
            preview.capture();
        });
    }

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

HTML

<video></video>
<canvas></canvas>
<div class="btn start">START</div>
<div class="btn stop">STOP</div>
<div class="btn capture">CAPTURE</div>

domo