javascript - Take photo when the camera is automatically focused

On my web, I need users can upload photos. But to make sure that the images are not blurry, I'd like to automatically detect that the camera is auto-focused or find a way to help focus. How can I take a photo automatically when the camera focuses correctly? Any idea??

My code:

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=".8.2/jquery.min.js"></script>
   </body>
</html>

My code:

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./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   </body>
</html>

Share Improve this question edited Dec 4, 2017 at 16:38 asked Dec 4, 2017 at 16:23 Norak 4132 gold badges7 silver badges16 bronze badges

1 navigator.getUserMedia() is deprecated in favor of MediaDevices.getUserMedia(), but "information about a user's cameras and microphones are inaccessible for privacy reasons," and you can really only request a camera or a resolution. developer.mozilla/en-US/docs/Web/API/MediaDevices/… With native mobile apps you can access hardware properties (e.g. on iOS: AVCaptureDevice.FocusMode is "locked" once the camera has focused). In a non-mobile web browser, taking photos w/o explicit user interaction doesn't seem to be supported, for good reason. – mc01 Commented Dec 4, 2017 at 16:55
@Norak I hope my answer below may help – Marcus Commented Oct 21, 2018 at 14:02

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

Firsly - though perhaps bad practice here - I will link to why MediaCapture might be blurry or grainy than expected:

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

In short: MediaCapture does a lot of transformations on the media source which may cause blury or grainy images.

To solve this use ImageCapture:

The ImageCapture API enables control over camera features such as zoom, brightness, contrast, ISO and white balance. Best of all, Image Capture allows you to access the full resolution capabilities of any available device camera or webcam. Previous techniques for taking photos on the Web have used video snapshots, which are lower resolution than that available for still images.

To solve your problem:

You can solve this via UX and a zoom slider. Below is information on how to achieve this with ImageCapture (still images). MediaCapture (video feed) does not allow this functionality. You could use MediaCapture and have a button such as "Manual Mode" and allow a user to pick the correct zoom to take the photo.

You could also "emulate" a camera by having an update loop doing n ImageCaptures per update and have a zoom slider.

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

And here is an example on how to use it/polyfill: https://github./GoogleChromeLabs/imagecapture-polyfill

Makesure you use the latest getUserMedia polyfills which handle crossplatform support: https://www.npmjs./package/webrtc-adapter

Hope this helps

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Take photo when the camera is automatically focused - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)