yzHY/zhgHy/js/video.js

var webSocket;
var leiBar = 3,shipLi = [];
var playView = {}, uuidView = {}, _Uuid = "";
$(document).ready(function(){
	_Uuid = _uuid();
	setMsg();
	init();
	getLi(0);
	timeId = setInterval(()=>{
		getLi(1);
	},60*1000)
})
function setMsg() {
	if ('WebSocket' in window) {
		webSocket = new WebSocket("ws://121.201.66.101:9988/video");
	} else if ('MozWebSocket' in window) {
		webSocket = MozWebSocket("ws://121.201.66.101:9988/video");
	} else {
		window.alert("浏览器不支持WebSocket");
	}
	webSocket.onopen = function() {
		setwsAlive()
	}
	webSocket.onclose = function() {
		console.log("我自闭了");
	}
	webSocket.onmessage = function(msg) {
		let _data = JSON.parse(msg.data);
	}
}
function setwsAlive(){
	webSocket.send(JSON.stringify({
		cmd: "keep_alive",
		sid: _Uuid
	}))
	setTimeout(setwsAlive, 3*1e4);
}
function _uuid() {
	let t = () => (65536 * (1 + Math.random()) | 0).toString(16).substring(1);
	return t() + t() + t() + t() + t() + t() + t() + t()
}
function init(){
	let _str = "";
	playView = {};
	for(let i=0;i<leiBar*leiBar;i++){
		_str += `<div class="videoBg alPlay${i}" style="width: ${100 / leiBar}%;height: ${100 / leiBar}%;"></div>`;
		playView["alPlay"+i] = null;
	}
	$("#videoBox").html(_str);
	$(".caremLi .iconfont").removeClass("icon-bofang").addClass("icon-shexiangtou");
}

function getLi(num){
	var _arr = [{name:"粤珠",list:[],check:true},
				{name:"高栏",list:[],check:false},
				{name:"新谷",list:[],check:false},
				{name:"其他",list:[],check:false},
				{name:"监控室",list:[],check:false}];
	infoAjax("G00137283",function(res){
		if(num == 0){
			_arr[4].list = res;
		}else{
			shipLi[4].list = res;
		}
		getList(function acb(_obj, _online){
			_obj.sort(function(a,b){ return Number(a.prod.replace(/[^0-9]/ig, "")) - Number(b.prod.replace(/[^0-9]/ig, "")) });
			_obj.forEach((i,ind) => {
				if(i.prod.indexOf("粤珠") != -1){
					_arr[0].list.push(i);
				}else if(i.prod.indexOf("高栏") != -1){
					_arr[1].list.push(i);
				}else if(i.prod.indexOf("新谷") != -1){
					_arr[2].list.push(i);
				}else{
					_arr[3].list.push(i);
				}
				$(".shipDet[data-sn="+i.sn+"] .icon-chuanbo").css("color",i.status == 1?'#55aaff':'#afafaf');
			});
			
			// $("#onAll").text(_online+"/"+_obj.length);
			if(num == 0){
				shipLi = _arr;
				setHtml();
			}else{
				shipLi[0].list = _arr[0].list;
				shipLi[1].list = _arr[1].list;
				shipLi[2].list = _arr[2].list;
				shipLi[3].list = _arr[3].list;
			}
		});
	})
};
function changeTime(time) {
	let date3 = new Date().getTime() - (parseInt(time));
	let str = 1;
	if (date3 > (5 * 60 * 1000)) {
		str = 0;
	}
	return str;
};
function setHtml(){
	let str = "";
	for(let i=0;i<shipLi.length;i++){
		let item = shipLi[i],_list = shipLi[i].list;
		if(_list.length){
			str += `<div style="padding:5px;color:#e6e6e6;">
						<div class="clasName" data-ind="${i}">
							<div class="${item.check?'el-icon-caret-bottom':'el-icon-caret-right'}" style="margin-right:5px;"></div>
							<div style="font-size:14px;">${item.name}</div>
						</div>
						<div class="shipClas" style="display:${item.check?'block':''};">`
			for(let j=0;j<_list.length;j++){
				let subi = _list[j];
				str += `<div style="padding:5px;">
							<div class="shipDet" data-sn="${subi.sn}" data-id="${i}">
								<div class="iconfont icon-jia"></div>
								<div class="iconfont icon-chuanbo" style="margin:0 5px;color:${subi.status == 1?'#55aaff':'#afafaf'};font-size:16px;"></div>
								<div style="font-size:14px;">${subi.prod}</div>
							</div>
							<div class="caremLi"></div>
						</div>`
			}
			str += `</div></div>`;
		}
	}
	$("#shipLi").html(str);
}
	
