vue3+ts 使用XSwitch 实现简易拨打电话功能

喝可乐的大喵

已于 2023-08-28 09:18:31 修改

阅读量1.1k

点赞数 3

文章标签： vue.js 前端 typescript websocket

于 2023-08-23 13:43:07 首次发布

本文链接：https://blog.csdn.net/PhoenixGuangyu/article/details/132450275

版权

官方中文文档：JS SDK | XSwitch文档中心

1.安装xswitch/rtc

npm install @xswitch/rtc
yarn add @xswitch/rtc

2.初始化 verto，并在需要引入的组件中引入verto

这里举例在pendingTask.vue中引用

pendingTask.vue

import verto, {Verto, VertoCallcenter} from '@xswitch/rtc'

3.根据文档封装拨号函数

协议 : websocket

import verto from '@xswitch/rtc'
//用户信息
let cur_call = null;//外呼函数
let ola_extn = 'xxx'
let serIp = 'xxxxx'//用户名
let agentPwd = 'xxx' //密码
//verto 回调函数
let callbacks = {
	//收到消息时的回调
	onMessage: function (verto: any, dialog: any, msg: any, data: any) {
		console.log(msg)
	},
    //状态发生改变时的回调
	onDialogState: function (d: any) {
		cur_call = d.state;
		 switch (d.state.name) {
      case 'ringing':
        onLoading.value = true
        break;
      case 'trying':
        onLoading.value = true
        outTxt.value = '正在接通中...'
        break;
      case 'early':
        onLoading.value = true
        outTxt.value = '正在接通中...'
        break;
      case 'active':
        onLoading.value = true
        outTxt.value = '通话中...'
        break;
      case 'hangup':
      case 'destroy':
        cur_call = null;
        onLoading.value = false
        outTxt.value = '通话已完成'
        break;
      default:
        break;
    }
	},
	onEvent: function (v: any, e: any) {
		console.debug("GOT EVENT", e, v);
	}
}
//登录
const vertoLogin = () => {
	const params = {
		login: ola_extn + "@" + serIp,
		passwd: agentPwd,
		socketUrl: "wss://" + serIp + ":10085/webrtc",//请求地址
		tag: "webcam"
	}
	verto.connect(params, callbacks);
}

//外呼
const doCall = (phone: string) => {
	vertoLogin()
	cur_call = verto.newCall({
		destination_number: phone,
		caller_id_name: ola_extn,
		caller_id_number: ola_extn
	}, '', onSuccess, onError);
}
const onSuccess = () => {
	sessionStorage.setItem('txt', '正在呼叫中')
}
const onError = () => {
	sessionStorage.setItem('txt', '服务器繁忙，请刷新后重试')
}

export { doCall }

4.在组件中使用该方法

//html
<div @click="doOutbound">
    <el-button :loading="onLoading">
       <template #icon>
         <img src="@/assets/static/phone.png" alt="">
        </template>
         {{ outTxt }}
   </el-button>
</div>
  <!-- 外呼media 必须要有，不然听不到声音-->
  <video width=800 id="webcam" autoplay hidden="true"></video>

//js
<script lang="ts" setup>
import doCall from '@/utils/doCall'
//----------------------应用外呼函数
const onLoading = ref(false) //按钮加载状态
const outTxt = ref('外呼') //外呼按钮
const doOutbound = () => {
  if (onLoading.value) return //防止拨号的时候重复发websocket
  if (outTxt.value === '外呼') doCall('这里传入手机号')
  outTxt.value = '外呼'
}
//挂断
const closeOutbound = () => {
  cur_call.hangup()
}
//保持通话
const holdOutbound = () => {
  cur_call.hold();
  isHold.value = true
}
//关闭保持通话
const unHoldOutbound = () => {
  cur_call.unhold();
  isHold.value = false
}
</script>

5.综上,只需要点击一下外呼,即可打通你的第一个电话