2

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

一般来说，<video>当视频流刚刚开始时，如何将事件侦听器添加到 a 以执行操作？（使用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”的监听器会更好。

编辑：
这是一个显示问题的 jsFiddle：不使用各种事件：started, devicechange.

4

1 回答 1

4

有几种方法可以使用事件侦听器检测视频是否正在播放或可以播放：

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 阻止上述内容内联运行，因此链接到工作小提琴

于 2020-02-25T11:07:48.453 回答