2022/2/7 实时通信视频通话功能优化

minggao/package-lock.json

@@ -6620,7 +6620,8 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "pify": {
       "version": "3.0.0",
@@ -11258,6 +11259,7 @@
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -11323,13 +11325,15 @@
           "version": "0.1.1",
           "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
           "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
           "dev": true,
+          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           }
@@ -11339,6 +11343,7 @@
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
           "dev": true,
+          "optional": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }

minggao/src/page/commandCenter/realTime.vue

@@ -69,14 +69,25 @@
             </el-table-column>
             <el-table-column label="操作" width="280">
               <template slot-scope="scope">
-                <span>
-                  <img
-                    @click="msgAxios(scope.row)"
-                    src="../../assets/images/realTime/xiaoxi.png"
-                    alt=""
-                  />
+                <span
+                  style="
+                    height: 30px;
+                    display: inline-block;
+                    margin: 0 0 0 0;
+                    position: absolute;
+                    left: -24px;
+                    top: 11px;
+                  "
+                >
+                  <el-badge :value="1" is-dot :max="99" class="item">
+                    <img
+                      @click="msgAxios(scope.row)"
+                      src="../../assets/images/realTime/xiaoxi.png"
+                      alt=""
+                    />
+                  </el-badge>
                 </span>
-                <span>
+                <span style="position: absolute; top: 12px; left: 40px">
                   <img
                     @click="videoAxios(scope.row)"
                     src="../../assets/images/realTime/shipin.png"
@@ -115,36 +126,56 @@
       <div class="video_box">
         <div class="host_video" v-if="videoShow">
           <img
+            src="../../assets/images/realTime/8.png"
+            alt=""
+            class="video_img"
+          />
+          <!-- <img
             v-if="audioShow"
             src="../../assets/images/realTime/8.png"
             alt=""
             class=""
+            style="margin: 120px atuo;"
           />
           <img
             v-else
             src="../../assets/images/realTime/13.png"
             alt=""
             class=""
-          />
+          /> -->
         </div>
         <div class="host_video" v-else>
-          <video
+          <!-- <video
             style="width: 100%; height: 100%"
             ref="localVideo"
             autoplay
             playsinline
             :muted="true"
+          ></video> -->
+          <video
+            style="width: 100%; height: 100%"
+            :ref="idName1"
+            autoplay
+            playsinline
+            :muted="true"
           ></video>
         </div>
 
         <!-- 副视频画面 -->
-        <div v-if="audioShow" class="deputy_video" v-drag>
-          <video
+        <div v-if="audioShow" @click="switchWindow" class="deputy_video" v-drag>
+          <!-- <video
             style="width: 100%; height: 100%"
             ref="remoteVideo"
             autoplay
             playsinline
             :muted="true"
+          ></video> -->
+          <video
+            style="width: 100%; height: 100%"
+            :ref="idName"
+            autoplay
+            playsinline
+            :muted="true"
           ></video>
         </div>
 
@@ -165,7 +196,12 @@
               src="../../assets/images/realTime/12.png"
               alt=""
             />
-            <img @click="PlugFlow" v-else src="../../assets/images/realTime/11.png" alt="" />
+            <img
+              @click="openVideo"
+              v-else
+              src="../../assets/images/realTime/11.png"
+              alt=""
+            />
           </div>
           <el-button
             type="danger"
@@ -322,6 +358,8 @@ export default {
       page: 1,
 
       // 视频通话弹框
+      idName: "remoteVideo", // ref 副视频
+      idName1: "localVideo", // ref 主视频
       videoVisible: false,
       videoShow: true, //主视频是否展示画面
       audioShow: true, // 判断当前是语音通话还是视频通话  true为视频 false为语音
@@ -501,20 +539,19 @@ export default {
       this.getUserObj = data;
       this.userName = localStorage.getItem("username");
       this.videoTle = "正在和" + data.real_name + "视频通话";
-      this.UserID = localStorage.getItem('userID')
-
+      this.UserID = localStorage.getItem("userID");
 
       // 先获取当前用户的房间号和登录所需的Token
-      var obj = {}
+      var obj = {};
       obj = {
-        action: 'send_video',
+        action: "send_video",
         recv_user_id: data.user_id,
         data: {
           msg_status: false,
-          msg_info: '',
-        }
-      }
-      this.websock.send(JSON.stringify(obj))
+          msg_info: "",
+        },
+      };
+      this.websock.send(JSON.stringify(obj));
       // // 登录房间
       // this.zg.loginRoom(
       //   this.RoomID,
@@ -528,9 +565,14 @@ export default {
       //   }
       // });
     },
