腾讯实时音视频TRTCCalling

TRTCCalling属于老版本ui集成方案，主要对接老版本音视频通话

引入依赖

npm i trtc-js-sdk --save
npm i tim-js-sdk --save
npm i tsignaling --save
npm i trtc-calling-js --save

主要代码

<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>

文档地址
https://web.sdk.qcloud.com/component/trtccalling/doc/web/zh-cn/TRTCCalling.html