Web 远程协作SDK

核心模块

• SDK 初始化
• 发起协作
• 会议中邀请用户
• 接受、拒绝、关闭、离开协作

一、简介

远程协作 sdk 适应于远程协作方案，在本教程中，您可以体验集成 SDK 的基本流程和提供的 UI 界面，其中 sdk 提供的主要功能：

1. 上限16人的远程协作，音视频通讯；

2. 视频点选，视频控制，AR标注，电子白板，屏幕共享，云端录制等；

二、SDK 接入

SDK初始化

1. 引入SDK

// 使用npm的方式
npm i rokid-web-rtc-sdk

2. 初始化SDK实例

import WebRTCSdk from 'rokid-web-rtc-sdk'

// 建议在应用生命周期内调用初始化方法，只需要调用一次
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;
});

// 

3. 创建一个挂载Iframe的容器

• 本地需要创建DOM节点，并且赋予一个唯一的ID节点用于挂载SDK，例如

<div id="containerId" />

4. 初始化挂载容器

使用初始化的实例调用 render 方法

instance.render('#containerId');

监听SDK消息状态

// 引入SDK
import WebRTCSdk from 'rokid-web-rtc-sdk'

/**
 * 调用静态方法 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的接入。

三、发起协作

1. 使用SDK内置发起协作弹窗

• 使用实例的launch可以吊起内置发起协作弹窗

 /**
   * 开始远程协作(使用SDK内置界面)
   * @name launch
   * @param userIdList 选中的用户ID列表
   * @param meetingId 会议对应的ID
   * @param meetingName 会议名称
   */
  function launch(
    userIdList: string[],
    meetingId: string,
    meetingName: string,
  ):void

2. 使用自定义发起协作弹窗

• 发起协作弹窗由自己实现
• 使用实例的start可以直接发起会议

/**
  * 开始协作(使用自定义配置界面)
  * @name start
  * @param {ConfigTypes} configs 会议设置
  * @param {OptionsTypes} options 功能配置
  * @param userIdList 被邀请的用户ID列表
  */
 function start(
   userIdList: string[],
   configs: ConfigTypes,
   options: OptionsTypes
 ):void

3. 加入会议(使用SDK内置弹窗)

/**
 * 加入远程协作
 * @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 失败message: 返回消息notLicense：没有权限的用户hasLicense:有权限的用户 |

当没有处于会议中并且上次的会议没结束，您会收到以下消息类型: | 消息类型 | 描述 | 消息携带参数 | | :----| :---- | :---- | | lastMeetingCallback | 可用于自定义重新加入会议的弹窗 | status: boolean 是否存在可以加入的会议 true-存在，false-不存在/最近可加入的会议已结束meetingId: string 会议IDmeetingName: 会议名称 |

4. 公用类型

 /**
  * 参数类型
 */

 /** @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() 

/**
* 释放资源
**/
function destroy()

• 其他消息类型

| 消息类型 | 描述 | 消息携带参数 | | :----| :---- | :---- | | onLogout | 被动退出登录例如你的账号在其他地方登录 | - | | onTokenInvalid | SDK内部Token失效 | - |