带有 getUserMedia
的 API 对于在浏览器/HTML5 页面内拥有视频流非常有用,例如参见 https://www.html5rocks.com/en/tutorials/getusermedia/intro/或https://simpl.info/getusermedia/sources/ .
通过此 API,如何在视频显示中点击时触发(智能手机)相机的自动对焦?
这确实是几乎所有智能手机相机应用程序的常见行为。
我在 API 文档中没有找到任何有关“焦点”的内容 MediaDevices.getUserMedia()
最佳答案
这在现在是不可能的,但在不久的将来可能是可能的。你应该看看MediaStream Image Capture Working Draft 。此规范描述了 .applyConstraints
的高级选项,最初在 Media Capture and Streams 中引入。
它如何按照规范工作?首先,您需要使用 .getCapabilities
来获取功能。 。如果浏览器可以管理焦点,那么你可以设置focusMode: "auto" | "manual"
和focusDistance: number
对于当前的限制。
Focus mode describes the focus setting of the capture device (e.g. auto or manual).
Focus distance is a numeric camera setting that controls the focus distance of the lens. The setting usually represents distance in meters to the optimal focus distance.
不幸的是,您目前无法控制焦点,但您可以检查将来可能起作用的代码。
Chrome issue about support for focusDistance | Chrome Platform Status | MediaCapture Image Implementation Status .
navigator.mediaDevices
.getUserMedia({ video: true })
.then(gotMedia)
.catch(err => console.error("getUserMedia() failed: ", err));
function gotMedia(mediastream) {
const video = document.querySelector("video");
video.srcObject = mediastream;
const track = mediastream.getVideoTracks()[0];
const capabilities = track.getCapabilities();
// Check whether focus distance is supported or not.
if (!capabilities.focusDistance) {
return;
}
// Map focus distance to a slider element.
const input = document.querySelector('input[type="range"]');
input.min = capabilities.focusDistance.min;
input.max = capabilities.focusDistance.max;
input.step = capabilities.focusDistance.step;
input.value = track.getSettings().focusDistance;
input.oninput = function(event) {
track.applyConstraints({
advanced: [{
focusMode: "manual",
focusDistance: event.target.value
}]
});
};
input.hidden = false;
}
<video autoplay></video>
<input type="range" hidden />
关于javascript - 点击屏幕以使用 getUserMedia 触发自动对焦,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60188128/