HTML5 Веб-камера Проблемы с масштабированием в Chrome

У меня есть страница, которая использует функцию HTML5 getUserMedia для захвата изображения с веб-камеры пользователя. У меня возникают серьезные несоответствия в масштабировании захваченного изображения, когда оно отображается на холст. На самом деле отображается только верхний угол изображения, как бы вместо захвата видеоэлемента, он разрезает кусок из основного потока. Как ни странно, когда я перехожу на большинство других сайтов, использующих эту технологию, у меня нет этой проблемы. Я запускаю Chrome 29.0.1547.76 м в Windows 7, работая на MacBook Pro 2011 года.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

ответ

Смежные вопросы