$(document).on("click",".leiBox>div",function(){
	$(".leiBox>div").removeClass("act");
	$(this).addClass("act");
	$(".leiBtn").text($(this).text());
	$(".leiBox").css("display","none");
	let key = parseInt($(this).data("id"));
	let _a = key*key;
	let _b = leiBar*leiBar;
	if(key < leiBar){
		let _ele = $("#videoBox .videoBg");
		for(let i = _a;i < _b;i++){
			_ele[i].remove();
			delete playView["alPlay"+i] ;
		}
		$("#videoBox .videoBg").css({"width":(100 / key)+"%","height":(100 / key)+"%"})
	}else if(key > leiBar){
		let _str = "";
		for(let i = _b;i < _a;i++){
			playView["alPlay"+i] = null;
			_str += `<div class="videoBg alPlay${i}" style="width: ${100 / key}%;height: ${100 / key}%;"></div>`;
		}
		$("#videoBox").append(_str);
		$("#videoBox .videoBg").css({"width":(100 / key)+"%","height":(100 / key)+"%"})
	}
	leiBar = key;
});
$(".leiBtn").on("click","",function(){
	if($(".leiBox").css("display") == "none"){
		$(".leiBox").css("display","block"); 
	}else{
		$(".leiBox").css("display","none");
	}
})
$(document).on("click",".shipDet",function(){
	let _sn = $(this).data("sn");
	let _id = $(this).data("id");
	let _ind = shipLi[_id].list.findIndex((item,index) => { return item.sn == _sn; });
	let _obj = shipLi[_id].list[_ind];
	if(_ind != -1){
		if( _obj["list"]!= undefined){
			if(shipLi[_id].list[_ind]["show"]){
				shipLi[_id].list[_ind]["show"] = false;
				$(".shipDet[data-sn="+_sn+"]+.caremLi").css("display","none");
				$(this).find(".icon-jian").removeClass("icon-jian").addClass("icon-jia");
			}else{
				shipLi[_id].list[_ind]["show"] = true;
				$(".shipDet[data-sn="+_sn+"]+.caremLi").css("display","block");
				$(this).find(".icon-jia").removeClass("icon-jia").addClass("icon-jian");
			}
		}else{
			if(_obj.dev_ver == 2){
				ajaxCream(_sn,_id,_ind);
			}else if(_obj.dev_ver == 4){
				getCream(_sn,_id,_ind,[{
					alive: _obj.status,
					cameraid: "1",
					name: "监控室"
				}]);
			}else{
				let _Str = [{
					alive: 1,
					cameraid: "001",
					name: "驾驶室",
				},{
					alive: 1,
					cameraid: "002",
					name: "机舱",
				},{
					alive: 1,
					cameraid: "003",
					name: "左舷",
				},{
					alive: 1,
					cameraid: "004",
					name: "右舷",
				}];
				let _creamStr = [{
					alive: 0,
					cameraid: "001",
					name: "驾驶室",
					},{
					alive: 0,
					cameraid: "002",
					name: "机舱",
					},{
					alive: 0,
					cameraid: "003",
					name: "左舷",
					},{
					alive: 0,
					cameraid: "004",
					name: "右舷",
				}];
				if(zhgYsy[_sn] == undefined){
					if(_obj.status == 1){
						getCream(_sn,_id,_ind,_Str);
					}else{
						getCream(_sn,_id,_ind,_creamStr);
					}
				}else{
					infoAjax(zhgYsy[_sn],function(res){
						let _skoi = _obj.status == 1?_Str:_creamStr;
						if(res.length){
							let _oxkj = res[0];
							_skoi.push({
								alive: _oxkj.status,
								cameraid: 1,
								name: _oxkj.prod,
								ysy: _oxkj.sn
							});
						}
						getCream(_sn,_id,_ind,_skoi);
					})
				}
			}
		}
	}
})
var creamStr = [{
	alive: 0,
	cameraid: "001",
	name: "驾驶室",
	},{
	alive: 0,
	cameraid: "002",
	name: "机舱",
	},{
	alive: 0,
	cameraid: "003",
	name: "左舷",
	},{
	alive: 0,
	cameraid: "004",
	name: "右舷",
}];
function ajaxCream(sn,faind,ind){
	if(shipLi[faind].list[ind].status == 1){
		let _obj = {
			http: baseUrl,
			url: "/request",
			type: "POST",
			tok: "Bearer " + localStorage.getItem("ylToken")
		};
		let _data = {
			event: "videoLists",
			msgid: new Date().getTime()+"",
			sn: sn
		};
		postAjax(_obj, _data).then((res) => {
			if(res.result == "ok"){
				getCream(sn,faind,ind,res.data.info);
			}else{
				getCream(sn,faind,ind,creamStr);
			}
		})
	}else{
		getCream(sn,faind,ind,creamStr);
	}
}

