HTML5 CAMERA API

你可能不知道的5个功能强大的 HTML5 API

Camera and Video Control with HTML5

IE网页调用摄像头flash+js方式实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <title>HTML5 调用手机摄像头(不支持IE)</title>
            <style type="text/css">
            </style>
            <script>

                // Put event listeners into place
                window.addEventListener("DOMContentLoaded", function() {
                    // Grab elements, create settings, etc.
                    var canvas = document.getElementById('canvas');
                    var context = canvas.getContext('2d');
                    var video = document.getElementById('video');
                    var mediaConfig =  { video: true };
                    var errBack = function(e) {
                        console.log('An error has occurred!', e)
                    };

                    // Put video listeners into place
                    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                        navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
                            video.src = window.URL.createObjectURL(stream);
                            video.play();
                        });
                    }

                    /* Legacy code below! */
                    else if(navigator.getUserMedia) { // Standard
                        navigator.getUserMedia(mediaConfig, function(stream) {
                            video.src = stream;
                            video.play();
                        }, errBack);
                    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                        navigator.webkitGetUserMedia(mediaConfig, function(stream){
                            video.src = window.webkitURL.createObjectURL(stream);
                            video.play();
                        }, errBack);
                    } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
                        navigator.mozGetUserMedia(mediaConfig, function(stream){
                            video.src = window.URL.createObjectURL(stream);
                            video.play();
                        }, errBack);
                    }

                    // Trigger photo take
                    document.getElementById('snap').addEventListener('click', function() {
                        context.drawImage(video, 0, 0, 640, 480);
                    });
                }, false);

            </script>
    </head>
    <body>
        <video id="video" width="640" height="480" autoplay></video>
        <button id="snap" style="font-size: 40px;">拍照</button>
        <canvas id="canvas" width="640" height="640"></canvas>
    </body>
</html>