TRTCCalling es una solución de integración de UI de versión anterior que conecta principalmente llamadas de audio y video de versión anterior.
Introducir dependencias
npm i trtc-js-sdk --save
npm i tim-js-sdk --save
npm i tsignaling --save
npm i trtc-calling-js --save
código principal
<script setup>
// import axios from 'axios'
import qs from 'qs'
import $http from '@/api/commentCenter'
import { reactive, ref, onBeforeUnmount, watch, defineEmits } from 'vue'
import TRTCCalling from 'trtc-calling-js'
import { ElMessage } from 'element-plus'
const props = defineProps({
userID: {
type: String,
default: () => {
return ''
}
},
dialogTrtc: {
type: Boolean,
default: () => {
return false
}
},
// 选中的单点用户数据
powerUserInfo: {
type: Object,
default: () => {
return {}
}
}
})
watch(() => props.userID, (newval) => {
console.log(newval)
})
//创建trtc实例
const options = reactive({
SDKAppID: xxxxx, // 接入时需要将 0 替换为您的云通信应用的 SDKAppID
tim: null // tim 参数适用于业务中已存在 TIM 实例,为保证 TIM 实例唯一性
})
const trtcCalling = new TRTCCalling(options)
// 获取签名
const myuserID = 'xxxx'
const getUserSin = async () => {
const option = {
userId: myuserID
}
const list = await $http.getTrtcSin(qs.stringify(option))
console.log(list)
trtcLogin(list.usersig)
}
getUserSin()
// 监听通话
const initListener = () => {
trtcCalling.on(TRTCCalling.EVENT.INVITED, () => {
// 收到视频通话的邀请
// connectMeet()
})
trtcCalling.on(TRTCCalling.EVENT.USER_ACCEPT, () => {
// 对方接听了您发出的通话邀请
// showMeetRemote()
})
trtcCalling.on(TRTCCalling.EVENT.REJECT, () => {
// 对方拒绝了您发出的通话邀请
emit('closeTrtc', false)
ElMessage.success('对方已拒绝')
})
trtcCalling.on(TRTCCalling.EVENT.CALLING_END, () => {
// 通话结束
emit('closeTrtc', false)
ElMessage.success('通话结束')
})
trtcCalling.on(TRTCCalling.EVENT.USER_ENTER, () => {
// 有用户同意进入通话
showMeetRemote()
})
trtcCalling.on(TRTCCalling.NO_RESP, () => {
// 无人应答
ElMessage.info('无人接听')
})
}
initListener()
// 1.登录,所有trtc功能都要在登录完成后才能使用
const isLogin = ref(false)
const trtcLogin = (sin) => {
trtcCalling.login({
userID: myuserID,
userSig: sin
}).then(res => {
// success
// alert('登录成功')
isLogin.value = true
console.log('登录成功')
}).catch(error => {
ElMessage.error('登录失败')
console.warn('login error:', error)
})
}
// 2.拨打电话
const startMeet = () => {
console.log(props.powerUserInfo.userId, '===rs===')
const offlinePushInfo = {
title: '',
description: '您有一个通话请求',
extension: ''
}
trtcCalling.call({
userID: props.powerUserInfo.userId, // 用户 ID
type: 2, // 通话类型,0-未知, 1-语音通话,2-视频通话
offlinePushInfo
}).then(res => {
// success
showMeetLocal()
}).catch(error => {
console.warn('拨打 error:', error)
ElMessage.error('账号不存在或未登录')
})
}
// 收到电话
// const connectMeet = () => {
// // 接听通话
// trtcCalling.accept().then(res => {
// showMeetRemote()
// }).catch(error => {
// console.warn('接通 error:', error)
// })
// }
// 3.显示本地视频画面
const showMeetLocal = () => {
// 本地视频画面
trtcCalling.startLocalView({
userID: myuserID, // 本地用户的 userID
videoViewDomID: 'local-stream' // 用于显示摄像头画面的 DOM 节点
}).then(res => {
// success
}).catch(error => {
console.warn('startLocalView error:', error)
})
}
// 4.显示远端视频画面
const showMeetRemote = () => {
// 远端视频画面
trtcCalling.startRemoteView({
userID: props.powerUserInfo.userId, // 远端用户 ID
videoViewDomID: 'remote-stream' // 用于显示对方视频画面的 DOM 节点
}).then(res => {
// success
}).catch(error => {
console.warn('startRemoteView error:', error)
})
}
const emit = defineEmits(['closeTrtc'])
// 5.取消通话
const handleCancelCallUser = () => {
trtcCalling.hangup().then(() => {
// success
emit('closeTrtc', false)
ElMessage.success('已取消通话')
}).catch(error => {
console.warn('hangup error:', error)
})
}
// 退出登录
// const loginOut = () => {
// trtcCalling.logout().then(res => {
// isLogin.value = false
// console.log('退出登录')
// }).catch(error => {
// console.warn('接通 error:', error)
// })
// }
// 实例销毁退出登录
onBeforeUnmount(() => {
// loginOut()
})
</script>
Dirección del documento
https://web.sdk.qcloud.com/component/trtccalling/doc/web/zh-cn/TRTCCalling.html