javascript 启动视频流时触发的事件,使用getUserMedia

gj3fmq9x  于 2022-10-30  发布在  Java
关注(0)|答案(2)|浏览(203)

我使用的是ZXing JS条码扫描器库https://github.com/zxing-js/library/和视频流输入(网络摄像头或手机摄像头),如以下代码所示。

一般来说,如何在视频流刚开始时向<video>添加事件侦听器以执行操作?(使用MediaDevices.getUserMedia视频流API的视频,从ZXing的decodeFromInputVideoDevice开始)?

第一个
注意:目前我使用setTimeout(..., 2000),当用户点击按钮开始播放视频时,但很明显,如果出现对话框“Do you want to allow this website to use the camera device?",那么2秒是不够的。在事件“VideoHasJustStarted”上使用侦听器会更好。

编辑:

Here is a jsFiddle显示问题:不适用于各种事件:一个月四个月一个月,一个月五个月。

abithluo

abithluo1#

有几种方法可以使用事件侦听程式来侦测视频是否正在播放或可以播放:

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

示例

第一个
在笔记本电脑上的Firefox上测试-需要权限才能使用网络摄像头,并且console.log在视频开始时触发。由于StackOverflow阻止以上内联运行,link to working fiddle

gk7wooem

gk7wooem2#

甚至我在浏览器中使用PDF 417 [https://github.com/PeculiarVentures/js-zxing-pdf417]来扫描条形码。
1.我们正在捕捉一段视频
1.然后,我们处理视频的每一帧,并处理帧以从条形码中获取信息。我们面临的问题是,我无法检测到从条形码中输出的包含最准确信息的帧。
有人能帮我解决这个问题吗?

相关问题