# rokid-export-iframe-sdk

> Rokid export iframe SDK

Latest version **1.0.2** (published 2023-07-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install rokid-export-iframe-sdk
pnpm add rokid-export-iframe-sdk
yarn add rokid-export-iframe-sdk
bun add rokid-export-iframe-sdk
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-07-11 |
| First published | 2023-06-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 92.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yekang |
| Maintainers | nanxing123 |
| Keywords | sdk |

## Links

- npm: https://www.npmjs.com/package/rokid-export-iframe-sdk
- npm.io page: https://npm.io/package/rokid-export-iframe-sdk

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.4.1
- [querystring](https://npm.io/package/querystring.md) ^0.2.1

## Recent versions

- 1.0.2 (latest) — 2023-07-11
- 1.0.1 — 2023-07-06
- 1.0.0 — 2023-06-27
- 0.0.9 — 2023-06-27
- 0.0.8 — 2023-06-27

## README

# Web 远程协作SDK

核心模块
- SDK 初始化
- 发起协作
- 会议中邀请用户
- 接受、拒绝、关闭、离开协作
- 小窗化回调，离开会议回调，会议中其他人收到邀请回调

## 一、简介

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

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

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

## 二、SDK 接入

### SDK初始化

#### 1. 引入SDK

```typescript
// 使用npm的方式
npm i rokid-export-iframe-sdk
```

#### 2. 初始化SDK实例

```typescript
import WebRTCSdk from 'rokid-export-iframe-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，例如

```html
<div id="containerId" />
```

#### 4. 初始化挂载容器

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

```typescript
instance.render('#containerId');
```

### 监听SDK消息状态

```typescript
// 引入SDK
import WebRTCSdk from 'rokid-export-iframe-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`失败<br>`message` 返回消息 |

到这里，就完成了SDK的接入。

## 三、发起协作

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

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

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

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

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

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


```

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

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

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

### 4. 公用类型

```typescript
 /**
  * 参数类型
 */

 /** @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;
}
```

## 四、会议邀请用户加入协作

- 会议中邀请用户加入协作需要您自己实现

```typescript
/**
 * 会议中邀请其他用户
 * @name invite
 * @param meetingId 会议ID
 * @param userIdList 邀请的用户ID数组
 */
function invite(meetingId: string, userIdList: string[]):void
```

关于会议中邀请用户的消息类型
| 消息类型 | 描述 | 消息携带参数 |
| :----| :---- | :---- |
| inviteCallback | 会议中点击**邀请成员**会发出该消息 | `inMeetingUserList`: 会议中的成员 <br>`meetingId`: 会议ID <br>`meetingName`: 会议名称 |
| inviteResult | 执行`invite`之后收到的邀请结果 | `status`: boolean 邀请是否成功 <br>`notLicense`: string[] 没有RTC权限的用户<br>`hasLicense`: string[] 有权限的用户<br>`message`: string 提示消息(邀请人数超过16人，邀请用户没有权限会返回失败的消息) |

## 五、接受、拒绝、关闭、离开协作

- 当有用户向您发起协作时，您会收到以下消息类型:

| 消息类型 | 描述 | 消息携带参数 |
| :----| :---- | :---- |
| acceptCooperation | 其他用户一旦邀请您一起协作，会收到该消息类型 | - |

- 拒绝、关闭、离开协作之后，您会收到

| 消息类型 | 描述 | 消息携带参数 |
| :----| :---- | :---- |
| closeCooperation | 拒绝、关闭、离开协作之后，会收到该消息类型 | `reloadPage`: boolean  true 根据自己需求是否重新加载一次页面 (SDK内部会自己刷新一次) |

## 六、其他功能

- 其他方法

```typescript
/**
* 主动退出登录，适用于主动退出和被挤下线时调用
**/
function logout() 

/**
* 退出登录并卸载iframe
**/
function destroy()

/**
 * 卸载iframe
 */
function unmountIframe()
```

- 其他消息类型

| 消息类型 | 描述 | 消息携带参数 |
| :----| :---- | :---- |
| `onLogout` | 被动退出登录例如你的账号在其他地方登录 | - |
| `onTokenInvalid` | SDK内部Token失效 | - |
| `switchSmallWindow` | SDK内部切换小窗化回调 | - |
| `leaveMeetingCallBack` | SDK内部人员离开会议回调 | `meetingId`: 会议ID <br>`userId`: 离开人员userID |
| `callAcceptCallBack` | SDK内部其他人接受邀请回调 | `meetingId`: 会议ID <br>`userId`: 接受邀请人useID <br> `inviteUserId`: 邀请人useID |
| `callBusyCallBack` | SDK内部其他人会议正忙邀请回调 | `meetingId`: 会议ID <br>`userId`: 接受邀请人useID <br>`inviteUserId`: 邀请人useID |
| `callRejectedCallBack` | SDK内部其他人拒绝邀请回调 | `meetingId`: 会议ID <br>`userId`: 接受邀请人useID <br>`inviteUserId`: 邀请人useID |

---
_Source: https://npm.io/package/rokid-export-iframe-sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._