Событие, запускаемое при запуске видеопотока, с помощью getUserMedia

Question

Я использую библиотеку сканера штрих-кода ZXing JS https://github.com/zxing-js/library/ с входом видеопотока (веб-камера или камера телефона), как подробно описано в следующем коде.

В общем, как добавить прослушиватель событий в <video>, чтобы выполнить действие, когда видеопоток только начался? (видео с использованием MediaDevices.getUserMedia API видеопотока, запущено из ZXing's decodeFromInputVideoDevice)?

const codeReader = new ZXing.BrowserQRCodeReader();

codeReader
  .decodeFromInputVideoDevice(undefined, 'video')  // uses the default input
  .then(result => console.log(result.text))  // this happens when the barcode is found / recognized
  .catch(err => console.error(err));

<script src="https://unpkg.com/@zxing/library@0.15.2/umd/index.min.js"></script>
<video id="video"></video>

Примечание: на данный момент я использую setTimeout(..., 2000), когда пользователь нажал на кнопку, чтобы запустить видео, но, очевидно, это не работает в случае, если есть такое диалоговое окно «Хотите ли вы, чтобы этот веб-сайт использовал устройство камеры?», тогда 2 секунд недостаточно. Слушатель события VideoHasJustStarted будет лучше.

Редактировать:
Вот jsFiddle , показывающий проблему: не работает с различными событиями: started, devicechange.

Answer 1

Есть несколько способов определить, воспроизводится ли видео или может быть воспроизведено, с помощью прослушивателей событий:

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

// Video has been started/unpaused
video.addEventListener('play', function() {
    ...
})

// Video has resumed play/started/unpaused/finished buffering/finished seeking, etc
video.addEventListener('playing', function() {
    ...
})

// Video can start playing (but might not be playing)
video.addEventListener('canplay', function() {
    ...
})

// Video can be played without buffering (but might not be playing)
video.addEventListener('canplaythrough', function() {
    ...
})

Наиболее похоже на VideoHasJustStarted, вероятно, playing. Но в зависимости от того, как вы хотите выполнить свою функцию, один из приведенных выше методов должен соответствовать вашим потребностям.

Дополнительная информация о видео событиях: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

Пример

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

// Add event listener to monitor events
video.addEventListener('playing', () => {
  console.log('Video is now streaming!')
});

// Add stream
navigator.mediaDevices.getUserMedia({
    video: true
  })
  .then(function(stream) {
    var videoTracks = stream.getVideoTracks();

    stream.onremovetrack = function() {
      console.log('Stream ended');
    };
    window.stream = stream;
    video.srcObject = stream;
  })
  .catch(function(error) {

    console.log(error);
  });

<video id="video" autoplay muted></video>

Проверено на Firefox на ноутбуке - запрашивается разрешение на использование веб-камеры, и console.log срабатывает при запуске видео. Так как StackOverflow блокирует вышеперечисленное от запуска inline, ссылка на работающую скрипку