项目使用flv.js从后端获取摄像头的数据来实现实时播放视频。
let mediaDataSource = { "type": "flv", "isLive": true, "withCredentials": false, "hasAudio": false, "hasVideo": true, "url": camera.mediaurl }
this.flv_load_mds(mediaDataSource)
这里是定义使用flv.js的参数，"url": camera.mediaurl是后端视频的地址.
flv_load_mds(mediaDataSource) {
let element = document.querySelector('#'+this.props.videoId);
let me = this;
me.time = new Date()/1000
this.setState({ isshowgif:true })
// console.log(element)
if (typeof me.player !== "undefined") {
if (me.player != null) {
me.player.unload();
me.player.detachMediaElement();
me.player.destroy();
me.player = null; } }
me.player = window.flvjs.createPlayer(mediaDataSource, { enableWorker: false, lazyLoadMaxDuration: 3 * 60, seekType: 'range', });
me.player.attachMediaElement(element); me.player.onvCanplay = function(e){ console.log(e) } me.player.on('error',function(error){ // me.time = new Date()/1000 // console.log(new Date()/1000 - me.time) console.log(error,me.player) if(error==='NetworkError' || error === "MediaError"){ me.player.unload(); me.player.detachMediaElement(); // setTimeout(function(){ // me.player.attachMediaElement(element); // me.player.load(); // me.player.play(); // },30*1000) } }) me.timer = setTimeout(() => { me.player.unload(); me.player.detachMediaElement(); if( this.state.camera && this.state.camera.mediaurl){ let body = { "session_id": window.session_id*1, list:[this.state.camera] }; if(this.state.camera.mediaurl.indexOf('RelVideo') >= 0){ fetch(url + '/Video/CancelVideo', { method:"POST", headers:{"token":window.token, "Content-Type":"application/json" }, body:JSON.stringify(body) }); }else{ this.state.camera.schedule_time = ''; fetch(url + '/Video/ControlVideoPlayBack', { method:"POST", headers:{"token":window.token, "Content-Type":"application/json" }, body:JSON.stringify(body) }); } } me.setState({ isshowgif:false, isrestart:true }) clearTimeout(me.timer) }, 40*1000); try{ me.player.load(); me.player.play(); }catch(err){ console.log('from try',err) } }
这里是具体使用的过程，里面的定时器主要用做在40s后取消播放；element获取播放视频的video标签，然后将视频播放到这个video标签里面。
me.player.unload();me.player.detachMediaElement();me.player.destroy();me.player = null;
退出播放时做的处理。
