Menu

Web&H5 (React)

This article will guide you on how to quickly integrate the TUICallKit component. You will complete the following key steps within 10 minutes and ultimately obtain a video calling feature with a complete UI interface.
Desktop
Mobile
Video Call
Audio Call







1-on-1 call
Group call









TUICallKit Demo Experience

If you would like to experience audio and video calls directly, please enter the Demo experience page.
If you would like to quickly set up a new project, please refer toWeb Demo Quick Start.

Environment preparations

React ≥ v18.0.
Node version: node.js ≥ 16.0.0 (npm version should match the node version).
TUIKit component link: @tencentcloud/call-uikit-react.

Step 1: Activate TRTC Service

TUICallKit is a video calling component built on top of Tencent Cloud's Instant Messaging (IM) and Real-Time Communication (TRTC) paid PaaS services. You can follow the steps below to activate the relevant services and experience a 7-day free trial.
1. Log in to the TRTC Console and click on "Create application". Enter your application name in the dialog box and click "Create".



2. When creating the application, select "Free Trial" to experience the calling feature of TUICallKit for free.



3. After completing the application creation, you will be redirected to the application details page. The SDKAppID and SDKSecretKey obtained here will be used for initializing the TUICallKit component.




Step 2: Create a React Project

1. Create a new React project. You can choose whether or not to use the TypeScript (ts) template.
npx create-react-app tuicallkit-demo --template typescript
2. Once the project is created, navigate to the directory where the project is located.
cd tuicallkit-demo

Step 3: Download the TUICallKit Component

1. Download the @tencentcloud/call-uikit-react component using npm and use it in your project.
npm install @tencentcloud/call-uikit-react
2. Copy the "debug" directory to your project directory, specifically totuicallkit-demo/src.
MacOS
Windows
cp -r node_modules/@tencentcloud/call-uikit-react/debug ./src
xcopy node_modules\@tencentcloud\call-uikit-vue\debug .\src /i /e

Step 4: Integrate the TUICallKit Component

1. In the code example below, there are four parameters: SDKAppID, SDKSecretKey, userID, and callUserID.
SDKAppID: The SDKAppID of the audio/video application created in Tencent Cloud. Refer to the "Activate TRTC Service" step.
SDKSecretKey: User signature. Refer to the "Activate TRTC Service" step.
userID: The caller's userID, a string that can only contain alphanumeric characters (a-z and A-Z), numbers (0-9), hyphens (-), and underscores (_).
callUserID: The callee's userID, which should already be initialized. (In the demo, enter the callUserID if there is a callee; if not, you can leave it blank.)
2. Import the following code in tuicallkit-demo/src/App.tsx.
import React, { useState, useMemo } from "react";
// @ts-ignore
import { TUICallKit, TUICallKitServer, TUIGlobal } from "@tencentcloud/call-uikit-react";
import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";

