Задать вопрос
@accountnujen

Как сделать переключатель камеры в браузере смартфона?

<video autoplay="" muted="" playsinline=""></video>
<div class="camchange">смена камеры</div>

var video = document.querySelector('video');

let currentCameraIndex = 0;
let cameraDevices = [];

// Функция для получения следующего ID камеры
function getNextCameraDeviceId() {
  if (cameraDevices.length === 0) {
    return null;
  }

  currentCameraIndex = (currentCameraIndex + 1) % cameraDevices.length;
  return cameraDevices[currentCameraIndex].deviceId;
}

// Функция для получения списка устройств
function getListDevice() {
  return navigator.mediaDevices.enumerateDevices().then((devices) => {
    cameraDevices = devices.filter((device) => device.kind === 'videoinput');
    return cameraDevices;
  });
}

// Функция для установки видео потока
function setVideoStream(deviceId) {
  if (deviceId) {
    navigator.mediaDevices
      .getUserMedia({ video: { deviceId: { exact: deviceId } } })
      .then((stream) => {
        window.stream = stream; // только чтобы сделать поток доступным для консоли
        video.srcObject = stream;
      })
      .catch((error) => {
        console.log('getUserMedia error: ', error);
      });
  } else {
    console.log('No cameras available.');
  }
}

// Инициализация видеопотока при загрузке страницы
getListDevice().then(() => {
  const deviceId = getNextCameraDeviceId();
  setVideoStream(deviceId);
});

// Добавление обработчика событий для кнопки
document.querySelector('.camchange').addEventListener('click', () => {
  getListDevice().then(() => {
    const deviceId = getNextCameraDeviceId();
    setVideoStream(deviceId);
  });
});


Данный код запускает камеру на смартфоне в браузере и кнопка, которая переключает эту камеру.

Первоначально код переписывался от сюда:
https://github.com/samdutton/simpl/blob/gh-pages/g... .

У меня сильно сократился функционал, но количество строк кода не особо сократилось.

Подскажите, как можно оптимизировать код? Мне кажется, что этот переключатель можно сделать проще, потому что просто запуск камеры выглядит вот так:
spoiler

navigator.mediaDevices
    .getUserMedia({video:true})
    .then((stream)=>{
      video.srcObject = stream;
    }).catch((error)=>{
      console.log('getUserMedia error: ', error);
    });

  • Вопрос задан
  • 157 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Fullstack-разработчик на Python + нейросети
    20 месяцев
    Далее
  • Skillfactory
    Профессия Веб-разработчик
    12 месяцев
    Далее
  • Академия Eduson
    Fullstack-разработчик на JavaScript
    11 месяцев
    Далее
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы