视频联调，修改socket常链接，视频房间bug修改

2025-01-16 11:28:06 +08:00 · 2025-01-16 11:28:06 +08:00 · 36f4016c05
commit 36f4016c05
parent 0444ec0e33
7 changed files with 163 additions and 32 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -21,14 +21,22 @@ export default {
  },
  data(){
    return {
-      acceptDialog: null,// id
+      acceptDialog: null,
    }
  },
  mounted() {
    let token = sessionStorage.getItem('token')
    if (token){this.initVoiceCall();}
+    let brokerEndpoint = sessionStorage.getItem('brokerEndpoint')
+    if (brokerEndpoint){this.$stompSocket.initStomp(brokerEndpoint,a => this.socketSucc(a), b => this.socketErr(b));}
  },
  methods: {
+    socketSucc(frame) {
+      console.log(frame, '---初始化成功app')
+    },
+    socketErr(frame) {
+      console.log(frame, '---初始化失败app')
+    },
    scriptWithDataSetExists(dataId) {
      const scriptElement = document.querySelector(`script[data-telephone="${dataId}"]`);
      return scriptElement !== null;
@ -57,33 +65,38 @@ export default {
          console.error('---初始化失败', message)
        })

-        this.acceptDialog = {
-          "sessionId": "32cca051-dcae-4269-ae12-e8eca5e02146",
-          "calleePhoneNumber": "008605305343323",
-          "callerPhoneNumber": "008613882832314",
-          "protectedCallee": "008605305343323",
-          "protectedCaller": "008613882832314",
-          "ivrPath": [
-            {
-              "key": "1",
-              "label": "分支内容1"
-            }
-          ],
-          "callerLocation": "四川达州移动",
-          "timeout": 30,
-          "type": "phone",
-          "serverType": "staffSeat",
-          "aiEnabled": false,
-          "id": "32cca051-dcae-4269-ae12-e8eca5e02146",
-          "phone": "008613882832314",
-          "direction": "0",
-          "startCallTime": 1736923493486
-        };
+
+        // this.acceptDialog = {
+        //   "sessionId": "32cca051-dcae-4269-ae12-e8eca5e02146",
+        //   "calleePhoneNumber": "008605305343323",
+        //   "callerPhoneNumber": "008613882832314",
+        //   "protectedCallee": "008605305343323",
+        //   "protectedCaller": "008613882832314",
+        //   "ivrPath": [
+        //     {
+        //       "key": "1",
+        //       "label": "分支内容1"
+        //     }
+        //   ],
+        //   "callerLocation": "四川达州移动",
+        //   "timeout": 30,
+        //   "type": "phone",
+        //   "serverType": "staffSeat",
+        //   "aiEnabled": false,
+        //   "id": "32cca051-dcae-4269-ae12-e8eca5e02146",
+        //   "phone": "008613882832314",
+        //   "direction": "0",
+        //   "startCallTime": 1736923493486
+        // };
        // 呼入事件
-        window.tccc.on('callIn', (callback) => {
-          this.acceptDialog = callback;
-          // this.acceptID = callback.id;
-          console.log(callback, '---呼入')
+        window.tccc.on('callIn', (data) => {
+          this.acceptDialog = data;
+          // this.acceptID = data.id;
+          console.log(data, '---语音呼入')
+        })
+        // 会话结束事件
+        window.tccc.on('sessionEnded', (data) => {
+          console.log(data, '---语音会话结束')
        })
      })
    },
@ -113,6 +126,9 @@ export default {
        }
      }
    }
+  },
+  beforeDestroy() {
+    this.$stompSocket.deactivate();
  }
 };
 </script>
--- a/src/assets/icons/svg/sound-on.svg
+++ b/src/assets/icons/svg/sound-on.svg
@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="white"/>
+<rect width="24" height="24" rx="12" fill="black" fill-opacity="0.5"/>
+<g clip-path="url(#clip0_1478_54965)">
+<path d="M4.91042 4.15625L4.15625 4.91042L19.0896 19.8438L19.8438 19.0896L15.3854 14.6313C15.6071 14.1551 15.7333 13.6261 15.7333 13.0667V10.9333C15.7333 10.6384 15.4949 10.4 15.2 10.4C14.9051 10.4 14.6667 10.6384 14.6667 10.9333V13.0667C14.6667 13.3221 14.6202 13.5643 14.551 13.7969L13.6 12.8458V6.66667C13.6 5.78293 12.8837 5.06667 12 5.06667C11.1163 5.06667 10.4 5.78293 10.4 6.66667V9.64583L4.91042 4.15625ZM8.38646 10.6104C8.31606 10.7006 8.26667 10.8096 8.26667 10.9333V13.0667C8.26667 14.9435 9.6608 16.497 11.4667 16.7573V17.8667H9.86667C9.57173 17.8667 9.33333 18.1051 9.33333 18.4C9.33333 18.6949 9.57173 18.9333 9.86667 18.9333H14.1333C14.4283 18.9333 14.6667 18.6949 14.6667 18.4C14.6667 18.1051 14.4283 17.8667 14.1333 17.8667H12.5333V16.7573C13.0635 16.681 13.5565 16.4908 13.9906 16.2156L13.2063 15.4313C12.8425 15.6185 12.4363 15.7333 12 15.7333C10.5296 15.7333 9.33333 14.5371 9.33333 13.0667V11.5583L8.38646 10.6104ZM10.4 12.625V13.0667C10.4 13.9504 11.1163 14.6667 12 14.6667C12.1349 14.6667 12.2637 14.645 12.3885 14.6135L10.4 12.625Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1478_54965">
+<rect width="16" height="16" fill="white" transform="translate(4 4)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/components/VoiceCallDialog.vue
+++ b/src/components/VoiceCallDialog.vue
@ -1,5 +1,22 @@
 <template>