function App() {
const [userData, setUserData] = useState({
userID: "",
callUserID: "",
SDKAppID: 0, // Replace with your SDKAppID
SDKSecretKey: "", // Replace with your SDKSecretKey
isLogin: false,
});
const init = async () => {
const { SDKAppID, SDKSecretKey, userID } = userData;
if (SDKAppID && SDKSecretKey && userID) {
try {
await login(SDKAppID, SDKSecretKey, userID);
setUserData((prevState) => ({
...prevState,
isLogin: true as boolean,
}));
alert("[TUICallKit] login success.");
} catch (error) {
console.error(error);
alert("[TUICallKit] login failed.");
}
} else {
alert("[TUICallKit] Please fill in the SDKAppID, userID and SecretKey.");
}
};
const login = async (SDKAppID: any, SecretKey: any, userId: any) => {
const { userSig } = GenerateTestUserSig.genTestUserSig({
userID: userId,
SDKAppID: Number(SDKAppID),
SecretKey: SecretKey,
});
await TUICallKitServer.init({ //【1】Initialize the TUICallKit component
userID: userId,
userSig,
SDKAppID: Number(SDKAppID),
});
};
const call = async () => {
await TUICallKitServer.call({ userID: userData.callUserID, type: 2 }); //【2】Make a 1v1 video call
};
const callKitStyle = useMemo(() => {
if (TUIGlobal.isPC) {
return { width: '960px', height: '630px', margin: '0 auto' };
}
return { width: '100%', height: window.innerHeight };
}, [TUIGlobal.isPC]);

return (
<>
<TUICallKit style={callKitStyle}></TUICallKit>
<div style={{ width: 350, margin: '0 auto' }}>
<h4> {userData.isLogin ? "Call Panel" : "Login Panel"} </h4>
<input
value={userData.isLogin ? userData.callUserID : userData.userID}
onChange={(value) => {
const key = userData.isLogin ? "callUserID" : "userID";
setUserData((prevState) => ({
...prevState,
[key]: value.target.value,
}));
}}
style={{ width: 230, margin: '0 auto' }}
placeholder={
userData.isLogin ? "Please enter callee's userID" : "Please enter your userID"
}
/>
<button onClick={userData.isLogin ? call : init}> {userData.isLogin ? "call" : "login"} </button>
<p style={{margin: '10'}}> {userData.isLogin ? `Your userID: ${userData.userID}` : ""} </p>
</div>
</>
);
}
export default App;

Step 5: Make Your First Call

Run npm run start in the terminal to start the tuicallkit-demo.
Note:For local environments, please access it using the localhost protocol. Refer to the Network Access Protocol Instructions for more details.
Enter your login userID and click the "login" button. If a message saying "[TUICallKit] login success" pops up, it means the initialization was successful.



Enter the userID of the callee and click the "call" button to initiate a 1v1 video call.




TUICallKit More Features

1. Set User Avatar and Nickname

If you need to set the nickname or avatar for the current user, you can use the following interface to update them.
try {
await TUICallKitServer.setSelfInfo({ nickName: "jack", avatar: "http://xxx" });
} catch (error: any) {
alert(`[TUICallKit] setSelfInfo failed. Reason: ${error}`);
}

2. Customize Incoming Ringtone

Customize the incoming ringtone for the user.
Only local MP3 files are supported, and you need to ensure that the file directory is accessible to the application.
The ringtone media file must be placed in the "public" directory.
try {
await TUICallKitServer.setCallingBell(filePath?: string)
} catch (error: any) {
alert(`[TUICallKit] setCallingBell failed. Reason: ${error}`);
}

3. Group Call

To initiate a group call, you need to pass the groupID as a parameter. The groupID can be generated using the group interface of @tencentcloud/chat. Suggestion: Initiate a group call in the group of IM TUIKit.
For generating the groupID, please refer to the documentation on How to generate a groupID in a group call.
import TIM from "@tencentcloud/chat"; // npm i @tencentcloud/chat
import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";

const userIDList: string[] = ['user1', 'user2'];
async function groupCall() {
const groupID: string = await createGroupID();
try {
await TUICallKitServer.groupCall({
userIDList,
groupID,
type: TUICallType.VIDEO_CALL,
});
} catch (error: any) {
alert(`[TUICallKit] groupCall failed. Reason:${error}`);
}
}

async function createGroupID() {
const tim = TIM.create({ SDKAppID });
const memberList: any[] = userIDList.map(userId => ({ userID: userId }));
const res = await tim.createGroup({
type: TIM.TYPES.GRP_PUBLIC, // Must be a public group
name: 'WebSDK',
memberList
});
return res.data.group.groupID;
}

4. Callback Events for Call Status

If your business requires listening to the status of a call, such as when a call starts, ends, or events that occur during the call (detailed in TUICallEvent), details are as follows:
import { TUICallEvent } from 'tuicall-engine-webrtc';

let handleOnCallBegin = function(event) {
console.log(event);
};
tuiCallEngine.on(TUICallEvent.ON_CALL_BEGIN, handleOnCallBegin);
tuiCallEngine.off(TUICallEvent.ON_CALL_BEGIN, handleOnCallBegin);

5. Floating Window & Full Screen

