相机自动对焦时拍照

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mar*_*cus 5

首先 - 尽管这里可能是不好的做法 - 我将链接到为什么MediaCapture可能比预期的模糊或颗粒感:

为什么iPad/iOS上原生相机分辨率-vs- getUserMedia的差异？

简而言之:MediaCapture对媒体源进行了大量转换,可能会导致图像模糊或呈现颗粒状.

要解决这个问题,请使用ImageCapture:

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

要解决您的问题:

您可以通过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

希望这可以帮助

归档时间：	7 年，11 月前
查看次数：	1347 次
最近记录：	7 年，1 月前