基于TRTCCalling快速实现多人音视频通话

1,102 阅读5分钟

TRTCCalling SDK 基于 TRTCTSignaling ,封装了简单易用的 API,接入后可快速实现 web 和 native 互通的1v1或群实时通话。

效果展示

  • 群视频通话

  • 语音通话

在线体验

webim-1252463788.file.myqcloud.com/demo/index.…

1)注册登录后,创建一个 im 的群组,拉上其他人入群,打开会话窗口,点击实时音视频选择(语音通话或者视频通话)。

2)选择呼叫用户列表,单击【确定】,就可以发起实时通话了,

3)呼叫界面

5)通话界面

  • 视频通话

  • 语音通话

使用 TRTCCalling 实现1v1和群实时通话

步骤1:注册即时通信 IM 应用,开通 TRTC服务

登录 即时通信 IM 控制台 ,单击目标应用卡片,进入应用的基础配置页面。 单击【开通腾讯实时音视频服务】区域的【立即开通】。 在弹出的开通实时音视频 TRTC 服务对话框中,单击【确认】。系统将为您在 实时音视频控制台 创建一个与当前 IM 应用相同 SDKAppID 的实时音视频应用,二者帐号与鉴权可复用。

步骤2:接入SDK,初始化实例

  • 在项目中通过 npm 安装最新版本的 tim-js-sdk、tsignaling、trtc-calling-js。如果项目已经集成有 tim-js-sdk 或 trtc-calling-js,直接将其升级到最新版本即可。
 npm i tim-js -- save
 npm i trtc-js-sdk --save
 npm i tsignaling --save
 npm i trtc-calling-js --save
  • 在项目中引入 trtcCalling
import TRTCCalling from 'trtc-calling-js'
Vue.prototype.trtcCalling = TRTCCalling
let options = {
  SDKAppID: 0 // 接入时需要将0替换为您的云通信应用的 SDKAppID
}
const trtcCalling = new TRTCCalling(options)
  • 如果需要通过script标签外链的方式引入,需要将tim-js.js、tsignaling.js、trtc-calling-js.js拷贝至项目中,按顺序引入。
<script src="./tim-js.js"></script>
<script src="./trtc-js-sdk.js"></script>
<script src="./tsignaling.js"></script>
<script src="./trtc-calling-js.js"></script>

步骤3: 注册监听函数并登录

// sdk内部发生了错误
trtcCalling.on(this.TRTCCalling.EVENT.ERROR, this.onError)
// 被邀请进行通话
trtcCalling.on(this.TRTCCalling.EVENT.INVITED,this.onInvited)
// 远端用户同意进入通话
trtcCalling.on(this.TRTCCalling.EVENT.USER_ENTER, this.onUserEnter)
// 远端用户离开通话
trtcCalling.on(this.TRTCCalling.EVENT.USER_LEAVE, this.onUserLeave)
// 被邀请方拒绝通话
trtcCalling.on(this.TRTCCalling.EVENT.REJECT, this.onReject)
// 被邀请方忙线
trtcCalling.on(this.TRTCCalling.EVENT.LINE_BUSY, this.onInviteeLineBusy)
// 邀请方取消了通话邀请,作为被邀请方会收到
trtcCalling.on(this.TRTCCalling.EVENT.CALLING_CANCEL,this.onCallingCancel)
// 因为多实例登录或者多终端登录被被踢出im系统
trtcCalling.on(this.TRTCCalling.EVENT.KICKED_OUT, this.onKickedOut)
// 超时
trtcCalling.on(this.TRTCCalling.EVENT.CALLING_TIMEOUT,this.onCallingTimeout)
// 邀请后对端无应答
trtcCalling.on(this.TRTCCalling.EVENT.NO_RESP, this.onNoResp)
// 本次通话结束了
trtcCalling.on(this.TRTCCalling.EVENT.CALLING_END, this.onCallingEnd)
// 远端用户开启/关闭了摄像头
trtcCalling.on(this.TRTCCalling.EVENT.USER_VIDEO_AVAILABLE, this.onUserVideoAvailable)
// 远端用户开启/关闭了麦克风
trtcCalling.on(this.TRTCCalling.EVENT.USER_AUDIO_AVAILABLE, this.onUserAudioAvailable)

    trtcCalling.login({
      userID,
      userSig,
    })

步骤4:发起发起1v1或多人通话

// 发起1v1视频通话
trtcCalling.call({
  userID: 'user1', //被邀请者 userID
  type: 2,         //通话类型,0-未知, 1-语音通话,2-视频通话
  timeout: 0       //邀请超时时间, 单位 s(秒)
})
// 发起群视频通话
trtcCalling.groupCall({
  userIDList: ['user1', 'user2'], //被邀请者列表 
  type: 2,    //通话类型,0-未知, 1-语音通话,2-视频通话
  groupID: '群组 ID', //IM 群组 ID 
  timeout: 0  //邀请超时时间, 单位 s(秒)
})

步骤5:接受、拒绝、挂断

// 接听
trtcCalling.accept({
  inviteID, //邀请 ID, 标识一次邀请
  roomID,   //通话房间号 ID
  callType  //0-未知, 1-语音通话,2-视频通话
});
//拒绝
trtcCalling.reject({ 
  inviteID, //邀请 ID, 标识一次邀请
  isBusy:false, //是否是忙线中
  callType  //0-未知, 1-语音通话,2-视频通话
});
// 挂断
trtcCalling.hangup();

