HTML5 Webcam Capture scaling problems in Chrome

StackOverflow https://stackoverflow.com/questions/19186312

Domanda

I have a page which uses the HTML5 getUserMedia functionality to capture an image from the user's webcam. I am having serious inconsistencies in the scaling of the captured image when it is rendered to the canvas. Only the top corner of the image is actually rendered, as if rather than capturing the video element, it is slicing a piece from the underlying stream. Oddly enough, when I go to most other sites using this technology, I do not have this problem. I am running Chrome 29.0.1547.76 m on Windows 7, running on a 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>

Any ideas?

È stato utile?

Soluzione

please try this:

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';
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top