2022/2/7 实时通信视频通讯优化

minggao/src/page/commandCenter/laboratory.vue

@@ -0,0 +1,134 @@
+<!--  -->
+<template>
+  <div class="laboratory_box">
+    <el-card :style="'height:' + fullHeight + 'px'">
+      <!-- 筛选 -->
+      <el-row>
+        <el-col>
+          <div class="search_box">
+            <!-- 任务处理人 -->
+            <el-input
+              size="mini"
+              placeholder="请输入角色名称"
+              v-model.trim="input"
+              @change="searchData"
+              clearable
+            >
+            </el-input>
+
+            <!-- 任务状态 -->
+            <el-select v-model="value" clearable placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+
+            <!-- 时间筛选 -->
+
+            <div class="btn_box">
+              <el-button type="primary" size="mini" @click="searchData"
+                >搜索</el-button
+              >
+              <el-button type="primary" size="mini">重置</el-button
+              >
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 列表 -->
+
+      <!-- 分页 -->
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      fullHeight: document.documentElement.clientHeight - 116, //
+
+      // 筛选
+      input: "", // 任务处理人
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value: "",
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    fullHeight(val) {
+      //监控浏览器高度变化
+      if (!this.timer) {
+        this.fullHeight = val;
+        this.timer = true;
+        let that = this;
+        setTimeout(function () {
+          //防止过度调用监测事件，导致卡顿
+          that.timer = false;
+        }, 400);
+      }
+    },
+  },
+  //方法集合
+  methods: {
+    //动态获取浏览器高度
+    get_boderHeight() {
+      const that = this;
+      window.onresize = () => {
+        return (() => {
+          window.fullHeight = document.documentElement.clientHeight;
+          that.fullHeight = window.fullHeight;
+        })();
+      };
+    },
+
+    // 筛选
+    searchData() {},
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.get_boderHeight(); // 动态获取浏览器高度
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+</style>

minggao/src/page/commandCenter/realTime.vue

@@ -76,9 +76,6 @@
                     alt=""
                   />
                 </span>
-                <!-- <span>
-                  <img src="../../assets/images/realTime/B.png" alt="">
-                </span> -->
                 <span>
                   <img
                     @click="videoAxios(scope.row)"
@@ -331,17 +328,17 @@ export default {
       microphone: true, // 是否打开麦克风
       camera: true, // 是否打开摄像头
       appID: 2672645646, //项目唯一标识 AppID
-      server: "1e8344b2a193220e5e96338ba53c3dcc", // 接入服务器地址Server
+      // server: "1e8344b2a193220e5e96338ba53c3dcc", // 接入服务器地址Server
       videoUrl: "wss://webliveroom2672645646-api.imzego.com/ws", // 请求
       zg: null,
       // UserID: "sample" + Math.floor(Math.random() * 10000000000000).toString(),
       UserID: "user00002",
-      StreamID: "web-4796754531236",
-      // StreamID: "web-" + Math.floor(Math.random() * 10000000000000).toString(),
+      // UserID: "168",
+      // StreamID: "web-4796754531236",
+      StreamID: "web-" + Math.floor(Math.random() * 10000000000000).toString(),
       localStream: null,
-      Token:
-        "03AAAAAGHyVbgAEGdqdmp0cnpia2lvcnd2aGUAsEZBIPxO1xCGkPt7alN2ldHRSJ/di1xoXhw5hxlwTyXUFb4FUPCg6xbKyjEK8ne34apzy0JiJw7V5apRQSCrxv3k+fYYVtM8IgaXza1yD77x50HIAe3raJLvCGDn56jC5ElN//QdspBKkjHBQ0GFHKAlRN5oYDYja7sv3wKsCGRAQW26cxnbVm8SUOU/r71kB4C+qXrb7UE1/IgdkS87RJtJfwiafpOvya0nK9wTTZOY",
-      RoomID: "00002",
+      Token: "",
+      RoomID: "",
       videoTle: "正在和云飞-卢万里视频通话",
 
       // 文本聊天框
@@ -504,6 +501,7 @@ export default {
       this.getUserObj = data;
       this.userName = localStorage.getItem("username");
       this.videoTle = "正在和" + data.real_name + "视频通话";
+      this.UserID = localStorage.getItem('userID')
 
 
       // 先获取当前用户的房间号和登录所需的Token
@@ -517,8 +515,7 @@ export default {
         }
       }
       this.websock.send(JSON.stringify(obj))
-
-      // 登录房间
+      // // 登录房间
       // this.zg.loginRoom(
       //   this.RoomID,
       //   this.Token,
@@ -665,7 +662,26 @@ export default {
             this.websock.send(JSON.stringify(obj));
           } else if (data.action == 'recv_video') {
             // 获取当前点击用户的房间号以及登录房间所需的Token
-            console.log(JSON.parse(event.data));
+            // console.log(JSON.parse(event.data));
+            var data = JSON.parse(event.data)
+            console.log(data)
+            this.RoomID = data.data.room_id // 房间号
+            this.Token = data.data.room_token // Token
+            // 登录房间
+            console.log(this.RoomID)
+            console.log(this.Token)
+            console.log(this.UserID)
+            this.zg.loginRoom(
+              this.RoomID,
+              this.Token,
+              { userID: this.UserID, userName: this.UserID },
+              { userUpdate: true }
+            ).then((result) => {
+              if (result == true) {
+                this.plugFlow(); //推流
+                this.videoVisible = true
+              }
+            });
           }
         };
         this.websock.onerror = (event) => {
@@ -687,6 +703,8 @@ export default {
     },
     // 监听房间
     soundOn() {
+      var timer
+
       // 房间状态更新回调
       this.zg.on(
         "roomStateUpdate",
@@ -695,6 +713,16 @@ export default {
             // 与房间连接成功，只有当房间状态是连接成功时，才能进行推流、拉流等操作。
             // 接下来的“预览并推流”的代码写在这里
             console.log("房间连接成功");
+             //定时器
+            timer = setTimeout(() => {
+               this.$message({
+                  message: '没人接听，请稍后重试',
+                  type: 'warning',
+                  duration: 1500
+                });
+                this.videoVisible = false
+            // }, 60000)
+            }, 6000)
           }
           if (state == "DISCONNECTED") {
             // 与房间断开了连接
@@ -712,6 +740,7 @@ export default {
         // 其他用户进出房间的通知
         console.log(updateType);
         console.log(userList);
+        clearTimeout(timer)
         console.log("有其他用户进出房间");
       });
 

minggao/src/page/home/index.vue

@@ -144,6 +144,7 @@ export default {
         this.routerdata = JSON.parse(JSON.stringify(res.data.data.children));
         this.infodata = res.data.data.children;
         console.log(this.routerdata);
+        localStorage.setItem('userID', res.data.data.im_user_id) // 存储当前登录账号的ID
         this.infodata.shift();
         this.username = res.data.data.username;
         localStorage.setItem("usernme", this.username);

minggao/src/router/index.js

@@ -8,9 +8,6 @@ import Login from '@/page/login/login'
 // *****************首页**********************
 import Index from '@/page/home/index'
 //---------------------------------------系统管理----------------------------------------------------
-const customsManger = () => import('@/Page/systemmanger/customsManger')
-const role = () => import('@/Page/systemmanger/role')
-const motif = () => import('@/Page/systemmanger/motif')
 const customsManger = () => import('@/Page/systemmanger/customsManger') //隶属海关
 const role = () => import('@/Page/systemmanger/role') // 角色管理
 const motif = () => import('@/Page/systemmanger/motif') // 主题定制
@@ -20,6 +17,7 @@ const dayRecord = () => import('@/Page/systemmanger/dayRecord') // 用户管理
 
 //---------------------------------------指挥中心----------------------------------------------------
 const realTime = () => import('@/Page/commandCenter/realTime') //实时通信
+const laboratory = () => import('@/Page/commandCenter/laboratory') //实验室识别
 
 // *****************测报系统**********************
 import cbd from '@/page/forecasting/cbd/Cbd'//首页
@@ -108,6 +106,13 @@ export default new Router({
             title: '实时通信'
           }
         },
+        {
+          path: 'laboratory',
+          component: laboratory,
+          meta: {
+            title: '实验室识别'
+          }
+        },
         //------------------指挥中心--------------------------
         {
           path: 'cbd',