@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);
    });

  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы