核心模块
- SDK 初始化
- 发起协作
- 会议中邀请用户
- 接受、拒绝、关闭、离开协作
- 小窗化回调,离开会议回调,会议中其他人收到邀请回调
远程协作 sdk 适应于远程协作方案,在本教程中,您可以体验集成 SDK 的基本流程和提供的 UI 界面,其中 sdk 提供的主要功能:
-
上限16人的远程协作,音视频通讯;
-
视频点选,视频控制,AR标注,电子白板,屏幕共享,云端录制等;
编译和发包: npm run release
// 使用npm的方式
npm i rokid-export-iframe-sdk-cgnjz
import WebRTCSdk from 'rokid-export-iframe-sdk-cgnjz'
// 建议在应用生命周期内调用初始化方法,只需要调用一次
const instance = new WebRTCSdk({
/**
* 登录后生成的Token
* @name token
* @description 必传
*/
token: string;
/**
* 第三方Web远程协作服务的url
* @name saasUrl
* @description 1. 必传;2. 第三方传入的部署Web远程协作服务的url地址;
*/
saasUrl: string;
/**
* 第三方RTC服务提供的AppId
* @name rtcAppId
* @description 必传,用于初始化RTC服务
*/
rtcAppId: string;
/**
* 第三方RTC服务Url
* @name rtcUrl
* @description 1. 必传,用于初始化RTC服务;2. 第三方传入的部署RTC服务的url地址;
*/
rtcUrl: string;
});
//
- 本地需要创建DOM节点,并且赋予一个唯一的ID节点用于挂载SDK,例如
<div id="containerId" />
使用初始化的实例调用 render 方法
instance.render('#containerId');
// 引入SDK
import WebRTCSdk from 'rokid-export-iframe-sdk-cgnjz'
/**
* 调用静态方法 addMessageListener
* @param messageCallback 能拿到SDK内部通知外部的所有消息,你需要根据不同的消息,处理相应的业务
* @description messageCallback(event)
* 解构 event: { data: { type, ...params } }
* @param type 消息类型
* @param params 其余参数
*/
WebRTCSdk.addMessageListener(messageCallback)
/**
* 组件卸载时需要移除监听器
*/
WebRTCSdk.removeMessageListener(messageCallback)
初始化时,您会收到以下的消息类型:
消息类型 | 描述 | 消息携带参数 |
---|---|---|
initRtcStatus | RTC初始化,instance.render 之后会收到该消息,如果登录用户没有RTC会返回status: false
|
status RTC初始化状态,true 成功,false 失败message 返回消息 |
到这里,就完成了SDK的接入。
- 使用实例的
launch
可以吊起内置发起协作弹窗
/**
* 开始远程协作(使用SDK内置界面)
* @name launch
* @param userIdList 选中的用户ID列表
* @param meetingId 会议对应的ID
* @param meetingName 会议名称
*/
function launch(
userIdList: string[],
meetingId: string,
meetingName: string,
):void
- 发起协作弹窗由自己实现
- 使用实例的
start
可以直接发起会议
/**
* 开始协作(使用自定义配置界面)
* @name start
* @param {ConfigTypes} configs 会议设置
* @param {OptionsTypes} options 功能配置
* @param userIdList 被邀请的用户ID列表
*/
function start(
userIdList: string[],
configs: ConfigTypes,
options: OptionsTypes
):void
/**
* 加入远程协作
* @name join
* @param meetingId 加入会议对应的ID
* @param meetingName 会议名称
* @param {OptionsTypes} options 功会议能配置
*/
function join(
meetingId: string,
meetingName: string,
options?: OptionsTypes,
):void
成功加入协作后,您会收到以下消息类型:
消息类型 | 描述 | 消息携带参数 |
---|---|---|
entryCooperationResult |
launch ,start ,join 成功后都会收到该消息类型 |
status : boolean true 成功; false 失败meetingId : string 会议IDmessage : 返回消息notLicense :没有权限的用户hasLicense :有权限的用户 |
当没有处于会议中并且上次的会议没结束,您会收到以下消息类型:
消息类型 | 描述 | 消息携带参数 |
---|---|---|
lastMeetingCallback | 可用于自定义重新加入会议的弹窗 |
status : boolean 是否存在可以加入的会议 true-存在,false-不存在/最近可加入的会议已结束meetingId : string 会议IDmeetingName : 会议名称 |
/**
* 参数类型
*/
/** @name 会议配置 */
interface ConfigTypes {
/** @name 会议名称 */
meetingName: string;
/** @name 分辨率 */
constraints: "360P" | "720P" | "1080P";
/** @name 是否开启云录制 */
isRecord: boolean;
}
/** @name 功能配置 */
interface OptionsTypes {
/** @name 是否打开麦克风 */
isAudio: boolean;
/** @name 是否开启摄像头 */
isVideo: boolean;
/** @name 是否开启扬声器 */
isSpeaker: boolean;
}
- 会议中邀请用户加入协作需要您自己实现
/**
* 会议中邀请其他用户
* @name invite
* @param meetingId 会议ID
* @param userIdList 邀请的用户ID数组
*/
function invite(meetingId: string, userIdList: string[]):void
关于会议中邀请用户的消息类型
消息类型 | 描述 | 消息携带参数 |
---|---|---|
inviteCallback | 会议中点击邀请成员会发出该消息 |
inMeetingUserList : 会议中的成员 meetingId : 会议ID meetingName : 会议名称 |
inviteResult | 执行invite 之后收到的邀请结果 |
status : boolean 邀请是否成功 notLicense : string[] 没有RTC权限的用户hasLicense : string[] 有权限的用户message : string 提示消息(邀请人数超过16人,邀请用户没有权限会返回失败的消息) |
- 当有用户向您发起协作时,您会收到以下消息类型:
消息类型 | 描述 | 消息携带参数 |
---|---|---|
acceptCooperation | 其他用户一旦邀请您一起协作,会收到该消息类型 | - |
- 拒绝、关闭、离开协作之后,您会收到
消息类型 | 描述 | 消息携带参数 |
---|---|---|
closeCooperation | 拒绝、关闭、离开协作之后,会收到该消息类型 |
reloadPage : boolean true 根据自己需求是否重新加载一次页面 (SDK内部会自己刷新一次) |
- 其他方法
/**
* 主动退出登录,适用于主动退出和被挤下线时调用
**/
function logout()
/**
* 退出登录并卸载iframe
**/
function destroy()
/**
* 卸载iframe
*/
function unmountIframe()
- 其他消息类型
消息类型 | 描述 | 消息携带参数 |
---|---|---|
onLogout |
被动退出登录例如你的账号在其他地方登录 | - |
onTokenInvalid |
SDK内部Token失效 | - |
switchSmallWindow |
SDK内部切换小窗化回调 | - |
leaveMeetingCallBack |
SDK内部人员离开会议回调 |
meetingId : 会议ID userId : 离开人员userID |
callAcceptCallBack |
SDK内部其他人接受邀请回调 |
meetingId : 会议ID userId : 接受邀请人useID inviteUserId : 邀请人useID |
callBusyCallBack |
SDK内部其他人会议正忙邀请回调 |
meetingId : 会议ID userId : 接受邀请人useID inviteUserId : 邀请人useID |
callRejectedCallBack |
SDK内部其他人拒绝邀请回调 |
meetingId : 会议ID userId : 接受邀请人useID inviteUserId : 邀请人useID |