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 = 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) => {
				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);
    }
}