javascript - 点击屏幕以使用 getUserMedia 触发自动对焦

Question

带有 getUserMedia 的 API 对于在浏览器/HTML5 页面内拥有视频流非常有用，例如参见 https://www.html5rocks.com/en/tutorials/getusermedia/intro/或https://simpl.info/getusermedia/sources/ .

通过此 API，如何在视频显示中点击时触发(智能手机)相机的自动对焦？

这确实是几乎所有智能手机相机应用程序的常见行为。

我在 API 文档中没有找到任何有关“焦点”的内容 MediaDevices.getUserMedia()

Answer 1

这在现在是不可能的，但在不久的将来可能是可能的。你应该看看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 .

CodeSandbox Demo

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