点按屏幕以使用 getUserMedia 触发自动对焦

Question

API withgetUserMedia对于在浏览器内/HTML5 页面内有视频流非常有用，例如参见https://www.html5rocks.com/en/tutorials/getusermedia/intro/或https://simpl.info/获取用户媒体/来源/。

从这个 API，如何在视频显示中点击时触发（智能手机）相机的自动对焦？

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

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

Answer 1

这现在是不可能的，但在不久的将来可能是可能的。您应该看看MediaStream Image Capture Working Draft。该规范描述了 的高级选项.applyConstraints，最初在Media Capture 和 Streams 中引入。

它如何根据规范工作？首先，您需要使用.getCapabilities. 如果浏览器可以管理焦点，那么您可以设置focusMode: "auto" | "manual"和focusDistance: number用于当前约束。

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

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

不幸的是，您目前无法控制焦点，但您可以检查将来可能工作的代码。

关于支持 focusDistance 的 Chrome 问题| Chrome 平台状态| MediaCapture 图像实施状态。

代码沙盒演示

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