|
|
@@ -1,6 +1,5 @@
|
|
|
class VideoPlay {
|
|
|
- constructor(spaceId, websocket, socketCode, vModeObj = {}, options) {
|
|
|
- // spaceId,socketCode不能相同,vModeObj播放模式，是否轮播
|
|
|
+ constructor(spaceId, websocket, socketCode, vModeObj = {}, options) { // spaceId,socketCode不能相同,vModeObj播放模式，是否轮播
|
|
|
this.handleName = spaceId;
|
|
|
this.socketCode = socketCode;
|
|
|
this.vModeObj = vModeObj;
|
|
|
@@ -21,14 +20,13 @@ class VideoPlay {
|
|
|
this.posX = 0; // 实时存放视频区域距离浏览器左边的距离
|
|
|
this.posY = 0; // 实时存放视频区域距离浏览器顶部的距离
|
|
|
this.scale = false; // 是否开始伸缩网页
|
|
|
- this.defaults = {
|
|
|
- // 默认配置，可以通过option覆盖
|
|
|
+ this.defaults = { // 默认配置，可以通过option覆盖
|
|
|
protocol: defaultConfig.protocol, // 协议
|
|
|
letLoginIp: defaultConfig.loginIp, // 环境配置
|
|
|
letPort: defaultConfig.port, // 端口配置
|
|
|
letUserCode: localStorage.getItem("userId"), // 用户code
|
|
|
wsUri: "ws://localhost:1234",
|
|
|
- token: localStorage.getItem("DAHUA_token"), // token
|
|
|
+ token: localStorage.getItem("token"), // token
|
|
|
getVersion: null, // option里面的获取版本信息的回调函数通知
|
|
|
loginSuccess: null, // 登陆成功会调通知
|
|
|
errorInfo: null, // 异常回调通知
|
|
|
@@ -52,111 +50,107 @@ class VideoPlay {
|
|
|
|
|
|
// 初始化
|
|
|
init() {
|
|
|
- this.calcTools();
|
|
|
- this.initClientPanel();
|
|
|
- this.winMaxMinOpt();
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- this.resize();
|
|
|
- });
|
|
|
- window.onunload = () => {
|
|
|
- this.closeClient();
|
|
|
- };
|
|
|
- }
|
|
|
- // webSocket交互
|
|
|
+ this.calcTools();
|
|
|
+ this.initClientPanel();
|
|
|
+ this.winMaxMinOpt();
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ this.resize();
|
|
|
+ });
|
|
|
+ window.onunload = () => {
|
|
|
+ this.closeClient();
|
|
|
+ };
|
|
|
+ }
|
|
|
+ // webSocket交互
|
|
|
webSocketSend(data) {
|
|
|
- if (this.websocket == null) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (this.websocket.readyState === 1) {
|
|
|
- this.websocket.send(data);
|
|
|
- } else {
|
|
|
- setTimeout(() => {
|
|
|
- this.webSocketSend(data);
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
+ 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;
|
|
|
- }
|
|
|
- } else if (
|
|
|
- window.outerWidth !== undefined &&
|
|
|
- window.innerWidth !== undefined
|
|
|
- ) {
|
|
|
- ratio = window.outerWidth / window.innerWidth;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
|
|
|
- if (ratio) {
|
|
|
- ratio = Math.round(ratio * 100);
|
|
|
- }
|
|
|
- return ratio;
|
|
|
+ if (ratio) {
|
|
|
+ ratio = Math.round(ratio * 100);
|
|
|
}
|
|
|
- // 实时传递给客户端的位置大小
|
|
|
+ return ratio;
|
|
|
+ }
|
|
|
+ // 实时传递给客户端的位置大小
|
|
|
dragResize(width, height, posX, posY) {
|
|
|
- // 实时存储目前视频的大小位置;
|
|
|
- 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
|
|
|
- };
|
|
|
- this.webSocketSend(JSON.stringify(params));
|
|
|
- }
|
|
|
- // 设置菜单遮挡问题
|
|
|
+ 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);
|
|
|
+ width = Math.round( c.width * window.outerWidth/window.innerWidth );
|
|
|
+ height = Math.round(c.height* window.outerWidth/window.innerWidth );
|
|
|
+
|
|
|
+ // 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));
|
|
|
+ }
|
|
|
+ // 设置菜单遮挡问题
|
|
|
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);
|
|
|
@@ -176,251 +170,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;
|
|
|
- // console.log(this.zoom);
|
|
|
- // 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 =
|
|
|
- //(window.screen.height - window.screen.availHeight) * this.zoom; //
|
|
|
- window.outerHeight - window.innerHeight;
|
|
|
-
|
|
|
+ // 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() {
|
|
|
- // console.log(33333);
|
|
|
- console.log(this.status);
|
|
|
- console.log(this.vModeObj.embedVideoMode);
|
|
|
- // if (!this.status || !this.vModeObj.embedVideoMode) {
|
|
|
- // console.log('false');
|
|
|
- // 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.floor(calcDomWidth);
|
|
|
- const realClientHeight = Math.floor(calcDomheight);
|
|
|
- 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;
|
|
|
+ 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;
|
|
|
}
|
|
|
- posX = Math.round(posX);
|
|
|
- posY = Math.round(posY);
|
|
|
- this.dragResize(realClientWidth, realClientHeight, posX, posY);
|
|
|
- console.log(
|
|
|
- "dragResize1-->",
|
|
|
- realClientWidth,
|
|
|
- realClientHeight,
|
|
|
- posX,
|
|
|
- posY
|
|
|
- );
|
|
|
+ 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 (
|
|
|
- window.outerHeight - window.innerHeight === 288 ||
|
|
|
- window.outerWidth - window.innerWidth < 0
|
|
|
- ) {
|
|
|
- // 最大化
|
|
|
- const longW = Math.round(
|
|
|
- this.space.getBoundingClientRect().left
|
|
|
- );
|
|
|
- const longH = Math.round(
|
|
|
- this.space.getBoundingClientRect().top
|
|
|
- );
|
|
|
- this.dragResize(
|
|
|
- realClientWidth,
|
|
|
- realClientHeight,
|
|
|
- longW,
|
|
|
- longH
|
|
|
- );
|
|
|
- console.log(
|
|
|
- "最大化dragResize2-->",
|
|
|
- realClientWidth,
|
|
|
- realClientHeight,
|
|
|
- longW,
|
|
|
- longH
|
|
|
- );
|
|
|
- } else {
|
|
|
-
|
|
|
- const longW = Math.round(
|
|
|
- this.space.getBoundingClientRect().left
|
|
|
- );
|
|
|
- const longH = Math.round(
|
|
|
- this.space.getBoundingClientRect().top +
|
|
|
- this._toolHeight
|
|
|
- );
|
|
|
- // debugger
|
|
|
- this.dragResize(
|
|
|
- realClientWidth,
|
|
|
- realClientHeight,
|
|
|
- longW,
|
|
|
- longH
|
|
|
- );
|
|
|
- console.log(
|
|
|
- "dragResize2-->",
|
|
|
- realClientWidth,
|
|
|
- realClientHeight,
|
|
|
- longW,
|
|
|
- longH
|
|
|
- );
|
|
|
+ // 浏览器非最大化状态
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ 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) {
|
|
|
- console.log(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
|
|
|
- }
|
|
|
- });
|
|
|
- console.log(params);
|
|
|
- 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);
|
|
|
- }
|
|
|
- // 实时预览视频
|
|
|
- realTimeVideo(
|
|
|
- arr = [{
|
|
|
- channelId: ""
|
|
|
- }]
|
|
|
- ) {
|
|
|
- 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传开始时间，结束时间，通道号
|
|
|
+ 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传开始时间，结束时间，通道号
|
|
|
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();
|
|
|
- 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);
|
|
|
- }
|
|
|
- // 关闭客户端
|
|
|
+ }, 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;
|
|
|
@@ -430,151 +356,159 @@ class VideoPlay {
|
|
|
}
|
|
|
}
|
|
|
stopWebSocket() {
|
|
|
- if (this.websocket) {
|
|
|
- this.websocket.close();
|
|
|
- }
|
|
|
- this.websocket = null;
|
|
|
+ if (this.websocket) {
|
|
|
+ this.websocket.close();
|
|
|
}
|
|
|
- // 客户端显示隐藏操作;
|
|
|
+ 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;
|
|
|
- console.log(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) {
|
|
|
- // debugger;
|
|
|
- document.addEventListener("webkitvisibilitychange", () => {
|
|
|
- // debugger;
|
|
|
- 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
|
|
|
+ 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);
|
|
|
+ }
|
|
|
});
|
|
|
- this.webSocketSend(params);
|
|
|
}
|
|
|
- // 拉app视频
|
|
|
+ }
|
|
|
+ // 关闭所有视频
|
|
|
+ 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视频
|
|
|
openAppVideo(paramsArr) {
|
|
|
- const params = JSON.stringify({
|
|
|
- loginIp: this.settings.letLoginIp,
|
|
|
- method: "openAppVideo",
|
|
|
- params: {
|
|
|
- handleName: this.handleName,
|
|
|
- array: paramsArr
|
|
|
- },
|
|
|
- userCode: this.settings.letUserCode,
|
|
|
- socketCode: this.socketCode
|
|
|
- });
|
|
|
- this.webSocketSend(params);
|
|
|
- }
|
|
|
- // 设置窗口分割数
|
|
|
+ const params = JSON.stringify({
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": "openAppVideo",
|
|
|
+ "params": {
|
|
|
+ "handleName": this.handleName,
|
|
|
+ "array": paramsArr
|
|
|
+ /* [
|
|
|
+ {
|
|
|
+
|
|
|
+ "channelId": "AcqRGNrqA1B15042F6AMEO",
|
|
|
+
|
|
|
+ "userCode": "xxxxxx",
|
|
|
+
|
|
|
+ "regionId": "xxxxx",
|
|
|
+
|
|
|
+ "domainId": "xxxxx",
|
|
|
+ }
|
|
|
+
|
|
|
+ ] */
|
|
|
+ },
|
|
|
+ "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,
|
|
|
- method: method,
|
|
|
- userCode: this.settings.letUserCode,
|
|
|
- params: paramsObj,
|
|
|
- socketCode: this.socketCode
|
|
|
+ "loginIp": this.settings.letLoginIp,
|
|
|
+ "method": method,
|
|
|
+ "userCode": this.settings.letUserCode,
|
|
|
+ "params": paramsObj,
|
|
|
+ "socketCode": this.socketCode
|
|
|
});
|
|
|
this.webSocketSend(params);
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-window.VideoPlay = VideoPlay;
|
|
|
+}
|
Your Name