みかづきブログ その3

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

ウェブカメラで撮影した映像からPNG画像をつくる

前々回前回 につくったモックに画像生成機能をつけてみました。
openボタンを押すと、png画像を別タブで開きます。

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);
        }
        
        // 追加
        function buildImage() {
            var base64 = canvas.toDataURL('image/png');

            win.open(base64);
        }
        
        return {
            capture: capture,
            buildImage: buildImage
        };
    }
    
    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"),
            isCapture = false,
            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();
            isCapture = true;
            
        });
        
        // 追加
        $(".open").on("click", function() {
            if (!isCapture) {
                $(".capture").trigger("click");
            }
            preview.buildImage();
        });
    }

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

demo