tencent cloud


Web&H5 (React)

Last updated: 2024-05-27 15:05:59
    This article will guide you through the quick integration of the TUICallKit component. You will complete several key steps within 10 minutes, ultimately obtaining a video call feature with a complete UI interface.

    TUICallKit Demo Experience

    If you want to experience audio and video call, click to experience the Tencent RTC Demo.
    If you want to run a new project, please read Run Sample Demo.

    Environment preparations

    React ≥ v18.0.
    Node.js Version: Node.js ≥ v12.13.0 (the official LTS version is recommended, please ensure that the npm version matches the node version).
    Modern browser, supporting WebRTC APIs.

    Step 1. Activate the service

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

    Step 2. Create a React Project

    1. If you have not installed create-react-app yet, you can do so in the terminal or cmd using the following method. If you encounter installation issues, see FAQs.
    npm install -g create-react-app
    2. Create a fresh React project. It is at your discretion whether to employ a 'ts' template or not.
    npx create-react-app callkit-demo --template typescript
    3. After the project is created, go to the project directory.
    cd callkit-demo

    Step 3. Download the TUICallKit

    1. Download the @tencentcloud/call-uikit-react component.
    # cd callkit-demo
    npm install @tencentcloud/call-uikit-react
    2. Copy the debug directory to your project directory callkit-demo/src, it is necessary when generating userSig locally.
    cp -r node_modules/@tencentcloud/call-uikit-react/debug ./src
    xcopy node_modules\\@tencentcloud\\call-uikit-vue\\debug .\\src\\debug /i /e

    Step 4. Initialize the TUICallKit

    You can choose to import the sample code in the callkit-demo/src/App.tsx file.
    1. Call the TUICallKitServer.init API to log in to the component, you need to fill in SDKAppID, SDKSecretKey as two parameters in the code.
    import { useState } from 'react';
    import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-react";
    import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 3
    export default function App() {
    const SDKAppID = 0; // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number)
    const SDKSecretKey = ''; // TODO: Replace with your SDKSecretKey
    const [callerUserID, setCallerUserID] = useState('');
    const [calleeUserID, setCalleeUserID] = useState('');
    //【1】Initialize the TUICallKit component
    const init = async () => {
    const { userSig } = GenerateTestUserSig.genTestUserSig({
    userID: callerUserID,
    SecretKey: SDKSecretKey,
    await TUICallKitServer.init({
    userID: callerUserID,
    alert('TUICallKit init succeed');
    From the definition of User ID, it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens.
    The unique identifier for the audio and video application created in the Tencent RTC Console.
    The SDKSecretKey of the audio and video application created in the Tencent RTC Console.
    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 GenerateTestUserSig.genTestUserSig 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.
    2. Introduce the TUICallKit component, which contains the complete UI interaction during a call.
    return (
    <span> caller's ID: </span>
    <input type="text" placeholder='input caller userID' onChange={(event) => setCallerUserID(event.target.value)} />
    <button onClick={init}> step1. init </button> <br />
    <span> callee's ID: </span>
    <input type="text" placeholder='input callee userID' onChange={(event) => setCalleeUserID(event.target.value)} />
    <button onClick={call}> step2. call </button>
    {/* 【2】Import the TUICallKit component: Call interface UI */}
    <TUICallKit />

    Step 5. Make your first call

    1. using the TUICallKitServer.call API to make a call.
    //【3】Make a 1v1 video call
    const call = async () => {
    await TUICallKitServer.call({
    userID: calleeUserID,
    type: TUICallType.VIDEO_CALL,
    2. Enter npm run start / npm run dev to run the project.
    For local environment, please access under localhost protocol. For public network experience, please access under HTTPS protocol. For details, see Description of Network Access Protocol.
    3. Open two browser pages, enter different userID log in to (caller and callee), after both userID log in to successfully, click on step2. call to make a call.

    Additional Features


    If you encounter any problems with access and use, please refer to FAQs.

    Technical Consultation

    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