产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
准备工作（React Native）
功能预览
TUILiveKit 是一个功能全面的直播组件，集成后可快速实现以下功能模块
主播预览页 | 主播直播页 | 连麦管理页 | 观众观看页 |
 |  |  |  |
准备工作
开通服务
环境要求
Node.js：>= 20.0.0 (推荐使用官方 LTS 版本)。
React Native：>= 0.82.1。
Yarn：>= 4.11.0。
Android Studio（Android 开发）。
Xcode 15+（iOS 开发，仅限 macOS）。
CocoaPods 环境：已安装 CocoaPods 环境。如果您尚未安装，请参见 CocoaPods官网安装，或按以下步骤操作：
使用 gem 安装 CocoaPods：在终端中执行 sudo gem install cocoapods 命令进行安装。
提示：
sudo gem install cocoapods 安装过程中可能需要输入电脑密码，按提示输入管理员密码即可。设备：两部摄像头、麦克风正常的手机。
代码集成
步骤 1：下载源码
1. 克隆项目源码
git clone https://github.com/Tencent-RTC/TUIKit_ReactNative.git
2. 导入源码至您的项目
将源码中的
tuikit-atomic-x 文件夹，完整地拷贝至您的项目根目录下。将源码中的
live 文件夹，完整地拷贝至您的项目根目录下。3. 配置您项目的 package.json 文件
{// 您项目的配置"workspaces": ["tuikit-atomic-x","live",],}
4. 在您项目根目录下执行安装依赖操作
yarn install
5. 配置
App.tsx 文件TUILiveKit 国际化等相关逻辑需要依赖您项目的根节点才能生效，因此需要在您项目的 App.tsx 上进行挂载注意：
以下示例代码均为在您项目已有代码上的增量更新
import { CustomToastContainer, i18n, I18nextProvider } from 'react-native-tuikit-atomic-x';function App() {const renderPage = () => {// 您的业务逻辑};return (<I18nextProvider i18n={i18n}>......{renderPage()}<CustomToastContainer /></I18nextProvider>);}
步骤 2: 项目配置
1.在您项目的
Podfile 文件中添加 pod 'SVGAPlayer' 依赖。例如：target 'YourProjectTarget' do# 其他已有的 Pod 依赖...# 添加 pod 'SVGAPlayer' 依赖，礼物播放模块会使用到该能力pod 'SVGAPlayer', '~> 2.5.0'end
2.安装组件：
在终端中
cd 到 Podfile 文件所在的目录，然后执行以下命令安装组件。pod install
3.配置音视频权限
ios/YourApp/Info.plist<dict><!-- 相机权限 --><key>NSCameraUsageDescription</key><string>需要使用相机进行视频通话</string><!-- 麦克风权限 --><key>NSMicrophoneUsageDescription</key><string>需要使用麦克风进行音频通话</string><!-- 网络权限 --><key>NSAppTransportSecurity</key><dict><key>NSAllowsArbitraryLoads</key><true/></dict></dict>
配置音视频权限
android/app/src/main/AndroidManifest.xml<manifest xmlns:android="http://schemas.android.com/apk/res/android"><!-- 基础权限 --><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><!-- 音视频权限 --><uses-permission android:name="android.permission.CAMERA" /><uses-permission android:name="android.permission.RECORD_AUDIO" /><uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /><application><!-- 您的应用配置 --></application></manifest>
步骤 3：完成登录
import { useLoginState } from 'react-native-tuikit-atomic-x';const { login } = useLoginState();async function Login() {try {await login({sdkAppID: 0, // SDKAppID, 可以参考步骤 1 获取userID: '', // UserID, 可以参考步骤 1 获取userSig: '', // userSig, 可以参考步骤 1 获取});} catch (error) {console.error('登录失败:', error);}}
注意：
安全提醒: 出于安全考虑，强烈建议将
userSig 的计算逻辑放在您的服务端进行，避免将 SecretKey 暴露在前端代码中。您可以使用 控制台辅助工具 生成临时 userSig 进行调试。 更多信息参见 如何计算及使用 UserSig。GitHub 中的示例代码使用了 genTestUserSig 函数在本地计算 userSig 是为了更快地让您跑通当前的接入流程，但该方案会将您的 SecretKey 暴露在代码当中，这并不利于您后续升级和保护您的 SecretKey。参数说明如下表所示：参数 | 类型 | 说明 |
SDKAppID | int | |
UserID | String | 当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突，请勿使用 1、123 等简单 ID。 |
userSig | String | 用于TRTC 鉴权的票据。请注意： 开发环境：您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 userSig 或者 通过 UserSig 辅助工具 生成临时的 UserSig。生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参考 服务端生成 UserSig。 |
步骤 4：功能体验
恭喜您，现在您已经成功集成了视频直播组件并完成了登录。接下来，您可以开始主播开播、观众观看或实现其他直播功能，具体功能细节可参考下表。
常见问题
iOS 项目编译失败怎么办？
React Native 0.60+ 支持自动链接，但如果遇到问题：
# 清理并重新构建npx react-native clean
Android 项目编译失败怎么办？
检查 gradle 配置：
// android/build.gradlebuildscript {ext {minSdkVersion = 24compileSdkVersion = 36targetSdkVersion = 36ndkVersion = "27.1.12297006"kotlinVersion = "2.1.20"}}
文档反馈