<h4>Simple web camera display</h4>

<video id="output" width="200" height="200" autoplay>Put your fallback message here.</video><p>

​

    Screenshots : <p>

    <canvas  width="200" height="160"></canvas>

​

​

    <script>

​

        var n = navigator, is_webkit = false;

        var output = document.getElementById('output');

​

        var canvas = document.querySelector('canvas');

        var ctx = canvas.getContext('2d');

​

        function onSuccess(stream) {

            var source;

​

            output.autoplay = true;

​

            if (!is_webkit) {

                source = stream;

            }

            else {

                source = window.webkitURL.createObjectURL(stream);

            }

​

            output.src = source;

        }

​

        function onError() {

            // getUserMedia API not supported, or another application is using the webcam !

        }

​

        if (n.getUserMedia) {

            // opera users (hopefully everyone else at some point)

            n.getUserMedia({video:true, audio:true}, onSuccess, onError);

        }

        else if (n.webkitGetUserMedia) {

            // webkit users

            is_webkit = true;

            n.webkitGetUserMedia({video:true, audio:true}, onSuccess, onError);

        }

​

        function snapshot() {

          // Draws current image from the video element into the canvas

            ctx.drawImage(output, 0,0, canvas.width, canvas.height);

​

        }

​

        output.addEventListener('click', snapshot, false);

​

​

    </script>