Как получить доступ к камере в PWA

Опубликовано: 2020-08-19

Оглавление

Доступ к камере, ранее описанный в нашей статье с подробным описанием аппаратных возможностей PWA, является одной из наиболее важных функций, которые мы видим все чаще и чаще. Но правильно интегрировать эту возможность в ваше PWA тоже непростая задача, поэтому в нашей сегодняшней статье мы постараемся провести вас через весь этот процесс:

Предпосылки

  • Базовая PWA, которую можно легко создать с помощью ReactJS и нашего письменного руководства.
  • Уверенное понимание HTML и JavaScript

Как получить доступ к камере в PWA

Основы

Представляем getUserMedia() — API webRTC

Чтобы получить прямой доступ к камере и/или микрофону, Интернет использует API под названием getUserMedia() , который широко поддерживается почти во всех современных браузерах. Этот API, наряду с RTCPeerConnection и RTCDataChannel , являются частью WebRTC — встроенной в браузеры платформы, обеспечивающей связь в реальном времени.

По сути, API ( navigator.mediaDevices.getUserMedia(constraints) ) запрашивает у пользователя разрешение на доступ к аудио- и видеовходу телефона (например, к микрофону, веб-камере, камере и т. д.). Используя это разрешение, API создает объект JavaScript MediaStream , называемый локальным , которым можно манипулировать в дальнейшем.

Примеры

Скажем, например, у нас есть кнопка: 

 <button>Показать мое лицо</button>

И нажатие на какую кнопку вызывает метод navigator.mediaDevices.getUserMedia() (без аудиовхода): 

 navigator.mediaDevices.getUserMedia({
 видео: правда
})

Черт возьми, мы также можем сходить с ума с ограничениями: 

 navigator.mediaDevices.getUserMedia({
  видео: {
    минимальное соотношение сторон: 1,333,
    минфреймрейт: 30,
    ширина: 1280,
    высота: 720
  }
})

Кроме того, мы можем указать свойство facingMode в объекте видео, которое сообщает браузеру, какую камеру устройства использовать: 

 {
  видео: {
    ...
    режим облицовки: {
//Используем заднюю камеру
      точно: «окружающая среда»
    }
  }
}

Или же 

 {
 видео : {
  …
//Используем фронтальную камеру
  faceMode: 'пользователь'
 }
}

Примечания :

  • API доступен только для безопасного источника (HTTPS).
  • Чтобы получить список поддерживаемых ограничений на текущем устройстве, выполните: 
 navigator.mediaDevices.getSupportedConstraints()

Сложная часть

Теперь, когда у нас есть четкое представление об основах, давайте перейдем к продвинутой части. В этой части мы попробуем создать кнопку в нашем PWA, при нажатии на которую он открывает нашу камеру и позволяет нам выполнять дальнейшую работу.

Создание кнопки [Get access to camera]

Во-первых, давайте начнем с <button> в нашем index.html: 

 <button>Получить доступ к камере</button>
<автовоспроизведение видео></видео>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Примечание :

  • Автовоспроизведение предназначено для того, чтобы медиапоток автоматически воспроизводился, а не зависал на первом кадре.
  • Adapter-latest.js — это прокладка для защиты приложений от изменений спецификаций и различий в префиксах.

Потоковое видео в реальном времени, нажав на кнопку

Чтобы транслировать видео в режиме реального времени при нажатии на кнопку, нам нужно добавить EventListener , который будет вызываться при возникновении события click : 

 document.querySelector('#get-access').addEventListener('click', асинхронная функция init(e) {
  пытаться {
 }
поймать (ошибка) {
 }
})

После этого он вызывает navigator.mediaDevices.getUserMedia() и запрашивает видеопоток с помощью веб-камеры устройства: 

 document.querySelector('#get-access').addEventListener('click', асинхронная функция init(e) {
  пытаться {
    постоянный поток = ожидание navigator.mediaDevices.getUserMedia({
      аудио: ложь,
      видео: правда
    })
    const videoTracks = stream.getVideoTracks()
    константная дорожка = videoTracks[0]
    alert(`Получение видео из: ${track.label}`)
    document.querySelector('видео').srcObject = поток
    document.querySelector('#get-access').setAttribute('скрытый', правда)
//Видеопоток останавливается функцией track.stop() через 3 секунды воспроизведения.
    setTimeout(() =&gt; { track.stop() }, 3 * 1000)
  } поймать (ошибка) {
    предупреждение(`${ошибка.имя}`)
    console.error(ошибка)
  }
})

