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中捕捉縮放問題

回答

相關問題