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

带有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。

不幸的是，您目前无法控制焦点，但是可以检查将来可能运行的代码。
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 />

关于javascript - 点击屏幕以使用getUserMedia触发自动对焦，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60188128/