SDK 事件详解

TRTCCalling.EVENT.INVITED

  • 被邀请者收到语音/视频邀请时会触发
trtcCalling.on(TRTCCalling.EVENT.INVITED, function(payload) {
    payload.sponsor  //邀请者
    payload.userIDList //被邀请者列表
    //to do  显示视频通话被邀请界面
});

TRTCCalling.EVENT.USER_ENTER

  • 被邀请者同意进入通话
在该回调中建立通话
callingUserList // 参加通话的人 ,不包括自己
trtcCalling.on(TRTCCalling.EVENT.USER_ENTER, function({ userID }) {
  //userID 进入通话的用户
  //to do  显示视频通话界面
  startLocalView()    //渲染本地的预览画面 
  startRemoteView(userID)   //渲染远端的视频画面
  if (this.callingUserList.indexOf(userID) === -1) {
       this.callingUserList.push(userID)
   }
});          

TRTCCalling.EVENT.USER_LEAVE

  • 用户离开通话
// 从callingUserList 参加通话的列表中移除
trtcCalling.on(TRTCCalling.EVENT.USER_LEAVE, function({ userID }) {
//userID:userID 离开通话的用户
const index = this.callingUserList.findIndex(item => item === userID)
    if (index >= 0) {
      this.callingUserList.splice(index, 1)
    }
});          

TRTCCalling.EVENT.REJECT

  • 被邀请者拒绝通话
//invitedUserList   被邀请者列表
trtcCalling.on(TRTCCalling.EVENT.REJECT, function({ userID }) {
// userID 拒绝通话的用户
 if (this.userID === this.sponsor) { // 该用户是邀请者
    const _index = this.invitedUserList.indexOf(userID)
    if (_index >= 0) {
      this.invitedUserList.splice(_index, 1)
   }
   this.$store.commit('showMessage', {message: `${userID}拒绝通话`})
 }
});          

TRTCCalling.EVENT.LINE_BUSY

  • 被邀请者忙线
trtcCalling.on(TRTCCalling.EVENT.LINE_BUSY, function({ sponsor, userID }) {
//sponsor 邀请者
//userID  忙线用户
//case: A call B,B在忙线,拒绝通话,对于呼叫者A收到通知,XXX在忙线,B不做处理
  if( sponsor === this.userID ) { // 该用户是邀请者
    const _index = this.invitedUserID.indexOf(userID)
    if (_index >= 0) {
      this.invitedUserID.splice(_index, 1)
   }    
   this.$store.commit('showMessage', {message: `${userID}忙线`})
  } 
});          

TRTCCalling.EVENT.CALLING_TIMEOUT

  • 本次通话超时未应答
 // 当自己收到对端超时的信令时,或者当我是被邀请者但自己超时了,通知上层通话超时
 // case: A呼叫B,B在线,B超时未响应,B会触发该事件,A也会触发该事件
trtcCalling.on(TRTCCalling.EVENT.CALLING_TIMEOUT, function({ sponsor, userIDList }) {
  // sponsor 邀请者
  // userIDList 超时用户列表
if( sponsor === this.userID ) { // 该用户是邀请者
   userIDList.forEach((userID) =>{
     const _index = this.invitedUserID.indexOf(userID)
     if (_index >= 0) {
      this.invitedUserID.splice(_index, 1)
   }    
   this.$store.commit('showMessage', {message: `${userID}超时未响应`})
   })
   return
 } 
 // 该用户是被邀请者,
 //to do  关闭被邀请通话界面
});          

TRTCCalling.EVENT.CALLING_END

  • 收到该回调说明本次通话结束了
trtcCalling.on(TRTCCalling.EVENT.CALLING_END, function({ userID, callEnd }) {
  //userID 邀请者
  //callEnd 通话时长
  //to do  关闭通话界面      
})

TRTCCalling.EVENT.USER_VIDEO_AVAILABLE

  • 远端用户开启/关闭了摄像头, 会收到该回调
trtcCalling.on(TRTCCalling.EVENT.USER_VIDEO_AVAILABLE, function({ userID: string, isVideoAvailable: boolean }) {
//userID 远端用户ID
//to do 改变远端用户摄像头显示状态
//isVideoAvailable true:远端用户打开摄像头 false:远端用户关闭摄像头
})

TRTCCalling.EVENT.USER_AUDIO_AVAILABLE

  • 远端用户开启/关闭了麦克风, 会收到该回调
trtcCalling.on(TRTCCalling.EVENT.USER_AUDIO_AVAILABLE, function({ userID: string, isAudioAvailable: boolean }) {
//userID 远端用户ID
//to do 改变远端用户麦克风显示状态
//isAudioAvailable true:远端用户打开麦克风 false:远端用户关闭麦克风
})

为了开发者可以快速接入,我们在 TRTCCalling SDK 的基础上,提供了同时支持单聊、群语音视频通话组件 Demo, 并开源到了 github。开发者 fork&clone 项目到本地(顺手来个star,谢谢~),稍作修改即可把 Demo 跑起来体验,或者将组件集成到自己的项目部署上线。

注意事项

  • 监听事件必须在index文件 ,避免被呼叫方漏掉 SDK 派发的事件
  • 在邀请超时时间内,被邀请者如果离线再上线,不能收到邀请, 目前web仅支持在线情况。

参考资料: