Инструменты веб-разработчика
RU EN

Камера

getUserMedia() метод возвращает потоки медиа с камер и микрофонов

Готово к запуску
const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false });
const video = document.querySelector('video');
video.srcObject = stream;
// Stop:
stream.getTracks().forEach(t => t.stop());

Параметр constraints - объект, определяющий запрашиваемые медиатипы, вместе с требованиями для каждого типа.
Запросить и audio и video типы без дополнительных условий: 

{ audio: true, video: true }

enumerateDevices() метод для получения списка доступных медиа-устройств

Готово к запуску
const devices = await navigator.mediaDevices.enumerateDevices();
devices.forEach(device => {
  console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
});

Метод возвращает Promise, который разрешается в массив объектов MediaDeviceInfo

Свойства объекта:

  • deviceId - идентификатор устройства
  • kind - тип устройства (audioinput, audiooutput, videoinput)
  • label - название устройства
  • groupId - идентификатор группы

getDisplayMedia() метод для захвата экрана или его части

Готово к запуску
const stream = await navigator.mediaDevices.getDisplayMedia({ 
  video: { cursor: 'always' }, 
  audio: false 
});
const video = document.querySelector('video');
video.srcObject = stream;
// Stop:
stream.getTracks().forEach(t => t.stop());

Параметр constraints - объект с настройками захвата

Основные опции для video:

  • cursor - отображение курсора ('never', 'always', 'motion')
  • displaySurface - тип поверхности ('monitor', 'window', 'browser')
  • logicalSurface - захват логической поверхности (true/false)

QR Scanner Считывание QR кода с помощью камеры

Готово к запуску
// <script src="https://unpkg.com/[email protected]/html5-qrcode.min.js"></script>

const html5QrCode = new Html5Qrcode("qr-reader");

await html5QrCode.start(
  { facingMode: "environment" },
  { fps: 10, qrbox: { width: 250, height: 250 } },
  (decodedText, decodedResult) => {
    console.log('QR code:', decodedText);
  },
  (errorMessage) => {
    // console.error(errorMessage);
  }
);

// Stop:
await html5QrCode.stop();

Для считывания QR кодов используется библиотека html5-qrcode

Основные параметры:

  • facingMode - выбор камеры ('user' - фронтальная, 'environment' - основная)
  • fps - частота сканирования (кадров в секунду)
  • qrbox - размер области сканирования

Ссылки