The allowedMinimized attribute can control the activation of the minimized floating window.
The allowedFullScreen attribute can regulate the activation of the full-screen call window.
<TUICallKit
allowedMinimized={true}
allowedFullScree={true}
/>

6. Resolution and Fill Mode

The TUICallKit component provides numerous feature switches, allowing for selective enabling or disabling as needed. For specifics, refer to the TUICallKit property introduction.
VideoDisplayMode: Display mode of the frame.
VideoResolution: Call resolution.
import { VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-react";
<TUICallKit
videoDisplayMode={VideoDisplayMode.CONTAIN}
videoResolution={VideoResolution.RESOLUTION_1080P}
/>

7. Component Callback Events

The TUICallKit component provides call status callbacks that can be used by the business side to implement additional interaction logic. For more details, please refer to the TUICallKit property introduction.
beforeCalling: Executed prior to the commencement of the call.
afterCalling: Executed upon the completion of the call.
<template>
<script>
<TUICallKit
:beforeCalling="beforeCalling"
:afterCalling="afterCalling"
/>
function beforeCalling() {
console.log("[TUICallKit Demo] beforeCalling");
}
function afterCalling() {
console.log("[TUICallKit Demo] afterCalling");
}

FAQs

1. What should I do if I receive the error message "The package you purchased does not support this ability"?

If you encounter the aforementioned error message, it may be due to the expiration or non-activation of the audio and video call package for your current application. Please refer to Activate the TRTC Service, claim or activate the audio and video calling capability to continue using the TUICallKit.

2. How do I procure a package?

Please follow the link Purchase Official Version.

3. How can I generate UserSig?

UserSig is a type of security signature designed by Tencent Cloud for its cloud services. It serves as a login credential, derived from the encrypted combination of information such as SDKAppID and SecretKey.
Method 1: Accessing from the control panel, refer to How to Obtain a Temporary UserSig.
Method 2: Deploying a temporary generation script.
Warning:
This approach involves configuring the SecretKey within the front-end code. Regrettably, in this method, the SecretKey can be easily decrypted through reverse engineering. In the event of your key being exposed, attackers can usurp your Tencent Cloud traffic. Therefore, this method is only suitable for local functional debugging. For a production environment, please refer to Method 3.
For easier initial debugging, GenerateTestUserSig-es.js in the genTestUserSig(params) function can be used temporarily to calculate userSig, for instance:
import { genTestUserSig } from "@tencentcloud/call-uikit-react/debug/GenerateTestUserSig-es.js";
const { userSig } = genTestUserSig({ userID: "Alice", SDKAppID: 0, SecretKey: "YOUT_SECRETKEY" });
Method Three:Use in official environment.
The correct method of issuing UserSig is to integrate the calculation code of UserSig into your server-side, providing project-specific interfaces. When UserSig is needed, your project can launch requests to the business server to obtain dynamic UserSig. For detailed information, please see Generating UserSig on Server-side.

4. How is the groupID generated in group calls?

The generation of groupID requires integration of the @tencentcloud/chat package. For specifics, refer to the createGroup API; below is an example of the code to generate groupID.
Note:
Please find the details on group creation in IM Group Management, or you can directly use IM TUIKit, a one-stop integration for chat, call, etc.
TUICallKit currently does not support initiating multi-person video calls that are not part of a group.
import TIM from "@tencentcloud/chat"; // npm i @tencentcloud/chat

const userIDList: string[] = ['user1', 'user2', 'xxx']; // group member
async function createGroupID() {
const tim = TIM.create({ SDKAppID });
const memberList: any[] = userIDList.map(userId => ({ userID: userId }));
const res = await tim.createGroup({
type: TIM.TYPES.GRP_PUBLIC, // must be a public group
name: 'WebSDK',
memberList
});
return res.data.group.groupID;
}

5. How can I create a userID?

Signing in once with userID and userSig will automatically create the user.
Create and get through the Instant Messaging Console.




Exchange and Feedback

If you have any requirements or feedback, contact colleenyu@tencent.com.