|
|
@@ -50,107 +50,112 @@ class VideoPlay {
|
|
|
|
|
|
// 初始化
|
|
|
init() {
|
|
|
- this.calcTools();
|
|
|
- this.initClientPanel();
|
|
|
- this.winMaxMinOpt();
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- this.resize();
|
|
|
- });
|
|
|
- window.onunload = () => {
|
|
|
- this.closeClient();
|
|
|
- };
|
|
|
- }
|
|
|
- // webSocket交互
|
|
|
- webSocketSend(data) {
|
|
|
- if (this.websocket == null) {
|
|
|
- return;
|
|
|
+ this.calcTools();
|
|
|
+ this.initClientPanel();
|
|
|
+ this.winMaxMinOpt();
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ this.resize();
|
|
|
+ });
|
|
|
+ window.onunload = () => {
|
|
|
+ this.closeClient();
|
|
|
+ };
|
|
|
}
|
|
|
- if (this.websocket.readyState === 1) {
|
|
|
- this.websocket.send(data);
|
|
|
- } else {
|
|
|
- setTimeout(() => {
|
|
|
- this.webSocketSend(data);
|
|
|
- }, 1000);
|
|
|
+ // webSocket交互
|
|
|
+ webSocketSend(data) {
|
|
|
+ if (this.websocket == null) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.websocket.readyState === 1) {
|
|
|
+ this.websocket.send(data);
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.webSocketSend(data);
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- // 检测浏览器的缩放状态实现代码
|
|
|
+ // 检测浏览器的缩放状态实现代码
|
|
|
detectZoom() {
|
|
|
- var ratio = 0;
|
|
|
- var screen = window.screen;
|
|
|
- var ua = navigator.userAgent.toLowerCase();
|
|
|
+ var ratio = 0;
|
|
|
+ var screen = window.screen;
|
|
|
+ var ua = navigator.userAgent.toLowerCase();
|
|
|
|
|
|
- if (window.devicePixelRatio !== undefined) {
|
|
|
- ratio = window.devicePixelRatio;
|
|
|
- } else if (~ua.indexOf("msie")) {
|
|
|
- if (screen.deviceXDPI && screen.logicalXDPI) {
|
|
|
- ratio = screen.deviceXDPI / screen.logicalXDPI;
|
|
|
+ if (window.devicePixelRatio !== undefined) {
|
|
|
+ ratio = window.devicePixelRatio;
|
|
|
+ } else if (~ua.indexOf("msie")) {
|
|
|
+ if (screen.deviceXDPI && screen.logicalXDPI) {
|
|
|
+ ratio = screen.deviceXDPI / screen.logicalXDPI;
|
|
|
+ }
|
|
|
+ } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
|
|
|
+ ratio = window.outerWidth / window.innerWidth;
|
|
|
}
|
|
|
- } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
|
|
|
- ratio = window.outerWidth / window.innerWidth;
|
|
|
- }
|
|
|
|
|
|
- if (ratio) {
|
|
|
- ratio = Math.round(ratio * 100);
|
|
|
+ if (ratio) {
|
|
|
+ ratio = Math.round(ratio * 100);
|
|
|
+ }
|
|
|
+ return ratio;
|
|
|
}
|
|
|
- return ratio;
|
|
|
- }
|
|
|
- // 实时传递给客户端的位置大小
|
|
|
+ // 实时传递给客户端的位置大小
|
|
|
dragResize(width, height, posX, posY) {
|
|
|
- var c = this.space.getBoundingClientRect();
|
|
|
- posX = Math.round( c.left* window.outerWidth/window.innerWidth );
|
|
|
- posY = Math.round( c.top* window.outerWidth/window.innerWidth + window.outerHeight - window.innerHeight-10);
|
|
|
- width = Math.round( c.width * window.outerWidth/window.innerWidth );
|
|
|
- height = Math.round(c.height* window.outerWidth/window.innerWidth );
|
|
|
+ var c = this.space.getBoundingClientRect();
|
|
|
+ posX = Math.round(c.left * window.outerWidth / window.innerWidth);
|
|
|
+ posY = Math.round(c.top * window.outerWidth / window.innerWidth + window.outerHeight - window.innerHeight - 10);
|
|
|
+ width = Math.round(c.width * window.outerWidth / window.innerWidth);
|
|
|
+ height = Math.round(c.height * window.outerWidth / window.innerWidth);
|
|
|
|
|
|
- // console.log(c)
|
|
|
-
|
|
|
+ // console.log(c)
|
|
|
|
|
|
- // 实时存储目前视频的大小位置;
|
|
|
- this.width = width;
|
|
|
- this.height = height;
|
|
|
- this.posX = posX;
|
|
|
- this.posY = posY;
|
|
|
- const params = {
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "adjustSizePosition",
|
|
|
- "params": {
|
|
|
- "width": width,
|
|
|
- "height": height,
|
|
|
- "posX": this.posX,
|
|
|
- "posY": this.posY,
|
|
|
- "handleName": this.handleName
|
|
|
- },
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "socketCode": this.socketCode
|
|
|
- };
|
|
|
- console.log(JSON.stringify(params))
|
|
|
- this.webSocketSend(JSON.stringify(params));
|
|
|
- }
|
|
|
- // 设置菜单遮挡问题
|
|
|
+
|
|
|
+ // 实时存储目前视频的大小位置;
|
|
|
+ this.width = width;
|
|
|
+ this.height = height;
|
|
|
+ this.posX = Math.round(posX / window.devicePixelRatio);
|
|
|
+ this.posY = Math.round(posY / window.devicePixelRatio);
|
|
|
+
|
|
|
+ // this.width = width;
|
|
|
+ // this.height = height;
|
|
|
+ // this.posX = posX;
|
|
|
+ // this.posY = posY;
|
|
|
+ const params = {
|
|
|
+ loginIp: this.settings.letLoginIp,
|
|
|
+ method: 'adjustSizePosition',
|
|
|
+ params: {
|
|
|
+ width: this.width,
|
|
|
+ height: this.height,
|
|
|
+ posX: this.posX,
|
|
|
+ posY: this.posY,
|
|
|
+ handleName: this.handleName,
|
|
|
+ },
|
|
|
+ userCode: this.settings.letUserCode,
|
|
|
+ socketCode: this.socketCode,
|
|
|
+ };
|
|
|
+ console.log(JSON.stringify(params))
|
|
|
+ this.webSocketSend(JSON.stringify(params));
|
|
|
+ }
|
|
|
+ // 设置菜单遮挡问题
|
|
|
setCoinRegion(flag, dorpDownIdArr) {
|
|
|
- const isEmbed = flag;
|
|
|
- let menu;
|
|
|
- let menuLeftX = 0;
|
|
|
- let menuLeftY = 0;
|
|
|
- const arr = [];
|
|
|
- this.zoom = this.detectZoom() / 100; // 910add
|
|
|
- if (flag === true) {
|
|
|
- // const obj = {};
|
|
|
- dorpDownIdArr.map((item, index) => {
|
|
|
- arr.push({});
|
|
|
- // obj[index] = document.querySelector(v);
|
|
|
- menu = document.querySelector(item);
|
|
|
- // 菜单宽高
|
|
|
- arr[index]["width"] = Math.round(menu.clientWidth * this.zoom);
|
|
|
- arr[index]["height"] = Math.round(menu.clientHeight * this.zoom);
|
|
|
- // 菜单左上角相对浏览器左上角的坐标
|
|
|
- // 菜单左上角相对浏览器左上角的坐标
|
|
|
- menuLeftX = Math.round(menu.getBoundingClientRect().left * this.zoom - 2);
|
|
|
- menuLeftY = Math.round(menu.getBoundingClientRect().top * this.zoom + this._toolHeight);
|
|
|
- arr[index]["posX"] = Math.round(menuLeftX + this.iframetoWinX * this.zoom);
|
|
|
- arr[index]["posY"] = Math.round(menuLeftY + this.iframetoWinY * this.zoom);
|
|
|
- });
|
|
|
- /* Array.from(arguments).splice(1, Array.from(arguments).length - 1).forEach((v, index) => {
|
|
|
+ const isEmbed = flag;
|
|
|
+ let menu;
|
|
|
+ let menuLeftX = 0;
|
|
|
+ let menuLeftY = 0;
|
|
|
+ const arr = [];
|
|
|
+ this.zoom = this.detectZoom() / 100; // 910add
|
|
|
+ if (flag === true) {
|
|
|
+ // const obj = {};
|
|
|
+ dorpDownIdArr.map((item, index) => {
|
|
|
+ arr.push({});
|
|
|
+ // obj[index] = document.querySelector(v);
|
|
|
+ menu = document.querySelector(item);
|
|
|
+ // 菜单宽高
|
|
|
+ arr[index]["width"] = Math.round(menu.clientWidth * this.zoom);
|
|
|
+ arr[index]["height"] = Math.round(menu.clientHeight * this.zoom);
|
|
|
+ // 菜单左上角相对浏览器左上角的坐标
|
|
|
+ // 菜单左上角相对浏览器左上角的坐标
|
|
|
+ menuLeftX = Math.round(menu.getBoundingClientRect().left * this.zoom - 2);
|
|
|
+ menuLeftY = Math.round(menu.getBoundingClientRect().top * this.zoom + this._toolHeight);
|
|
|
+ arr[index]["posX"] = Math.round(menuLeftX + this.iframetoWinX * this.zoom);
|
|
|
+ arr[index]["posY"] = Math.round(menuLeftY + this.iframetoWinY * this.zoom);
|
|
|
+ });
|
|
|
+ /* Array.from(arguments).splice(1, Array.from(arguments).length - 1).forEach((v, index) => {
|
|
|
arr.push({});
|
|
|
obj[index] = document.querySelector(v);
|
|
|
menu = document.querySelector(dorpDownId);
|
|
|
@@ -170,183 +175,183 @@ class VideoPlay {
|
|
|
}
|
|
|
}
|
|
|
}) */
|
|
|
+ }
|
|
|
+ // console.log(arr);
|
|
|
+ const params = {
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "setCoinRegion",
|
|
|
+ "params": {
|
|
|
+ "bCoincide": isEmbed,
|
|
|
+ "region": arr,
|
|
|
+ "handleName": this.handleName
|
|
|
+ },
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "socketCode": this.socketCode
|
|
|
+ };
|
|
|
+ this.webSocketSend(JSON.stringify(params));
|
|
|
}
|
|
|
- // console.log(arr);
|
|
|
- const params = {
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "setCoinRegion",
|
|
|
- "params": {
|
|
|
- "bCoincide": isEmbed,
|
|
|
- "region": arr,
|
|
|
- "handleName": this.handleName
|
|
|
- },
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "socketCode": this.socketCode
|
|
|
- };
|
|
|
- this.webSocketSend(JSON.stringify(params));
|
|
|
- }
|
|
|
- // 计算顶部距离，网页伸缩不变，这个针对不同分辨率的电脑，如果不准，第三方自己修改，只提供如下几种适配电脑。
|
|
|
+ // 计算顶部距离，网页伸缩不变，这个针对不同分辨率的电脑，如果不准，第三方自己修改，只提供如下几种适配电脑。
|
|
|
calcTools() {
|
|
|
- // const toolh = Math.round(window.outerHeight - (window.innerHeight) * this.detectZoom() / 100);
|
|
|
- // this._toolHeight = toolh < 0 ? 80 : toolh;
|
|
|
- // this.zoom = this.detectZoom() / 100;
|
|
|
- this.zoom = this.detectZoom() / 100;
|
|
|
- if (this.zoom === 0.67) { // 现场笔记本
|
|
|
- this._toolHeight = 80;
|
|
|
- } else if (this.zoom === 1.5) {
|
|
|
- this._toolHeight = 110;
|
|
|
- } else if (this.zoom === 3) {
|
|
|
- this._toolHeight = 232;
|
|
|
- } else {
|
|
|
- const toolh = Math.round(window.outerHeight - (window.innerHeight) * this.detectZoom() / 100);
|
|
|
- this._toolHeight = toolh < 0 ? 90 : toolh;
|
|
|
+ // const toolh = Math.round(window.outerHeight - (window.innerHeight) * this.detectZoom() / 100);
|
|
|
+ // this._toolHeight = toolh < 0 ? 80 : toolh;
|
|
|
+ // this.zoom = this.detectZoom() / 100;
|
|
|
+ this.zoom = this.detectZoom() / 100;
|
|
|
+ if (this.zoom === 0.67) { // 现场笔记本
|
|
|
+ this._toolHeight = 80;
|
|
|
+ } else if (this.zoom === 1.5) {
|
|
|
+ this._toolHeight = 110;
|
|
|
+ } else if (this.zoom === 3) {
|
|
|
+ this._toolHeight = 232;
|
|
|
+ } else {
|
|
|
+ const toolh = Math.round(window.outerHeight - (window.innerHeight) * this.detectZoom() / 100);
|
|
|
+ this._toolHeight = toolh < 0 ? 90 : toolh;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- // 网页变操作化大小
|
|
|
+ // 网页变操作化大小
|
|
|
resize() {
|
|
|
- if (!this.status || !this.vModeObj.embedVideoMode) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- const calcDomWidth = this.space.clientWidth || this.space.getBoundingClientRect().width;
|
|
|
- const calcDomheight = this.space.clientHeight || this.space.getBoundingClientRect().height;
|
|
|
- const zoom = this.detectZoom() / 100;
|
|
|
- const realClientWidth = Math.round(calcDomWidth * zoom);
|
|
|
- const realClientHeight = Math.round(calcDomheight * zoom);
|
|
|
- console.log("zoom---_toolHeight---", zoom, this._toolHeight);
|
|
|
- // 防止初始化后设置隐藏hide后拖动浏览器再show显示在左上方问题
|
|
|
- if (this.space.clientWidth === 0 && this.space.clientHeight === 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (zoom === 1) {
|
|
|
- // 默认伸缩状态
|
|
|
- // posX:距离浏览器左顶点横轴距离;posY:距离浏览器左顶点纵轴距离
|
|
|
- let posX = this.space.getBoundingClientRect().left;
|
|
|
- let posY;
|
|
|
- if (window.outerWidth === window.innerWidth) {
|
|
|
- // 普通浏览器最大化状态
|
|
|
- if (this.fullToolH == null) {
|
|
|
- // 为空时才计算，避免上下拖动改变浏览器大小事，视频窗口抖动
|
|
|
- this.fullToolL = (window.outerWidth - window.innerWidth) / 2;
|
|
|
- // _this.fullToolH = window.outerHeight - window.innerHeight - _this.fullToolL + 10;
|
|
|
- this.fullToolH = this._toolHeight;
|
|
|
+ if (!this.status || !this.vModeObj.embedVideoMode) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const calcDomWidth = this.space.clientWidth || this.space.getBoundingClientRect().width;
|
|
|
+ const calcDomheight = this.space.clientHeight || this.space.getBoundingClientRect().height;
|
|
|
+ const zoom = this.detectZoom() / 100;
|
|
|
+ const realClientWidth = Math.round(calcDomWidth * zoom);
|
|
|
+ const realClientHeight = Math.round(calcDomheight * zoom);
|
|
|
+ console.log("zoom---_toolHeight---", zoom, this._toolHeight);
|
|
|
+ // 防止初始化后设置隐藏hide后拖动浏览器再show显示在左上方问题
|
|
|
+ if (this.space.clientWidth === 0 && this.space.clientHeight === 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (zoom === 1) {
|
|
|
+ // 默认伸缩状态
|
|
|
+ // posX:距离浏览器左顶点横轴距离;posY:距离浏览器左顶点纵轴距离
|
|
|
+ let posX = this.space.getBoundingClientRect().left;
|
|
|
+ let posY;
|
|
|
+ if (window.outerWidth === window.innerWidth) {
|
|
|
+ // 普通浏览器最大化状态
|
|
|
+ if (this.fullToolH == null) {
|
|
|
+ // 为空时才计算，避免上下拖动改变浏览器大小事，视频窗口抖动
|
|
|
+ this.fullToolL = (window.outerWidth - window.innerWidth) / 2;
|
|
|
+ // _this.fullToolH = window.outerHeight - window.innerHeight - _this.fullToolL + 10;
|
|
|
+ this.fullToolH = this._toolHeight;
|
|
|
+ }
|
|
|
+ posY = this.space.getBoundingClientRect().top + this.fullToolH;
|
|
|
+ } else if (window.outerWidth - window.innerWidth < 0) {
|
|
|
+ // F11全屏窗口计算
|
|
|
+ posX = this.space.getBoundingClientRect().left;
|
|
|
+ posY = this.space.getBoundingClientRect().top;
|
|
|
+ } else {
|
|
|
+ // 浏览器非最大化状态
|
|
|
+ if (this.toolH == null) {
|
|
|
+ this.toolL = (window.outerWidth - window.innerWidth) / 2;
|
|
|
+ this.toolH = window.outerHeight - window.innerHeight - this.toolL;
|
|
|
+ }
|
|
|
+ posX = this.space.getBoundingClientRect().left;
|
|
|
+ posY = this.space.getBoundingClientRect().top + this.toolH + 0;
|
|
|
}
|
|
|
- posY = this.space.getBoundingClientRect().top + this.fullToolH;
|
|
|
- } else if (window.outerWidth - window.innerWidth < 0) {
|
|
|
- // F11全屏窗口计算
|
|
|
- posX = this.space.getBoundingClientRect().left;
|
|
|
- posY = this.space.getBoundingClientRect().top;
|
|
|
+ posX = Math.round(posX);
|
|
|
+ posY = Math.round(posY);
|
|
|
+ this.dragResize(realClientWidth, realClientHeight, posX, posY);
|
|
|
+ console.log("dragResize1-->", realClientWidth, realClientHeight, posX, posY);
|
|
|
} else {
|
|
|
- // 浏览器非最大化状态
|
|
|
- if (this.toolH == null) {
|
|
|
- this.toolL = (window.outerWidth - window.innerWidth) / 2;
|
|
|
- this.toolH = window.outerHeight - window.innerHeight - this.toolL;
|
|
|
+ if (window.outerHeight - window.innerHeight === 288 || window.outerWidth - window.innerWidth < 0) { // 最大化
|
|
|
+ const longW = Math.round(this.space.getBoundingClientRect().left * zoom);
|
|
|
+ const longH = Math.round(this.space.getBoundingClientRect().top * zoom);
|
|
|
+ this.dragResize(realClientWidth, realClientHeight, longW, longH);
|
|
|
+ console.log("最大化dragResize2-->", realClientWidth, realClientHeight, longW, longH);
|
|
|
+ } else {
|
|
|
+ const longW = Math.round(this.space.getBoundingClientRect().left * zoom);
|
|
|
+ const longH = Math.round(this.space.getBoundingClientRect().top * zoom + this._toolHeight);
|
|
|
+ this.dragResize(realClientWidth, realClientHeight, longW, longH);
|
|
|
+ console.log("dragResize2-->", realClientWidth, realClientHeight, longW, longH);
|
|
|
}
|
|
|
- posX = this.space.getBoundingClientRect().left;
|
|
|
- posY = this.space.getBoundingClientRect().top + this.toolH + 0;
|
|
|
- }
|
|
|
- posX = Math.round(posX);
|
|
|
- posY = Math.round(posY);
|
|
|
- this.dragResize(realClientWidth, realClientHeight, posX, posY);
|
|
|
- console.log("dragResize1-->", realClientWidth, realClientHeight, posX, posY);
|
|
|
- } else {
|
|
|
- if (window.outerHeight - window.innerHeight === 288 || window.outerWidth - window.innerWidth < 0) { // 最大化
|
|
|
- const longW = Math.round(this.space.getBoundingClientRect().left * zoom);
|
|
|
- const longH = Math.round(this.space.getBoundingClientRect().top * zoom);
|
|
|
- this.dragResize(realClientWidth, realClientHeight, longW, longH);
|
|
|
- console.log("最大化dragResize2-->", realClientWidth, realClientHeight, longW, longH);
|
|
|
- } else {
|
|
|
- const longW = Math.round(this.space.getBoundingClientRect().left * zoom);
|
|
|
- const longH = Math.round(this.space.getBoundingClientRect().top * zoom + this._toolHeight);
|
|
|
- this.dragResize(realClientWidth, realClientHeight, longW, longH);
|
|
|
- console.log("dragResize2-->", realClientWidth, realClientHeight, longW, longH);
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- // 创建视频窗口
|
|
|
+ // 创建视频窗口
|
|
|
createVideoDialog(obj) {
|
|
|
- const {
|
|
|
- rows = 2, cols = 2, wndSpaceing = 0, embedVideoMode = true, playerCtrlBarEnable = false, displayMode = 0, playMode = 0, playParams = {}, webControlExpend = false
|
|
|
- } = obj;
|
|
|
- let playParamsObj = null;
|
|
|
- playMode === 0 ? playParamsObj = {} : playParamsObj = playParams;
|
|
|
- const params = JSON.stringify({
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "socketCode": this.socketCode,
|
|
|
- "method": "CreateVideoDialog",
|
|
|
- "params": {
|
|
|
- "handleName": this.handleName,
|
|
|
- "rows": rows,
|
|
|
- "cols": cols,
|
|
|
- "wndSpaceing": wndSpaceing, // 视频播放窗口间隔，默认为0
|
|
|
- "embedVideoMode": embedVideoMode, // 视频窗口是否为嵌入式。true：嵌入式(列表框云台和标题栏不展示),false：弹出式(展示列表框云台和标题栏)
|
|
|
- "playerCtrlBarEnable": playerCtrlBarEnable, // 视频窗口上的鼠标云台是否使能。true：展示，false：不展示
|
|
|
- "displayMode": displayMode, // 窗口显示模式，用于播放控制栏0：视频监控，显示播放控制栏; 1：轮播，隐藏播放控制栏
|
|
|
- "playMode": playMode, // playMode：播放模式，0: 普通模式，1：轮播模式，默认为普通播放模式
|
|
|
- "playParams": playParamsObj,// playMode=0，playParams为空;playMode=1，playParams格式如下：// 轮播时间间隔，单位秒，默认为5s
|
|
|
- "webControlExpend": webControlExpend
|
|
|
- }
|
|
|
- });
|
|
|
- this.webSocketSend(params);
|
|
|
- }
|
|
|
- //初始化窗口
|
|
|
+ const {
|
|
|
+ rows = 2, cols = 2, wndSpaceing = 0, embedVideoMode = true, playerCtrlBarEnable = false, displayMode = 0, playMode = 0, playParams = {}, webControlExpend = false
|
|
|
+ } = obj;
|
|
|
+ let playParamsObj = null;
|
|
|
+ playMode === 0 ? playParamsObj = {} : playParamsObj = playParams;
|
|
|
+ const params = JSON.stringify({
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "socketCode": this.socketCode,
|
|
|
+ "method": "CreateVideoDialog",
|
|
|
+ "params": {
|
|
|
+ "handleName": this.handleName,
|
|
|
+ "rows": rows,
|
|
|
+ "cols": cols,
|
|
|
+ "wndSpaceing": wndSpaceing, // 视频播放窗口间隔，默认为0
|
|
|
+ "embedVideoMode": embedVideoMode, // 视频窗口是否为嵌入式。true：嵌入式(列表框云台和标题栏不展示),false：弹出式(展示列表框云台和标题栏)
|
|
|
+ "playerCtrlBarEnable": playerCtrlBarEnable, // 视频窗口上的鼠标云台是否使能。true：展示，false：不展示
|
|
|
+ "displayMode": displayMode, // 窗口显示模式，用于播放控制栏0：视频监控，显示播放控制栏; 1：轮播，隐藏播放控制栏
|
|
|
+ "playMode": playMode, // playMode：播放模式，0: 普通模式，1：轮播模式，默认为普通播放模式
|
|
|
+ "playParams": playParamsObj, // playMode=0，playParams为空;playMode=1，playParams格式如下：// 轮播时间间隔，单位秒，默认为5s
|
|
|
+ "webControlExpend": webControlExpend
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.webSocketSend(params);
|
|
|
+ }
|
|
|
+ //初始化窗口
|
|
|
initClientPanel() {
|
|
|
- this.createVideoDialog(this.vModeObj);
|
|
|
- }
|
|
|
- // 实时预览视频
|
|
|
+ this.createVideoDialog(this.vModeObj);
|
|
|
+ }
|
|
|
+ // 实时预览视频
|
|
|
realTimeVideo(arr = [{
|
|
|
- "channelId": ""
|
|
|
- }]) {
|
|
|
- // debugger
|
|
|
- const params = JSON.stringify({
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "openVideo",
|
|
|
- "params": {
|
|
|
- "array": arr, // [{"channelId": channelId}]
|
|
|
- "handleName": this.handleName
|
|
|
- },
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "socketCode": this.socketCode
|
|
|
- });
|
|
|
- this.webSocketSend(params);
|
|
|
- this.winMaxMinOpt();
|
|
|
- }
|
|
|
- // 录像回放 //paramsArr传开始时间，结束时间，通道号
|
|
|
+ "channelId": ""
|
|
|
+ }]) {
|
|
|
+ // debugger
|
|
|
+ const params = JSON.stringify({
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "openVideo",
|
|
|
+ "params": {
|
|
|
+ "array": arr, // [{"channelId": channelId}]
|
|
|
+ "handleName": this.handleName
|
|
|
+ },
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "socketCode": this.socketCode
|
|
|
+ });
|
|
|
+ this.webSocketSend(params);
|
|
|
+ this.winMaxMinOpt();
|
|
|
+ }
|
|
|
+ // 录像回放 //paramsArr传开始时间，结束时间，通道号
|
|
|
playBack(paramsArr) {
|
|
|
- this.resize();
|
|
|
- const params = JSON.stringify({
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "openRecord",
|
|
|
- "params": {
|
|
|
- "array": paramsArr, // [{"beginTime": "2019-12-27 00:00:00","channelId": "mA2I9l1kA1BOPTAPHT74P8","endTime": "2019-12-27 23:59:59"}]
|
|
|
- "handleName": this.handleName
|
|
|
- },
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "socketCode": this.socketCode
|
|
|
- });
|
|
|
- this.webSocketSend(params);
|
|
|
- this.winMaxMinOpt();
|
|
|
- setTimeout(() => {
|
|
|
this.resize();
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
- // 关闭客户端
|
|
|
+ const params = JSON.stringify({
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "openRecord",
|
|
|
+ "params": {
|
|
|
+ "array": paramsArr, // [{"beginTime": "2019-12-27 00:00:00","channelId": "mA2I9l1kA1BOPTAPHT74P8","endTime": "2019-12-27 23:59:59"}]
|
|
|
+ "handleName": this.handleName
|
|
|
+ },
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "socketCode": this.socketCode
|
|
|
+ });
|
|
|
+ this.webSocketSend(params);
|
|
|
+ this.winMaxMinOpt();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.resize();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ // 关闭客户端
|
|
|
closeClient() {
|
|
|
- const params = {
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "logout",
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "socketCode": this.socketCode
|
|
|
- };
|
|
|
- this.webSocketSend(JSON.stringify(params));
|
|
|
+ const params = {
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "logout",
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "socketCode": this.socketCode
|
|
|
+ };
|
|
|
+ this.webSocketSend(JSON.stringify(params));
|
|
|
|
|
|
- this.stopWebSocket();
|
|
|
- this.websocket = null;
|
|
|
- }
|
|
|
- // debug(message) { // 客户端调试返回信息操作
|
|
|
- // debugTextArea.value += message + "\n\n";
|
|
|
- // debugTextArea.scrollTop = debugTextArea.scrollHeight;
|
|
|
- // }
|
|
|
+ this.stopWebSocket();
|
|
|
+ this.websocket = null;
|
|
|
+ }
|
|
|
+ // debug(message) { // 客户端调试返回信息操作
|
|
|
+ // debugTextArea.value += message + "\n\n";
|
|
|
+ // debugTextArea.scrollTop = debugTextArea.scrollHeight;
|
|
|
+ // }
|
|
|
sendMessage() {
|
|
|
const msg = document.getElementById("inputText").value;
|
|
|
const strToSend = msg;
|
|
|
@@ -356,96 +361,96 @@ class VideoPlay {
|
|
|
}
|
|
|
}
|
|
|
stopWebSocket() {
|
|
|
- if (this.websocket) {
|
|
|
- this.websocket.close();
|
|
|
+ if (this.websocket) {
|
|
|
+ this.websocket.close();
|
|
|
+ }
|
|
|
+ this.websocket = null;
|
|
|
}
|
|
|
- this.websocket = null;
|
|
|
- }
|
|
|
- // 客户端显示隐藏操作;
|
|
|
+ // 客户端显示隐藏操作;
|
|
|
showBrower(flag) {
|
|
|
- const params = {
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "whetherShowVideoWnd",
|
|
|
- "params": {
|
|
|
- "bShow": flag,
|
|
|
- "handleName": this.handleName
|
|
|
- },
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "socketCode": this.socketCode
|
|
|
- };
|
|
|
- this.display = flag;
|
|
|
- this.status = flag;
|
|
|
- this.resize(); // 隐藏时候不走resize，显示时候感知下位置，但是，这不能加延时，否则切换标签页有问题。
|
|
|
- this.webSocketSend(JSON.stringify(params));
|
|
|
- }
|
|
|
- // 客户端-释放窗口
|
|
|
+ const params = {
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "whetherShowVideoWnd",
|
|
|
+ "params": {
|
|
|
+ "bShow": flag,
|
|
|
+ "handleName": this.handleName
|
|
|
+ },
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "socketCode": this.socketCode
|
|
|
+ };
|
|
|
+ this.display = flag;
|
|
|
+ this.status = flag;
|
|
|
+ this.resize(); // 隐藏时候不走resize，显示时候感知下位置，但是，这不能加延时，否则切换标签页有问题。
|
|
|
+ this.webSocketSend(JSON.stringify(params));
|
|
|
+ }
|
|
|
+ // 客户端-释放窗口
|
|
|
destroyVideoDialog() {
|
|
|
- const params = {
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "DestroyVideoDialog",
|
|
|
- "params": {
|
|
|
- "handleName": this.handleName
|
|
|
- },
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "socketCode": this.socketCode
|
|
|
- };
|
|
|
- this.webSocketSend(JSON.stringify(params));
|
|
|
- }
|
|
|
- // 视频置顶操作
|
|
|
+ const params = {
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "DestroyVideoDialog",
|
|
|
+ "params": {
|
|
|
+ "handleName": this.handleName
|
|
|
+ },
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "socketCode": this.socketCode
|
|
|
+ };
|
|
|
+ this.webSocketSend(JSON.stringify(params));
|
|
|
+ }
|
|
|
+ // 视频置顶操作
|
|
|
setVideoWndOnTop(flag) {
|
|
|
- const params = {
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "setVideoWndOnTop",
|
|
|
- "params": {
|
|
|
- "bOnTop": flag,
|
|
|
- "handleName": this.handleName
|
|
|
- },
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "socketCode": this.socketCode
|
|
|
- };
|
|
|
- this.webSocketSend(JSON.stringify(params));
|
|
|
- }
|
|
|
- // 最大化最小化操作；
|
|
|
+ const params = {
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "setVideoWndOnTop",
|
|
|
+ "params": {
|
|
|
+ "bOnTop": flag,
|
|
|
+ "handleName": this.handleName
|
|
|
+ },
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "socketCode": this.socketCode
|
|
|
+ };
|
|
|
+ this.webSocketSend(JSON.stringify(params));
|
|
|
+ }
|
|
|
+ // 最大化最小化操作；
|
|
|
winMaxMinOpt() {
|
|
|
- if (document.addEventListener) {
|
|
|
- document.addEventListener("webkitvisibilitychange", () => {
|
|
|
- if (document.webkitVisibilityState === "hidden") { // 最小化
|
|
|
- const temp = this.status;
|
|
|
- this.showBrower(false);
|
|
|
- this.status = temp;
|
|
|
- console.log("hidden");
|
|
|
- } else if (document.webkitVisibilityState === "visible") { // 最大化
|
|
|
- // 延时的目的：最大化的瞬间 走resize中的window.outerWidth - window.innerWidth < 0这个条件,缺少浏览器顶部栏的高度,导致高度上移
|
|
|
- console.log("visible");
|
|
|
- setTimeout(() => {
|
|
|
- this.showBrower(this.status);
|
|
|
- }, 200);
|
|
|
- }
|
|
|
- });
|
|
|
+ if (document.addEventListener) {
|
|
|
+ document.addEventListener("webkitvisibilitychange", () => {
|
|
|
+ if (document.webkitVisibilityState === "hidden") { // 最小化
|
|
|
+ const temp = this.status;
|
|
|
+ this.showBrower(false);
|
|
|
+ this.status = temp;
|
|
|
+ console.log("hidden");
|
|
|
+ } else if (document.webkitVisibilityState === "visible") { // 最大化
|
|
|
+ // 延时的目的：最大化的瞬间 走resize中的window.outerWidth - window.innerWidth < 0这个条件,缺少浏览器顶部栏的高度,导致高度上移
|
|
|
+ console.log("visible");
|
|
|
+ setTimeout(() => {
|
|
|
+ this.showBrower(this.status);
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- // 关闭所有视频
|
|
|
+ // 关闭所有视频
|
|
|
closeAllVideo() {
|
|
|
- const params = JSON.stringify({
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "closeVideo",
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "params": {
|
|
|
- "handleName": this.handleName
|
|
|
- },
|
|
|
- "socketCode": this.socketCode
|
|
|
- });
|
|
|
- this.webSocketSend(params);
|
|
|
- }
|
|
|
- // 拉app视频
|
|
|
+ const params = JSON.stringify({
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "closeVideo",
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "params": {
|
|
|
+ "handleName": this.handleName
|
|
|
+ },
|
|
|
+ "socketCode": this.socketCode
|
|
|
+ });
|
|
|
+ this.webSocketSend(params);
|
|
|
+ }
|
|
|
+ // 拉app视频
|
|
|
openAppVideo(paramsArr) {
|
|
|
- const params = JSON.stringify({
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "openAppVideo",
|
|
|
- "params": {
|
|
|
- "handleName": this.handleName,
|
|
|
- "array": paramsArr
|
|
|
- /* [
|
|
|
+ const params = JSON.stringify({
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "openAppVideo",
|
|
|
+ "params": {
|
|
|
+ "handleName": this.handleName,
|
|
|
+ "array": paramsArr
|
|
|
+ /* [
|
|
|
{
|
|
|
|
|
|
"channelId": "AcqRGNrqA1B15042F6AMEO",
|
|
|
@@ -458,49 +463,49 @@ class VideoPlay {
|
|
|
}
|
|
|
|
|
|
] */
|
|
|
- },
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "socketCode": this.socketCode
|
|
|
- });
|
|
|
- this.webSocketSend(params);
|
|
|
- }
|
|
|
- // 设置窗口分割数
|
|
|
+ },
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "socketCode": this.socketCode
|
|
|
+ });
|
|
|
+ this.webSocketSend(params);
|
|
|
+ }
|
|
|
+ // 设置窗口分割数
|
|
|
setDesignDivision(rows, cols) {
|
|
|
- const params = JSON.stringify({
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "SetDesignDivision",
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "params": {
|
|
|
- "handleName": this.handleName,
|
|
|
- "rows": Number(rows),
|
|
|
- "cols": Number(cols)
|
|
|
- },
|
|
|
- "socketCode": this.socketCode
|
|
|
- });
|
|
|
- this.webSocketSend(params);
|
|
|
- }
|
|
|
- // 设置视频双击后位置大小
|
|
|
+ const params = JSON.stringify({
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "SetDesignDivision",
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "params": {
|
|
|
+ "handleName": this.handleName,
|
|
|
+ "rows": Number(rows),
|
|
|
+ "cols": Number(cols)
|
|
|
+ },
|
|
|
+ "socketCode": this.socketCode
|
|
|
+ });
|
|
|
+ this.webSocketSend(params);
|
|
|
+ }
|
|
|
+ // 设置视频双击后位置大小
|
|
|
setDesignDivision(obj) {
|
|
|
- const {
|
|
|
- width = "0", height = "0", posX = "0", posY = "0"
|
|
|
- } = obj;
|
|
|
- const params = JSON.stringify({
|
|
|
- "loginIp": this.settings.letLoginIp,
|
|
|
- "method": "expendVideoCtrl",
|
|
|
- "userCode": this.settings.letUserCode,
|
|
|
- "params": {
|
|
|
- "handleName": this.handleName,
|
|
|
- "expend": true,
|
|
|
- "width": width,
|
|
|
- "height": height,
|
|
|
- "posX": posX,
|
|
|
- "posY": posY,
|
|
|
- },
|
|
|
- "socketCode": this.socketCode
|
|
|
- });
|
|
|
- this.webSocketSend(params);
|
|
|
- }
|
|
|
- // 通用方法第三方传方法名和参数体
|
|
|
+ const {
|
|
|
+ width = "0", height = "0", posX = "0", posY = "0"
|
|
|
+ } = obj;
|
|
|
+ const params = JSON.stringify({
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "expendVideoCtrl",
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "params": {
|
|
|
+ "handleName": this.handleName,
|
|
|
+ "expend": true,
|
|
|
+ "width": width,
|
|
|
+ "height": height,
|
|
|
+ "posX": posX,
|
|
|
+ "posY": posY,
|
|
|
+ },
|
|
|
+ "socketCode": this.socketCode
|
|
|
+ });
|
|
|
+ this.webSocketSend(params);
|
|
|
+ }
|
|
|
+ // 通用方法第三方传方法名和参数体
|
|
|
commonUse(method, paramsObj) {
|
|
|
const params = JSON.stringify({
|
|
|
"loginIp": this.settings.letLoginIp,
|
