tencent cloud

文档反馈

React Native

最后更新时间:2024-12-17 14:37:42
    本文将引导您快速地完成 TUICallKit 组件的接入工作。跟随本文档,您可以在10分钟内完成接入,并最终获得一个具备完整用户界面以及音视频通话功能的应用程序。
    视频通话
    群组通话
    
    
    
    
    
    

    环境搭建

    Node.js 16 及更高版本
    两部手机

    步骤 1. 开通服务

    请参见 开通服务,获取 SDKAppID、SecretKey,它们将在 初始化 TUICallKit 组件 作为必填参数使用。

    步骤 2. 下载 TUICallKit

    1. 您可通过以下命令下载 @tencentcloud/call-uikit-react-native 组件.
    yarn add @tencentcloud/call-uikit-react-native
    2. debug目录复制到您的项目目录src/debug,本地生成 userSig 时需要使用。
    MacOS
    Windows
    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

    Step 3. Login the 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 userId
    const SDKAppID = 0; // Please replace with the SDKAppID obtained from step 1
    const SecretKey = "****"; // Please replace with the SDKSecretKey obtained from step 1
    const { userSig } = genTestUserSig({ userID: userId, SDKAppID, SecretKey });
    
    TUICallKit.login(
    {
    sdkAppId: SDKAppID,
    userId,
    userSig,
    },
    (res) => {},
    (errCode, errMsg) => {}
    );
    };
    Parameter
    Type
    Note
    userId
    String
    客户根据自己的业务自定义用户 ID,只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。
    SDKAppID
    Number
    实时音视频 TRTC 控制台创建的音视频应用的唯一标识 SDKAppID。
    SecretKey
    String
    实时音视频 TRTC 控制台创建的音视频应用的唯一标识 SDKAppID。
    userSig
    String
    一种安全保护签名,用于对用户进行登录鉴权认证,确认用户是否真实,阻止恶意攻击者盗用您的云服务使用权。
    userSig 说明:
    如果您正在本地跑通 Demo、开发调试,可以采用 debug 文件中的 genTestUserSig(参考步骤3.2)函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量。
    生产环境:如果您的项目要发布上线,请采用 服务端生成 UserSig 的方式。

    步骤 4. 拨打您的第一通电话

    1. 调用 TUICallKit.call API 拨打电话。
    //【3】Make a 1v1 video call
    const call = async () => {
    await TUICallKit.call({
    userID: 'mike',
    type: MediaType.Video,
    });
    };
    2. 在成功登录后,进行通话。
    呼叫方(语音通话)
    被叫方(语音通话)
    
    
    
    
    
    

    FAQs

    如果您的接入和使用中遇到问题,请参见 常见问题
    如果有任何需要或者反馈,您可以联系:info_rtc@tencent.com 。
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持