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

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

效果展示

• 群视频通话
  

• 语音通话
  

在线体验

https://webim-1252463788.file.myqcloud.com/demo/index.html

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