2

HTML5 getUserMedia 機能を使用してユーザーの Web カメラから画像をキャプチャするページがあります。キャプチャした画像をキャンバスにレンダリングするときのスケーリングに重大な矛盾があります。ビデオ要素をキャプチャするのではなく、下にあるストリームから断片をスライスしているかのように、画像の上隅のみが実際にレンダリングされます。奇妙なことに、このテクノロジーを使用して他のほとんどのサイトにアクセスしても、この問題は発生しません。2011 MacBook Pro で実行している Windows 7 で Chrome 29.0.1547.76 m を実行しています。

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

何か案は？

4

1 に答える 1