2022/3/11

minggao/config/index.js

@@ -13,7 +13,8 @@ module.exports = {
     proxyTable: {
       '/api': {
         //  target: 'http://192.168.1.17:12345', //翟毅飞
-         target: 'https://yfznscd.com', //翟毅飞
+        //  target: 'https://yfznscd.com', //线上
+         target: 'https://www.toreskj.com', //线上
         // target: 'http://192.168.1.77:12345', //曹世祥
         // target:"http://114.115.147.140:12345",
         changeOrigin: true,
@@ -24,7 +25,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '192.168.1.4', // can be overwritten by process.env.HOST
+    host: 'localhost', // can be overwritten by process.env.HOST
     port: 8888, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

minggao/src/page/commandCenter/realTime.vue

@@ -145,11 +145,38 @@
       :before-close="handleClose"
       :modal="false"
       v-dialogDrag
+      :fullscreen="zoomShow"
       :title="videoTle"
       :visible.sync="videoVisible"
       width="600px"
     >
-      <div class="video_box">
+      <!-- <div class="video_box"> -->
+      <div :class="zoomShow == false ? 'video_box' : 'video_box-big'">
+        <!-- 最大化、最小化 -->
+        <div
+          style="
+            position: absolute;
+            right: 42px;
+            color: #9fa2a7;
+            top: -28px;
+            font-size: 13px;
+          "
+        >
+          <!-- 最小化 -->
+          <span
+            style="font-size: 25px; cursor: pointer"
+            class="iconfont icon-zuixiaohua"
+            @click="zoomOperate('small')"
+          ></span>
+          <!-- 最大化 -->
+          <span
+            style="font-size: 25px; cursor: pointer"
+            class="iconfont icon-zuidahua"
+            @click="zoomOperate('big')"
+          ></span>
+        </div>
+        <!-- 最大化、最小化 -->
+
         <div class="host_video" v-if="videoShow">
           <img
             src="../../assets/images/realTime/8.png"
@@ -420,6 +447,7 @@ export default {
       Token: "",
       RoomID: "",
       videoTle: "正在和云飞-卢万里视频通话",
+      timer: null, // 接听
 
       // 文本聊天框
       tltData: "",
@@ -445,6 +473,9 @@ export default {
       timeoutObj: null, //心跳心跳倒计时
       serverTimeoutObj: null, //心跳倒计时
       timeoutnum: null, //断开 重连倒计时
+
+      // 视频通话窗口缩放
+      zoomShow: false, // 默认最小化
     };
   },
   //监听属性 类似于data概念
@@ -525,7 +556,7 @@ export default {
 
     // 搜索
     searchData() {
-      this.page = 1
+      this.page = 1;
       this.userListData();
     },
 
@@ -698,15 +729,18 @@ export default {
 
     // 退出房间
     notLogin() {
+      clearTimeout(this.timer);
       this.zg.logoutRoom(this.RoomID);
       this.videoVisible = false;
     },
 
     // 当音视频通话关闭时的回调
     handleClose(done) {
+      var that = this;
       this.$confirm("目前正在音视频通话中,确认关闭？")
         .then((_) => {
           done();
+          that.notLogin(); // 退出房间
         })
         .catch((_) => {});
     },
@@ -777,7 +811,7 @@ export default {
             },
           };
           this.websock.send(JSON.stringify(obj1));
-          // this.start(); //开启心跳
+          this.start(); //开启心跳
         };
         this.websock.onmessage = (event) => {
           // console.log("WebSocket:消息");
@@ -839,12 +873,25 @@ export default {
         this.websock.onerror = (event) => {
           console.log("WebSocket:发生错误 ");
           console.log(event);
-          // that.reconnect(); // 重连
+          if (that.timeoutnum !== null) {
+            setTimeout(() => {
+              that.websock.close(); // 先关闭
+              clearTimeout(that.timeoutObj); //清除时间
+              that.reconnect(); // 重连
+            }, 5000);
+          }
         };
         this.websock.onclose = (event) => {
           console.log("WebSocket:已关闭");
           console.log(event);
-          // that.reconnect(); // 重连
+          console.log(that.timeoutnum);
+          if (that.timeoutnum !== null) {
+            setTimeout(() => {
+              that.websock.close(); // 先关闭
+              clearTimeout(that.timeoutObj); //清除时间
+              that.reconnect(); // 重连
+            }, 5000);
+          }
         };
       }
     },
@@ -857,8 +904,6 @@ export default {
     },
     // 监听房间
     soundOn() {
-      var timer;
-
       // 房间状态更新回调
       this.zg.on(
         "roomStateUpdate",
@@ -868,7 +913,7 @@ export default {
             // 接下来的“预览并推流”的代码写在这里
             console.log("房间连接成功");
             //定时器
-            timer = setTimeout(() => {
+            this.timer = setTimeout(() => {
               if (document.getElementsByClassName("el-message").length == 0) {
                 this.$message({
                   message: "没人接听，请稍后重试",
@@ -877,8 +922,8 @@ export default {
                 });
               }
               this.videoVisible = false;
-            }, 5000);
-            // }, 60000);
+              // }, 5000);
+            }, 30000);
           }
           if (state == "DISCONNECTED") {
             // 与房间断开了连接
@@ -896,8 +941,22 @@ export default {
         // 其他用户进出房间的通知
         console.log(updateType);
         console.log(userList);
-        clearTimeout(timer);
         console.log("有其他用户进出房间");
+
+        if (updateType == "DELETE") {
+          if (document.getElementsByClassName("el-message").length == 0) {
+            this.$message({
+              message: "对方已挂断，结束通话！",
+              type: "warning",
+              duration: 1500,
+            });
+          }
+          setTimeout(() => {
+            this.notLogin(); // 退出房间
+          }, 2000);
+        } else if (updateType == "ADD") {
+          clearTimeout(this.timer); // 关闭无人接听回调
+        }
       });
 
       this.zg.on(
@@ -928,23 +987,6 @@ export default {
         // 推流质量回调
         console.log("推流质量更新");
       });
-
-      // this.zg.on("IMRecvBroadcastMessage", (roomID, chatData) => {
-      //   console.log("IMRecvBroadcastMessage", roomID, chatData);
-      //   console.log(">>>>>>>>>>>>>>>>>>>>>接收到文本消息了");
-      //   var list = {
-      //     id: "2", //模拟数据中使用id来区分当前是发送人还是接收人  1为接收人  2为发送人
-      //     msg: chatData[0].message, // 文本消息
-      //     img: "../../../static/img/6.png", // 头像url
-      //   };
-      //   this.msgList = [...this.msgList, list];
-      //   // let message = {
-      //   //     ID: 'zego' + chatData[0].fromUser.userID + chatData[0].sendTime,
-      //   //     name: chatData[0].fromUser.userName,
-      //   //     time: format(chatData[0].sendTime),
-      //   //     content: chatData[0].message + '(广播发送)'
-      //   // }
-      // });
     },
     // 检测是否兼容当前浏览器
     async detection() {
@@ -1013,6 +1055,9 @@ export default {
     // 重连机制
     reconnect() {
       var that = this;
+      console.log("进入重连了");
+      clearTimeout(that.timeoutObj); //清除时间
+      var that = this;
       if (that.lockReconnect) {
         return;
       }
@@ -1024,6 +1069,17 @@ export default {
         that.lockReconnect = false;
       }, 5000);
     },
+
+    // 视频通话窗口最小化、最大化
+    zoomOperate(ref) {
+      if (ref == "small") {
+        // 最小化
+        this.zoomShow = false;
+      } else if (ref == "big") {
+        // 最大化
+        this.zoomShow = true;
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -1050,7 +1106,12 @@ export default {
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
+  beforeDestroy() {
+    var that = this;
+    clearTimeout(that.timeoutnum); // 清除重连
+    clearTimeout(that.timeoutObj); // 清除心跳
+    that.websock.close(); // 关闭websocket
+  }, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
@@ -1116,24 +1177,27 @@ export default {
     width: 80%;
   }
 
-  // 视频通话
+  // 视频通话 - 最小化
   .video_box {
     border: 1px solid #000;
-    // margin: 15px 0 0 0;
     background: #2c2c2c;
     height: 325px;
     position: relative;
 
     // 主视频画面
     .host_video {
-      // width: 100%;
       height: 326px;
-      // height: 300px;
-      // display: table-cell;
       vertical-align: middle;
       text-align: center;
+      position: relative;
       .video_img {
         margin: 120px auto;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
       }
     }
 
@@ -1162,6 +1226,55 @@ export default {
     }
   }
 
+  // 视频通话 - 最大化
+  .video_box-big {
+    border: 1px solid #000;
+    background: #2c2c2c;
+    height: 100%;
+    position: relative;
+
+    // 主视频画面
+    .host_video {
+      height: 100%;
+      vertical-align: middle;
+      text-align: center;
+      position: relative;
+      .video_img {
+        margin: 120px auto;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+      }
+    }
+
+    // 副视频画面
+    .deputy_video {
+      width: 190px;
+      height: 190px;
+      position: absolute;
+      top: 0;
+      right: 0;
+      background: #fff;
+    }
+
+    // 操作
+    .operate {
+      height: 25px;
+      width: 100%;
+      background: #000;
+      padding: 5px 0 5px 0;
+      margin: -13px 0 0 0px;
+      position: absolute;
+      bottom: 3%;
+      left: 0;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
   /* 聊天内容 */
   .ul_list {
     height: 350px;
@@ -1238,6 +1351,7 @@ export default {
   /deep/.el-dialog__body {
     padding: 0;
     // margin-top: -15px;
+    height: 100%;
   }
   /deep/.el-textarea__inner {
     border: 0;

minggao/src/util/server.js

@@ -30,7 +30,8 @@ if (location.origin.indexOf('https') !== -1) {
   wsUrl = 'ws' + origin.split('http')[1]
 }
 console.log(wsUrl)
-// wsUrl = '://192.168.1.17:12345'
+// wsUrl = 'wss://yfznscd.com'
+wsUrl = 'wss://www.toreskj.com'
 export {
   DOMIN,
   mapJson,