本文将引导您快速地完成 TUICallKit 组件的接入工作。跟随本文档,您可以在10分钟内完成接入,并最终获得一个具备完整用户界面以及音视频通话功能的应用程序。
视频通话 | 群组通话 |
![]() | ![]() |
环境搭建
Node.js 16 及更高版本
步骤 1. 开通服务
步骤 2. 下载 TUICallKit
1. 您可通过以下命令下载 @tencentcloud/call-uikit-react-native 组件。
yarn add @tencentcloud/call-uikit-react-native
2. 将
debug
目录复制到您的项目目录src/debug
,本地生成 userSig 时需要使用。cp -r node_modules/@tencentcloud/call-uikit-react-native/src/debug ./src
xcopy node_modules\\@tencentcloud\\call-uikit-react\\src\\debug .\\src\\debug /i /e
步骤 3. 初始化 TUICallKit 组件
您可以选择在
/src/App.tsx
文件引入示例代码。1. 引入 call-uikit 相关 API 对象。
import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 2.2
2. 调用 TUICallKit.login API 登录组件,需要在代码中填写
SDKAppID、SecretKey
两个参数。const handleLogin = async () => {const userId = "denny"; // Please replace with your userIdconst SDKAppID = 0; // Please replace with the SDKAppID obtained from step 1const SecretKey = "****"; // Please replace with the SDKSecretKey obtained from step 1const { userSig } = genTestUserSig({ userID: userId, SDKAppID, SecretKey });TUICallKit.login({sdkAppId: SDKAppID,userId,userSig,},(res) => {},(errCode, errMsg) => {});};
参数 | 类型 | 详情 |
userId | String | 客户根据自己的业务自定义用户 ID,只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。 |
SDKAppID | Number | |
SecretKey | String | |
userSig | String | 一种安全保护签名,用于对用户进行登录鉴权认证,确认用户是否真实,阻止恶意攻击者盗用您的云服务使用权。 |
userSig 说明:
开发环境:如果您正在本地跑通 Demo、开发调试,可以采用
debug
文件中的 genTestUserSig
(参考步骤3.2)函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量。生产环境:如果您的项目要发布上线,请采用 服务端生成 UserSig 的方式。
步骤 4. 拨打您的第一通电话
1. 调用 TUICallKit.call API 拨打电话。
//【3】Make a 1v1 video callconst call = async () => {await TUICallKit.call({userID: 'mike',type: MediaType.Video,});};
2. 在成功登录后,进行通话。
呼叫方(语音通话) | 被叫方(语音通话) |
![]() | ![]() |
常见问题
如果您的接入和使用中遇到问题,请参见 常见问题。
了解更多详情您可 腾讯云通信官方社群 进行咨询和反馈。