Question

在我的网站上，我需要用户才能上传照片。但为了确保图像不模糊，我想自动检测相机是自动对焦还是找到一种方法来帮助对焦。 如果相机正确对焦，如何自动拍照？有什么想法??

我的代码：

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

		var options = {video: true};
		var videoWidth, videoHeight;
		var video = document.getElementById('my-webcam');
        var canvascam = document.getElementById('canvas-cam');
			

		var onFail = function(e) {
		  alert('Failed to get camera');
		  alert(e);
		};
		var onSuccess = function(stream) {

			if(navigator.mozGetUserMedia) {
				video.mozSrcObject = stream;
			} else {
				var url = window.URL || window.webkitURL;
				video.src = url.createObjectURL(stream);
			}

			setTimeout(function(){
				setInterval(updateCanvas,30);
        
        
				//Take photo when camera is focused
				
				
				
			},1000);
		};

    navigator.getUserMedia(options, onSuccess, onFail);
    
    function updateCanvas(){
			canvascam.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
		}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="A JavaScript Computer Vision Library">
        <title>JSFeat - JavaScript Computer Vision Library. Detect Edges</title>
    </head>
    <body>
		<video id="my-webcam" autoplay ></video>
		<canvas id="canvas-cam" width="480px" height="640px"></canvas>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   </body>
</html>

Answer 1

正确-尽管这里可能是不好的做法-我将链接到为什么MediaCapture可能比预期的模糊或粗糙：

Why the difference in native camera resolution -vs- getUserMedia on iPad / iOS?

简而言之：MediaCapture对媒体源进行了大量转换，这可能会导致图像模糊或颗粒状。

要解决此问题，请使用ImageCapture：

ImageCapture API可以控制相机功能，例如缩放，亮度，对比度，ISO和白平衡。最重要的是，Image Capture允许您访问任何可用的设备相机或网络摄像头的全分辨率功能。以前在网络上拍照的技术都使用视频快照，其分辨率低于静态图像。

要解决您的问题，

您可以通过UX和缩放滑块解决此问题。以下是有关如何使用ImageCapture（静态图像）实现此目的的信息。 MediaCapture（视频供稿）不允许使用此功能。您可以使用MediaCapture并具有“手动模式”之类的按钮，并允许用户选择正确的缩放比例来拍摄照片。

您还可以通过使每次更新执行n次ImageCaptures更新循环并具有缩放滑块来“模拟”摄像机。

https://developers.google.com/web/updates/2016/12/imagecapture

这是有关如何使用它/ polyfill的示例： https://github.com/GoogleChromeLabs/imagecapture-polyfill

确保您使用可处理跨平台支持的最新getUserMedia polyfill：https://www.npmjs.com/package/webrtc-adapter

希望这会有所帮助

相机自动对焦时拍照

1 个答案: