Skip to content

Modify CallKit Docs #1431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 4, 2025
Merged

Modify CallKit Docs #1431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/callkit/android/api_overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
`CallErrorType` 类中提供三类通话错误类型：

| 通话错误类型 | 描述 |
|------|------|
| :------------------- | :----- |
| `BUSINESS_ERROR` | 业务逻辑异常。 |
| `RTC_ERROR` | 音视频异常，详见 [声网 RTC 错误码](https://doc.shengwang.cn/doc/rtc/android/error-code)。 |
| `IM_ERROR` | 即时通讯 IM 异常，详见 [环信即时通讯 IM 错误码](/document/android/error.html) |
Expand All @@ -71,7 +71,7 @@
`CALL_BUSINESS_ERROR` 类中提供三类业务错误类型：

| 业务错误类型 | 描述 |
|------|------|
| :------------------- | :----- |
| `CALL_STATE_BUSY_ERROR` | 通话状态错误: 调用呼叫 API 时，当前设备不处于空闲状态。|
| `CALL_PARAM_ERROR` | 参数错误：主要为呼叫 API 调用参数错误为空等。 |
| `CALL_SIGNALING_ERROR` | 信令错误：大多为信令回复的方法中某些参数错误，例如，对方发的信令里缺少某种参数。 |
Expand Down
4 changes: 2 additions & 2 deletions docs/callkit/android/design_guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<img src="/images/callkit/design/Cover.png" width="100%" >

环信通话套件人机交互界面工具包基于环信移动端单/群聊人机交互界面工具包进行设计，设计原则、全局样式、小控件样式均复用自环信单/群聊人机交互界面工具包，详见 [单/群聊人机交互界面工具包](https://doc.easemob.com/uikit/chatroomuikit/android/design_guide.html)。
环信通话套件人机交互界面工具包基于环信移动端单/群聊人机交互界面工具包进行设计，设计原则、全局样式、小控件样式均复用自环信单/群聊人机交互界面工具包，详见 [单/群聊人机交互界面工具包](/uikit/chatuikit/android/chatuikit_design_guide.html)。

## 总设计原则

Expand Down Expand Up @@ -513,7 +513,7 @@ Message Bubble(Large Radius)

<img src="/images/callkit/design/call_msg.png" width="500">

关于通话相关消息样式（Call Msg），详见 [单/群聊人机交互界面工具包](/uikit/chatroomuikit/android/design_guide.html)。
关于通话相关消息样式（Call Msg），详见 [单/群聊人机交互界面工具包](/uikit/chatuikit/android/chatuikit_design_guide.html)。


## 设计资源
Expand Down
4 changes: 2 additions & 2 deletions docs/callkit/android/integration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ class MainActivity : AppCompatActivity() {
}
```

### 步骤 4 登录
### 步骤 4 登录 IM

```kotlin
ChatClient.getInstance().loginWithToken(username, token, object : ChatCallback {
Expand Down Expand Up @@ -305,7 +305,7 @@ private fun startGroupCall() {
<ImageItem src="/images/callkit/android/group_call_caller_user_selection.png" title="主叫选择用户进入通话" />
</ImageGallery>

### 步骤 5 接听通话
### 步骤 6 接听通话

当接收到通话邀请时，CallKit 会自动触发 `onReceivedCall` 回调：
1. 弹出通话邀请界面。
Expand Down
2 changes: 1 addition & 1 deletion docs/callkit/android/product_overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
| :-------------- | :----- | :------- |
| - 一对一语音/视频通话 <br/>- 群组语音/视频通话（16 人及以下）：通话中邀请他人 <br/> - 自定义铃声：支持主叫、被叫、挂断、超时铃声 <br/> - 打开/关闭悬浮窗<br/> - 自定义 UI 界面 | - 高画质/高音质音视频 <br/> - 离线推送<br/> - 通话质量检测<br/> - 全球互通<br/> - 弱网卡顿优化<br/> - 视频降噪| - 高质量音视频通话 <br/> - 完善的 UI 交互 <br/> - 支持多平台互联互通<br/> - 离线推送稳定且多样化 |

## 界面效果展示
## 界面效果

### 一对一视频通话

Expand Down
54 changes: 27 additions & 27 deletions docs/callkit/ios/integration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,33 +120,7 @@ CallKit 初始化包括如下步骤：
}
```

### 步骤 3 登录

调用即时通讯 IM SDK 的 `login` 方法传入用户 ID 和 Token 登录 IM。

在生产环境中，为了安全考虑，你需要在你的应用服务器集成 [获取 App Token API](/document/server-side/easemob_app_token.html) 和 [获取用户 Token API](/document/server-side/easemob_user_token.html) 实现获取 Token 的业务逻辑，使你的用户从你的应用服务器获取 Token。

```Swift
ChatClient.shared().login(withUsername: userId, token: token) { [weak self] userId,error in
if let error = error {
self?.showCallToast(toast: "Login failed: \(error.errorDescription ?? "")")
} else {
self?.showCallToast(toast: "Login successful")
//if !userId.isEmpty { //如有需要透传头像昵称请打开
// let profile = CallUserProfile()
// profile.id = userId
// profile.avatarURL = "https://xxxxx"
// profile.nickname = "\(userId)昵称"
// CallKitManager.shared.currentUserInfo = profile
//}
self?.userIdField.isHidden = true
self?.tokenField.isHidden = true
self?.loginButton.isHidden = true
}
}
```

### 步骤 4 配置监听器
### 步骤 3 配置监听器

你可以调用下面方法来监听 CallKit 中用户相关状态变更的事件和错误。

Expand Down Expand Up @@ -244,6 +218,32 @@ extension MainViewController: CallServiceListener {
| `CallEndReasonHandleOnOtherDevice` | 在其他设备接听 |
| `CallEndReasonRemoteDrop` | 通话中断 |

### 步骤 4 登录 IM

调用即时通讯 IM SDK 的 `login` 方法传入用户 ID 和 Token 登录 IM。

在生产环境中，为了安全考虑，你需要在你的应用服务器集成 [获取 App Token API](/document/server-side/easemob_app_token.html) 和 [获取用户 Token API](/document/server-side/easemob_user_token.html) 实现获取 Token 的业务逻辑，使你的用户从你的应用服务器获取 Token。

```Swift
ChatClient.shared().login(withUsername: userId, token: token) { [weak self] userId,error in
if let error = error {
self?.showCallToast(toast: "Login failed: \(error.errorDescription ?? "")")
} else {
self?.showCallToast(toast: "Login successful")
//if !userId.isEmpty { //如有需要透传头像昵称请打开
// let profile = CallUserProfile()
// profile.id = userId
// profile.avatarURL = "https://xxxxx"
// profile.nickname = "\(userId)昵称"
// CallKitManager.shared.currentUserInfo = profile
//}
self?.userIdField.isHidden = true
self?.tokenField.isHidden = true
self?.loginButton.isHidden = true
}
}
```

### 步骤 5 发起通话

#### 发起一对一通话
Expand Down
2 changes: 1 addition & 1 deletion docs/callkit/ios/product_overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
| :-------------- | :----- | :------- |
| - 一对一语音/视频通话 <br/>- 群组语音/视频通话（16 人及以下）：通话中邀请他人 <br/> - 自定义铃声：支持主叫、被叫、挂断、超时铃声<br/> - 打开/关闭画中画 <br/> - 自定义 UI 界面 | - 高画质/高音质音视频 <br/> - 离线推送<br/> - 通话质量检测<br/> - 全球互通<br/> - 弱网卡顿优化<br/> - 视频降噪| - 高质量音视频通话 <br/> - 完善的 UI 交互 <br/> - 支持多平台互联互通<br/> - 离线推送稳定且多样化 |

## 界面效果展示
## 界面效果

### 一对一视频通话

Expand Down
69 changes: 34 additions & 35 deletions docs/callkit/web/integration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,8 +123,41 @@ CallKit 组件或重要配置的说明如下：
| chatClient 属性 | 传入 `rootStore.client`，即 Provider 创建的 IM 连接实例。 |
| 信息提供者 | `userInfoProvider` 和 `groupInfoProvider` 用于获取用户和群组的显示信息。 |

### 步骤 3 配置监听器

### 步骤 3 登录 IM
CallKit 组件可以设置回调事件，实现监听 CallKit 内部状态和错误事件。

```tsx
<CallKit
ref={callKitRef} // CallKit 组件引用，用于调用组件方法
// === 事件回调 ===
onCallError={(error) => {}}
onEndCallWithReason={(reason) => {}}
/>
```

回调事件说明如下表所示：

| 回调事件 | 参数 | 描述 |
| --------------------- | ----------------------------------------------- | ------------------------------------------------ |
| `onCallError` | `(error: CallError)` | 通话过程中发生错误时触发，包含错误类型和详细信息 |
| `onReceivedCall` | `(callType, userId, ext)` | 收到通话邀请时触发 |
| `onCallStart` | `(videos: VideoWindowProps[])` | 通话开始时触发 |
| `onEndCallWithReason` | `(reason: string, callInfo: CallInfo)` | 通话结束原因回调 |
| `onRemoteUserJoined` | `(userId: string, callType)` | 远程用户加入通话时触发 |
| `onRemoteUserLeft` | `(userId: string, callType)` | 远程用户离开通话时触发 |
| `onInvitationAccept` | `(invitation: InvitationInfo)` | 用户接受邀请时触发 |
| `onInvitationReject` | `(invitation: InvitationInfo)` | 用户拒绝邀请时触发 |
| `onLayoutModeChange` | `(layoutMode: string)` | 布局模式变化时触发 |
| `onMinimizedChange` | `(minimized: boolean)` | 最小化状态变化时触发 |
| `onResize` | `(width, height, deltaX?, deltaY?, direction?)` | 窗口大小调整时触发 |
| `onDragStart` | `(startPosition: {x, y})` | 开始拖拽时触发 |
| `onDrag` | `(newPosition: {x, y}, delta: {x, y})` | 拖拽过程中触发 |
| `onDragEnd` | `(finalPosition: {x, y})` | 拖拽结束时触发 |
| `onRtcEngineCreated` | `(rtc: any)` | RTC 引擎创建完成时触发，可用于自定义配置 |
| `onAddParticipant` | `()` | 用户点击添加参与者按钮时触发 |

### 步骤 4 登录 IM

CallKit 内部依赖 IM SDK 进行信令交互，所以在使用 CallKit 之前需要先登录 IM。登录 IM 有两种方式可以选择：

Expand Down Expand Up @@ -237,40 +270,6 @@ const App = () => {
export default App;
```

### 步骤 4 配置监听器

CallKit 组件可以设置回调事件，实现监听 CallKit 内部状态和错误事件。

```tsx
<CallKit
ref={callKitRef} // CallKit 组件引用，用于调用组件方法
// === 事件回调 ===
onCallError={(error) => {}}
onEndCallWithReason={(reason) => {}}
/>
```

回调事件说明如下表所示：

| 回调事件 | 参数 | 描述 |
| --------------------- | ----------------------------------------------- | ------------------------------------------------ |
| `onCallError` | `(error: CallError)` | 通话过程中发生错误时触发，包含错误类型和详细信息 |
| `onReceivedCall` | `(callType, userId, ext)` | 收到通话邀请时触发 |
| `onCallStart` | `(videos: VideoWindowProps[])` | 通话开始时触发 |
| `onEndCallWithReason` | `(reason: string, callInfo: CallInfo)` | 通话结束原因回调 |
| `onRemoteUserJoined` | `(userId: string, callType)` | 远程用户加入通话时触发 |
| `onRemoteUserLeft` | `(userId: string, callType)` | 远程用户离开通话时触发 |
| `onInvitationAccept` | `(invitation: InvitationInfo)` | 用户接受邀请时触发 |
| `onInvitationReject` | `(invitation: InvitationInfo)` | 用户拒绝邀请时触发 |
| `onLayoutModeChange` | `(layoutMode: string)` | 布局模式变化时触发 |
| `onMinimizedChange` | `(minimized: boolean)` | 最小化状态变化时触发 |
| `onResize` | `(width, height, deltaX?, deltaY?, direction?)` | 窗口大小调整时触发 |
| `onDragStart` | `(startPosition: {x, y})` | 开始拖拽时触发 |
| `onDrag` | `(newPosition: {x, y}, delta: {x, y})` | 拖拽过程中触发 |
| `onDragEnd` | `(finalPosition: {x, y})` | 拖拽结束时触发 |
| `onRtcEngineCreated` | `(rtc: any)` | RTC 引擎创建完成时触发，可用于自定义配置 |
| `onAddParticipant` | `()` | 用户点击添加参与者按钮时触发 |

### 步骤 5 发起通话

#### 发起一对一通话
Expand Down
2 changes: 1 addition & 1 deletion docs/callkit/web/product_overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
| :-------------- | :----- | :------- |
| - 一对一语音/视频通话 <br/>- 群组语音/视频通话（16 人及以下）：通话中邀请他人 <br/> - 自定义铃声：支持主叫、被叫、挂断、超时铃声 <br/> - 自定义 UI 界面 | - 高画质/高音质音视频 <br/> - 通话质量检测<br/> - 全球互通<br/> - 弱网卡顿优化<br/> - 视频降噪| - 高质量音视频通话 <br/> - 完善的 UI 交互 <br/> - 支持多平台互联互通<br/> - 离线推送稳定且多样化 |

## 界面效果展示
## 界面效果

### 一对一视频通话

Expand Down