从网络摄像头捕获头像

Question

如何使用摄像头采集图像并上传到服务器。我的应用程序是PHP & Mysql。谷歌得到我非常旧的代码并不是所有的浏览器都支持。

少量链接：http://www.phpgang.com/how-to-take-picture-with-webcam-in-javascriptflash-upload-in-php_772.html

http://www.phpclasses.org/blog/post/228-How-to-Use-a-Webcam-to-take-Pictures-in-PHP-Application.html

Answer 1

这里我写了一些示例代码检查

     <video id="video" width="500" height="500"></video>

        <div class="column"> 
            <canvas id="canvas">
            </canvas>
        </div>
        <button id="startbutton">Take photo</button> 
        <script>


            var video = document.getElementById('video'),
                    canvas = document.getElementById('canvas'),
                    startbutton = document.getElementById('startbutton');

            navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

            navigator.getMedia({video: !0, audio: !1}, function (stream)
            {
                if (navigator.mozGetUserMedia)
                    video.mozSrcObject = stream;
                else
                {
                    var vu = window.URL || window.webkitURL;
                    video.src = vu.createObjectURL(stream);
                }
                video.play();
            }, function (error)
            {
                if (window.console)
                    console.error(error);
            });

            video.addEventListener('canplay', function (ev)
            {
                if (!streaming)
                {
                    height = video.videoHeight / (video.videoWidth / width);
                    video.setAttribute('width', width);
                    video.setAttribute('height', height);
                    streaming = !0;
                }
            }, !1);
            startbutton.addEventListener('click', function (ev) {
                takepicture();

                ev.preventDefault();
            }, false);


            var context;

            function takepicture() {
                context = canvas.getContext('2d');
                var width = 320, height = 240;
                if (width && height) {
                    canvas.width = width;
                    canvas.height = height;
                    context.drawImage(video, 0, 0, width, height);
var dataURL = canvas.toDataURL();

//store dataUrl into database
                }
            }

        </script>