Кроме того, как указано выше в разделе « Основные », вы также можете указать дополнительные требования к видеопотоку: 

 navigator.mediaDevices.getUserMedia({
  видео: {
    обязательно: { minAspectRatio: 1,333, maxAspectRatio: 1,334, faceMode: 'user'},
    по желанию: [
      {минимальная частота кадров: 60},
      { максширина: 640 },
      { maxHeigth: 480 }
    ]
  }
}, SuccessCallback, errorCallback);

Создание холста

С помощью элемента <video> в сочетании с <canvas> вы можете дополнительно обрабатывать наш видеопоток в реальном времени. Это включает в себя возможность выполнять различные эффекты, такие как применение пользовательских фильтров, хроматическая рирпроекция (также известная как «эффект зеленого экрана») — и все это с помощью кода JavaScript.

Если вы хотите узнать больше об этом, Mozilla написала подробное руководство по управлению видео с помощью холста, так что не забудьте его прочитать!

Сделайте снимок холста, используя takePhoto() и grabFrame()

Новые методы takePhoto и grabFrame API getUserMedia можно использовать для захвата моментального снимка текущего потокового видео. Между этими двумя методами все еще есть существенные различия:

По сути, grabFrame кадра просто захватывает следующий видеокадр — упрощенный и не столь эффективный метод захвата фотографий. Метод takePhoto , с другой стороны, использует лучший метод захвата кадров, который заключается в прерывании текущего видеопотока, чтобы использовать «самое высокое доступное разрешение фотокамеры» камеры для захвата изображения Blob.

В приведенных ниже примерах мы будем рисовать захваченный кадр в элемент canvas , используя метод grabFrame : 

 var grabFrameButton = document.querySelector('button#grabFrame');
var canvas = document.querySelector('canvas');

захватитьFrameButton.onclick = захватитьFrame;

функция захвата кадра () {
  imageCapture.grabFrame()
  .тогда (функция (изображениеBitmap) {
    console.log('Захваченный кадр:', imageBitmap);
    холст.ширина = imageBitmap.width;
    холст.высота = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    canvas.classList.remove('скрытый');
  })
  .catch (функция (ошибка) {
    console.log('Ошибка захвата кадра(): ', ошибка);
  });
}

И в этом примере мы используем метод takePhoto() : 

 var takePhotoButton = document.querySelector('button#takePhoto');
var canvas = document.querySelector('canvas');

взятьФотоКнопку.onclick = взятьФото;

// Получить BLOB-объект из выбранного в данный момент источника камеры и
// отображаем это с помощью элемента img.
функция взятьфото() {
  imageCapture.takePhoto().then(функция(блоб) {
    console.log('Сделано фото:', blob);
    img.classList.remove («скрытый»);
    img.src = URL.createObjectURL(blob);
  }).catch(функция(ошибка) {
    console.log('ошибка takePhoto(): ', ошибка);
  });
}

Чтобы получить представление о том, как вышеперечисленные методы выглядят в действии, мы рекомендуем Simple Image Capture; и, в качестве альтернативы, PWA Media Capture также является хорошим примером того, как может выглядеть базовая функция захвата мультимедиа в PWA.

Вывод

В этом уроке мы познакомили вас с основами, а также с некоторыми дополнительными приемами реализации функций камеры в вашем PWA. Остальное зависит только от вашего воображения, чтобы извлечь максимальную пользу из этой функции.

Для продавцов Magento, желающих разработать магазин нового поколения на базе PWA, здесь, в SimiCart, мы предлагаем полные решения PWA, адаптированные к вашим потребностям.

Исследуйте Simicart PWA