128 lines
3.9 KiB
JavaScript
128 lines
3.9 KiB
JavaScript
|
||
export default class HuaXiaVideo {
|
||
|
||
constructor(_url, _imageId) {
|
||
this.url = _url
|
||
this.ws = null;
|
||
this.img_1 = document.getElementById(_imageId);
|
||
this.lockReconnect = false;
|
||
this.refreshFlag = true;
|
||
this._initHeartbeat();
|
||
}
|
||
|
||
|
||
playVideo() {
|
||
|
||
if (this.ws) {
|
||
this.ws.close()
|
||
}
|
||
|
||
let _that = this;
|
||
|
||
this.ws = new WebSocket(this.url);
|
||
this.ws.onopen = function (event) {
|
||
_that.heartCheck.reset().start();
|
||
console.log("open...");
|
||
}
|
||
// let img = new Image();
|
||
// img.onload = function () {
|
||
// _that.img_1.src = img.src;
|
||
// }
|
||
let oldtime = new Date().valueOf();
|
||
this.ws.onmessage = function (event) {
|
||
let curtime = new Date().valueOf()
|
||
let logtime = curtime - oldtime;
|
||
console.log("当前时间:"+curtime+'-------'+"差值:"+logtime)
|
||
oldtime = curtime;
|
||
_that.heartCheck.reset().start();
|
||
if (typeof (event.data) == "string") { //字符串数据
|
||
//var result = JSON.parse(event.data);
|
||
//console.log(event.data)
|
||
} else { //视频图片流数据
|
||
let reader = new FileReader();
|
||
reader.readAsDataURL(event.data);
|
||
reader.onload = function (eve) {
|
||
_that.img_1.src = this.result;
|
||
};
|
||
}
|
||
};
|
||
this.ws.onerror = function (event) {
|
||
console.log("error");
|
||
_that.reconnect();
|
||
}
|
||
this.ws.onclose = function (event) {
|
||
console.log("close");
|
||
_that.reconnect();
|
||
}
|
||
|
||
|
||
}
|
||
|
||
destroy(){
|
||
if (this.ws) {
|
||
this.ws.close()
|
||
}
|
||
this.lockReconnect = false;
|
||
}
|
||
|
||
|
||
//心跳检测
|
||
_initHeartbeat() {
|
||
let _that = this;
|
||
this.heartCheck = {
|
||
timeout: 3000, //3秒发一次心跳
|
||
timeoutObj: null,
|
||
serverTimeoutObj: null,
|
||
reset: function () {
|
||
clearTimeout(this.timeoutObj);
|
||
clearTimeout(this.serverTimeoutObj);
|
||
return this;
|
||
},
|
||
start: function () {
|
||
let self = this;
|
||
this.timeoutObj = setTimeout(function () {
|
||
//这里发送一个心跳，后端收到后，返回一个心跳消息，
|
||
//onmessage拿到返回的心跳就说明连接正常
|
||
//ws.send("ping");
|
||
console.log('ping9999')
|
||
self.serverTimeoutObj = setTimeout(function () {
|
||
//如果超过一定时间还没重置，说明后端主动断开了
|
||
//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
|
||
_that.playVideo()
|
||
}, self.timeout)
|
||
}, this.timeout)
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
reconnect() {
|
||
let _that =this;
|
||
if (this.lockReconnect) return;
|
||
this.lockReconnect = true;
|
||
setTimeout(function () { //没连接上会一直重连，设置延迟避免请求过多
|
||
console.log('重连9999')
|
||
_that.playVideo()
|
||
_that.lockReconnect = false;
|
||
}, 2000);
|
||
}
|
||
|
||
getQueryStringValue(name) {
|
||
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||
let r = window.location.search.substr(1).match(reg);
|
||
if (r != null) {
|
||
return unescape(r[2]);
|
||
}
|
||
return null;
|
||
}
|
||
|
||
getDecodeQueryStringValue(name) {
|
||
let ser = decodeURI(window.location.search)
|
||
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||
let r = ser.substr(1).match(reg);
|
||
if (r != null) {
|
||
return unescape(r[2]);
|
||
}
|
||
return null;
|
||
};
|
||
} |