Это невозможно прямо сейчас, но возможно в ближайшем будущем. Вам следует взглянуть на Рабочий вариант захвата изображений MediaStream . В этой статье c описываются дополнительные параметры для .applyConstraints, первоначально представленные в Захват медиа и потоков .
Как это работает в соответствии с спе c? Во-первых, вам нужно получить возможности, используя .getCapabilities. Если браузер может управлять фокусом, тогда вы можете установить focusMode: "auto" | "manual" и focusDistance: number для текущих ограничений.
Режим фокусировки описывает настройку фокуса устройства захвата (например, авто или ручной).
Фокусное расстояние - это цифровая c настройка камеры, которая контролирует фокусное расстояние объектива. Параметр обычно представляет расстояние в метрах до оптимального расстояния фокусировки.
К сожалению, в данный момент вы не можете управлять фокусом, но вы можете проверить код, который может работать в будущем.
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 />