vue3腾讯云实时音视频通话 ui集成方案TUIcallkit

引入依赖

npm i trtc-js-sdk --save
npm i tim-js-sdk --save
npm i tsignaling --save
npm i tuicall-engine-webrtc --save

import { TUICallEngine, TUICallEvent } from "tuicall-engine-webrtc"

创建组件

<script setup>
// import axios from 'axios'
import qs from 'qs'
import $http from '@/api/commentCenter'
import { reactive, ref, onBeforeUnmount, watch, defineEmits } from 'vue'
import { TUICallEngine, TUICallEvent } from 'tuicall-engine-webrtc'
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)
})
const options = reactive({
  SDKAppID: xxxxx, // 接入时需要将 0 替换为您的云通信应用的 SDKAppID
  tim: null // tim 参数适用于业务中已存在 TIM 实例，为保证 TIM 实例唯一性
})
const tuiCallEngine = TUICallEngine.createInstance(options)
// 获取签名
const myuserID = 'xxxxxx' //呼叫用户的id
const getUserSin = async () => {
  const option = {
    userId: myuserID
  }
  const list = await $http.getTrtcSin(qs.stringify(option))
  console.log(list)
  trtcLogin(list.usersig)
}
getUserSin()
// 监听通话
const initListener = () => {
  tuiCallEngine.on(TUICallEvent.INVITED, () => {
    // 收到视频通话的邀请
    connectMeet()
  })
  tuiCallEngine.on(TUICallEvent.USER_ACCEPT, () => {
    // 对方接听了您发出的通话邀请
    // showMeetRemote()
  })
  tuiCallEngine.on(TUICallEvent.REJECT, () => {
    // 对方拒绝了您发出的通话邀请
  })
  tuiCallEngine.on(TUICallEvent.USER_ENTER, () => {
    // 有用户同意进入通话
    showMeetRemote()
  })
  tuiCallEngine.on(TUICallEvent.NO_RESP, () => {
    // 无人应答
    ElMessage.info('无人接听')
  })
}
initListener()
const isLogin = ref(false)
const trtcLogin = (sin) => {
  tuiCallEngine.login({
    userID: myuserID,
    userSig: sin
  }).then(res => {
    // success
    // alert('登录成功')
    isLogin.value = true
    console.log('登录成功')
  }).catch(error => {
    ElMessage.error('登录失败')
    console.warn('login error:', error)
  })
}
// 拨打电话
const startMeet = () => {
  console.log(props.powerUserInfo.userId, '===rs===')
  tuiCallEngine.call({
    userID: props.powerUserInfo.userId, // 用户 ID
    type: 2 // 通话类型，0-未知， 1-语音通话，2-视频通话
  }).then(res => {
    // success
    showMeetLocal()
  }).catch(error => {
    console.warn('拨打 error:', error)
    ElMessage.error('账号不存在或未登录')
  })
}
// 收到电话
const connectMeet = () => {
  // 接听通话
  tuiCallEngine.accept().then(res => {
    showMeetRemote()
  }).catch(error => {
    console.warn('接通 error:', error)
  })
}
// 显示本地视频画面
const showMeetLocal = () => {
  // 本地视频画面
  tuiCallEngine.startLocalView({
    userID: myuserID, // 本地用户的 userID
    videoViewDomID: 'local-stream' // 用于显示摄像头画面的 DOM 节点
  }).then(res => {
    // success
  }).catch(error => {
    console.warn('startLocalView error:', error)
  })
}
// 显示远端视频画面
const showMeetRemote = () => {
  // 远端视频画面
  tuiCallEngine.startRemoteView({
    userID: props.powerUserInfo.userId, // 远端用户 ID
    videoViewDomID: 'remote-stream' // 用于显示对方视频画面的 DOM 节点
  }).then(res => {
    // success
  }).catch(error => {
    console.warn('startRemoteView error:', error)
  })
}
const emit = defineEmits(['closeTrtc'])
// 取消通话
const handleCancelCallUser = () => {
  tuiCallEngine.hangup().then(() => {
    // success
    emit('closeTrtc', false)
    ElMessage.success('已取消通话')
  }).catch(error => {
    console.warn('hangup error:', error)
  })
}
// 退出登录
const loginOut = () => {
  tuiCallEngine.logout().then(res => {
    isLogin.value = false
    console.log('退出登录')
  }).catch(error => {
    console.warn('接通 error:', error)
  })
}
// 实例销毁退出登录
onBeforeUnmount(() => {
  loginOut()
})

</script>

常见问题