devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web 语音通话 jssip

作者：小蓝xlanll | 2024-06-07 14:03:02

赞

踩

jssip

先把封装好的地址安上（非本人封装）：webrtc-webphone: 基于JsSIP开发的webrtc软电话

jssip中文文档：jssip中文开发文档（完整版） - 简书

jssip使用文档：（我没有运行过，但是他写的很清楚，反正比我好）jssip+webrtc+freeswitch实现电话网页及遇到的488状态码问题_freeswitch 488_weixin_39715323的博客-CSDN博客

正常使用由于web限制应该在https上使用，但是http也不是不可以，我放到下一篇文章了，这就说怎么使用

我这用的是webrtc+jssip

webrtc-webphone已经实现了我的需求，所以我没有使用原生jssip

特主要实现的功能有：注册，拨叫，接听，保持，恢复

我的项目中需要静音（指我不能说话，通话人可以讲话）

所以我将hold（保持）和unhold（恢复）改成了mute和unmute

 下面是完整代码和方法说明：

1.init（注册citbar）config中需要使用ip地址、端口号、extNo拨号人、extPwd密码

2.handleAgentBarBtnClick（通话状态更改）

        makecall（拨号）

        hangup（挂断）

        hold（静音）

        unhold（取消静音）

3.onbeforeunload （通话中刷新对讲群组中没有退出，导致群组中有多个同一个人）

4.beforeDestroy（切换页面后没有退出群组，刷新不走这个方法）

注意：

1.不要重复拨号，状态卡住后就能同一个设备对话了bug

