视频流启动时触发的事件，getUserMedia

Question

我正在使用带有视频流输入（网络摄像头或手机摄像头）的 ZXing JS 条码扫描器库 https://github.com/zxing-js/library/，如下代码所示。

一般来说，当一个视频流刚刚开始时，如何给<video>添加一个事件监听器来做一个动作？（一个使用MediaDevices.getUserMedia视频流API的视频，从ZXing的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”的监听器会更好。

编辑：
Here is a 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 阻止上述内容内联运行，link to working fiddle