Javascript 使用getUserMedia启动视频流时触发的事件
我正在使用ZXing JS条形码扫描仪库和视频流输入(网络摄像头或手机摄像头),如下代码所述 一般来说,当视频流刚刚启动时,如何向Javascript 使用getUserMedia启动视频流时触发的事件,javascript,video,html5-video,getusermedia,mediadevices,Javascript,Video,Html5 Video,Getusermedia,Mediadevices,我正在使用ZXing JS条形码扫描仪库和视频流输入(网络摄像头或手机摄像头),如下代码所述 一般来说,当视频流刚刚启动时,如何向添加事件侦听器以执行操作?(使用视频流API的视频,从ZXing的decodeFromInputVideoDevice开始) const codereder=new ZXing.BrowserQRCodeReader(); 代码阅读器 .decodeFromInputVideoDevice(未定义,'video')//使用默认输入 .then(result=>con
添加事件侦听器以执行操作?(使用视频流API的视频,从ZXing的decodeFromInputVideoDevice开始)
const codereder=new ZXing.BrowserQRCodeReader();
代码阅读器
.decodeFromInputVideoDevice(未定义,'video')//使用默认输入
.then(result=>console.log(result.text))//当找到/识别条形码时会发生这种情况
.catch(err=>console.error(err))代码>
有几种方法可以使用事件侦听器检测视频是否正在播放或是否可以播放:
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() {
...
})
最类似于视频刚刚开始
的可能是播放
。但是,根据您希望如何执行函数,上述方法之一应该适合您的需要
有关视频活动的更多信息:
例子
//获取视频
var video=document.querySelector('video');
//添加事件侦听器以监视事件
video.addEventListener('playing',()=>{
console.log('视频正在播放!')
});
//添加流
navigator.mediaDevices.getUserMedia({
视频:真的
})
.then(函数(流){
var videoTracks=stream.getVideoTracks();
stream.onremovetrack=函数(){
console.log(“流结束”);
};
window.stream=流;
video.srcObject=流;
})
.catch(函数(错误){
console.log(错误);
});代码>
我猜播放视频时流“开始”了?如果是,您是否尝试过video.addEventListener('playing',function(){})
listener@奥利弗,我不是在“播放”视频,我是在使用视频流捕获(从网络摄像头或智能手机摄像头)。这是否适用于这里?我不是在“播放”视频(例如MP4视频),而是在使用实时视频流捕获(从网络摄像头或智能手机摄像头)。playing
是否适用于这种情况?查看getUserMedia
的API,它接受要加载的loadedmetadata
事件,并使用play()
回调开始流,这两个都是html5视频API的标准,因此它也应该接受其他标准API事件作为响应(即播放
和播放
)如果API不一样,请查看最新的编辑@basjher是一个JSFIDLE,它似乎不起作用:(两个事件似乎都没有被触发)。谢谢,它起作用了!(赏金只能在24小时后颁发,所以我稍后再颁发)