2.如果想切换页面还能通话就不要beforeDestroy，但是在其他页面在回来时会导致状态不一致，而且容易出现卡状态，所以我将通话操作放在index最顶层里面

  1. <template>
  2.   <div class="top">
  3.    
  4.     <div style="padding: 0 30px;">
  5.       <div style="display: flex;padding-top: 3px;">
  6.  
  7.         <!-- 设备树插件 -->
  8.         <organizationTree ref="organizationTree"></organizationTree>
  9.  
  10.         <div style="width:77vw;height:80vh; margin-top: 5px;">
  11.           <div class="photo_date" style="position:relative">
  12.             <div style="display:flex;min-width:30%">
  13.               <div class="text_type photo_deviceName " v-show="groupName" style="text-align: center;">
  14.                 {{groupName}}</div>
  15.               <div class="text_type" :class="meetingStatus==2?' meetingName1':' meetingName'"
  16.                 style="width: 125px;text-align: center;">
  17.                 {{meetingStatus==2?meetingName:meetingName1}}</div>
  18.             </div>
  19.             <div style="position: absolute;right: 0;" v-show="createBy==userName">
  20.  
  21.               <div v-show="meetingStatus==2" class="btn_type photo_meeting_btn" @click="meetingAll"
  22.                 style="position:absolute; right:135px;width: 140px;height: 35px;line-height: 35px;">
  23.                 邀请全部成员</div>
  24.               <div class="bg_btn_type photo_meeting_btn" @click="meeting"
  25.                 style="position:absolute; right:0;width: 125px;height: 35px;line-height: 35px;">
  26.                 {{meetingStatus==1?'开始会议':'结束会议'}}</div>
  27.  
  28.             </div>
  29.           </div>
  30.  
  31.           <div class="">
  32.             <div class="deviceList_title">
  33.               <div class="deviceList_title_text" style="width:15%">名称</div>
  34.               <div class="deviceList_title_text" style="width:15%">imei</div>
  35.               <div class="deviceList_title_text" style="width:15%">类型</div>
  36.               <div class="deviceList_title_text" style="width:15%">状态</div>
  37.               <div class="deviceList_title_text" style="width:15%">会议状态</div>
  38.               <div class="deviceList_title_text" style="width:24%">操作</div>
  39.               <!-- <div class="deviceList_title_text">操作</div> -->
  40.             </div>
  41.             <div v-show="deviceList" class="deviceList">
  42.  
  43.               <div class="deviceList_list" :class="item.id==itemId?'deviceList_list1':''"
  44.                 v-for="(item,index) in deviceList" :key="item.id" @mouseover="mouseover(item.id)"
  45.                 @mouseleave="mouseout()">
  46.                 <!-- <el-tooltip :content="item.name" placement="bottom" effect="light"> -->
  47.                 <div class="deviceList_title_text" style="width:15%">{{item.devName}}</div>
  48.                 <!-- </el-tooltip> -->
  49.                 <div class="deviceList_title_text" style="width:15%">{{item.imei}}</div>
  50.                 <div class="deviceList_title_text" style="width:15%">{{item.devTypeName}}
  51.                 </div>
  52.                 <div class="deviceList_title_text" style="width:15%">
  53.                   {{dictionary(item.devStatus,'dev_status',item.imei)}}
  54.                 </div>
  55.                 <div class="deviceList_title_text" style="width:15%">
  56.                   {{dictionary(item.memberStatus,'meeting_member_status')}}
  57.                 </div>
  58.                 <div style="width:24%;">
  59.                   <div v-if="meetingStatus==2">
  60.                     <div v-if="item.imei == createBy&&item.imei == userName">
  61.                       <div v-if="item.devStatus==3||item.devStatus==4||item.devStatus==5||item.devStatus==1">
  62.                         <div style="width:100%;justify-content: center;" class="deviceList_operate">
  63.                           <div class="deviceList_title_text1" @click="speak('request')"
  64.                             v-if="item.memberStatus!=3&&item.memberStatus!=1&&item.memberStatus!=4&&item.memberStatus!=5">
  65.                             <div>开始发言</div>
  66.                           </div>
  67.                           <div class="deviceList_title_text1" @click="speak('request')" v-if="item.memberStatus==3">
  68.                             <div>结束发言</div>
  69.                           </div>
  70.                           <div class="deviceList_title_text1" @click="outMeeting" v-if="item.memberStatus==2">离开会议
  71.                           </div>
  72.                           <div class="deviceList_title_text1" @click="inMeeting" v-if="item.memberStatus==1">进入会议
  73.                           </div>
  74.                         </div>
  75.                       </div>
  76.                     </div>
  77.                     <div v-if="item.imei != createBy">
  78.                       <div v-if="item.devStatus==3||item.devStatus==4||item.devStatus==5||item.devStatus==1">
  79.                         <div style="width:100%;justify-content: center;" class="deviceList_operate"
  80.                           v-show="createBy==userName&&isInOrOutMeeting&&deviceList[0].memberStatus==2">
  81.                           <div class="deviceList_title_text1" @click="speak('call',item.imei,'start')"
  82.                             v-if="item.memberStatus!=3&&item.memberStatus!=1&&item.memberStatus!=4&&item.memberStatus!=5">
  83.                             <div>点名发言</div>
  84.                           </div>
  85.                           <div class="deviceList_title_text1" @click="speak('call',item.imei,'end')"
  86.                             v-if="item.memberStatus==3">
  87.                             <div>结束发言</div>
  88.                           </div>
  89.                           <div class="deviceList_title_text1" @click="inOrOut('out',item.imei)"
  90.                             v-if="item.memberStatus==2">请离会议</div>
  91.                           <div class="deviceList_title_text1" @click="inOrOut('in',item.imei)"
  92.                             v-if="item.memberStatus==1">拉入会议</div>
  93.                         </div>
  94.                       </div>
  95.                     </div>
  96.                   </div>
  97.  
  98.                 </div>
  99.               </div>
  100.             </div>
  101.           </div>
  102.         </div>
  103.  
  104.       </div>
  105.  
  106.     </div>
  107.   </div>
  108.  
  109. </template>
  110. <script>
  111.   import Header from "../home/header/index";
  112.   import Footer from "../home/footer/index";
  113.   import webSocketClass from "@/utils/webSocket";
  114.   import { postWarnStatus } from "@/api/AlarmRecord";
  115.   import organizationTree from "./deviceTree/organizationTree"
  116.   import { devicetree } from "@/api/system/deviceTree";
  117.   import { timestampToTime } from "../../../utils/time.js"
  118.   import { addGroup, delGroup, getGroup, listGroup, updateGroup, updateMeetingStatus, selectDeviceGroupDetailList, deviceRequestTalking, inOrOutMeeting } from "@/api/system/group";
  119.   import { listData } from "@/api/system/dict/data";
  120.   import Ctibar from './AgentBar/ctibar.js';
  121.   var audio = document.getElementById('audio');
  122.  
  123.   var constraints = {
  124.     audio: true,
  125.     video: true,
  126.     mandatory: {
  127.       maxWidth: 640,
  128.       maxHeight: 360
  129.     }
  130.   };
  131.   URL = window.URL || window.webkitURL;
  132.  
  133.   var eventHandlers = {
  134.     'progress': function (e) {
  135.       console.log('call is in progress');
  136.     },
  137.     'failed': function (e) {
  138.       console.log('call failed: ', e);
  139.     },
  140.     'ended': function (e) {
  141.       console.log('call ended : ', e);
  142.     },
  143.     'confirmed': function (e) {
  144.       console.log('call confirmed');
  145.     }
  146.   };
  147.   export default {
  148.     dicts: ["warn_type"],
  149.     components: {
  150.       Header,
  151.       Footer,
  152.       organizationTree
  153.     },
  154.     data() {
  155.     
  156.       return {
  157.      
  158.         // 以下群组
  159.         isGroup: false,
  160.         createBy: '',
  161.         isInOrOutMeeting: false,
  162.         isSpeak: false,
  163.         itemId: '',
  164.         meetingStatus: '',
  165.         groupDetail: {},
  166.         isMike: false,
  167.         deviceList: null,
  168.         meetingName1: "会议未开始",
  169.         meetingName: "会议中",
  170.         groupName: "",
  171.         dataList: null,
  172.         userId: JSON.parse(sessionStorage.getItem("userInfo")).userId,
  173.         userName: JSON.parse(sessionStorage.getItem("userInfo")).userName,
  174.         // 查询参数
  175.         queryParams: {
  176.           pageNum: 1,
  177.           pageSize: 10,
  178.           deptId: null,
  179.           planName: null,
  180.           status: null,
  181.         },
  182.         total: 0,
  183.         deviceTreeList: [],
  184.         title: "",
  185.         num: 1,
  186.         groupId: '',
  187.         dictionaryList: [],
  188.         websocket: null,
  189.  
  190.         //初始化SDK所需要的配置
  191.         config: {
  192.           host: '39.152.2.103',
  193.           port: '5066',
  194.           proto: false,
  195.           extNo: '',
  196.           extPwd: '20181231',
  197.           autoRegister: true,
  198.           debug: true,
  199.           //stunServer: 'stun.1.google.com',   可自行修改使用stun服务器地址
  200.           stateEventListener: this.stateEventListener
  201.         },
  202.         //坐席分机号
  203.         agentNo: '',
  204.         //客户号码
  205.         customerNo: '',
  206.         //拨号弹窗
  207.         showDial: false,
  208.         //转接弹窗
  209.         showTransferDial: false,
  210.         //转接号码
  211.         transNum: '',
  212.         numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#',],
  213.         agentStatus: 'DISCONNECTED',
  214.         statusMap: {
  215.           CONNECTED: '已连接',
  216.           DISCONNECTED: '网络断开',
  217.           REGISTERED: '已注册',
  218.           UNREGISTERED: '未注册',
  219.           REGISTER_FAILED: '注册失败',
  220.           IN_CALL: '通话中',
  221.           INCOMING_CALL: '来电振铃',
  222.           OUTGOING_CALL: '外呼振铃',
  223.           HOLD: '保持中',
  224.           CALL_END: '通话结束'
  225.         },
  226.         timer: null,
  227.         timerString: '00:00:00',
  228.         outNum: '',
  229.         isHold: true
  230.       };
  231.     },
  232.     computed: {
  233.       classObject() {
  234.         const bool1 = this.alarmArr.length > 1;
  235.         const bool2 = this.alarmArr.length === 1;
  236.         return {
  237.           tanchuangbox: true,
  238.           "tanchuangbox-height-multi": bool1,
  239.           "tanchuangbox-height-single": bool2,
  240.         };
  241.       },
  242.     },
  243.     mounted() {
  244.  
  245.       this.init()
  246.   
  247.     },
  248.     methods: {
  249.  
  250.       // 以下群组
  251.       inMeeting() {
  252.         this.loadingFun()
  253.         var body = {
  254.           devImei: this.userName,
  255.           flag: 'in',
  256.           groupId: this.groupId,
  257.         }
  258.  
  259.         inOrOutMeeting(body).then(response => {
  260.           if (response.data.success) {
  261.           } else {
  262.             this.$modal.msgError(response.data.message);
  263.           }
  264.           this.loading.close();
  265.         },
  266.           error => {
  267.             this.loading.close();
  268.           });
  269.  
  270.  
  271.  
  272.  
  273.       },
  274.       outMeeting() {
  275.         this.loadingFun()
  276.         var body = {
  277.           devImei: this.userName,
  278.           flag: 'out',
  279.           groupId: this.groupId,
  280.         }
  281.  
  282.         inOrOutMeeting(body).then(response => {
  283.  
  284.           if (response.data.message == '已离开！') {
  285.  
  286.           } else {
  287.             this.$modal.msgError(response.data.message);
  288.           }
  289.           this.loading.close();
  290.         },
  291.           error => {
  292.             this.loading.close();
  293.           });
  294.  
  295.  
  296.  
  297.  
  298.       },
  299.  
  300.       inOrOut(flag, devImei) {
  301.         this.loadingFun()
  302.         var body = {
  303.           devImei: devImei,
  304.           flag: flag,
  305.           groupId: this.groupId,
  306.         }
  307.         inOrOutMeeting(body).then(response => {
  308.           console.log("123123123", response)
  309.           if (response.data.success) {
  310.             this.$modal.msgSuccess(response.data.message);
  311.           } else {
  312.             this.$modal.msgError(response.data.message);
  313.           }
  314.           this.loading.close();
  315.         },
  316.           error => {
  317.             this.loading.close();
  318.           });
  319.       },
  320.       loadingFun() {
  321.         this.loading = this.$loading({
  322.           lock: true,
  323.           text: 'Loading',
  324.           spinner: 'el-icon-loading',
  325.           background: 'rgba(0, 0, 0, 0.7)'
  326.         });
  327.       },
  328.       speak(type, devImei, flag) {
  329.         this.loadingFun()
  330.         var flagg = ''
  331.         if (type == 'request') {
  332.           flagg = !this.isSpeak ? 'start' : 'end'
  333.           devImei = this.userName
  334.         } else {
  335.           flagg = flag
  336.         }
  337.         var body = {
  338.           devImei: devImei,
  339.           flag: flagg,
  340.           groupId: this.groupId,
  341.           type: type,
  342.         }
  343.         deviceRequestTalking(body).then(response => {
  344.           if (response.data.success) {
  345.             if (type == 'request') {
  346.  
  347.             }
  348.             this.$modal.msgSuccess(response.data.message);
  349.             //恢复发言
  350.           } else {
  351.             this.$modal.msgError(response.data.message);
  352.             this.hold()
  353.           }
  354.           this.loading.close();
  355.         },
  356.           error => {
  357.             this.loading.close();
  358.           });
  359.       },
  360.       // 1、进入元素
  361.       mouseover(index) {
  362.         this.itemId = index
  363.       },
  364.       // 4、离开元素
  365.       mouseout() {
  366.         this.itemId = ''
  367.       },
  368.       ws() {
  369.         console.log('{"groupId":' + this.groupId + '}')
  370.         this.websocket.webSocketSendMsg('{"groupId":' + this.groupId + '}')
  371.  
  372.       },
  373.       devStatus(devStatus) {
  374.         for (const i in this.deviceList) {
  375.           if (this.deviceList[i].devStatus == devStatus) {
  376.             this.deviceList[i].devStatus = devStatus
  377.           }
  378.         }
  379.       },
  380.       dictionary(e, type, imei) {
  381.         for (const i in this.dictionaryList) {
  382.           if (this.createBy == imei && e == 4) {
  383.             return '在线'
  384.           }
  385.           if (this.dictionaryList[i].dictValue == e && this.dictionaryList[i].dictType == type) {
  386.             return this.dictionaryList[i].dictLabel
  387.           }
  388.         }
  389.       },
  390.       handleAdd() {
  391.         // this.reset();
  392.         // this.open = true;
  393.         this.title = "添加群组";
  394.       },
  395.  
  396.       tableRowClassName({ row, rowIndex }) {
  397.  
  398.         return 'photo';
  399.       },
  400.       rowClass({ row, rowIndex }) {
  401.  
  402.  
  403.         return 'text-align: center;background-color: #1A1D30;color: #fff'
  404.  
  405.       },
  406.       meetingAll() {
  407.         var meetingStatusAll = 2
  408.         var params = {
  409.           groupId: this.groupId,
  410.           meetingStatus: meetingStatusAll
  411.         }
  412.         updateMeetingStatus(params).then(response => {
  413.           if (response.code == 200) {
  414.  
  415.             this.$modal.msgSuccess(response.msg);
  416.           } else {
  417.             this.$modal.msgError(response.msg);
  418.  
  419.           }
  420.         });
  421.       },
  422.  
  423.       meeting() {
  424.         this.loadingFun()
  425.         if (this.deviceList != null) {
  426.           console.log('meetingStatusmeetingStatus', this.meetingStatus)
  427.           var params = {
  428.             groupId: this.groupId,
  429.             meetingStatus: this.meetingStatus == 1 ? 2 : 1
  430.           }
  431.           updateMeetingStatus(params).then(response => {
  432.             setTimeout(() => {
  433.               if (response.code == 200) {
  434.                 if (this.meetingStatus == 1) {
  435.                   if (sessionStorage.getItem('groupId') == this.groupId) {
  436.                     this.handleAgentBarBtnClick('hangup')
  437.                     sessionStorage.setItem('groupId', '')
  438.                   }
  439.                   this.isInOrOutMeeting = false
  440.                   this.isHold = true
  441.  
  442.                   this.loading.close()
  443.                 }
  444.               }
  445.             }, 5000);
  446.  
  447.           });
  448.         }
  449.       },
  450.       //孙组件向父组件传递数据
  451.       wsMeetingStatus(isInterface) {
  452.         console.log('isMeeting状态：', isInterface)
  453.         this.meetingStatus = isInterface
  454.       },
  455.       groupDeviceItemClick(item) {
  456.         // this.handleAgentBarBtnClick('hangup')
  457.         this.isSpeak = false
  458.         this.deviceList = []
  459.         this.groupId = item.id
  460.         this.meetingStatus = item.meetingStatus
  461.         this.groupName = item.groupName
  462.         this.createBy = item.createBy
  463.         this.item = item
  464.         var params = { groupInfoId: item.id, pageNum: 0, pageSize: 0, }
  465.         selectDeviceGroupDetailList(params).then(response => {
  466.           this.deviceList = response.rows
  467.           this.total = this.deviceList.length
  468.           this.ws()
  469.           if (this.deviceList[0].memberStatus == 3 &&
  470.             this.deviceList[0].imei == this.userName) {
  471.             this.isSpeak = true;
  472.           }
  473.           if (
  474.             this.deviceList[0].memberStatus == 2 &&
  475.             this.deviceList[0].imei == this.userName
  476.           ) {
  477.             if (sessionStorage.getItem("groupId") == this.groupId) {
  478.               this.isInOrOutMeeting = true
  479.               return
  480.             }
  481.             if (sessionStorage.getItem("groupId")) {
  482.             } else {
  483.               this.call()
  484.             }
  485.           }
  486.         });
  487.  
  488.       },
  489.  
  490.  
  491.  
  492.  
  493.       onClickDialOutside(event) {
  494.         console.log(event)
  495.         this.showDial = false
  496.       },
  497.       onClickTransDialOutside(event) {
  498.         this.showTransferDial = false;
  499.       },
  500.       handleAgentBarBtnClick(name) {
  501.         console.log(name + '当前')
  502.         if (name === 'login') {
  503.           this.login();
  504.         } else if (name === 'logout') {
  505.           this.logout();
  506.         } else if (name === 'answer') {
  507.           this.answer();
  508.         } else if (name === 'hangup') {
  509.           this.hangup();
  510.         } else if (name === 'makecall') {
  511.           this.makeCall('9*' + this.groupId)
  512.         } else if (name === 'hold') {
  513.           this.hold();
  514.         } else if (name === 'unhold') {
  515.           this.unhold();
  516.         } else if (name === 'transfer') {
  517.           this.transfer(this.transNum)
  518.         }
  519.       },
  520.  
  521.       login() {
  522.         this.init()
  523.         Ctibar.register()
  524.       },
  525.       logout() {
  526.         Ctibar.unregister()
  527.       },
  528.       makeCall(phone) {
  529.         if (phone === "" || phone === undefined) {
  530.           console.error('无效的号码，请重新输入！');
  531.           return
  532.         }
  533.         Ctibar.makecall(phone);
  534.  
  535.       },
  536.       hold() {
  537.         Ctibar.hold();
  538.  
  539.       },
  540.       unhold() {
  541.         Ctibar.unhold();
  542.       },
  543.       answer() {
  544.         Ctibar.answer();
  545.       },
  546.       hangup() {
  547.         Ctibar.hangup();
  548.       },
  549.       transfer(phone) {
  550.         console.info("触发转接", phone)
  551.         Ctibar.transfer(phone);
  552.       },
  553.       //外呼拨号盘
  554.       handleDialBtnClick(val) {
  555.         this.outNum += val;
  556.         this.$refs.outNumInput.focus();
  557.       },
  558.       //转接拨号盘
  559.       handleTransDialBtnClick(val) {
  560.         this.transNum += val;
  561.         this.$refs.transNumInput.focus();
  562.       },
  563.  
  564.       //参数为时间差秒数，返回这两个时间差并格式化
  565.       computeTimeDiff(diff) {
  566.         diff = Math.round(diff / 1000);
  567.         let hour = Math.floor(diff / 3600).toString().padStart(2, '0');
  568.         let min = Math.floor((diff - hour * 3600) / 60).toString().padStart(2, '0');
  569.         let sec = (diff % 60).toString().padStart(2, '0');
  570.         return hour + ':' + min + ':' + sec;
  571.       },
  572.       //重置时间
  573.       restoreTime(origin) {
  574.         clearInterval(this.timer);
  575.         this.timerString = '00:00:00';
  576.         this.timer = setInterval(() => {
  577.           this.timerString = this.computeTimeDiff(new Date().getTime() - origin);
  578.         }, 1000);
  579.       },
  580.       //状态变更回调
  581.       stateEventListener(event, data) {
  582.         //debug使用
  583.         console.log('当前event为: ' + event + ', 当前data为: ' + JSON.stringify(data))
  584.  
  585.         this.agentStatus = event
  586.         let origin = new Date().getTime();
  587.         switch (event) {
  588.           case "CONNECTED":
  589.             this.agentNo = data.localAgent
  590.             this.restoreTime(origin);
  591.             break;
  592.  
  593.           case "DISCONNECTED":
  594.             this.restoreTime(origin);
  595.             break;
  596.  
  597.           case "UNREGISTERED":
  598.             this.restoreTime(origin);
  599.             break;
  600.  
  601.           case "OUTGOING_CALL":
  602.             this.customerNo = data.otherLegNumber;
  603.             this.restoreTime(origin);
  604.             break;
  605.  
  606.           case "INCOMING_CALL":
  607.             this.customerNo = data.otherLegNumber;
  608.             //播放来电振铃音
  609.             this.playRingMedia();
  610.             this.restoreTime(origin);
  611.             break;
  612.  
  613.           case "IN_CALL":
  614.             this.stopPlayRingMedia();
  615.             this.restoreTime(origin);
  616.  
  617.             // this.timer = setInterval(() => {
  618.             // }, 1000);
  619.             console.log('当前是否hold', this.isHold)
  620.             if (this.isHold) {
  621.               setTimeout(() => {
  622.                 this.handleAgentBarBtnClick('hold')
  623.                 this.isHold = false
  624.                 // 方法区
  625.               }, 500);
  626.             }
  627.  
  628.             break;
  629.  
  630.           case "CALL_END":
  631.             this.stopPlayRingMedia();
  632.             //挂机铃声
  633.             this.playHangupMedia()
  634.             this.restoreTime(origin);
  635.             break;
  636.  
  637.           default:
  638.  
  639.         }
  640.       },
  641.  
  642.       //播放挂机铃声
  643.       playHangupMedia() {
  644.         const _this = this;
  645.         var hangupAudio = document.getElementById("hangupMediaAudioId")
  646.         if (!hangupAudio) {
  647.           hangupAudio = document.createElement('audio');
  648.           hangupAudio.id = 'hangupMediaAudioId';
  649.           hangupAudio.hidden = true;
  650.           hangupAudio.src = 'wav/hangup.wav'
  651.           document.body.appendChild(hangupAudio);
  652.         }
  653.         hangupAudio.play();
  654.       },
  655.       //播放来电振铃
  656.       playRingMedia() {
  657.         const _this = this;
  658.         _this.stopPlayRingMedia();
  659.  
  660.         var ringAudio = document.getElementById("ringMediaAudioId")
  661.         if (!ringAudio) {
  662.           ringAudio = document.createElement('audio');
  663.           ringAudio.id = 'ringMediaAudioId';
  664.           ringAudio.hidden = true;
  665.           ringAudio.src = 'wav/ring.wav';
  666.           ringAudio.loop = 'loop';
  667.           document.body.appendChild(ringAudio);
  668.         }
  669.         ringAudio.play();
  670.       },
  671.       //停止播放来电振铃
  672.       stopPlayRingMedia() {
  673.         const _this = this;
  674.         var ringAudio = document.getElementById("ringMediaAudioId");
  675.         if (ringAudio) {
  676.           document.body.removeChild(ringAudio);
  677.         }
  678.       },
  679.       //初始化方法
  680.       init() {
  681.         this.config.extNo = this.userName
  682.         if (sessionStorage.getItem("freeSwitchWs") != null) {
  683.           this.config.host = sessionStorage.getItem("freeSwitchWs").split(":")[0]
  684.           this.config.port = sessionStorage.getItem("freeSwitchWs").split(":")[1]
  685.         }
  686.         Ctibar.initSDK(this.config)
  687.  
  688.  
  689.         let url = `/ws/` + this.userId + '/group/device/push';
  690.         this.websocket = new webSocketClass(url)
  691.         this.websocket.getWebSocketMsg(evt => {
  692.           // 客户端接收服务端返回的数据
  693.           var data = JSON.parse(evt.data);
  694.           console.log("websocket返回的数据123：", data);
  695.           switch (data.flag) {
  696.             case "group"://会议状态
  697.               this.$refs.organizationTree.setGroupList(data, this.groupId)
  698.               console.log("websocket返回的数据123：", data);
  699.               break
  700.             case "memberStatus"://成员状态
  701.               for (const i in this.deviceList) {
  702.                 console.log('123123132', data.member);
  703.                 if (this.deviceList[i].imei == data.member) {
  704.                   this.deviceList[i].devStatus = data.memberStatus;
  705.                 }
  706.               }
  707.               break
  708.             case "memberMeetingStatus"://成员会议状态
  709.               for (const i in this.deviceList) {
  710.                 if (this.deviceList[i].imei == data.member) {
  711.                   this.deviceList[i].memberStatus = data.memberMeetingStatus;
  712.                 }
  713.               }
  714.               if (this.groupId == data.groupId && this.userName == data.member && this.createBy == data.member) {
  715.                 if (data.memberMeetingStatus == 3) {
  716.                   this.isSpeak = true;
  717.                   this.unhold()
  718.                   console.log('数据this.isInOrOutMeeting1111', this.isSpeak)
  719.                 } else {
  720.                   this.isSpeak = false;
  721.                   this.hold()
  722.                 }
  723.               }
  724.  
  725.               if (data.memberMeetingStatus == 4) {
  726.                 this.loading.close()
  727.               }
  728.               if (!this.isInOrOutMeeting && this.groupId == data.groupId && this.userName == data.member && this.createBy == data.member && data.memberMeetingStatus == 2) {
  729.                 this.hold()
  730.                 if (sessionStorage.getItem("groupId") &&
  731.                   sessionStorage.getItem("groupId") !== this.groupId) {
  732.                 } else {
  733.                   console.log('this.isInOrOutMeeting1111', data.memberMeetingStatus)
  734.                   this.call()
  735.                 }
  736.               }
  737.               if (this.createBy == data.member && data.memberMeetingStatus == 1 && this.userName == data.member) {
  738.                 this.handleAgentBarBtnClick('hangup')
  739.                 sessionStorage.setItem("groupId", '')
  740.                 this.isInOrOutMeeting = false
  741.                 this.isSpeak = false
  742.                 this.isHold = true
  743.               }
  744.               break
  745.  
  746.           }
  747.         })
  748.       },
  749.       setGroup(group) {
  750.         this.isGroup = group
  751.      
  752.    
  753.       },
  754.       call() {
  755.         this.handleAgentBarBtnClick('makecall')
  756.         sessionStorage.setItem("groupId", this.groupId)
  757.         this.isInOrOutMeeting = true
  758.         if (this.deviceList[0].imei != this.createBy) {
  759.           // this.groupDeviceItemClick(this.item)
  760.         }
  761.         var that = this
  762.         window.onbeforeunload = (e) => {
  763.           console.log('this.isInOrOutMeeting', that.isInOrOutMeeting)
  764.           if (that.isInOrOutMeeting) {
  765.             that.handleAgentBarBtnClick('hangup')
  766.             sessionStorage.setItem("groupId", '')
  767.             that.websocket.closeSocket()
  768.             window.onbeforeunload = null
  769.           }
  770.         }
  771.         this.loading.close()
  772.         this.isInOrOutMeeting = true
  773.         this.isHold = true
  774.       }
  775.     },
  776.     beforeDestroy() {  //进行监听销毁
  777.       console.log('1231232131232132131,', this.isInOrOutMeeting)
  778.       if (this.isInOrOutMeeting) {
  779.         this.handleAgentBarBtnClick('hangup')
  780.         sessionStorage.setItem("groupId", '')
  781.         this.websocket.closeSocket()
  782.         window.onbeforeunload = null
  783.       }
  784.     },
  785.  
  786.  
  787.  
  788.   };
  789. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/685694
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号