Коснитесь экрана, чтобы включить автофокусировку с помощью getUserMedia

API с getUserMedia очень полезен для создания видеопотока внутри браузера / на странице HTML5, см., Например, https://www.html5rocks.com/en/tutorials/getusermedia/intro/ или https://simpl.info/getusermedia/sources/.

Как с помощью этого API включить автофокус камеры (смартфона) при нажатии на экран видео?

Это действительно обычное поведение почти во всех приложениях для камеры смартфонов.

Я не нашел ничего о "фокусе" в документации по API MediaDevices.getUserMedia()


javascript camera html getusermedia
person Basj    schedule 12.02.2020    source источник
comment
Что ж, я не думаю, что это возможно.   -  person Eldar    schedule 15.02.2020

Ответы (1)


arrow_upward
8
arrow_downward

Сейчас это невозможно, но возможно в ближайшем будущем. Вам следует ознакомиться с рабочим проектом MediaStream Image Capture. В этой спецификации описаны дополнительные параметры для .applyConstraints, впервые представленных в Захват мультимедиа и потоки.

Как это работает согласно спецификации? Во-первых, вам нужно получить возможности с помощью .getCapabilities . Если браузер может управлять фокусом, вы можете установить focusMode: "auto" | "manual" и focusDistance: number для текущих ограничений.

Режим фокусировки описывает настройку фокусировки устройства захвата (например, автоматический или ручной).

Фокусное расстояние - это числовой параметр камеры, который управляет фокусным расстоянием объектива. Настройка обычно представляет собой расстояние в метрах до оптимального расстояния фокусировки.

К сожалению, сейчас вы не можете контролировать фокус, но вы можете проверить код, который может работать в будущем.

Проблема Chrome, связанная с поддержкой focusDistance | Статус платформы Chrome | Состояние реализации изображения MediaCapture.

Демонстрация CodeSandbox

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

person artanik    schedule 17.02.2020
comment
Большое спасибо, я проверю это в будущем, когда будут обновления браузера, чтобы узнать, когда они будут доступны. PS: даже когда он будет доступен, кажется, что нет касания для авто -фокусировки, а есть только ручной focusDistance параметр? Это правильно? Обидно, потому что .doAutofocusNow() был бы очень полезен. - person Basj; 18.02.2020
comment
Кажется, что focusMode: "auto касается касания для автофокусировки, но без касания. И, да, я не вижу чего-то среднего, когда вы можете автоматически сфокусироваться на какой-то области, но это только рабочий черновик. Вы можете создать проблему в репозитории w3c и напомнить им об этой пропущенной концепции / функции. :) - person artanik; 18.02.2020
comment
Я только что сделал @artanik здесь :) - person Basj; 18.02.2020
comment
Замечательно, надеюсь, в ближайшем будущем это появится как функция ???? - person artanik; 18.02.2020