Question

如何使用webcamera捕获图像并上传到服务器。我的应用程序是在PHP＆amp; Mysql的。 Google为我提供了所有浏览器都不支持的旧代码。

几个链接： 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>

捕获来自webcamera的个人资料照片

1 个答案: