squi-HD/public/webClient/webClient_initWnd.js

class VideoPlay {
    constructor(spaceId, websocket, socketCode, vModeObj = {}, options) { // spaceId,socketCode不能相同,vModeObj播放模式，是否轮播
        this.handleName = spaceId;
        this.socketCode = socketCode;
        this.vModeObj = vModeObj;
        this.toolL = null; // 浏览器左侧、下方、右侧条宽度
        this.toolH = null; // 浏览器上方的高度，放大缩小时会变化
        this.fullToolL = null; // 最大化时浏览器左侧、下方、右侧条宽度
        this.fullToolH = null; // 最大化时浏览器上方高度
        this.space = document.querySelector(spaceId); // 传入的存放视频区域id或者class
        this.spaceStartOffsetLeft = document.querySelector(spaceId).offsetLeft; // 传入的存放视频区域距离浏览器左侧的距离，iframe另计算;
        this.spaceStartOffsetTop = document.querySelector(spaceId).offsetTop; // //传入的存放视频区域距离浏览器顶部的距离，iframe另计算;
        this.space = document.querySelector(spaceId);
        this.websocket = websocket; // 初始化websocket
        this.display = true; // 防止切换页面视频闪烁
        this.iframetoWinX = 0; // iframe距离浏览器左边的距离
        this.iframetoWinY = 0; // iframe距离浏览器顶部的距离
        this.width = 0; // 实时存放视频区域宽度
        this.height = 0; // 实存放视频区域高度
        this.posX = 0; // 实时存放视频区域距离浏览器左边的距离
        this.posY = 0; // 实时存放视频区域距离浏览器顶部的距离
        this.scale = false; // 是否开始伸缩网页
        this.defaults = { // 默认配置，可以通过option覆盖
            protocol: defaultConfig.protocol, // 协议
            letLoginIp: defaultConfig.loginIp, // 环境配置
            letPort: defaultConfig.port, // 端口配置
            letUserCode: localStorage.getItem("userId"), // 用户code
            wsUri: "ws://localhost:1234",
            token: localStorage.getItem("token"), // token
            getVersion: null, // option里面的获取版本信息的回调函数通知
            loginSuccess: null, // 登陆成功会调通知
            errorInfo: null, // 异常回调通知
            isDefaultShow: true, // 是否默认显示视频
            onCreateVideoSuccess: false // 客户端被拉起通知
        };
        this.startCoinRegionPOX = 0; // 默认menu菜单距离浏览器左边的距离
        this.startCoinRegionPOY = 0; // 默认menu菜单距离浏览器顶部的距离
        this.zoom = 1; // 默认伸缩；实时存放网页伸缩倍数
        this.ifmToTop = 0; // iframe距离区域的距离
        this.menuWidth1 = 0; // 实时菜单宽度
        this.menuHeight1 = 0; // 实时菜单高度
        this.settings = Object.assign({}, this.defaults, options); // 覆盖默认配置操作
        this.websocketOnerror = false;
        this.ServerVersion = 8888888; // 模拟服务器版本号
        this.ClientLocalVersion = 0; // 获取本地版本号
        this._toolHeight = 0; // 顶部高度
        this.status = true; // 记录显示隐藏
        this.status = document.querySelector(spaceId).clientHeight !== 0;
    }

    // 初始化
    init() {
            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);
            }
        }
        // 检测浏览器的缩放状态实现代码
    detectZoom() {
            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 (ratio) {
                ratio = Math.round(ratio * 100);
            }
            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);

            // console.log(c)


            // 实时存储目前视频的大小位置;
            this.width =
                Math.round(width * window.devicePixelRatio + 5 * window.devicePixelRatio);
            this.height = Math.round(height * window.devicePixelRatio + 5 * window.devicePixelRatio);
            this.posX = Math.round(
                posX * window.devicePixelRatio + 5 * window.devicePixelRatio,
            );
            this.posY = Math.round(
                posY * window.devicePixelRatio + 5 * 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) => {
				arr.push({});
				obj[index] = document.querySelector(v);
				menu = document.querySelector(dorpDownId);
				// 菜单宽高
				arr[index]["width"] = Math.round(obj[index].clientWidth * _this.zoom);
				arr[index]["height"] = Math.round(obj[index].clientHeight * _this.zoom);
				// 菜单左上角相对浏览器左上角的坐标
				menuLeftX = Math.round(obj[index].getBoundingClientRect().left* _this.zoom - 2);
				menuLeftY = Math.round(obj[index].getBoundingClientRect().top* _this.zoom + _this._toolHeight);
				arr[index]["posX"] = Math.round(menuLeftX + _this.iframetoWinX * _this.zoom);
				if (_this.zoom == 1) { //正常比例
					arr[index]["posY"] = Math.round(menuLeftY + _this.iframetoWinY * _this.zoom);
				} else { //缩放比例
					if (menu) {
						arr[index]["posY"] = Math.round(obj[index].getBoundingClientRect().top * _this.zoom + _this.ifmToTop * _this.zoom +_this._toolHeight);
						//console.log(_this.startCoinRegionPOY,menu.getBoundingClientRect().top*_this.zoom,_this.ifmToTop,Math.round(window.parent.outerHeight - (window.parent.innerHeight)*_this.zoom),_this.zoom);
					}
				}
			}) */
            }
            // 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;
            }
        }
        // 网页变操作化大小
    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;
                    }
                    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;
                }
                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);
        }
        //初始化窗口
    initClientPanel() {
            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();
            }, 1000);
        }
        // 关闭客户端
    closeClient() {
            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;
        // }
    sendMessage() {
        const msg = document.getElementById("inputText").value;
        const strToSend = msg;
        if (this.websocket != null) {
            document.getElementById("inputText").value = "";
            this.webSocketSend(strToSend);
        }
    }
    stopWebSocket() {
            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;
            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));
        }
        // 视频置顶操作
    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));
        }
        // 最大化最小化操作；
    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);
                    }
                });
            }
        }
        // 关闭所有视频
    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
                        /* [
					{

						"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);
        }
        // 设置视频双击后位置大小
    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);
        }
        // 通用方法第三方传方法名和参数体
    commonUse(method, paramsObj) {
        const params = JSON.stringify({
            "loginIp": this.settings.letLoginIp,
            "method": method,
            "userCode": this.settings.letUserCode,
            "params": paramsObj,
            "socketCode": this.socketCode
        });
        this.webSocketSend(params);
    }
}