相机自动对焦时拍照 [英] 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??
我的代码:
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>推荐答案
正确-尽管这里可能是不好的做法-我将链接为何MediaCapture可能比预期的模糊或粗糙:
Firsly - though perhaps bad practice here - I will link to why MediaCapture might be blurry or grainy than expected:
为什么iPad/iOS上的本机摄像头分辨率-vs- getUserMedia的区别?
简而言之:MediaCapture对媒体源进行了大量转换，这可能会导致图像模糊或颗粒状.
In short: MediaCapture does a lot of transformations on the media source which may cause blury or grainy images.
要解决此问题，请使用ImageCapture:
To solve this use ImageCapture:
ImageCapture API可以控制相机功能，例如缩放，亮度，对比度，ISO和白平衡.最重要的是，Image Capture允许您访问任何可用的设备摄像头或网络摄像头的全分辨率功能.以前在网络上拍照的技术都使用视频快照，其分辨率低于静态图像.
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.
要解决您的问题，
您可以通过UX和缩放滑块解决此问题.以下是有关如何使用ImageCapture(静态图像)实现此目的的信息.MediaCapture(视频供稿)不允许使用此功能.您可以使用MediaCapture并具有手动模式"之类的按钮，并允许用户选择正确的缩放比例来拍摄照片.
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.
您还可以通过使更新循环每次更新"执行n个ImageCaptures并具有缩放滑块来模拟"摄像机.
You could also "emulate" a camera by having an update loop doing n ImageCaptures per update and have a zoom slider.
https://developers.google.com/web/updates/2016/12/图像捕获
这是有关如何使用它/polyfill的示例: https://github.com/GoogleChromeLabs/imagecapture-polyfill
And here is an example on how to use it/polyfill: https://github.com/GoogleChromeLabs/imagecapture-polyfill
确保使用处理跨平台支持的最新getUserMedia polyfills: https://www.npmjs.com/package/webrtc-adapter
Makesure you use the latest getUserMedia polyfills which handle crossplatform support: https://www.npmjs.com/package/webrtc-adapter
希望这会有所帮助
这篇关于相机自动对焦时拍照的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
