从webcamera捕获配置文件图片

Question

如何使用webcamera捕获图像并上传到服务器。我的应用程序是在Mysql中的PHP &。谷歌让我很旧的代码不支持在所有的浏览器。

几个环节： 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>