Access Camera by using HTML5

Access Camera by using HTML5. It runs on Opera and Google Chrome

by anbinhtrong

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<div style="margin-left: 100px;">
    <div>
        <video id="sourcevid" autoplay width="480" height="360">
            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" >
    </div>
</div>

JavaScript

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 video = document.querySelector('video');
        //var gumOptions = { video: true, toString: function () { return 'video'; } };    
        if (navigator.getUserMedia) {
            navigator.getUserMedia({ video: true, audio: true }, function (stream) {
                debugger;
                if (navigator.webkitGetUserMedia) {
                    video.src = window.webkitURL.createObjectURL(stream);
                } else {
                    video.src = stream; // Opera
                }
            }, onFailSoHard);
        } else {
            video.src = 'somevideo.webm'; // fallback.
        }
    }
}

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

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