; (function (undefined) {
|
"use strict"
|
var _global;
|
|
var scaleProcess = function (hst_his, starttime, endtime, callbacknewpos) {
|
var hisDom = $('#' + hst_his);
|
var item1 = $("<div id=\"" + hst_his + "_bar\" style=\"background-repeat: repeat-x; background-position: 0 100%; background-color: #E4E4E4; border-left: 1px #83BBD9 solid; height: 10px; position: relative; font-size: 0px; border-radius: 3px;\" ></div>");
|
var item12 = $("<div id=\"" + hst_his + "_step\" style=\"background-repeat: repeat-x; background-color: #8080FF; width: 0px; position: absolute; height: 10px; width: 0; left: 0; bottom: 0; \"></div>");
|
var item13 = $("<span id=\"" + hst_his + "_btn\" style=\"background-repeat: repeat-x; background-color: #804080;width:8px;height:12px;position:absolute;left:-2px;top:-1px;cursor:pointer;\"></span>");
|
item1.append(item12);
|
item1.append(item13);
|
//var item4 = $("<span id=\""+hst_his+"_start_time\" style=\"left: -25px;position: relative;\">00:00:00</span>");
|
var item5 = $("<span id=\"" + hst_his + "_cur_time\" style=\"left:50%;position: relative;margin-left: -72px;color: #F080F0;font-size:12px;\">00:00:00</span>");
|
//var item6 = $("<span id=\""+hst_his+"_end_time\" style=\"right: -25px;position: relative;float: right;\">00:00:00</span>");
|
//item0.append(item4);
|
|
//item0.append(item6);
|
hisDom.append(item1);
|
hisDom.append(item5);
|
|
this.btn = document.getElementById(hst_his + "_btn");
|
this.bar = document.getElementById(hst_his + "_bar");
|
this.title = document.getElementById(hst_his + "_cur_time");
|
this.step = this.bar.getElementsByTagName("div")[0];
|
this.init(callbacknewpos);
|
this.startT0 = new Date(starttime.replace(/-/g, "/"));
|
this.startT = new Date(starttime.replace(/-/g, "/"));
|
this.endT = new Date(endtime.replace(/-/g, "/"));
|
this.curT = this.startT;
|
var formattedDateString = dateDigitToString(this.startT.getHours()) + ':' + dateDigitToString(this.startT.getMinutes()) + ':' + dateDigitToString(this.startT.getSeconds());
|
//document.getElementById(hst_his+"_start_time").innerHTML=formattedDateString;
|
this.title.innerHTML = formattedDateString;
|
//formattedDateString = dateDigitToString(this.endT.getHours()) + ':' + dateDigitToString(this.endT.getMinutes()) + ':' + dateDigitToString(this.endT.getSeconds());
|
//document.getElementById(hst_his+"_end_time").innerHTML=formattedDateString;
|
};
|
var dateDigitToString = function (num) {
|
return num < 10 ? '0' + num : num;
|
}; //这个函数的作用是把个位数的十位置0,凑成两位数，如：08 04
|
scaleProcess.prototype = {
|
init: function (callbacknewpos) {
|
var f = this, g = document, b = window, m = Math;
|
f.btn.onmousedown = function (e) {
|
var x = (e || b.event).clientX;
|
var l = this.offsetLeft;
|
var max = f.bar.offsetWidth - this.offsetWidth;
|
f.dropStartT = f.curT;
|
g.onmousemove = function (e) {
|
var thisX = (e || b.event).clientX;
|
var to = m.min(max, m.max(-2, l + (thisX - x)));
|
f.btn.style.left = to + 'px';
|
f.ondrag(m.round(m.max(0, to / max) * 100), to);
|
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
|
};
|
g.onmouseup = function (e) {
|
var thisX = (e || b.event).clientX;
|
var to = m.min(max, m.max(-2, l + (thisX - x)));
|
f.btn.style.left = to + 'px';
|
var pos = m.round(m.max(0, to / max) * 100);
|
|
|
this.onmousemove = null;
|
this.onmouseup = null;
|
|
if (callbacknewpos != null) {
|
var diff = (f.endT.getTime() - f.startT0.getTime()) / 1000;//时间差的毫秒数
|
var passedseconds = diff * pos / 100;
|
var curDate = new Date(f.startT0);
|
curDate.setSeconds(curDate.getSeconds() + passedseconds);
|
callbacknewpos(curDate);
|
f.startT.setTime(f.startT.getTime() + (curDate.getTime() - f.dropStartT.getTime()) - 3000);
|
}
|
f.dropStartT = null;
|
};
|
};
|
},
|
ondrag: function (pos, x) {
|
this.step.style.width = Math.max(0, x) + 'px';
|
|
var diff = (this.endT.getTime() - this.startT0.getTime()) / 1000;//时间差的毫秒数
|
var passedseconds = diff * pos / 100;
|
var curDate = new Date(this.startT0);
|
curDate.setSeconds(curDate.getSeconds() + passedseconds);
|
this.curT = curDate;
|
var formattedDateString = dateDigitToString(curDate.getHours()) + ':' + dateDigitToString(curDate.getMinutes()) + ':' + dateDigitToString(curDate.getSeconds());
|
this.title.innerHTML = formattedDateString;
|
},
|
setProcessTime: function (curtime) {
|
if (this.dropStartT != null)
|
return;
|
var max = this.bar.offsetWidth;
|
var newdate = new Date(this.startT);
|
newdate.setSeconds(this.startT.getSeconds() + curtime);
|
if (newdate > this.endT)
|
return;
|
var percent = (newdate.getTime() - this.startT0.getTime()) / (this.endT.getTime() - this.startT0.getTime());
|
|
|
this.step.style.width = max * percent + 'px';
|
this.btn.style.left = max * percent + 'px';
|
this.curT = newdate;
|
|
var formattedDateString = dateDigitToString(newdate.getHours()) + ':' + dateDigitToString(newdate.getMinutes()) + ':' + dateDigitToString(newdate.getSeconds());
|
this.title.innerHTML = formattedDateString;
|
}
|
}
|
|
function extend(o, n, override) {
|
for (var key in n) {
|
if (n.hasOwnProperty(key) && (!o.hasOwnProperty(key) || override)) {
|
o[key] = n[key];
|
}
|
}
|
return o;
|
}
|
|
function HstH5Video(opt) {
|
this._initial(opt);
|
}
|
|
HstH5Video.prototype = {
|
constructor: this,
|
|
_initial: function (opt) {
|
// 默认参数
|
var options = {
|
domId: '',
|
live: true,
|
screenshot: true,
|
autoplay: true,
|
mutex: false,
|
width: 400,
|
height: 400,
|
loop: false,
|
volume: 0,
|
lang: 'zh-cn', //可选值: 'en', 'zh-cn', 'zh-tw'
|
contextmenu: [],
|
viewSize: 'full',
|
needSeek: false,
|
tbarBgColor: {},
|
rightMousedown: function () {
|
|
}
|
};
|
this.options = extend(options, opt, true);
|
this.options.contextmenu = this.options.contextmenu.concat([{
|
text: 'cmsv6 20200103',
|
click: function () {
|
|
}
|
}]);
|
if (this.options.lang.indexOf('cn.xml') > -1) {
|
this.options.lang = 'zh-cn'
|
}
|
if (this.options.lang.indexOf('tw.xml') > -1) {
|
this.options.lang = 'zh-tw'
|
}
|
if (this.options.lang.indexOf('en.xml') > -1) {
|
this.options.lang = 'en'
|
}
|
this.itemPre = 'HstH5Video';
|
this.listeners = [];
|
this.handlers = {};
|
this.num = 1;
|
this.lastIndex = 1;
|
this.playVideos = {};
|
this.playVideosTimer = {};
|
this.videoText = {};
|
this.devInfoMap = {};
|
this.progressMap = {};
|
this.reloadMap = {};
|
this.reloadMapTime = {};
|
this.initEventType();
|
this.mediaPortMap = {};
|
this.timeMap808 = {};
|
this.speedZeroNum = {};
|
this.beforeReconnectionVolume = {};
|
this.playWating = false;
|
this.playWatingTimer = null;
|
this.playWatingNum = 0;
|
this.soundDomId = 'HstH5VideoSound';
|
this.winDom = $('#' + this.options.domId);
|
this.winDom.empty();
|
this.winDom.css('width', this.options.width).css('height', this.options.height).addClass('ttx-video-h5');
|
this.bindEvent()
|
},
|
initEventType: function () {
|
this.eventType = {
|
select: 'select',//窗口事件
|
full: 'full',//全屏
|
norm: 'norm',//退出全屏
|
stop: 'stop',//停止播放
|
start: 'start',//开始播放
|
sound: 'sound',//开启声音
|
silent: 'silent',//静音
|
play: 'play',//暂停或停止后重新播放
|
PicSave: 'PicSave',//截图
|
startRecive: 'startRecive',//开启对讲
|
uploadRecive: 'uploadRecive',//开启对讲
|
loadRecive: 'loadRecive',//开启对讲
|
stopTalk: 'stopTalk', //关闭对讲
|
playRecive: 'playRecive',//对讲中
|
reciveStreamStop: 'reciveStreamStop',//对讲异常(网络异常等)
|
reciveNetError: 'reciveNetError',//对讲异常(网络异常等)
|
reciveStreamNotFound: 'reciveStreamNotFound',//对讲异常(网络异常等)
|
uploadNetClosed: 'uploadNetClosed',//连接异常
|
uploadNetError: 'uploadNetError',//连接异常
|
upload: 'upload',//对讲讲话
|
uploadfull: 'uploadfull',//对讲讲话结束
|
listenNetError: 'listenNetError',//网络异常
|
playListen: 'playListen',//监听中
|
loadListen: 'loadListen',//等待请求监听
|
listenStreamNotFound: 'listenStreamNotFound',//等待请求监听
|
listenStreamStop: 'listenStreamStop',//等待请求监听
|
}
|
},
|
playAll: function () {
|
for (var index in this.playVideos) {
|
this.playVideos[index].play()
|
}
|
},
|
pauseAll: function () {
|
for (var index in this.playVideos) {
|
this.playVideos[index].pause()
|
}
|
},
|
setWindowNum: function (num) {
|
if (!num) {
|
return;
|
}
|
num = parseInt(num);
|
$('.ttx-video-h5-item-full').removeClass('ttx-video-h5-item-full')
|
num = num > 36 ? 36 : num;
|
this.num = num;
|
this.winDom.children().addClass('hide');
|
var itemClass;
|
if (num == 8) {
|
itemClass = 'video-basis-4'
|
} else {
|
itemClass = 'video-basis-' + Math.ceil(Math.sqrt(num))
|
}
|
|
for (var i = 0; i < num; i++) {
|
var itemId = this.itemPre + '-' + i;
|
var _item = $('#' + itemId);
|
var itemClassTmp = itemClass;
|
if ((num == 6 || num == 8) && i === 0) {
|
itemClassTmp = 'video-basis-' + num + '-1'
|
}
|
if (_item.length === 0) {
|
var item = $("<div data-index='" + i + "' class='ttx-video-h5-item " + itemClassTmp + "' id='" + itemId + "'></div>");
|
this.winDom.append(item);
|
this.bindItemEvent(item)
|
} else {
|
var classArr = _item.attr('class').split(' ');
|
classArr = classArr.filter(function (s) {
|
return s.indexOf('video-basis-') === -1;
|
})
|
_item.attr('class', classArr.join(' '));
|
_item.addClass('ttx-video-h5-item').addClass(itemClassTmp).removeClass('hide').show();
|
}
|
}
|
if (!this.selectIndex) {
|
$('.ttx-video-h5-item:eq(0)').click();
|
}
|
this.setVideoFrame();
|
var item = $("<div data-index=\"9999\" style=\"width:100%;height:20px;display: none;font-size: 8px;\" id=\"HstH5Video-audio\">Mic:on;Play:on</div>");
|
this.winDom.append(item);
|
},
|
setSize: function (width, height) {
|
this.options.width = width
|
this.options.height = height
|
this.winDom.css('width', this.options.width).css('height', this.options.height)
|
},
|
getObjectById: function () {
|
return this;
|
},
|
|
stopVideo: function (index) {
|
var that = this
|
if (index >= this.num) {
|
return
|
}
|
this.reSetVideo(index)
|
/*var video = this.playVideos[index];
|
if (video) {
|
video.pause();
|
video.video.currentTime = 0;
|
try {
|
var url = video.options.video.url;
|
var devidno = url.split('DevIDNO=')[1].split('&')[0];
|
that.timeMap808[devidno] = new Date().getTime()
|
} catch (e) {
|
|
}
|
}*/
|
this.devInfoMap[index.toString()] = null;
|
delete this.reloadMapTime[index];
|
delete this.speedZeroNum[index];
|
delete this.progressMap[index];
|
this.progressMap[index] = null;
|
this.emit(index, this.eventType.stop)
|
},
|
toggleVideo: function (index) {
|
if (index >= this.num) {
|
return
|
}
|
var video = this.playVideos[index];
|
if (video) {
|
video.toggle();
|
if (video.video.paused) {
|
this.emit(index, this.eventType.stop)
|
} else {
|
this.emit(index, this.eventType.start)
|
}
|
}
|
},
|
reSetVideo: function (index) {
|
var video = this.playVideos[index];
|
if (video) {
|
video.destroy();
|
delete this.playVideos[index]
|
delete this.mediaPortMap[index]
|
}
|
},
|
hideAllMenu: function () {
|
for (var index in this.playVideos) {
|
this.playVideos[index].contextmenu.hide()
|
}
|
},
|
openVideo: function (server, port, devicechannel) {
|
var that = this;
|
var index = -1;
|
//找到重复的
|
for (var i = 0; i < Object.keys(that.devInfoMap).length; i++) {
|
if (that.devInfoMap[i.toString()] == devicechannel) {
|
index = i;
|
break;
|
}
|
}
|
if (index >= 0) {
|
that.stopVideo(index);
|
that.startVideo(index, server, port, devicechannel);
|
}
|
else {
|
//找到空闲的窗口
|
index = -1;
|
for (var i = 0; i < Object.keys(that.devInfoMap).length; i++) {
|
if (that.devInfoMap[i.toString()] == null) {
|
index = i;
|
break;
|
}
|
}
|
if (index == -1) {
|
if (Object.keys(that.devInfoMap).length < that.num)
|
index = Object.keys(that.devInfoMap).length;
|
else {
|
return;//满了
|
}
|
}
|
|
that.startVideo(index, server, port, devicechannel);
|
}
|
},
|
closeVideo: function (devicechannel) {
|
var that = this;
|
//找到播放的窗口
|
var index = -1;
|
|
for (var i = 0; i < Object.keys(that.devInfoMap).length; i++) {
|
if (that.devInfoMap[i.toString()] == devicechannel) {
|
index = i;
|
break;
|
}
|
}
|
if (index >= 0) {
|
that.stopVideo(index);
|
}
|
|
|
},
|
|
StartTalk: function (MediaServerName, MediaTCPPort, VoiceTCPPort, deviceId, channelId, MediaType, username, password) {
|
if ("WebSocket" in window) {
|
//alert("您的浏览器支持 WebSocket!");
|
//创建socket，登录，设置定时心跳和关闭事件
|
this.voiceUser = username;
|
this.voicePass = password;
|
this.voiceDeviceid = deviceId;
|
this.voiceChannelID = channelId;
|
this.voiceMediaType = MediaType;
|
this.voiceServerName = MediaServerName;
|
this.voiceMediaTcpPort = MediaTCPPort;
|
|
var that = this;
|
if (this.ws != null) {
|
this.ws.close();
|
this.ws = null;
|
}
|
this.ws = new WebSocket("wss://" + MediaServerName + ":" + VoiceTCPPort);
|
this.ws.onopen = function () {
|
// Web Socket 已连接上，使用 send() 方法发送数据
|
console.log("Connected");
|
//var curtimestamp = Date.now();
|
//var md5string = b64_md5(that.voicePass+curtimestamp.toString());
|
//var messageObj = {cmd:"login",user:that.voiceUser,timestamp:curtimestamp,digest:md5string};
|
// var messageJson = JSON.stringify(messageObj);
|
//that.ws.send(messageJson);
|
|
var timestamp = (new Date()).valueOf();
|
var digest = b64_md5(that.voicePass + timestamp);
|
var data = {
|
"cmd": "login", //发送命令
|
"user": that.voiceUser, //用户名
|
"digest": digest, //
|
"timestamp": timestamp //时间戳
|
}
|
var messageJson = JSON.stringify(data);
|
that.ws.send(messageJson);
|
// alert("登录已经发送...");
|
console.log(messageJson);
|
};
|
this.ws.onmessage = function (evt) {
|
var received_msg = evt.data;
|
console.log("recv:" + received_msg);
|
if (evt.data instanceof Blob) {//收到数据
|
that.player.addPlay(received_msg);
|
}
|
else {
|
var msg = JSON.parse(received_msg);
|
//alert("数据已接收..."+received_msg);
|
if (msg.response == "login") {
|
if (msg.result == 0) {
|
//alert("登录成功");
|
console.log("登录成功");
|
that.voiceinterval = self.setInterval(function () {
|
|
var timestamp = (new Date()).valueOf();
|
var data = {
|
"cmd": "heartbeat", //发送命令
|
"user": that.voiceUser, //用户名
|
"timestamp": timestamp //时间戳
|
}
|
var messageJson = JSON.stringify(data);
|
that.ws.send(messageJson);
|
//setInterval(this.wsheart(),10000);
|
}, 10000);
|
//发起对讲请求
|
|
var timestamp = (new Date()).valueOf();
|
var data = {
|
"cmd": "open_talk", //发送命令
|
"user": that.voiceUser, //用户名
|
"DeviceType": that.voiceMediaType.toString(), //
|
"DeviceId": that.voiceDeviceid, //
|
"channel": that.voiceChannelID, //
|
"timestamp": timestamp //时间戳
|
|
}
|
var messageJson1 = JSON.stringify(data);
|
that.ws.send(messageJson1);
|
console.log("发起对讲请求");
|
console.log(messageJson1);
|
}
|
else {
|
console.log("登录失败");
|
that.ws.close();
|
that.ws = null;
|
}
|
}
|
else if (msg.response == "open_talk") {
|
if (msg.result == 0) {
|
console.log("开启对讲成功");
|
//打开播放流
|
Player.get(function (play) {
|
that.player = play;
|
that.player.start();
|
});
|
//that.openVideo(that.voiceServerName,that.voiceMediaTcpPort,that.voiceDeviceid+"_"+that.voiceChannelID);
|
//打开录音机
|
Recorder.get(function (rec) {
|
that.recorder = rec;
|
that.recorder.start();
|
}, that.ws);
|
|
var item = document.getElementById("HstH5Video-audio");
|
item.innerHTML = "正在对讲：" + that.voiceDeviceid;
|
item.style["display"] = "flex";
|
}
|
else {
|
console.log("开启对讲失败");
|
that.ws.close();
|
that.ws = null;
|
}
|
}
|
else if (msg.response == "close_talk") {
|
that.ws.close();
|
that.ws = null;
|
}
|
}
|
};
|
this.ws.onerror = function (e) {
|
//alert("错误");
|
console.log("websocket error!" + e);
|
};
|
this.ws.onclose = function (e) {
|
// 关闭 websocket
|
//alert("连接已关闭...");
|
console.log("websocket closed! " + e.code + ", " + e.reason);
|
that.ws = null;
|
clearInterval(that.voiceinterval);
|
};
|
|
//打开语音通道接收流
|
//打开录音，设置定时发送
|
}
|
else {
|
alert("您的浏览器不支持 WebSocket!");
|
return;
|
}
|
},
|
CloseTalk: function (deviceId, channelId) {
|
//关闭播放流
|
this.player.stop();
|
//关闭录音
|
this.recorder.stop();
|
|
var item = document.getElementById("HstH5Video-audio");
|
item.style["display"] = "none";
|
//关闭websocket
|
//this.ws.close();
|
var timestamp = (new Date()).valueOf();
|
var data = {
|
"cmd": "close_talk", //发送命令
|
"user": this.voiceUser, //用户名
|
"DeviceType": this.voiceMediaType.toString(), //
|
"DeviceId": this.voiceDeviceid, //
|
"channel": this.voiceChannelID, //
|
"timestamp": timestamp //时间戳
|
|
}
|
var messageJson1 = JSON.stringify(data);
|
this.ws.send(messageJson1);
|
console.log("关闭对讲请求");
|
console.log(messageJson1);
|
},
|
StartBroadcast: function (MediaServerName, VoiceTCPPort, MediaType, username, password) {
|
if ("WebSocket" in window) {
|
//alert("您的浏览器支持 WebSocket!");
|
//创建socket，登录，设置定时心跳和关闭事件
|
this.voiceUser = username;
|
this.voicePass = password;
|
this.voiceMediaType = MediaType;
|
this.voiceServerName = MediaServerName;
|
this.voiceTcpPort = VoiceTCPPort;
|
|
var that = this;
|
if (this.ws != null) {
|
this.ws.close();
|
this.ws = null;
|
}
|
this.ws = new WebSocket("wss://" + MediaServerName + ":" + VoiceTCPPort);
|
this.ws.onopen = function () {
|
// Web Socket 已连接上，使用 send() 方法发送数据
|
console.log("Connected");
|
//var curtimestamp = Date.now();
|
//var md5string = b64_md5(that.voicePass+curtimestamp.toString());
|
//var messageObj = {cmd:"login",user:that.voiceUser,timestamp:curtimestamp,digest:md5string};
|
// var messageJson = JSON.stringify(messageObj);
|
//that.ws.send(messageJson);
|
|
var timestamp = (new Date()).valueOf();
|
var digest = b64_md5(that.voicePass + timestamp);
|
var data = {
|
"cmd": "login", //发送命令
|
"user": that.voiceUser, //用户名
|
"digest": digest, //
|
"timestamp": timestamp //时间戳
|
}
|
var messageJson = JSON.stringify(data);
|
that.ws.send(messageJson);
|
// alert("登录已经发送...");
|
console.log(messageJson);
|
};
|
this.ws.onmessage = function (evt) {
|
var received_msg = evt.data;
|
console.log("recv:" + received_msg);
|
|
var msg = JSON.parse(received_msg);
|
//alert("数据已接收..."+received_msg);
|
if (msg.response == "login") {
|
if (msg.result == 0) {
|
//alert("登录成功");
|
console.log("登录成功");
|
that.voiceinterval = self.setInterval(function () {
|
|
var timestamp = (new Date()).valueOf();
|
var data = {
|
"cmd": "heartbeat", //发送命令
|
"user": that.voiceUser, //用户名
|
"timestamp": timestamp //时间戳
|
}
|
var messageJson = JSON.stringify(data);
|
that.ws.send(messageJson);
|
//setInterval(this.wsheart(),10000);
|
}, 10000);
|
//发起广播请求
|
|
var timestamp = (new Date()).valueOf();
|
var data = {
|
"cmd": "open_broadcast", //发送命令
|
"user": that.voiceUser, //用户名
|
"DeviceType": that.voiceMediaType.toString(), //
|
"DeviceId": that.voiceDeviceid, //
|
"timestamp": timestamp //时间戳
|
|
}
|
var messageJson1 = JSON.stringify(data);
|
that.ws.send(messageJson1);
|
console.log("发起广播请求");
|
console.log(messageJson1);
|
}
|
else {
|
console.log("登录失败");
|
that.ws.close();
|
that.ws = null;
|
}
|
}
|
else if (msg.response == "open_broadcast") {
|
if (msg.result == 0) {
|
console.log("开启广播成功");
|
|
//that.openVideo(that.voiceServerName,that.voiceTcpPort,that.voiceDeviceid+"_"+that.voiceChannelID);
|
//打开录音机
|
Recorder.get(function (rec) {
|
that.recorder = rec;
|
that.recorder.start();
|
}, that.ws);
|
var item = document.getElementById("HstH5Video-audio");
|
item.innerHTML = "正在广播.";
|
item.style["display"] = "flex";
|
}
|
else {
|
console.log("开启广播失败");
|
that.ws.close();
|
that.ws = null;
|
}
|
}
|
else if (msg.response == "close_broadcast") {
|
that.ws.close();
|
that.ws = null;
|
}
|
|
};
|
this.ws.onerror = function (e) {
|
//alert("错误");
|
console.log("websocket error!" + e);
|
};
|
this.ws.onclose = function (e) {
|
// 关闭 websocket
|
//alert("连接已关闭...");
|
console.log("websocket closed! " + e.code + ", " + e.reason);
|
that.ws = null;
|
clearInterval(that.voiceinterval);
|
};
|
|
//打开语音通道接收流
|
//打开录音，设置定时发送
|
}
|
else {
|
alert("您的浏览器不支持 WebSocket!");
|
return;
|
}
|
},
|
CloseBroadcast: function () {
|
|
//关闭录音
|
this.recorder.stop();
|
var item = document.getElementById("HstH5Video-audio");
|
item.style["display"] = "none";
|
//关闭websocket
|
//this.ws.close();
|
var timestamp = (new Date()).valueOf();
|
var data = {
|
"cmd": "close_broadcast", //发送命令
|
"user": this.voiceUser, //用户名
|
"DeviceType": this.voiceMediaType.toString(), //
|
"DeviceId": this.voiceDeviceid, //
|
"channel": this.voiceChannelID, //
|
"timestamp": timestamp //时间戳
|
|
}
|
var messageJson1 = JSON.stringify(data);
|
this.ws.send(messageJson1);
|
console.log("关闭广播请求");
|
console.log(messageJson1);
|
},
|
StartMonitor: function (MediaServerName, MediaTCPPort, VoiceTCPPort, deviceId, channelId, MediaType, username, password) {
|
if ("WebSocket" in window) {
|
//alert("您的浏览器支持 WebSocket!");
|
//创建socket，登录，设置定时心跳和关闭事件
|
this.voiceUser = username;
|
this.voicePass = password;
|
this.voiceDeviceid = deviceId;
|
this.voiceChannelID = channelId;
|
this.voiceMediaType = MediaType;
|
this.voiceServerName = MediaServerName;
|
this.voiceMediaTcpPort = MediaTCPPort;
|
|
var that = this;
|
if (this.ws != null) {
|
this.ws.close();
|
this.ws = null;
|
}
|
this.ws = new WebSocket("wss://" + MediaServerName + ":" + VoiceTCPPort);
|
this.ws.onopen = function () {
|
// Web Socket 已连接上，使用 send() 方法发送数据
|
console.log("Connected");
|
//var curtimestamp = Date.now();
|
//var md5string = b64_md5(that.voicePass+curtimestamp.toString());
|
//var messageObj = {cmd:"login",user:that.voiceUser,timestamp:curtimestamp,digest:md5string};
|
// var messageJson = JSON.stringify(messageObj);
|
//that.ws.send(messageJson);
|
|
var timestamp = (new Date()).valueOf();
|
var digest = b64_md5(that.voicePass + timestamp);
|
var data = {
|
"cmd": "login", //发送命令
|
"user": that.voiceUser, //用户名
|
"digest": digest, //
|
"timestamp": timestamp //时间戳
|
}
|
var messageJson = JSON.stringify(data);
|
that.ws.send(messageJson);
|
// alert("登录已经发送...");
|
console.log(messageJson);
|
};
|
this.ws.onmessage = function (evt) {
|
var received_msg = evt.data;
|
console.log("recv:" + received_msg);
|
if (evt.data instanceof Blob) {//收到数据
|
that.player.addPlay(received_msg);
|
|
|
}
|
else {
|
var msg = JSON.parse(received_msg);
|
//alert("数据已接收..."+received_msg);
|
if (msg.response == "login") {
|
if (msg.result == 0) {
|
//alert("登录成功");
|
console.log("登录成功");
|
/*that.voiceinterval =self.setInterval(function()
|
{
|
|
var timestamp = (new Date()).valueOf();
|
var data = {
|
"cmd": "heartbeat", //发送命令
|
"user": that.voiceUser, //用户名
|
"timestamp": timestamp //时间戳
|
}
|
var messageJson = JSON.stringify(data);
|
that.ws.send(messageJson);
|
//setInterval(this.wsheart(),10000);
|
},10000);*/
|
//发起监听请求
|
|
var timestamp = (new Date()).valueOf();
|
var data = {
|
"cmd": "open_monitor", //发送命令
|
"user": that.voiceUser, //用户名
|
"DeviceType": that.voiceMediaType.toString(), //
|
"DeviceId": that.voiceDeviceid, //
|
"channel": that.voiceChannelID, //
|
"timestamp": timestamp //时间戳
|
|
}
|
var messageJson1 = JSON.stringify(data);
|
that.ws.send(messageJson1);
|
console.log("发起监听请求");
|
console.log(messageJson1);
|
}
|
else {
|
console.log("登录失败");
|
that.ws.close();
|
that.ws = null;
|
}
|
}
|
else if (msg.response == "open_monitor") {
|
if (msg.result == 0) {
|
console.log("开启监听成功");
|
//打开播放流
|
Player.get(function (play) {
|
that.player = play;
|
that.player.start();
|
var item = document.getElementById("HstH5Video-audio");
|
item.innerHTML = "正在监听：" + that.voiceDeviceid;
|
item.style["display"] = "flex";
|
});
|
|
}
|
else {
|
console.log("开启监听失败");
|
that.ws.close();
|
that.ws = null;
|
}
|
}
|
else if (msg.response == "close_monitor") {
|
that.ws.close();
|
that.ws = null;
|
}
|
}
|
|
};
|
this.ws.onerror = function (e) {
|
//alert("错误");
|
console.log("websocket error!" + e);
|
};
|
this.ws.onclose = function (e) {
|
// 关闭 websocket
|
//alert("连接已关闭...");
|
console.log("websocket closed! " + e.code + ", " + e.reason);
|
that.ws = null;
|
clearInterval(that.voiceinterval);
|
};
|
|
//打开语音通道接收流
|
//打开录音，设置定时发送
|
}
|
else {
|
alert("您的浏览器不支持 WebSocket!");
|
return;
|
}
|
},
|
CloseMonitor: function (deviceId, channelId) {
|
//关闭播放
|
this.player.stop();
|
var item = document.getElementById("HstH5Video-audio");
|
item.style["display"] = "none";
|
//关闭websocket
|
//this.ws.close();
|
var timestamp = (new Date()).valueOf();
|
var data = {
|
"cmd": "close_monitor", //发送命令
|
"user": this.voiceUser, //用户名
|
"DeviceType": this.voiceMediaType.toString(), //
|
"DeviceId": this.voiceDeviceid, //
|
"channel": this.voiceChannelID, //
|
"timestamp": timestamp //时间戳
|
|
}
|
var messageJson1 = JSON.stringify(data);
|
this.ws.send(messageJson1);
|
console.log("关闭监听请求");
|
console.log(messageJson1);
|
},
|
StartRemotePlayback: function (server, port, devicechannel, starttime, endtime, callback) {
|
var that = this;
|
var index = -1;
|
//找到重复的
|
for (var i = 0; i < Object.keys(that.devInfoMap).length; i++) {
|
if (that.devInfoMap[i.toString()] == devicechannel + "_H") {
|
index = i;
|
break;
|
}
|
}
|
if (index >= 0) {
|
that.stopVideo(index);
|
that.startVideo(index, server, port, devicechannel);
|
}
|
else {
|
//找到空闲的窗口
|
index = -1;
|
for (var i = 0; i < Object.keys(that.devInfoMap).length; i++) {
|
if (that.devInfoMap[i.toString()] == null) {
|
index = i;
|
break;
|
}
|
}
|
if (index == -1) {
|
if (Object.keys(that.devInfoMap).length < that.num)
|
index = Object.keys(that.devInfoMap).length;
|
else {
|
return;//满了
|
}
|
}
|
|
that.startVideo(index, server, port, devicechannel);
|
that.devInfoMap[index.toString()] = devicechannel + "_H";
|
//增加进度条显示
|
this.progressMap[index] = new scaleProcess(that.playVideos[index].container.id, starttime, endtime, callback);
|
|
}
|
},
|
CloseRemotePlayback: function (devicechannel) {
|
var that = this;
|
//找到播放的窗口
|
var index = -1;
|
|
for (var i = 0; i < Object.keys(that.devInfoMap).length; i++) {
|
if (that.devInfoMap[i.toString()] == devicechannel + "_H") {
|
index = i;
|
break;
|
}
|
}
|
if (index >= 0) {
|
that.stopVideo(index);
|
}
|
},
|
startVideo: function (index, server, port, channel) {
|
var that = this;
|
if (!index && index !== 0) {
|
return
|
}
|
if (parseInt(index) >= that.num) {
|
return
|
}
|
|
that.devInfoMap[index.toString()] = channel;
|
that.createUrlAndplay(index, server, port, channel, 1);
|
},
|
/**
|
*
|
* @param index
|
* @param url
|
* @param type 当实时视频时，传1，监听时，传2，双向对讲时传3 广播功能 4
|
*/
|
startVod: function (index, url, type, notDeleteTime) {
|
// url = 'http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.flv'
|
var that = this;
|
//url = that.handleUrl(url);
|
//防止多次点击
|
if (that.playWating) {
|
return;
|
}
|
if (!notDeleteTime) {
|
delete that.reloadMapTime[index]
|
}
|
|
var itemId = this.itemPre + '-' + index;
|
var dp = that.playVideos[index];
|
if (dp) {
|
dp.destroy();
|
}
|
var videoType = 'flv'
|
if (url.indexOf('PLAYBEG=') == -1 && (url.indexOf('.mp4') > -1 || url.indexOf('.MP4') > -1)) {
|
videoType = 'normal'
|
}
|
if (url.indexOf('.m3u8') > -1 || url.indexOf('.m3u8') > -1) {
|
videoType = 'hls'
|
}
|
|
var volume = that.options.volume;
|
if (this.beforeReconnectionVolume[index]) {
|
volume = this.beforeReconnectionVolume[index];
|
}
|
dp = new DPlayer({
|
container: document.getElementById(itemId),
|
live: true,//that.options.live,
|
liveText: that.videoText[index],
|
screenshot: that.options.screenshot,
|
autoplay: that.options.autoplay,
|
mutex: that.options.mutex,
|
loop: that.options.loop,
|
volume: volume,
|
lang: that.options.lang,
|
video: {
|
url: url,
|
type: videoType
|
},
|
contextmenu: that.options.contextmenu
|
});
|
delete this.beforeReconnectionVolume[index]
|
this.playVideos[index] = dp;
|
this.speedZeroNum[index] = 0;
|
this.bindDpEvent(dp, type);
|
this.emit(index, this.eventType.start)
|
this.setVideoFrame();
|
var bcolor = that.options.tbarBgColor[index];
|
bcolor = bcolor ? bcolor : '000';
|
$('#' + dp.container.id).find('.dplayer-controller').css('background', '#' + bcolor);
|
},
|
|
/**
|
* @param index
|
* @param jsession
|
* @param devIdno
|
* @param channel
|
* @param stream
|
* @param type 当实时视频时，传1，监听时，传2，双向对讲时传3 广播功能 4
|
* @returns {string}
|
*/
|
createUrlAndplay: function (index, server, port, channel, type) {
|
var that = this
|
index = index.toString();
|
//var url = 'http://' + server + ':' + port + '/live/' + channel;
|
//根据当前网站用http还是https.
|
var url = window.location.protocol + '//' + server + ':' + port + '/live/' + channel;
|
//alert(url);
|
|
|
if (type === 1) {
|
that.setVideoInfo(index, channel);
|
that.startVod(index, url, type)
|
}
|
|
|
},
|
|
|
setVideoInfo: function (index, title) {
|
// dplayer-live-text
|
this.videoText[index] = title;
|
var video = this.playVideos[index];
|
if (video) {
|
$(video.container).find('.dplayer-live-text').html(title);
|
video.options.liveText = title;
|
}
|
},
|
getDataset: function (ele) {
|
if (ele.dataset) {
|
return ele.dataset;
|
} else {
|
var attrs = ele.attributes,//元素的属性集合
|
dataset = {}, name, matchStr;
|
for (var i = 0; i < attrs.length; i++) { //是否是data- 开头
|
matchStr = attrs[i].name.match(/^data-(.+)/);
|
if (matchStr) { //data-auto-play 转成驼峰写法 autoPlay
|
name = matchStr[1].replace(/-([\da-z])/gi, function (all, letter) {
|
return letter.toUpperCase();
|
});
|
dataset[name] = attrs[i].value;
|
}
|
}
|
return dataset;
|
}
|
},
|
bindItemEvent: function (obj) {
|
var that = this;
|
obj.click(function () {
|
$('.ttx-video-h5-item').removeClass('ttx-video-h5-item-check');
|
$(this).addClass('ttx-video-h5-item-check');
|
that.hideAllMenu()
|
var dataset = that.getDataset(this)
|
that.selectIndex = dataset.index;
|
that.emit(that.selectIndex, that.eventType.select)
|
})
|
obj.mousedown(function (e) {
|
if (3 == e.which) {
|
var dataset = that.getDataset(this)
|
that.selectMenuIndex = dataset.index.toString();
|
that.options.rightMousedown();
|
}
|
})
|
obj.dblclick(function () {
|
if ($(this).hasClass('ttx-video-h5-item-full')) {
|
$(this).removeClass('ttx-video-h5-item-full')
|
$('.ttx-video-h5-item').show()
|
} else {
|
$('.ttx-video-h5-item').hide()
|
$(this).addClass('ttx-video-h5-item-full').show()
|
}
|
that.setVideoFrame();
|
})
|
},
|
/**
|
*
|
* @param dp
|
* @param type 当实时视频时，传1，监听时，传2，双向对讲时传3 广播功能 4
|
*/
|
bindDpEvent: function (dp, type) {
|
var that = this;
|
var index = dp.container.id.replace(that.itemPre + '-', '');
|
if (type === 1) {
|
|
dp.on('fullscreen', function () {
|
that.fullScreen()
|
$('.map_btn').css('z-index', 0)
|
});
|
dp.on('volumechange', function () {
|
if (dp.volume() > 0) {
|
for (var index in that.playVideos) {
|
if (index != that.selectIndex && that.playVideos[index].volume() > 0) {
|
that.playVideos[index].volume(0, true, false)
|
}
|
}
|
if (that.soundDp && ttxPlayer && typeof ttxPlayer.doRightMenuMsg == "function") {
|
ttxPlayer.doRightMenuMsg(that.selectIndex, 'stopListen');
|
}
|
}
|
});
|
dp.on('progress', function () {
|
//console.log(dp.video.currentTime);
|
if (that.progressMap[index] != null)
|
that.progressMap[index].setProcessTime(dp.video.currentTime);
|
});
|
if (!that.playVideosTimer[index]) {
|
that.playVideosTimer[index] = setInterval(function () {
|
if (!that.playVideos[index]) {
|
return;
|
}
|
var speed = 0
|
if (that.playVideos[index].plugins.flvjs) {
|
speed = parseInt(that.playVideos[index].plugins.flvjs.statisticsInfo.speed)
|
}
|
if (isNaN(speed)) {
|
speed = 0
|
}
|
var speedStr = speed + 'KB/S';
|
if (that.playVideos[index].paused || !that.playVideos[index].plugins.flvjs) {
|
speedStr = '';
|
}
|
var liveText;
|
if (that.videoText[index]) {
|
liveText = that.videoText[index] + ' ' + speedStr;
|
} else {
|
liveText = ' ' + speedStr;
|
}
|
if ($(that.playVideos[index].container).find('.dplayer-live-text').length > 0) {
|
$(that.playVideos[index].container).find('.dplayer-live-text').html(liveText).attr('title', liveText);
|
} else {
|
var liveTextHtml =
|
'<span class="dplayer-live-badge" title="' + liveText + '">' +
|
' <span class="dplayer-live-text">' + liveText + '</span>' +
|
'</span>';
|
$(that.playVideos[index].container).find('.dplayer-time').after(liveTextHtml);
|
}
|
}, 1000)
|
}
|
}
|
|
},
|
bindEvent: function () {
|
var that = this;
|
$(document).mousedown(function (e) {
|
if (3 == e.which) {
|
that.hideAllMenu()
|
}
|
})
|
try {
|
$(parent.document).mousedown(function (e) {
|
that.hideAllMenu()
|
})
|
} catch (e) {
|
// TODO: handle exception
|
}
|
that.winDom.bind('contextmenu', function () {
|
return false;
|
});
|
|
$(document).keyup(function (e) {
|
var key = e.which || e.keyCode;
|
if (key == 27) {
|
that.exitFullScreen()
|
}
|
});
|
window.onresize = function () {
|
if (!that.checkFull()) {
|
that.exitFullScreen()
|
}
|
}
|
if (that.options.reconnect) {
|
setInterval(function () {
|
for (var index in that.playVideos) {
|
var dpVideo = that.playVideos[index];
|
that.reconnectionCheck(index, dpVideo)
|
if (that.soundDp) {
|
that.reconnectionCheck(-1, that.soundDp);
|
}
|
}
|
}, 500)
|
}
|
},
|
/**
|
* 断线重连
|
* @param index
|
* @param dpVideo
|
*/
|
reconnectionCheck: function (index, dpVideo) {
|
var that = this;
|
if (!that.speedZeroNum[index]) {
|
that.speedZeroNum[index] = 0
|
}
|
if (dpVideo.plugins.flvjs) {
|
var speed = parseInt(dpVideo.plugins.flvjs.statisticsInfo.speed)
|
if (!speed && !dpVideo.paused) {
|
that.speedZeroNum[index]++;
|
} else {
|
that.speedZeroNum[index] = 0;
|
}
|
}
|
if (that.speedZeroNum[index] >= 60) {
|
var url = dpVideo.options.video.url;
|
{
|
that.beforeReconnectionVolume[index] = dpVideo.volume()
|
that.startVod(index, url, 1);
|
}
|
console.log('断线重连:' + index)
|
}
|
},
|
getVideoPlayTime: function (index) {
|
var that = this;
|
index = index ? index : '0';
|
var video = that.playVideos[index];
|
if (video) {
|
var time = parseInt(video.video.currentTime);
|
if (this.reloadMapTime[index]) {
|
time = time + this.reloadMapTime[index];
|
}
|
return time;
|
}
|
return 0;
|
},
|
setVideoFocus: function (index) {
|
$('.ttx-video-h5-item:eq(' + index + ')').click();
|
},
|
fullScreen: function () {
|
this.winDom.addClass('ttx-video-h5-full')
|
$('body').addClass('ttx-video-body-full')
|
var el = document.documentElement;
|
if (el.requestFullscreen) {
|
el.requestFullscreen();
|
} else if (el.mozRequestFullScreen) {
|
el.mozRequestFullScreen();
|
} else if (el.webkitRequestFullscreen) {
|
el.webkitRequestFullscreen();
|
} else if (el.msRequestFullscreen) {
|
el.msRequestFullscreen();
|
}
|
},
|
exitFullScreen: function () {
|
this.winDom.removeClass('ttx-video-h5-full')
|
$('body').removeClass('ttx-video-body-full')
|
},
|
checkFull: function () {
|
return document.fullscreenElement ||
|
document.msFullscreenElement ||
|
document.mozFullScreenElement ||
|
document.webkitFullscreenElement || false;
|
},
|
emit: function (index, type) {
|
if (typeof onTtxVideoMsg == 'function') {
|
onTtxVideoMsg(index, type)
|
}
|
},
|
setVideoFrame: function (viewSize) {
|
viewSize = viewSize ? viewSize : this.options.viewSize;
|
this.options.viewSize = viewSize
|
this.winDom.find('video').each(function (i, obj) {
|
var _obj = $(obj)
|
_obj.css('width', '100%').css('height', '100%')
|
var width = _obj.width();
|
var height = _obj.height();
|
if (viewSize === '4:3') {
|
if ((width / height) > (4 / 3)) {
|
_obj.css('width', (height * 4 / 3))
|
} else {
|
_obj.css('height', (width * 3 / 4))
|
}
|
}
|
if (viewSize === '16:9') {
|
if ((width / height) > (16 / 9)) {
|
_obj.css('width', (height * 16 / 9))
|
} else {
|
_obj.css('height', (width * 9 / 16))
|
}
|
}
|
|
})
|
},
|
/**
|
* 处理URL
|
* 如果是http直接访问c++ 端口，否则需要nginx转发
|
*/
|
handleUrl: function (url) {
|
if (location.protocol == 'http:') {
|
return url;
|
}
|
/*if (url && url.startWith('https:')){
|
return url;
|
}*/
|
var portReg = /.+:(\d{1,5})/;
|
var urlPortArr = url.match(portReg);
|
if (!urlPortArr || urlPortArr.length < 2) {
|
return url;
|
}
|
var videoPort = urlPortArr[1];
|
//用端口分开链接
|
var urlArr = url.split(videoPort);
|
try {
|
if (rootParent && rootParent.httpsMapHttpPortParams) {
|
var httpsPort = rootParent.httpsMapHttpPortParams[videoPort];
|
httpsPort = httpsPort ? httpsPort : ('1' + videoPort);
|
return 'https://' + location.hostname + ":" + httpsPort + urlArr[1];
|
}
|
} catch (e) {
|
console.log(e)
|
}
|
return 'https://' + location.host + "/" + videoPort + urlArr[1];
|
},
|
/************************下面的方法无实际意义**********************************/
|
embedSWF: function () {
|
|
},
|
setLanguage: function () {
|
|
},
|
setBufferTime: function () {
|
|
},
|
setBufferTimeMax: function () {
|
|
},
|
setListenParam: function () {
|
|
},
|
setVideoTbarBgColor: function (index, color) {
|
this.options.tbarBgColor[index] = color;
|
var dp = this.playVideos[index];
|
if (dp && dp.container && dp.container.id) {
|
$('#' + dp.container.id).find('.dplayer-controller').css('background', '#' + color);
|
}
|
},
|
clearVideoMenu: function () {
|
|
}
|
}
|
|
_global = (function () {
|
return this || (0, eval)('this');
|
}());
|
if (typeof module !== "undefined" && module.exports) {
|
module.exports = HstH5Video;
|
} else if (typeof define === "function" && define.amd) {
|
define(function () {
|
return HstH5Video;
|
});
|
} else {
|
!('HstH5Video' in _global) && (_global.HstH5Video = HstH5Video);
|
}
|
|
}());
|