-  <div></div>
+  <div :class="zoomActive ? 'voiceCall-content-big' : 'voiceCall-content-small'">
+    <div v-if="zoomActive" class="cover"></div>
+    <div v-if="zoomActive" class="big-layout">
+      <div class="pb-16 big-header flex-row justify-content-end">
+        <div class="big-header-btn bg-color-light flex-row align-items-center border-radius-4 cursor-pointer"
+             @click="toggleZoom">
+          <span class="mr-4">{{ zoomActive ? '缩小' : '放大' }}</span>
+          <svg-icon
+              :icon-class="zoomActive ? `zoom-1` : 'zoom-2'"
+              className="tabs-svg" />
+        </div>
+      </div>
+      <div class="pb-16 big-middle"></div>
+    </div>
+    <div v-else class="small-layout">
+
+    </div>
+  </div>
 </template>

 <script>
@ -16,16 +33,74 @@ export default {
  },
  data() {
    return {
-
+      zoomActive: true,// 布局状态
    }
  },
  mounted() {
  },
  methods: {
+    toggleZoom() {
+      this.zoomActive = !this.zoomActive;
+    },
  }
 }
 </script>

 <style scoped lang="scss">
+.voiceCall-content-big{
+  margin: 0;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  .cover {
+    z-index: 8001;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+  }
+  .big-layout{
+    z-index: 8002;
+    position: relative;
+    width: 560px;
+    height: 390px;
+    padding: 24px;
+    margin: 15vh auto 50px;
+    background-color: #fff;
+    border-radius: 16px;
+
+    .big-header{
+      .big-header-btn{
+        background-color: #e4e7ed;
+        padding: 6px 10px;
+        .tabs-svg{
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+}
+
+.voiceCall-content-small{
+  position: absolute;
+  top: 0;
+  left: 50%;
+  height: 56px;
+  width: 600px;
+  margin-left: -300px;
+  .small-layout{
+    height: 56px;
+    border-radius: 28px;
+    background-color: #dcdfe6;
+  }
+}
+
+

 </style>
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@ -176,6 +176,8 @@ export default {
            sessionStorage.setItem('userInfo', JSON.stringify(res.user))
            this.$store.commit('setUserInfo', res.user)

+            sessionStorage.setItem('brokerEndpoint', res.brokerEndpoint)
+            this.$store.commit('setBrokerEndpoint', res.brokerEndpoint)
            let socketUrl = res.brokerEndpoint ? res.brokerEndpoint : `wss://mediate.dev.trydotec.com/mediate/ws/websocket`;
            this.$stompSocket.initStomp(socketUrl,a => this.socketSucc(a), b => this.socketErr(b));
            if (res.user.resources.length > 0) {
@ -297,10 +299,10 @@ export default {
    },

    socketSucc(frame) {
-      console.log(frame, '---初始化成功!!!')
+      console.log(frame, '---初始化成功login')
    },
    socketErr(frame) {
-      console.log(frame, '---初始化失败!!!')
+      console.log(frame, '---初始化失败login')
    }
  }
 }
--- a/src/pages/mediation-page/components/VideoRoom.vue
+++ b/src/pages/mediation-page/components/VideoRoom.vue
@ -28,7 +28,7 @@
            <svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" />
          </div>
          <div class="cursor-pointer" v-if="!item.microphone" @click="handleOnRemoteAudio(item.userId)">
-            <svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" />
+            <svg-icon class="mb-8" icon-class="sound-on" className="tabs-svg" />
          </div>
          <div class="cursor-pointer" @click="handleKickOut(item.userId)"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
        </div>
@ -389,6 +389,16 @@ export default {
              microphone: false
            }
          })
+        }else {
+          this.remoteUsersViews = this.remoteUsersViews.map(item => {
+            if (item.userId == userId){
+              item.microphone = false;
+              return {
+                ...item,
+                microphone: false
+              }
+            }
+          })
        }
        let json = {behavior: 'offAudio', userId: userId}
        let data = {
@ -426,6 +436,16 @@ export default {
              microphone: true
            }
          })
+        }else {
+          this.remoteUsersViews = this.remoteUsersViews.map(item => {
+            if (item.userId == userId){
+              item.microphone = true;
+              return {
+                ...item,
+                microphone: true
+              }
+            }
+          })
        }

        let json = {behavior: 'onAudio', userId: userId}
--- a/src/store/index.js
+++ b/src/store/index.js
@ -24,6 +24,7 @@ const store = new Vuex.Store({
        userinfo: {},
        idFrontPath: '',
        routes: [], // 从后端获取的路由菜单
+        brokerEndpoint: '',
    },
    plugins: [vuexPersisted],
    // 全局同步方法, 调用方法,this.$store.commit("xxx",'赋值数据')
@ -40,6 +41,9 @@ const store = new Vuex.Store({
        setUserInfo(state, data) {
            state.userinfo = data;
        },
+        setBrokerEndpoint(state, data) {
+            state.brokerEndpoint = data;
+        },

    },
    // 异步方法 调用方法,this.$store.dispatch("xxx")
--- a/src/utils/stompSocket.js
+++ b/src/utils/stompSocket.js
@ -33,7 +33,9 @@ const socketClass = {
        //   body: 'Hello world',
        //   headers: { priority: '9' },
        // }
+        // console.log(data, '---发起消息111')
        if (!client)return;
+        // console.log(data, '---发起消息222')
        client.publish(data);
    },
    // 订阅