HTML5摄像头在Chrome中捕捉缩放问题

我有一个页面，它使用HTML5 getUserMedia功能从用户的网络摄像头捕捉图像。渲染到画布时，捕捉图像的缩放比例存在严重不一致。实际上只渲染图像的顶角，就好像不是捕获视频元素，而是从基础流中切片。奇怪的是，当我去使用这种技术的大多数其他网站时，我没有这个问题。我在Windows 7上运行Chrome 29.0.1547.76 m，运行于2011年MacBook Pro上。HTML5摄像头在Chrome中捕捉缩放问题

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <script type="text/javascript"> 
      var openCameraButton; 
      var takePictureButton; 
      var mediaStream; 
      var video; 
      var canvas; 
      var context; 

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

      function onLoad(){ 
       video = document.querySelector('video'); 
       canvas = document.querySelector('canvas'); 
       context = canvas.getContext('2d'); 
       context.imageSmoothingEnabled = true; 
       context.webkitImageSmoothingEnabled = true; 
       context.mozImageSmoothingEnabled = true; 
      }; 

      function openCamera(){ 
       navigator.getMedia(
        { video:true, audio: false }, 
        function(localMediaStream){ 
         mediaStream = localMediaStream; 
         video.src=window.URL.createObjectURL(localMediaStream); 
        }, 
        function(err){ 
         alert('Unable to support live capture.'); 
        } 
       ); 
      } 

      function takePicture(){ 
       var w = video.videoWidth; 
       var h = video.videoHeight; 

       context.drawImage(video,0,0,w,h); 

       canvas.style.display='block'; 
       video.style.display='none'; 
      } 
     </script> 
    </head> 
    <body onload="onLoad();"> 
     <div> 
      <video autoplay style="width:640px; height:480px;"></video> 
      <canvas style="width:640px; height:480px; display:none;"></canvas> 
     </div> 
     <div> 
      <button id="openCameraButton" type="button" onclick="openCamera();" >Open Camera</button> 
      <button id="takePictureButton" type="button" onclick="takePicture();" >Take Picture</button> 
     </div> 
    </body> 
</html>

任何想法？

来源

2013-10-04 drz

请试试这个：

function takePicture(){ 
    var w = video.videoWidth; 
    var h = video.videoHeight; 
    canvas.width = w; 
    canvas.height = h; 
    context.drawImage(video,0,0,w,h); 
    canvas.style.display='block'; 
    video.style.display='none'; 
}

来源

2013-10-04 19:10:10 452

HTML5摄像头在Chrome中捕捉缩放问题

回答

相关问题