HTML 5 WebCam Love

Last week we covered doing time lapse photography with jQuery-WebCam. This time I want to highlight some stuff that’s built into HTML 5.

HTML 5 gives you built in access to devices. There were multiple ways of doing this but I think the world has pretty much settled on WebRTC. Microsoft may complicate this matter a little bit but that’s the actual purpose of IE – to complicate our lives – so we are used to it by now.

So lets take a look:

<video id="videoPlayer" autoplay></video>

    <script type="text/javascript">
        $(document).ready(function () {

            var vid = document.getElementById("videoPlayer");

            if(navigator.getUserMedia) { // Standard
                navigator.getUserMedia({ "video": true }, function(stream) {
                    vid.src = stream;
                    vid.play();
                }, errBack);
            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia({ "video": true }, function(stream){
                    vid.src = window.webkitURL.createObjectURL(stream);
                    vid.play();
                });
            }
        });
    </script>

The HTML 5 implementation is simple but it is also extremely powerful. To learn more, visit HTML5Rocks. To get straight to the fun, try this, this, or this. For those interested in really pushing things, you’ve gotta see this.

– Michael Ossou