function getCream(sn,faind,ind,_obj){
	let str = "";
	for(let i=0;i<_obj.length;i++){
		if(_obj[i].name != "none"){
			if(_obj[i].ysy == undefined){
				str += `<div class="creamItem" data-id="${faind}" data-cid="${_obj[i].cameraid+"_"+_obj[i].alive+"_"+sn+"_ord"}">
							<i class="iconfont icon-shexiangtou margin-right-xs" style="color:${_obj[i].alive == 0?'#cfcfcf':'#0068ff'}"></i>${_obj[i].name}
						</div>`
			}else{
				str += `<div class="creamItem" data-id="${faind}" data-cid="${_obj[i].ysy+"_"+_obj[i].alive+"_"+sn+"_ysy"}">
							<i class="iconfont icon-shexiangtou margin-right-xs" style="color:${_obj[i].alive == 0?'#cfcfcf':'#0068ff'}"></i>${_obj[i].name}
						</div>`
			}
			
		}
	}
	shipLi[faind].list[ind]["show"] = true;
	shipLi[faind].list[ind]["list"] = [];
	$(".shipDet[data-sn="+sn+"]+.caremLi").html(str);
	$(".shipDet[data-sn="+sn+"]").find(".icon-jia").removeClass("icon-jia").addClass("icon-jian");
}
$(document).on("click",".creamItem",function(){
	let _key = $(this).data("cid").split("_");
	let _val = $(this).text();
	let _ids = shipLi[$(this).data("id")].list;
	let _snNa = _ids[_ids.findIndex((item,index) => {return item.sn == _key[2]})];
	let _ab = _key[2]+"_"+Number(_key[0])+"_"+_snNa.dev_ver;
	if(_key[1] == 0){
		showErr('摄像头离线中！');
	}else{
		if(JSON.stringify(playView).indexOf(_key[2]) != -1){
			for(let key in playView){
				if(playView[key].indexOf(_key[2]) != -1){
					if(_key[3] == "ord"){
						stopFlv(key,_snNa.dev_ver,1);
						$(this).find(".iconfont").removeClass("icon-shexiangtou").addClass("icon-bofang");
						playView[key] = _key.toString();
						if(_snNa.dev_ver != 4){
							$("."+key).html(`<video id="${key}" style="width:100%;height:100%;object-fit: fill;" muted autoplay controls></video>
											 <div class="vidTxt"><div>${_snNa.dev_name} - ${_val}</div><div class="iconfont icon-cha" data-id="${key}_${_key[2]}_${_snNa.dev_ver}"></div></div>`);
							if(_snNa.dev_ver == 2){
								openRtmp(_key, key);
							}else{
								if(JSON.stringify(uuidView).indexOf(_ab) == -1){
									uuidView[_ab] = _uuid();
								}
								let _src = "ws://121.201.66.101:9988/real_play/" + _Uuid + "/gzyz/" + uuidView[_ab] + "/"+_key[2]+"/0/"+Number(_key[0])+"/1"
								startPlay(_src,key,_key,false);
							}
						}else{
							$("."+key).html(`<div id="${key}" style="width:100%;height:100%;object-fit: fill;"></div>
											 <div class="vidTxt"><div>${_snNa.dev_name} - ${_val}</div><div class="iconfont icon-cha" data-id="${key}_${_key[2]}_${_snNa.dev_ver}"></div></div>`);
							playEzopen(_key, key);
						}
					}else{
						stopFlv(key,_snNa.dev_ver);
						$(this).find(".iconfont").removeClass("icon-shexiangtou").addClass("icon-bofang");
						playView[key] = _key.toString();
						$("."+key).html(`<div id="${key}" style="width:100%;height:100%;object-fit: fill;"></div>
										 <div class="vidTxt"><div>${_snNa.dev_name} - ${_val}</div><div class="iconfont icon-cha" data-id="${key}_${_key[2]}_${_snNa.dev_ver}"></div></div>`);
						playEzopen(_key, key);
					}
					break;
				}
			}
		}else{
			let flag=true;
			// if(JSON.stringify(playView).indexOf(null) != -1){
			for(let key in playView){
				if(playView[key] == null){
					$(".shipDet[data-sn="+_key[2]+"]+.caremLi .iconfont").removeClass("icon-bofang").addClass("icon-shexiangtou");
					$(this).find(".iconfont").removeClass("icon-shexiangtou").addClass("icon-bofang");
					playView[key] = _key.toString();
					if(_snNa.dev_ver != 4){
						if(_key[3] == "ord"){
							$("."+key).html(`<video id="${key}" style="width:100%;height:100%;object-fit: fill;" muted autoplay controls></video>
											 <div class="vidTxt"><div>${_snNa.dev_name} - ${_val}</div><div class="iconfont icon-cha" data-id="${key}_${_key[2]}_${_snNa.dev_ver}"></div></div>`);
							if(_snNa.dev_ver == 2){
								setAlive(_key[2]);
								openRtmp(_key, key);
							}else{
								if(JSON.stringify(uuidView).indexOf(_ab) == -1){
									uuidView[_ab] = _uuid();
								}
								let _src = "ws://121.201.66.101:9988/real_play/" + _Uuid + "/gzyz/" + uuidView[_ab] + "/"+_key[2]+"/0/"+Number(_key[0])+"/1"
								startPlay(_src,key,_key,false);
							}
						}else{
							$("."+key).html(`<div id="${key}" style="width:100%;height:100%;object-fit: fill;"></div>
											 <div class="vidTxt"><div>${_snNa.dev_name} - ${_val}</div><div class="iconfont icon-cha" data-id="${key}_${_key[2]}_${_snNa.dev_ver}"></div></div>`);
							playEzopen(_key, key);
						}
					}else{
						$("."+key).html(`<div id="${key}" style="width:100%;height:100%;object-fit: fill;"></div>
										 <div class="vidTxt"><div>${_snNa.dev_name} - ${_val}</div><div class="iconfont icon-cha" data-id="${key}_${_key[2]}_${_snNa.dev_ver}"></div></div>`);
						playEzopen(_key, key);
					}
					flag=false;
					break;
				}
			}
			if(flag){
				showErr('暂无可用通道！');
			}
			// }else{
			// 	console.log("playView",playView)
			// 	showErr('暂无可用通道！');
			// }
		}
	}
})
$(document).on("click",".videoBg .icon-cha",function(){
	let _sf = $(this).data("id").split("_");
	$(".videoBg."+_sf[0]).html("");
	stopFlv(_sf[0],_sf[2]);
})
function stopFlv(_sn,_dev,num){
	let _snli = playView[_sn].split(",");
	if(_dev == 2){
		let _obj = {
			http: baseUrl,
			url: "/request",
			type: "POST",
			tok: "Bearer " + localStorage.getItem("ylToken")
		};
		let _data = {
			"msgid": new Date().getTime()+"",
			"sn": _snli[2],
			"event": "stopVideo",
			"info": {
				"cameraid": _snli[0],
				"type": 0
			}
		};
		postAjax(_obj, _data).then((res) => {
			if(num != 1){
				if(playId[_snli[2]] != null){
					playId[_snli[2]].unload();
					playId[_snli[2]].detachMediaElement();
					playId[_snli[2]].destroy();
					delete playId[_snli[2]];
				}
				clearInterval(timeId[_snli[2]]);
				playView[_sn] = null;
				$(".shipDet[data-sn="+_snli[2]+"]+.caremLi .iconfont").removeClass("icon-bofang").addClass("icon-shexiangtou");
			}
		})
	}else if(_dev == 4 || _snli[3] == "ysy"){
		if(playId[_snli[2]] != null){
			 playId[_snli[2]].stop();
			 playId[_snli[2]].destroy();
			 delete playId[_snli[2]];
		}
		 playView[_sn] = null;
		 $(".shipDet[data-sn="+_snli[2]+"]+.caremLi .iconfont").removeClass("icon-bofang").addClass("icon-shexiangtou");
	// }else if(_snli[3] == "ysy"){
	// 	playId[_snli[2]].stop();
	// 	playId[_snli[2]].destroy();
	// 	playView[_sn] = null;
	// 	$(".shipDet[data-sn="+_snli[2]+"]+.caremLi .iconfont").removeClass("icon-bofang").addClass("icon-shexiangtou");
	}else{
		webSocket.send(JSON.stringify({
			carId: _snli[2],
			channel: 1,
			cmd: "real_close",
			stream: Number(_snli[0]),
			uuid: uuidView[_snli[2]+"_"+Number(_snli[0])+"_3"]
		}))
		if(num != 1){
			if(playId[_snli[2]] != null){
				playId[_snli[2]].unload();
				playId[_snli[2]].detachMediaElement();
				playId[_snli[2]].destroy();
				delete playId[_snli[2]];
			}
			playView[_sn] = null;
		}
		$(".shipDet[data-sn="+_snli[2]+"]+.caremLi .iconfont").removeClass("icon-bofang").addClass("icon-shexiangtou");
	}
}
var playId = {}, playErr = {},timeId = {};
// ----------------- 播放视频 -----------------------
function openRtmp(_carme,_num){
	let _obj = {
		http: baseUrl,
		url: "/request",
		type: "POST",
		tok: "Bearer " + localStorage.getItem("ylToken")
	};
	let _data = {
		event: "video",
		msgid: new Date().getTime()+"",
		sn: _carme[2],
		info: {  
			"cameraid":_carme[0], 
			"type":"rtsp/rtmp"
		}
	};
	postAjax(_obj, _data).then((res) => {
		if(res.result == "ok"){
			if(res.data.errcode == 0||res.data.errcode == -206){
				let _src = "https://www.enstation.com:8090/live?port=1935&app=live&stream="+_carme[2]+"_"+_carme[0];
				startPlay(_src,_num,_carme,true);
			}else{
				playErr[_carme[2]] = 0;
				showErr("请求播放失败！");
			}
		}else{
			playErr[_carme[2]] = 0;
			showErr("请求播放失败！");
		}
	})
}
function playEzopen(_sn,_divid){
	if(playId[_sn[2]] != null&&playId[_sn[2]] != undefined){
		playId[_sn[2]].stop();
		playId[_sn[2]].destroy();
	}
	let _wid = $(".videoBg").width();
	let _hie = $(".videoBg").height();
	let _src = "ezopen://open.ys7.com/"+(_sn[3] == "ysy"?_sn[0]:_sn[2])+"/1.live";
	playId[_sn[2]] =  new EZUIKit.EZUIKitPlayer({
		id: _divid,
		autoplay: true,
		url: _src,
		accessToken: localStorage.getItem("ysyToken"),
		width:_wid,
		height:_hie,
		audio:false,
		plugin: ['talk'], 
		decoderPath: "http://121.37.6.200/Zgcy"
	});
}
// 直播组件创建并播放
function startPlay(_url,_id,_sn,_sta){
	if(playId[_sn[2]] != null&&playId[_sn[2]] != undefined){
		playId[_sn[2]].unload();
		playId[_sn[2]].detachMediaElement();
		playId[_sn[2]].destroy();
		playId[_sn[2]] = null;
	}
	setTimeout(()=>{
		try {
			if (flvjs.isSupported()) {
				let videoWin = document.getElementById(_id);
				playId[_sn[2]] = flvjs.createPlayer({
					type: "flv",
					isLive: true,
					hasAudio: false,
					url: _url,
					enableStashBuffer: !_sta
				}, {  
					enableStashBuffer: _sta,
					stashInitialSize: 128
				});
				flvjs.getFeatureList();
				playId[_sn[2]].attachMediaElement(videoWin)
				playId[_sn[2]].load();
				playId[_sn[2]].play();
				playId[_sn[2]].on('error', err => {
					playId[_sn[2]].unload();
					playId[_sn[2]].detachMediaElement();
					playId[_sn[2]].destroy();
					playId[_sn[2]] = null;
					playErr[_sn[2]] += 1;
					if(playErr[_sn[2]] > 5){
						console.log(playErr[_sn[2]])
					}else{
						startPlay(_url,_id,_sn,_sta);
					}
				});
				return true;
			} else {
				console.log("flvjs不支持")
			}
		} catch (error) {
			console.log("连接websocket异常", error);
			return false;
		}
	},2000);
}
// --------------------- 心跳包 -----------
function setAlive(_sn){
	clearInterval(timeId[_sn]);
	if(timeId[_sn] == null){
		ajaAlive(_sn);
		timeId[_sn] = setInterval(()=>{
			ajaAlive(_sn);
		},60*1000)
	}
}
// 心跳包
function ajaAlive(_sn){
	let _obj = {
		http: baseUrl,
		url: "/request",
		type: "POST",
		tok: "Bearer " + localStorage.getItem("ylToken")
	};
	let _data = {
		event: "alive",
		msgid: new Date().getTime()+"",
		sn: _sn
	};
	postAjax(_obj, _data).then((res) => {})
}
function closeAll(){
	for(let key in playView){
		if(playView[key] != null){
			let _snli = playView[key].split(",");
			if(JSON.stringify(uuidView).indexOf(_snli[2]) != -1){
				stopFlv(key,1);
			}else{
				stopFlv(key,2);
			}
		}
	}
	init();
}
function showErr(_msg, _type) {
	var boardDiv = `<div id="yzAlert">
						<i class="iconfont icon-warn"></i>
						<p>${_msg}</p>
					</div>`;
	$(document.body).append(boardDiv);
	setTimeout(() => {
		$("#yzAlert").css("transform","translate(-50%, -100%)");
		setTimeout(() => {
			$("#yzAlert").remove();
		}, 100);
	}, 3000);
};
function fullScreen(){
	let elem = document.getElementById("videoBox");
	if (elem.requestFullscreen) {
		elem.requestFullscreen();
	} else if (elem.mozRequestFullScreen) {
		elem.mozRequestFullScreen();
	} else if (elem.webkitRequestFullScreen) {
		elem.webkitRequestFullScreen();
	}else if(elem.msRequestFullScreen){
		elem.msRequestFullScreen();
	}else {
		alert('当前浏览器不支持全屏，请更换浏览器')
		return false
	}
}
$(document).on("click",".clasName",function(){
	let _ind = $(this).data("ind");
	if(shipLi[_ind].check){
		shipLi[_ind].check = false;
		$(this).next().css("display","none");
		$(this).find(".el-icon-caret-bottom").addClass("el-icon-caret-right").removeClass("el-icon-caret-bottom");
	}else{
		shipLi[_ind].check = true;
		$(this).next().css("display","block");
		$(this).find(".el-icon-caret-right").addClass("el-icon-caret-bottom").removeClass("el-icon-caret-right");
	}
})
function closeLogout(){
	localStorage.removeItem("AjaxGen");
	localStorage.removeItem("ylToken");
	top.location.href = "../index.html?id=video";
}