# Telnyx WebRTC - React Native SDK 使用“@telnyx/react-voice-commons-sdk”库将实时语音通信构建到 React Native 应用程序（Android 和 iOS）中。 > **先决条件**：创建 WebRTC 凭据并使用 Telnyx 服务器端 SDK 生成登录令牌。请参阅服务器语言插件中的“telnyx-webrtc-*”技能（例如“telnyx-python”、“telnyx-javascript”）。 ## 特点 * **Reactive Streams** ：基于 RxJS 的状态管理 * **自动生命周期**：后台/前台处理 * **本机呼叫 UI** ：CallKit (iOS) 和 ConnectionService (Android) * **推送通知**：FCM (Android) 和 APNs/PushKit (iOS) * **TypeScript 支持**：完整类型定义 ## 安装 npm install @telnyx/react-voice-commons-sdk ** ** ## 基本设置从 '@telnyx/react-voice-commons-sdk' 导入 { TelnyxVoiceApp, createTelnyxVoipClient }; // 创建VoIP客户端实例 const voipClient = createTelnyxVoipClient({ enableAppStateManagement: true, // 自动后台/前台处理 debug: true, // 启用日志记录 }); 导出默认函数 App() { 返回（ <您的应用内容/> ）； } ** ** ## 身份验证 ### 基于凭据的登录从'@telnyx/react-voice-commons-sdk'导入{createCredentialConfig}； const config = createCredentialConfig('sip_用户名', 'sip_密码', { 调试：正确， PushNotificationDeviceToken: 'your_device_token', }); 等待 voipClient.login(config); ### 基于令牌的登录 (JWT) 从'@telnyx/react-voice-commons-sdk'导入{createTokenConfig}； const config = createTokenConfig('your_jwt_token', { 调试：正确， PushNotificationDeviceToken: 'your_device_token', }); 等待 voipClient.loginWithToken(config); ### 自动重连该库自动存储凭据以实现无缝重新连接： // 使用存储的凭据自动重新连接 const success = 等待 voipClient.loginFromStoredConfig(); 如果（！成功）{ // 没有存储身份验证，显示登录 UI } ** ** ## 反应式状态管理从 'react' 导入 { useEffect, useState }; 函数调用屏幕（）{ const [connectionState, setConnectionState] = useState(null); const [调用，setCalls] = useState([]); 使用效果（（）=> { // 订阅连接状态 const connSub = voipClient.connectionState$.subscribe((state) => { 设置连接状态（状态）； }); // 订阅活动通话 const CallsSub = voipClient.calls$.subscribe((activeCalls) => { setCalls(activeCalls); }); 返回（）=> { connSub.取消订阅(); 调用Sub.unsubscribe(); }; }, []); 返回（/*用户界面*/）； } ### 单独呼叫状态使用效果（（）=> { 如果（调用）{ const sub = call.callState$.subscribe((state) => { console.log('通话状态：', state); }); return () => sub.unsubscribe(); } }, [调用]); ** ** ## 拨打电话 const call = wait voipClient.newCall('+18004377950'); ** ** ## 接听电话来电通过推送通知和“TelnyxVoiceApp”包装器自动处理。自动显示本机呼叫 UI (CallKit/ConnectionService)。 ** ** ## 呼叫控制 // 接听来电等待呼叫.answer(); // 静音/取消静音等待呼叫.静音(); 等待呼叫.unmute(); // 保持/取消保持等待呼叫.hold(); 等待呼叫.unhold(); // 结束通话等待呼叫.hangup(); // 发送 DTMF 等待呼叫.dtmf('1'); ** ** ## 推送通知 - Android (FCM) ### 1\.将 `google-services.json` 放在项目根目录中 ### 2\.主要活动设置 // MainActivity.kt 导入 com.telnyx.react_voice_commons.TelnyxMainActivity MainActivity 类：TelnyxMainActivity() { 重写 fun onHandleIntent(intent: Intent) { super.onHandleIntent(意图) // 附加意图处理 } } ### 3\.后台消息处理程序 //index.js 或 App.tsx 从“@react-native-firebase/messaging”导入消息；从'@telnyx/react-voice-commons-sdk'导入{TelnyxVoiceApp}；消息传递（）。setBackgroundMessageHandler（async（remoteMessage）=> { 等待 TelnyxVoiceApp.handleBackgroundPush(remoteMessage.data); }); ** ** ## 推送通知 - iOS (PushKit) ### AppDelegate 设置 // AppDelegate.swift 导入推送工具导入 TelnyxVoiceCommons @UIApplicationMain 公共类AppDelegate：ExpoAppDelegate，PKPushRegistryDelegate { 公共覆盖函数应用程序（ _ 应用程序：UIApplication， didFinishLaunchingWithOptions launchOptions：[UIApplication.LaunchOptionsKey：任何]？ = 零 ) -> 布尔 { // 初始化VoIP推送注册 TelnyxVoipPushHandler.initializeVoipRegistration() 返回 super.application(应用程序, didFinishLaunchingWithOptions: launchOptions) } // VoIP 推送令牌更新公共功能pushRegistry（_注册表：PKPushRegistry， didUpdate PushCredentials：PKPushCredentials，对于类型：PKPushType) { TelnyxVoipPushHandler.shared.handleVoipTokenUpdate(pushCredentials，类型：类型) } // 收到 VoIP 推送公共功能pushRegistry（_注册表：PKPushRegistry， didReceiveIncomingPushWith 有效负载：PKPushPayload，对于类型：PKPushType，完成：@escaping () -> Void) { TelnyxVoipPushHandler.shared.handleVoipPush(payload, 类型: 类型, 完成: 完成) } } > **注意**：CallKit 集成由内部 CallBridge 组件自动处理。 ** ** ## 配置选项 ### createTelnyxVoipClient 选项选项|类型 |默认 |描述 ---|---|---|--- `启用应用程序状态管理` |布尔 |真实 |自动后台/前台处理 `调试` |布尔 |假 |启用调试日志记录 ### TelnyxVoiceApp 道具道具|类型 |描述 ---|---|--- `voipClient` | TelnyxVoip 客户端 | VoIP 客户端实例 `启用自动重新连接` |布尔 |断开连接时自动重新连接 `调试` |布尔 |启用调试日志记录 ** ** ## 存储密钥（自动管理）该库在内部管理这些 AsyncStorage 键： * `@telnyx_username` \- SIP 用户名 * `@telnyx_password` \- SIP 密码 * `@credential_token` \- JWT 令牌 * `@push_token` \- 推送通知令牌 > 您不需要手动管理这些。 ** ** ## 故障排除问题 |解决方案 ---|--- 双重登录 |使用具有自动重新连接功能的“TelnyxVoiceApp”时，不要手动调用“login()” 后台断开连接|检查“启用自动重新连接”设置安卓推送不工作 |验证 `google-services.json` 和 MainActivity 扩展 `TelnyxMainActivity` iOS 推送不起作用 |确保 AppDelegate 实现 `PKPushRegistryDelegate` 并调用 `TelnyxVoipPushHandler` 内存泄漏 |在 useEffect 清理中取消订阅 RxJS 可观察量音频问题 | iOS 音频由 CallBridge 处理； Android 检查 ConnectionService ### 清除存储的身份验证（高级）从 '@react-native-async-storage/async-storage' 导入 AsyncStorage；等待 AsyncStorage.multiRemove([ '@telnyx_用户名', '@telnyx_password', '@credential_token', '@push_token', ]); ** ** ## API 参考 ### TelnyxVoipClient # 类：TelnyxVoipClient React-voice-commons 模块的主要公共接口。此类充当整个模块的 Façade，提供了一个简化的 API，完全隐藏了底层的复杂性。它是开发人员使用react-voice-commons 包的唯一入口点。 TelnyxVoipClient 被设计为与状态管理无关，通过 RxJS 流公开所有可观察的状态。这使得开发人员可以自然地将其集成到他们选择的状态管理解决方案中。 ### 方法 ### 登录() > **登录**(`config`): `Promise`<`void`> ### 参数 ### 配置 [`CredentialConfig`]() ### 返回当发起连接尝试时完成的 Promise ### 登录WithToken() > **loginWithToken**(`config`): `Promise`<`void`> ### 参数 ### 配置 [`TokenConfig`]() ### 返回当发起连接尝试时完成的 Promise ### 注销() > **注销**(): `Promise`<`void`> ### 返回 ### 登录来自StoredConfig() > **loginFromStoredConfig**(): `Promise`<`boolean`> ### 返回 ### newCall() > **newCall**(`destination`, `callerName?`, `callerNumber?`, `customHeaders?`): `Promise`<[`Call`]()> ### 参数 ###目的地要呼叫的目的地号码或 SIP URI ### 来电者姓名？显示可选的呼叫者姓名 ### 来电号码？可选的来电显示号码 ### 自定义标题？通话中包含的可选自定义标头 ### 返回发送邀请后，通过 Call 对象完成的 Promise ###handlePushNotification() > **handlePushNotification**(`payload`): `Promise`<`void`> ### 参数 ### 有效负载推送通知负载 ### 返回 ### 禁用PushNotifications() > **禁用PushNotifications**(): `void` ### 返回 ### setCallConnecting() > **setCallConnecting**(`callId`): `void` ### 参数 ### 呼叫 ID 设置为连接状态的呼叫 ID ### 返回 ### findCallByTelnyxCall() > **findCallByTelnyxCall**(`telnyxCall`): [`Call`]() ### 参数 ### telnyxCall Telnyx调用对象查找 ### 返回 [`呼叫`]() ###queueAnswerFromCallKit() > **queueAnswerFromCallKit**(`customHeaders`): `void` ### 参数 ### 自定义标题包含在答案中的可选自定义标头 ### 返回 ###queueEndFromCallKit() > **queueEndFromCallKit**(): `void` ### 返回 ### 处置（） > **处置**(): `void` ### 返回 ### 打电话 # 类：调用表示具有反应式状态流的调用。此类包装了底层 Telnyx Call 对象，并为所有呼叫状态更改提供反应流，从而可以轻松与任何状态管理解决方案集成。 ### 方法 ### 答案() > **答案**(`customHeaders?`): `Promise`<`void`> ### 参数 ### 自定义标题？包含在答案中的可选自定义标头 ### 返回 ### 挂断() > **挂断**(`customHeaders?`): `Promise`<`void`> ### 参数 ### 自定义标题？挂断请求中包含的可选自定义标头 ### 返回 ### 保持（） > **hold**(): `Promise`<`void`> ### 返回 ### 简历() > **恢复**(): `Promise`<`void`> ### 返回 ### 静音() > **静音**(): `Promise`<`void`> ### 返回 ### 取消静音() > **取消静音**(): `Promise`<`void`> ### 返回 ### 切换静音() > **toggleMute**(): `Promise`<`void`> ### 返回 ### 设置连接() > **setConnecting**(): `void` ### 返回 ### 处置（） > **处置**(): `void` ### 返回 ### TelnyxCallState # 枚举：TelnyxCallState 表示 Telnyx 系统中的呼叫状态。该枚举提供了呼叫状态的简化视图，抽象了底层 SIP 呼叫状态的复杂性。 ### 枚举成员 ### 响铃 > **响铃** : `“响铃”` ### 连接 > **连接** : `“连接”` ### 活跃 > **活动** : `"活动"` ### 举行 > **举行** : `"举行"` ### 结束 > **结束** : `“结束”` ### 失败 > **失败** : `"失败"` ### 已删除 > **已删除** : `“已删除”` ### TelnyxConnectionState # 枚举：TelnyxConnectionState 表示与 Telnyx 平台的连接状态。该枚举提供了连接状态的简化视图，抽象了底层 WebSocket 状态的复杂性。 ### 枚举成员 ### 已断开连接 > **已断开连接** : `“已断开连接”` ### 连接 > **连接** : `“连接”` ### 已连接 > **已连接** : `"已连接"` ### 重新连接 > **重新连接** : `"重新连接"` ### 错误 > **错误**：`“错误”`

Telnyx Webrtc 客户端 React Native

包含技能