@@ -123,8 +123,41 @@ CallKit 组件或重要配置的说明如下：
123123| chatClient 属性 | 传入 ` rootStore.client ` ，即 Provider 创建的 IM 连接实例。 |
124124| 信息提供者 | ` userInfoProvider ` 和 ` groupInfoProvider ` 用于获取用户和群组的显示信息。 |
125125
126+ ### 步骤 3 配置监听器
126127
127- ### 步骤 3 登录 IM
128+ CallKit 组件可以设置回调事件，实现监听 CallKit 内部状态和错误事件。
129+
130+ ``` tsx
131+ <CallKit
132+ ref = { callKitRef } // CallKit 组件引用，用于调用组件方法
133+ // === 事件回调 ===
134+ onCallError = { (error ) => {}}
135+ onEndCallWithReason = { (reason ) => {}}
136+ />
137+ ```
138+
139+ 回调事件说明如下表所示：
140+
141+ | 回调事件 | 参数 | 描述 |
142+ | --------------------- | ----------------------------------------------- | ------------------------------------------------ |
143+ | ` onCallError ` | ` (error: CallError) ` | 通话过程中发生错误时触发，包含错误类型和详细信息 |
144+ | ` onReceivedCall ` | ` (callType, userId, ext) ` | 收到通话邀请时触发 |
145+ | ` onCallStart ` | ` (videos: VideoWindowProps[]) ` | 通话开始时触发 |
146+ | ` onEndCallWithReason ` | ` (reason: string, callInfo: CallInfo) ` | 通话结束原因回调 |
147+ | ` onRemoteUserJoined ` | ` (userId: string, callType) ` | 远程用户加入通话时触发 |
148+ | ` onRemoteUserLeft ` | ` (userId: string, callType) ` | 远程用户离开通话时触发 |
149+ | ` onInvitationAccept ` | ` (invitation: InvitationInfo) ` | 用户接受邀请时触发 |
150+ | ` onInvitationReject ` | ` (invitation: InvitationInfo) ` | 用户拒绝邀请时触发 |
151+ | ` onLayoutModeChange ` | ` (layoutMode: string) ` | 布局模式变化时触发 |
152+ | ` onMinimizedChange ` | ` (minimized: boolean) ` | 最小化状态变化时触发 |
153+ | ` onResize ` | ` (width, height, deltaX?, deltaY?, direction?) ` | 窗口大小调整时触发 |
154+ | ` onDragStart ` | ` (startPosition: {x, y}) ` | 开始拖拽时触发 |
155+ | ` onDrag ` | ` (newPosition: {x, y}, delta: {x, y}) ` | 拖拽过程中触发 |
156+ | ` onDragEnd ` | ` (finalPosition: {x, y}) ` | 拖拽结束时触发 |
157+ | ` onRtcEngineCreated ` | ` (rtc: any) ` | RTC 引擎创建完成时触发，可用于自定义配置 |
158+ | ` onAddParticipant ` | ` () ` | 用户点击添加参与者按钮时触发 |
159+
160+ ### 步骤 4 登录 IM
128161
129162CallKit 内部依赖 IM SDK 进行信令交互，所以在使用 CallKit 之前需要先登录 IM。登录 IM 有两种方式可以选择：
130163
@@ -237,40 +270,6 @@ const App = () => {
237270export default App ;
238271```
239272
240- ### 步骤 4 配置监听器
241-
242- CallKit 组件可以设置回调事件，实现监听 CallKit 内部状态和错误事件。
243-
244- ``` tsx
245- <CallKit
246- ref = { callKitRef } // CallKit 组件引用，用于调用组件方法
247- // === 事件回调 ===
248- onCallError = { (error ) => {}}
249- onEndCallWithReason = { (reason ) => {}}
250- />
251- ```
252-
253- 回调事件说明如下表所示：
254-
255- | 回调事件 | 参数 | 描述 |
256- | --------------------- | ----------------------------------------------- | ------------------------------------------------ |
257- | ` onCallError ` | ` (error: CallError) ` | 通话过程中发生错误时触发，包含错误类型和详细信息 |
258- | ` onReceivedCall ` | ` (callType, userId, ext) ` | 收到通话邀请时触发 |
259- | ` onCallStart ` | ` (videos: VideoWindowProps[]) ` | 通话开始时触发 |
260- | ` onEndCallWithReason ` | ` (reason: string, callInfo: CallInfo) ` | 通话结束原因回调 |
261- | ` onRemoteUserJoined ` | ` (userId: string, callType) ` | 远程用户加入通话时触发 |
262- | ` onRemoteUserLeft ` | ` (userId: string, callType) ` | 远程用户离开通话时触发 |
263- | ` onInvitationAccept ` | ` (invitation: InvitationInfo) ` | 用户接受邀请时触发 |
264- | ` onInvitationReject ` | ` (invitation: InvitationInfo) ` | 用户拒绝邀请时触发 |
265- | ` onLayoutModeChange ` | ` (layoutMode: string) ` | 布局模式变化时触发 |
266- | ` onMinimizedChange ` | ` (minimized: boolean) ` | 最小化状态变化时触发 |
267- | ` onResize ` | ` (width, height, deltaX?, deltaY?, direction?) ` | 窗口大小调整时触发 |
268- | ` onDragStart ` | ` (startPosition: {x, y}) ` | 开始拖拽时触发 |
269- | ` onDrag ` | ` (newPosition: {x, y}, delta: {x, y}) ` | 拖拽过程中触发 |
270- | ` onDragEnd ` | ` (finalPosition: {x, y}) ` | 拖拽结束时触发 |
271- | ` onRtcEngineCreated ` | ` (rtc: any) ` | RTC 引擎创建完成时触发，可用于自定义配置 |
272- | ` onAddParticipant ` | ` () ` | 用户点击添加参与者按钮时触发 |
273-
274273### 步骤 5 发起通话
275274
276275#### 发起一对一通话
0 commit comments