Capture Image via Webcam

by Pankaj Sapkal

HTML

<div style="margin-left: 100px; float:left">
    <div>
        <video id="sourcevid" autoplay width="480" height="360" onloadedmetadata="ResizeCanvas();">
            Sorry, you're browser doesn't support video. Please try 
            <a href="http://snapshot.opera.com/labs/camera/">Opera</a>.
        </video>
    </div>
    <div style="margin-left: 170px;">
        <input type="button" value="Start" onclick="start()" class="button" >
        <input type="button" value="Stop" onclick="stop()" class="button" >
        <input type="button" value="Capture" onclick="snapshot()" class="button" >
    </div>
</div>
<div style="margin-left: 100px;">
    <img id="CaptureImage" src="" style="margin-left: 20px;" width="480" height="360">
    <canvas id="tmpImage" style="margin-left: 20px; display: none;" width="480" height="360"></canvas>
</div>

JavaScript

var ctx = null;
    var canvas = document.getElementById("tmpImage");
    var localMediaStream = null;
    var video = document.querySelector('video');

    function snapshot() {        
        if (localMediaStream) {
            ctx.drawImage(video, 0, 0);
            var img = document.getElementById('CaptureImage');
            // "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
            img.src = canvas.toDataURL('image/webp');
        }
    }    

    function hasGetUserMedia() {
        // Note: Opera builds are unprefixed.
        return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
    }

    function onFailSoHard(){

    }
    
    function start() {
        if (hasGetUserMedia()) {
            if (navigator.webkitGetUserMedia)
                navigator.getUserMedia = navigator.webkitGetUserMedia;
            //var getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;

            
            //var gumOptions = { video: true, toString: function () { return 'video'; } };    
            if (navigator.getUserMedia) {
                navigator.getUserMedia({ video: true, audio: true }, function (stream) {
                    if (navigator.webkitGetUserMedia) {
                        video.src = window.webkitURL.createObjectURL(stream);
                    } else {
                        video.src = stream; // Opera
                    }
                    localMediaStream = stream;
                }, onFailSoHard);
            } else {
                video.src = 'somevideo.webm'; // fallback.
            }
        }
    }

    function stop() {
        video = document.getElementById('sourcevid');
        video.src = "";
    }

    function ResizeCanvas() {
        canvas.height = video.videoHeight;
        canvas.width = video.videoWidth;
    }

    $(document).ready(function () {
        $('.button').button();
 ...