点击屏幕以使用 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为当前的约束。

对焦模式描述捕捉设备的对焦设置（例如自动或手动）。

焦距是控制镜头焦距的数字相机设置。该设置通常以米为单位表示到最佳焦距的距离。

很遗憾，目前你无法控制焦点，但你可以查看未来可能工作的代码。

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