产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
React Native
本文将介绍如何快速接入 TUICallKit 组件。您可以在 10 分钟内完成以下关键步骤，最终获得一个功能完备的音视频通话界面。
准备工作
环境要求
Node.js 16 及更高版本
设备需满足：Android 5.0 及以上的手机设备。
开通服务
快速接入
步骤 1. 导入组件
1. 您可通过以下命令下载 @tencentcloud/call-uikit-react-native 组件.
yarn add @tencentcloud/call-uikit-react-native
2. 将 debug 目录复制到您的工程中，您可以通过
SDKAppID 、SecretKey本地生成 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
步骤 2. 登录
您可以选择在
App.tsx 中引入 login 示例代码，它的作用是 TUI 组件的登录。这一步骤至关重要，只有在成功登录之后，您才能正常使用 TUICallKit 提供的各项功能。login
import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";const handleLogin = async () => {try {const sdkAppID = 0; // 请替换为在控制台得到的 SDKAppIDconst secretKey = ''; // 请替换为在控制台得到的 SecretKeyconst userId = 'jack' // 请替换为您的 UserIdconst { userSig } = genTestUserSig({SDKAppID: sdkAppID,SecretKey: secretKey,userID: loginUserID,});await TUICallKit.login({sdkAppId: sdkAppID,userId: loginUserID,userSig,});console.log('login success');} catch (error) {console.error('login fail:', error);}};
参数 | 类型 | 说明 |
userId | String | 只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。 |
SDKAppId | int | |
SecretKey | String | |
userSig | String | 一种安全保护签名，用于对用户进行登录鉴权认证，确认用户是否真实，阻止恶意攻击者盗用您的云服务使用权。 |
说明：
开发环境：如果您在本地开发调试阶段，可以采用本地
GenerateTestUserSig.genTestSig函数生成 userSig。该方法中 secretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。生产环境：如果您的项目要发布上线，请采用 服务端生成 UserSig 的方式。
步骤 3. 设置昵称和头像[可选]
首次登录的用户没有头像和昵称信息，您可以通过
setSelfInfo 接口设置头像和昵称。setSelfInfo
import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';const setSelfInfo = () => {const nickName = 'mick'; // 需要设置的昵称const avatar = 'https:/****/user_avatar.png'; // 需要设置的头像 URLTUICallKit.setSelfInfo(nickName,avatar,() => {console.log('setSelfInfo success.');},(errCode, errMsg) => {console.error('setSelfInfo fail:', errCode, errMsg);});};
参数 | 类型 | 说明 |
nickName | String | 需要设置的昵称。 |
avatar | String | 需要设置的头像 url。 |
步骤 4. 拨打您的第一通电话
拨打方可以通过调用
calls 函数，并指定通话类型和被叫方的 userID，来发起语音或视频通话。calls 接口同时支持一对一通话和多人通话。当 userIDList 中包含一个 userID 时，为一对一通话；当 userIDList 包含多个 userID 时，则为多人通话。calls
import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';const calls = async () => {try {const userIdList: string[] = ['lee', 'jane']; // 被叫列表const mediaType = MediaType.Audio // 通话类型await TUICallKit.calls({userIdList: userIdList,mediaType,});console.log('calls success');} catch (error) {console.error('calls fail:', error);}};
参数 | 类型 | 含义 |
userIdList | Array<String> | 目标用户的 userId 列表。 |
mediaType | 通话的媒体类型，例如视频通话、语音通话。 MediaType.Audio ：语音通话。 MediaType.Video ：视频通话。 | |
callParams | 通话扩展参数，例如：房间号、通话邀请超时时间，离线推送自定义内容等。 |
步骤5：接听通话
接听端完成登录后，拨打端发起通话，接收端就可以收到通话邀请，同时伴随铃声和振动。
更多功能
语言设置
支持的语言：目前支持简体中文、繁体中文、英文、日文和阿拉伯语。
切换语言：TUICallKit 默认语言与手机系统保持一致 。如果需要切换语言，可以使用
setLanguage 方法设置语言，以设置语言为英文示例代码如下。 setLanguage
import { Language } from '@tencentcloud/call-uikit-react-native';TUICallKit.setLanguage(Language.EN);
参数 | 类型 | 含义 |
language | string | 设置的语言： Language.ZH_CN：简体中文。 Language.ZH_TW：繁体中文。 Language.EN：英文。 Language.AR：阿拉伯语。 |
说明：
如需设置其他语言，请联系我们（info_rtc@tencent.com）获取协助。
铃声设置
您可通过以下方式设置默认铃声、来电静音模式、离线推送铃声：
设置默认铃声：通过
setCallingBell 接口设置被叫端收到的来电铃声。setCallingBell
import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';const setCallingBell = () => {const filePath = 'path/to/your/bell.mp3'; // 铃声文件的路径TUICallKit.setCallingBell(filePath);};
详情：这里仅限传入本地文件地址，需要确保该文件目录是应用可以访问的。铃声设置后与设备绑定，更换用户，铃声依旧会保留原设置。如需恢复默认铃声，filePath 传空即可。
参数 | 类型 | 说明 |
filePath | String | 铃声文件的路径。 |
来电静音模式：您可以通过
enableMuteMode 设置静音模式。enableMuteMode
import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';TUICallKit.enableMuteMode(true);
详情：开启后，收到通话请求，不会播放来电铃声。
常见问题
交流与反馈
如果有任何需要或者反馈，您可以联系：info_rtc@tencent.com 。
文档反馈