tencent cloud

Feedback

React Native

Last updated: 2024-12-17 14:37:14
    This article will guide you through the process of integrating the TUICallKit component quickly. By following this documentation, you can complete the access work in just 10 minutes and ultimately obtain an application with a complete user interface as well as audio and video calling features.
    Video Call
    Group call
    
    
    
    
    
    

    Environment Preparations

    Node.js version 16+.
    two Mobile phone.

    Step 1. Activate the service

    Refer to Activate the Service to obtain SDKAppID, SDKSecretKey, which will be used as Mandatory Parameters in Initialize the TUICallKit.

    Step 2. Download the TUICallKit

    1. Download the @tencentcloud/call-uikit-react-native component.
    yarn add @tencentcloud/call-uikit-react-native
    2. Copy the debug directory to your project directory src/debug, it is necessary when generating userSig locally.
    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

    You can choose to import the sample code in the /src/App.tsx file.
    1. Import the call uikit.
    import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';
    import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 2.2
    2. using the TUICallKit.login API to log in to the component, you need to fill in SDKAppID, SDKSecretKey as two parameters in the code.
    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
    Unique identifier of the user, defined by you, it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens.
    SDKAppID
    Number
    The unique identifier for the audio and video application created in the Tencent RTC Console.
    SecretKey
    String
    The SDKSecretKey of the audio and video application created in the Tencent RTC Console.
    userSig
    String
    A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights.
    Explanation of userSig:
    Development environment: If you are running a demo locally and developing debugging, you can use the genTestUserSig (Refer to Step 3.2) function in the debug file to generate a `userSig`. In this method, SDKSecretKey is vulnerable to decompilation and reverse engineering. Once your key is leaked, attackers can steal your Tencent Cloud traffic.
    Production environment: If your project is going live, please use the Server-side Generation of UserSig method.

    Step 4. Make your first call

    1. using the TUICallKit.call API to make a call.
    //【3】Make a 1v1 video call
    const call = async () => {
    await TUICallKit.call({
    userID: 'mike',
    type: MediaType.Video,
    });
    };
    2. After both userID login to successfully, make a call..
    Caller initiates an audio call
    Callee receives an audio call request
    
    
    
    
    
    
    

    FAQs

    If you encounter any problems with access and use, please refer to FAQs.
    If you have any requirements or feedback, you can contact: info_rtc@tencent.com.
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support