TRTCCalling SDK 基于 TRTC 和 TSignaling ,封装了简单易用的 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仅支持在线情况。