+    // 打开视频画面
+    openVideo() {
+      this.plugFlow();
+    },
     // 音视频推流
     async plugFlow() {
-      this.videoShow = false
+      this.videoShow = false;
+      this.camera = true;
       const localStream = await this.zg.createStream();
       // stream 为 MediaStream 对象，开发者可通过赋值给 video 或 audio 的 srcObject 属性进行渲染
       this.$refs["localVideo"].srcObject = localStream;
@@ -540,8 +582,9 @@ export default {
     },
     // 音视频停止推流
     notPlugFlow() {
-      this.videoShow = true
-      this.zg.stopPublishingStream(this.streamID);
+      this.videoShow = true;
+      this.camera = false;
+      this.zg.stopPublishingStream(this.StreamID);
       this.zg.destroyStream(this.localStream);
     },
     // 拉流
@@ -553,10 +596,20 @@ export default {
     notTensile(streamID) {
       this.zg.stopPlayingStream(streamID);
     },
+
+    // 切换视频窗口
+    switchWindow() {
+      // 副视频画面 remoteVideo
+      // 主视频画面 localVideo
+      this.idName = this.idName == "remoteVideo" ? "localVideo" : "remoteVideo";
+      this.idName =
+        this.idName1 == "remoteVideo" ? "localVideo" : "remoteVideo";
+    },
+
     // 退出房间
     notLogin() {
       this.zg.logoutRoom(this.RoomID);
-      this.videoVisible = false
+      this.videoVisible = false;
     },
 
     // 当音视频通话关闭时的回调
@@ -643,11 +696,29 @@ export default {
           var data = JSON.parse(event.data);
           if (data.action == "none") {
             // 获取聊天记录
-            console.log(data.data[0]);
-            if (data.data[0] !== undefined) {
-              data.data[0].msg_list = data.data[0].msg_list.reverse();
-              this.msgList = data.data[0];
+            console.log(this.getUserObj.user_id);
+            console.log(data.data);
+            var datArr = data.data; // 总数据
+            if (datArr.length !== 0) {
+              for (var i = 0; i < datArr.length; i++) {
+                for (var j = 0; j < datArr[i].msg_list.length; j++) {
+                  if (
+                    this.getUserObj.user_id ==
+                    datArr[i].msg_list[j].recv_user_id
+                  ) {
+                    data.data[i].msg_list = data.data[i].msg_list.reverse();
+                    this.msgList = data.data[i];
+                    return;
+                    // console.log(111)
+                  }
+                }
+              }
             }
+
+            // if (data.data[0] !== undefined) {
+            //   data.data[0].msg_list = data.data[0].msg_list.reverse();
+            //   this.msgList = data.data[0];
+            // }
           } else if (data.action == "list") {
             // 返回list为发送消息成功后需要再次调用聊天列表
             var obj = {};
@@ -660,28 +731,26 @@ export default {
               },
             };
             this.websock.send(JSON.stringify(obj));
-          } else if (data.action == 'recv_video') {
+          } else if (data.action == "recv_video") {
             // 获取当前点击用户的房间号以及登录房间所需的Token
             // 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
+            var data = JSON.parse(event.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.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) => {
@@ -703,7 +772,7 @@ export default {
     },
     // 监听房间
     soundOn() {
-      var timer
+      var timer;
 
       // 房间状态更新回调
       this.zg.on(
@@ -713,16 +782,16 @@ export default {
             // 与房间连接成功，只有当房间状态是连接成功时，才能进行推流、拉流等操作。
             // 接下来的“预览并推流”的代码写在这里
             console.log("房间连接成功");
-             //定时器
+            //定时器
             timer = setTimeout(() => {
-               this.$message({
-                  message: '没人接听，请稍后重试',
-                  type: 'warning',
-                  duration: 1500
-                });
-                this.videoVisible = false
-            // }, 60000)
-            }, 6000)
+              this.$message({
+                message: "没人接听，请稍后重试",
+                type: "warning",
+                duration: 2500,
+              });
+              this.videoVisible = false;
+            }, 60000);
+            // }, 6000)
           }
           if (state == "DISCONNECTED") {
             // 与房间断开了连接
@@ -740,7 +809,7 @@ export default {
         // 其他用户进出房间的通知
         console.log(updateType);
         console.log(userList);
-        clearTimeout(timer)
+        clearTimeout(timer);
         console.log("有其他用户进出房间");
       });
 
@@ -889,13 +958,14 @@ export default {
 
     // 主视频画面
     .host_video {
-      width: 100%;
-      height: 300px;
-      display: table-cell;
+      // width: 100%;
+      height: 326px;
+      // height: 300px;
+      // display: table-cell;
       vertical-align: middle;
       text-align: center;
-      img {
-        margin: 0 atuo;
+      .video_img {
+        margin: 120px auto;
       }
     }
 
@@ -912,9 +982,13 @@ export default {
     // 操作
     .operate {
       height: 25px;
+      width: 100%;
       background: #000;
       padding: 5px 0 5px 0;
       margin: -13px 0 0 0px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
       display: flex;
       justify-content: flex-end;
     }