Question

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

<!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>

有什么想法吗？

Answer 1

请试试这个：

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';
}

HTML5网络摄像头捕获Chrome中的缩放问题

1 个答案: