web 语音通话 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最顶层里面

<template>
  <div class="top">
   
    <div style="padding: 0 30px;">
      <div style="display: flex;padding-top: 3px;">

        <!-- 设备树插件 -->
        <organizationTree ref="organizationTree"></organizationTree>

        <div style="width:77vw;height:80vh; margin-top: 5px;">
          <div class="photo_date" style="position:relative">
            <div style="display:flex;min-width:30%">
              <div class="text_type photo_deviceName " v-show="groupName" style="text-align: center;">
                {{groupName}}</div>
              <div class="text_type" :class="meetingStatus==2?' meetingName1':' meetingName'"
                style="width: 125px;text-align: center;">
                {{meetingStatus==2?meetingName:meetingName1}}</div>
            </div>
            <div style="position: absolute;right: 0;" v-show="createBy==userName">

              <div v-show="meetingStatus==2" class="btn_type photo_meeting_btn" @click="meetingAll"
                style="position:absolute; right:135px;width: 140px;height: 35px;line-height: 35px;">
                邀请全部成员</div>
              <div class="bg_btn_type photo_meeting_btn" @click="meeting"
                style="position:absolute; right:0;width: 125px;height: 35px;line-height: 35px;">
                {{meetingStatus==1?'开始会议':'结束会议'}}</div>

            </div>
          </div>

          <div class="">
            <div class="deviceList_title">
              <div class="deviceList_title_text" style="width:15%">名称</div>
              <div class="deviceList_title_text" style="width:15%">imei</div>
              <div class="deviceList_title_text" style="width:15%">类型</div>
              <div class="deviceList_title_text" style="width:15%">状态</div>
              <div class="deviceList_title_text" style="width:15%">会议状态</div>
              <div class="deviceList_title_text" style="width:24%">操作</div>
              <!-- <div class="deviceList_title_text">操作</div> -->
            </div>
            <div v-show="deviceList" class="deviceList">

              <div class="deviceList_list" :class="item.id==itemId?'deviceList_list1':''"
                v-for="(item,index) in deviceList" :key="item.id" @mouseover="mouseover(item.id)"
                @mouseleave="mouseout()">
                <!-- <el-tooltip :content="item.name" placement="bottom" effect="light"> -->
                <div class="deviceList_title_text" style="width:15%">{{item.devName}}</div>
                <!-- </el-tooltip> -->
                <div class="deviceList_title_text" style="width:15%">{{item.imei}}</div>
                <div class="deviceList_title_text" style="width:15%">{{item.devTypeName}}
                </div>
                <div class="deviceList_title_text" style="width:15%">
                  {{dictionary(item.devStatus,'dev_status',item.imei)}}
                </div>
                <div class="deviceList_title_text" style="width:15%">
                  {{dictionary(item.memberStatus,'meeting_member_status')}}
                </div>
                <div style="width:24%;">
                  <div v-if="meetingStatus==2">
                    <div v-if="item.imei == createBy&&item.imei == userName">
                      <div v-if="item.devStatus==3||item.devStatus==4||item.devStatus==5||item.devStatus==1">
                        <div style="width:100%;justify-content: center;" class="deviceList_operate">
                          <div class="deviceList_title_text1" @click="speak('request')"
                            v-if="item.memberStatus!=3&&item.memberStatus!=1&&item.memberStatus!=4&&item.memberStatus!=5">
                            <div>开始发言</div>
                          </div>
                          <div class="deviceList_title_text1" @click="speak('request')" v-if="item.memberStatus==3">
                            <div>结束发言</div>
                          </div>
                          <div class="deviceList_title_text1" @click="outMeeting" v-if="item.memberStatus==2">离开会议
                          </div>
                          <div class="deviceList_title_text1" @click="inMeeting" v-if="item.memberStatus==1">进入会议
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-if="item.imei != createBy">
                      <div v-if="item.devStatus==3||item.devStatus==4||item.devStatus==5||item.devStatus==1">
                        <div style="width:100%;justify-content: center;" class="deviceList_operate"
                          v-show="createBy==userName&&isInOrOutMeeting&&deviceList[0].memberStatus==2">
                          <div class="deviceList_title_text1" @click="speak('call',item.imei,'start')"
                            v-if="item.memberStatus!=3&&item.memberStatus!=1&&item.memberStatus!=4&&item.memberStatus!=5">
                            <div>点名发言</div>
                          </div>
                          <div class="deviceList_title_text1" @click="speak('call',item.imei,'end')"
                            v-if="item.memberStatus==3">
                            <div>结束发言</div>
                          </div>
                          <div class="deviceList_title_text1" @click="inOrOut('out',item.imei)"
                            v-if="item.memberStatus==2">请离会议</div>
                          <div class="deviceList_title_text1" @click="inOrOut('in',item.imei)"
                            v-if="item.memberStatus==1">拉入会议</div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>

</template>
<script>
  import Header from "../home/header/index";
  import Footer from "../home/footer/index";
  import webSocketClass from "@/utils/webSocket";
  import { postWarnStatus } from "@/api/AlarmRecord";
  import organizationTree from "./deviceTree/organizationTree"
  import { devicetree } from "@/api/system/deviceTree";
  import { timestampToTime } from "../../../utils/time.js"
  import { addGroup, delGroup, getGroup, listGroup, updateGroup, updateMeetingStatus, selectDeviceGroupDetailList, deviceRequestTalking, inOrOutMeeting } from "@/api/system/group";
  import { listData } from "@/api/system/dict/data";
  import Ctibar from './AgentBar/ctibar.js';
  var audio = document.getElementById('audio');

  var constraints = {
    audio: true,
    video: true,
    mandatory: {
      maxWidth: 640,
      maxHeight: 360
    }
  };
  URL = window.URL || window.webkitURL;

  var eventHandlers = {
    'progress': function (e) {
      console.log('call is in progress');
    },
    'failed': function (e) {
      console.log('call failed: ', e);
    },
    'ended': function (e) {
      console.log('call ended : ', e);
    },
    'confirmed': function (e) {
      console.log('call confirmed');
    }
  };
  export default {
    dicts: ["warn_type"],
    components: {
      Header,
      Footer,
      organizationTree
    },
    data() {
    
      return {
     
        // 以下群组
        isGroup: false,
        createBy: '',
        isInOrOutMeeting: false,
        isSpeak: false,
        itemId: '',
        meetingStatus: '',
        groupDetail: {},
        isMike: false,
        deviceList: null,
        meetingName1: "会议未开始",
        meetingName: "会议中",
        groupName: "",
        dataList: null,
        userId: JSON.parse(sessionStorage.getItem("userInfo")).userId,
        userName: JSON.parse(sessionStorage.getItem("userInfo")).userName,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          planName: null,
          status: null,
        },
        total: 0,
        deviceTreeList: [],
        title: "",
        num: 1,
        groupId: '',
        dictionaryList: [],
        websocket: null,

        //初始化SDK所需要的配置
        config: {
          host: '39.152.2.103',
          port: '5066',
          proto: false,
          extNo: '',
          extPwd: '20181231',
          autoRegister: true,
          debug: true,
          //stunServer: 'stun.1.google.com',   可自行修改使用stun服务器地址
          stateEventListener: this.stateEventListener
        },
        //坐席分机号
        agentNo: '',
        //客户号码
        customerNo: '',
        //拨号弹窗
        showDial: false,
        //转接弹窗
        showTransferDial: false,
        //转接号码
        transNum: '',
        numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#',],
        agentStatus: 'DISCONNECTED',
        statusMap: {
          CONNECTED: '已连接',
          DISCONNECTED: '网络断开',
          REGISTERED: '已注册',
          UNREGISTERED: '未注册',
          REGISTER_FAILED: '注册失败',
          IN_CALL: '通话中',
          INCOMING_CALL: '来电振铃',
          OUTGOING_CALL: '外呼振铃',
          HOLD: '保持中',
          CALL_END: '通话结束'
        },
        timer: null,
        timerString: '00:00:00',
        outNum: '',
        isHold: true
      };
    },
    computed: {
      classObject() {
        const bool1 = this.alarmArr.length > 1;
        const bool2 = this.alarmArr.length === 1;
        return {
          tanchuangbox: true,
          "tanchuangbox-height-multi": bool1,
          "tanchuangbox-height-single": bool2,
        };
      },
    },
    mounted() {

      this.init()
  
    },
    methods: {

      // 以下群组
      inMeeting() {
        this.loadingFun()
        var body = {
          devImei: this.userName,
          flag: 'in',
          groupId: this.groupId,
        }

        inOrOutMeeting(body).then(response => {
          if (response.data.success) {
          } else {
            this.$modal.msgError(response.data.message);
          }
          this.loading.close();
        },
          error => {
            this.loading.close();
          });

      },
      outMeeting() {
        this.loadingFun()
        var body = {
          devImei: this.userName,
          flag: 'out',
          groupId: this.groupId,
        }

        inOrOutMeeting(body).then(response => {

          if (response.data.message == '已离开！') {

          } else {
            this.$modal.msgError(response.data.message);
          }
          this.loading.close();
        },
          error => {
            this.loading.close();
          });

      },

      inOrOut(flag, devImei) {
        this.loadingFun()
        var body = {
          devImei: devImei,
          flag: flag,
          groupId: this.groupId,
        }
        inOrOutMeeting(body).then(response => {
          console.log("123123123", response)
          if (response.data.success) {
            this.$modal.msgSuccess(response.data.message);
          } else {
            this.$modal.msgError(response.data.message);
          }
          this.loading.close();
        },
          error => {
            this.loading.close();
          });
      },
      loadingFun() {
        this.loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      },
      speak(type, devImei, flag) {
        this.loadingFun()
        var flagg = ''
        if (type == 'request') {
          flagg = !this.isSpeak ? 'start' : 'end'
          devImei = this.userName
        } else {
          flagg = flag
        }
        var body = {
          devImei: devImei,
          flag: flagg,
          groupId: this.groupId,
          type: type,
        }
        deviceRequestTalking(body).then(response => {
          if (response.data.success) {
            if (type == 'request') {

            }
            this.$modal.msgSuccess(response.data.message);
            //恢复发言
          } else {
            this.$modal.msgError(response.data.message);
            this.hold()
          }
          this.loading.close();
        },
          error => {
            this.loading.close();
          });
      },
      // 1、进入元素
      mouseover(index) {
        this.itemId = index
      },
      // 4、离开元素
      mouseout() {
        this.itemId = ''
      },
      ws() {
        console.log('{"groupId":' + this.groupId + '}')
        this.websocket.webSocketSendMsg('{"groupId":' + this.groupId + '}')

      },
      devStatus(devStatus) {
        for (const i in this.deviceList) {
          if (this.deviceList[i].devStatus == devStatus) {
            this.deviceList[i].devStatus = devStatus
          }
        }
      },
      dictionary(e, type, imei) {
        for (const i in this.dictionaryList) {
          if (this.createBy == imei && e == 4) {
            return '在线'
          }
          if (this.dictionaryList[i].dictValue == e && this.dictionaryList[i].dictType == type) {
            return this.dictionaryList[i].dictLabel
          }
        }
      },
      handleAdd() {
        // this.reset();
        // this.open = true;
        this.title = "添加群组";
      },

      tableRowClassName({ row, rowIndex }) {

        return 'photo';
      },
      rowClass({ row, rowIndex }) {

        return 'text-align: center;background-color: #1A1D30;color: #fff'

      },
      meetingAll() {
        var meetingStatusAll = 2
        var params = {
          groupId: this.groupId,
          meetingStatus: meetingStatusAll
        }
        updateMeetingStatus(params).then(response => {
          if (response.code == 200) {

            this.$modal.msgSuccess(response.msg);
          } else {
            this.$modal.msgError(response.msg);

          }
        });
      },

      meeting() {
        this.loadingFun()
        if (this.deviceList != null) {
          console.log('meetingStatusmeetingStatus', this.meetingStatus)
          var params = {
            groupId: this.groupId,
            meetingStatus: this.meetingStatus == 1 ? 2 : 1
          }
          updateMeetingStatus(params).then(response => {
            setTimeout(() => {
              if (response.code == 200) {
                if (this.meetingStatus == 1) {
                  if (sessionStorage.getItem('groupId') == this.groupId) {
                    this.handleAgentBarBtnClick('hangup')
                    sessionStorage.setItem('groupId', '')
                  }
                  this.isInOrOutMeeting = false
                  this.isHold = true

                  this.loading.close()
                }
              }
            }, 5000);

          });
        }
      },
      //孙组件向父组件传递数据
      wsMeetingStatus(isInterface) {
        console.log('isMeeting状态：', isInterface)
        this.meetingStatus = isInterface
      },
      groupDeviceItemClick(item) {
        // this.handleAgentBarBtnClick('hangup')
        this.isSpeak = false
        this.deviceList = []
        this.groupId = item.id
        this.meetingStatus = item.meetingStatus
        this.groupName = item.groupName
        this.createBy = item.createBy
        this.item = item
        var params = { groupInfoId: item.id, pageNum: 0, pageSize: 0, }
        selectDeviceGroupDetailList(params).then(response => {
          this.deviceList = response.rows
          this.total = this.deviceList.length
          this.ws()
          if (this.deviceList[0].memberStatus == 3 &&
            this.deviceList[0].imei == this.userName) {
            this.isSpeak = true;
          }
          if (
            this.deviceList[0].memberStatus == 2 &&
            this.deviceList[0].imei == this.userName
          ) {
            if (sessionStorage.getItem("groupId") == this.groupId) {
              this.isInOrOutMeeting = true
              return
            }
            if (sessionStorage.getItem("groupId")) {
            } else {
              this.call()
            }
          }
        });

      },

      onClickDialOutside(event) {
        console.log(event)
        this.showDial = false
      },
      onClickTransDialOutside(event) {
        this.showTransferDial = false;
      },
      handleAgentBarBtnClick(name) {
        console.log(name + '当前')
        if (name === 'login') {
          this.login();
        } else if (name === 'logout') {
          this.logout();
        } else if (name === 'answer') {
          this.answer();
        } else if (name === 'hangup') {
          this.hangup();
        } else if (name === 'makecall') {
          this.makeCall('9*' + this.groupId)
        } else if (name === 'hold') {
          this.hold();
        } else if (name === 'unhold') {
          this.unhold();
        } else if (name === 'transfer') {
          this.transfer(this.transNum)
        }
      },

      login() {
        this.init()
        Ctibar.register()
      },
      logout() {
        Ctibar.unregister()
      },
      makeCall(phone) {
        if (phone === "" || phone === undefined) {
          console.error('无效的号码，请重新输入！');
          return
        }
        Ctibar.makecall(phone);

      },
      hold() {
        Ctibar.hold();

      },
      unhold() {
        Ctibar.unhold();
      },
      answer() {
        Ctibar.answer();
      },
      hangup() {
        Ctibar.hangup();
      },
      transfer(phone) {
        console.info("触发转接", phone)
        Ctibar.transfer(phone);
      },
      //外呼拨号盘
      handleDialBtnClick(val) {
        this.outNum += val;
        this.$refs.outNumInput.focus();
      },
      //转接拨号盘
      handleTransDialBtnClick(val) {
        this.transNum += val;
        this.$refs.transNumInput.focus();
      },

      //参数为时间差秒数，返回这两个时间差并格式化
      computeTimeDiff(diff) {
        diff = Math.round(diff / 1000);
        let hour = Math.floor(diff / 3600).toString().padStart(2, '0');
        let min = Math.floor((diff - hour * 3600) / 60).toString().padStart(2, '0');
        let sec = (diff % 60).toString().padStart(2, '0');
        return hour + ':' + min + ':' + sec;
      },
      //重置时间
      restoreTime(origin) {
        clearInterval(this.timer);
        this.timerString = '00:00:00';
        this.timer = setInterval(() => {
          this.timerString = this.computeTimeDiff(new Date().getTime() - origin);
        }, 1000);
      },
      //状态变更回调
      stateEventListener(event, data) {
        //debug使用
        console.log('当前event为: ' + event + ', 当前data为: ' + JSON.stringify(data))

        this.agentStatus = event
        let origin = new Date().getTime();
        switch (event) {
          case "CONNECTED":
            this.agentNo = data.localAgent
            this.restoreTime(origin);
            break;

          case "DISCONNECTED":
            this.restoreTime(origin);
            break;

          case "UNREGISTERED":
            this.restoreTime(origin);
            break;

          case "OUTGOING_CALL":
            this.customerNo = data.otherLegNumber;
            this.restoreTime(origin);
            break;

          case "INCOMING_CALL":
            this.customerNo = data.otherLegNumber;
            //播放来电振铃音
            this.playRingMedia();
            this.restoreTime(origin);
            break;

          case "IN_CALL":
            this.stopPlayRingMedia();
            this.restoreTime(origin);

            // this.timer = setInterval(() => {
            // }, 1000);
            console.log('当前是否hold', this.isHold)
            if (this.isHold) {
              setTimeout(() => {
                this.handleAgentBarBtnClick('hold')
                this.isHold = false
                // 方法区
              }, 500);
            }

            break;

          case "CALL_END":
            this.stopPlayRingMedia();
            //挂机铃声
            this.playHangupMedia()
            this.restoreTime(origin);
            break;

          default:

        }
      },

      //播放挂机铃声
      playHangupMedia() {
        const _this = this;
        var hangupAudio = document.getElementById("hangupMediaAudioId")
        if (!hangupAudio) {
          hangupAudio = document.createElement('audio');
          hangupAudio.id = 'hangupMediaAudioId';
          hangupAudio.hidden = true;
          hangupAudio.src = 'wav/hangup.wav'
          document.body.appendChild(hangupAudio);
        }
        hangupAudio.play();
      },
      //播放来电振铃
      playRingMedia() {
        const _this = this;
        _this.stopPlayRingMedia();

        var ringAudio = document.getElementById("ringMediaAudioId")
        if (!ringAudio) {
          ringAudio = document.createElement('audio');
          ringAudio.id = 'ringMediaAudioId';
          ringAudio.hidden = true;
          ringAudio.src = 'wav/ring.wav';
          ringAudio.loop = 'loop';
          document.body.appendChild(ringAudio);
        }
        ringAudio.play();
      },
      //停止播放来电振铃
      stopPlayRingMedia() {
        const _this = this;
        var ringAudio = document.getElementById("ringMediaAudioId");
        if (ringAudio) {
          document.body.removeChild(ringAudio);
        }
      },
      //初始化方法
      init() {
        this.config.extNo = this.userName
        if (sessionStorage.getItem("freeSwitchWs") != null) {
          this.config.host = sessionStorage.getItem("freeSwitchWs").split(":")[0]
          this.config.port = sessionStorage.getItem("freeSwitchWs").split(":")[1]
        }
        Ctibar.initSDK(this.config)

        let url = `/ws/` + this.userId + '/group/device/push';
        this.websocket = new webSocketClass(url)
        this.websocket.getWebSocketMsg(evt => {
          // 客户端接收服务端返回的数据
          var data = JSON.parse(evt.data);
          console.log("websocket返回的数据123：", data);
          switch (data.flag) {
            case "group"://会议状态
              this.$refs.organizationTree.setGroupList(data, this.groupId)
              console.log("websocket返回的数据123：", data);
              break
            case "memberStatus"://成员状态
              for (const i in this.deviceList) {
                console.log('123123132', data.member);
                if (this.deviceList[i].imei == data.member) {
                  this.deviceList[i].devStatus = data.memberStatus;
                }
              }
              break
            case "memberMeetingStatus"://成员会议状态
              for (const i in this.deviceList) {
                if (this.deviceList[i].imei == data.member) {
                  this.deviceList[i].memberStatus = data.memberMeetingStatus;
                }
              }
              if (this.groupId == data.groupId && this.userName == data.member && this.createBy == data.member) {
                if (data.memberMeetingStatus == 3) {
                  this.isSpeak = true;
                  this.unhold()
                  console.log('数据this.isInOrOutMeeting1111', this.isSpeak)
                } else {
                  this.isSpeak = false;
                  this.hold()
                }
              }

              if (data.memberMeetingStatus == 4) {
                this.loading.close()
              }
              if (!this.isInOrOutMeeting && this.groupId == data.groupId && this.userName == data.member && this.createBy == data.member && data.memberMeetingStatus == 2) {
                this.hold()
                if (sessionStorage.getItem("groupId") &&
                  sessionStorage.getItem("groupId") !== this.groupId) {
                } else {
                  console.log('this.isInOrOutMeeting1111', data.memberMeetingStatus)
                  this.call()
                }
              }
              if (this.createBy == data.member && data.memberMeetingStatus == 1 && this.userName == data.member) {
                this.handleAgentBarBtnClick('hangup')
                sessionStorage.setItem("groupId", '')
                this.isInOrOutMeeting = false
                this.isSpeak = false
                this.isHold = true
              }
              break

          }
        })
      },
      setGroup(group) {
        this.isGroup = group
     
   
      },
      call() {
        this.handleAgentBarBtnClick('makecall')
        sessionStorage.setItem("groupId", this.groupId)
        this.isInOrOutMeeting = true
        if (this.deviceList[0].imei != this.createBy) {
          // this.groupDeviceItemClick(this.item)
        }
        var that = this
        window.onbeforeunload = (e) => {
          console.log('this.isInOrOutMeeting', that.isInOrOutMeeting)
          if (that.isInOrOutMeeting) {
            that.handleAgentBarBtnClick('hangup')
            sessionStorage.setItem("groupId", '')
            that.websocket.closeSocket()
            window.onbeforeunload = null
          }
        }
        this.loading.close()
        this.isInOrOutMeeting = true
        this.isHold = true
      }
    },
    beforeDestroy() {  //进行监听销毁
      console.log('1231232131232132131,', this.isInOrOutMeeting)
      if (this.isInOrOutMeeting) {
        this.handleAgentBarBtnClick('hangup')
        sessionStorage.setItem("groupId", '')
        this.websocket.closeSocket()
        window.onbeforeunload = null
      }
    },

  };
</script>