接入语音SDK

src/App.vue

@@ -5,10 +5,86 @@
 </template>
 
 <script>
+import {mapState} from 'vuex'
+import fetchApi from "@/services/fetchApi";
 export default {
   name: "App",
-  methods: {},
+  computed: {
-  mounted() {},
+    ...mapState({
+      token: state => state.token
+    }),
+  },
+  data(){
+    return {
+
+    }
+  },
+  mounted() {
+    let token = sessionStorage.getItem('token')
+    if (token){this.initVoiceCall();}
+  },
+  methods: {
+    scriptWithDataSetExists(dataId) {
+      const scriptElement = document.querySelector(`script[data-telephone="${dataId}"]`);
+      return scriptElement !== null;
+    },
+    injectTCCC ({ token, sdkAppId, userId, sdkUrl }) {
+      const scriptDom = document.createElement('script')
+      scriptDom.setAttribute('crossorigin', 'anonymous')
+      scriptDom.dataset.token = token
+      scriptDom.dataset.sdkAppId = sdkAppId
+      scriptDom.dataset.userid = userId
+      scriptDom.src = sdkUrl
+      scriptDom.dataset.telephone = 'telephone'
+      // 集成UI Dom
+      // script.dataset.renderDomId = "renderDom";
+      document.body.appendChild(scriptDom)
+      scriptDom.addEventListener('load', () => {
+        // 隐藏UI
+        window.tccc.UI.hide();
+        // ready事件必须监听，否则容易发生tccc不存在的错误，所有呼入呼出的逻辑必须在ready事件触发后才可以调用
+        window.tccc.on('ready', () => {
+          // 以下为Demo逻辑，非业务必须。业务代码主要实现都在这个部分
+          console.log('---初始化成功')
+        })
+        // 失败事件
+        window.tccc.on('tokenExpired', ({message}) => {
+          console.error('---初始化失败', message)
+        })
+        // 呼入事件
+        window.tccc.on('callIn', (callback) => {
+          // acceptID = callback.id;
+          console.log(callback, '---呼入')
+        })
+      })
+    },
+    initVoiceCall(){
+      // 是否已经创建
+      if (this.scriptWithDataSetExists('telephone')){return}
+      fetchApi.webCalling().then(res => {
+        const {agent, token, sdkAppId, agentId, sdkURL} = res;
+        // console.log(res, '---res')
+        if (agent){
+          let userId = agentId;
+          let sdkUrl = sdkURL;
+          this.injectTCCC({token, sdkAppId, userId, sdkUrl})
+        }
+      }).catch(err => {
+        console.log(err, '---err')
+      })
+    },
+  },
+  watch: {
+    token: {
+      deep: true,
+      handler: function (val) {
+        if (val){
+          // console.log(val, '---监听token1')
+          this.initVoiceCall();
+        }
+      }
+    }
+  }
 };
 </script>
 

src/pages/layout/index.vue

@@ -4,8 +4,8 @@
         <div class="layout-bottom-wrap">
             <!-- <SideMenu /> -->
             <div class="layout-bottom-right-content" :class="(currentName == '/workbench' || currentName == '/workbenchcm') ? '':' p-16'">
-                <el-scrollbar :style="'height:'+`${contentHeight}`+'px'"> 
+                <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
-                    <router-view></router-view>  
+                    <router-view></router-view>
                 </el-scrollbar>
             </div>
         </div>
@@ -22,14 +22,14 @@ export default {
         contentHeight(){
             let oh = document.documentElement.clientHeight;
             return oh-85
-            
+
         } ,
         currentPath() {
             return this.$route.path; // 获取当前路由的路径
         },
         currentName() {
             return this.$route.name; // 获取当前路由的名称
-        } 
+        }
     },
 }
 </script>

src/services/fetchApi.js

@@ -47,5 +47,9 @@ const fetchApi = {
     viewFullFile: data => {
         return service.service.post(`${apiAdmin}upload/full`, data,{hideLoading:true})
     },
+    // ========================start:: 语音通话SDK======================================
+    webCalling: data => {
+        return service.service.get(`${apiAdmin}/api/trace/calling/init-web`, data)
+    },
 }
 export default fetchApi;