Simple HTML5 Webcam Example

Here’s a quick example that shows you how to access your web camera with HTML5 and JavaScript. (Works in Chrome 21).

<video autoplay id="vid" style="display:none;"></video>
<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas><br>
<button onclick="snapshot()">Take Picture</button>

<script type="text/javascript">

    var video = document.querySelector("#vid");
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;

    var onCameraFail = function (e) {
        console.log('Camera did not work.', e);
    };

    function snapshot() {
        if (localMediaStream) {
            ctx.drawImage(video, 0, 0);
        }
    }

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia({video:true}, function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    }, onCameraFail);

</script>

Just cut and paste the code above into your browser and you should be good to go. Also to view the video just set style of the video tag to inline or block.

11 thoughts on “Simple HTML5 Webcam Example

  1. Robert

    Hi,

    I copy pasted this into my own code and when I refresh my webpage, I get asked for permission to use my webcam, so it does connect to my webcam.
    but when I click the take picture button, nothing happens.
    Is there anything I should be editing?

    thanks!

  2. Pat

    Works great Scott, have you done anything with capturing sound from the computer microphone and storing it in a file for replay?

  3. James

    Anyone get the stream to work on Firefox? I got it to work on Chrome and Opera. Cannot get Firefox to work on my machine at eplaypixels.com

    this part fails video.src = window.URL.createObjectURL(stream);

  4. Scott Post author

    I’ve tested with Firefox 18 and it does work, but we need to make a change to the video element: modify the video.src line to this: video.mozSrcObject = stream;

  5. James

    Thanks Scott, that worked.
    I found out that you also have to enable “media.navigator.enabled” set it to true in
    about:config

  6. Rajesh

    getting Error in crome.
    NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}
    I don’t know what to now.
    thanks,
    rajesh

  7. Thomas

    Yes, same problem here…and it seems happening for every different code I use on chrome (I found 3 different html5 scripts on the internet to access the webcam), but every time happens the same thing: I click on the camera logo, allow permission, but when I reload the page it’s set back on “deny”! Please help me, it’s driving me crazy!! Thanks… PS: of course my browser is up-to-date and I even know something about HTML, Javascript, etc.. so I think I’m doing well..but there’s no way to make it work.. :(

  8. Scott Post author

    You can’t reload the page the DOM is reset and the permission settings are reset as well. You will need to do everything with AJAX after the page is loaded and user gives permission.

Comments are closed.