SDKAppID, SDKSecretKey
, which will be used as Mandatory Parameters in Initialize the TUICallKit.npm install @tencentcloud/call-uikit-react
debug
directory to your project directory src/debug
, it is necessary when generating userSig locally.cp -r node_modules/@tencentcloud/call-uikit-react/debug ./src
xcopy node_modules\\@tencentcloud\\call-uikit-react\\debug .\\src\\debug /i /e
/src/App.tsx
file.import { useState } from 'react';import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-react";import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 2.2
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>{/* 【1】Import the TUICallKit component: Call interface UI */}<TUICallKit /></>);
fill in
SDKAppID, SDKSecretKey
as two parameters in the code.const SDKAppID = 0; // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number)const SDKSecretKey = ''; // TODO: Replace with your SDKSecretKeyconst [callerUserID, setCallerUserID] = useState('');const [calleeUserID, setCalleeUserID] = useState('');//【2】Initialize the TUICallKit componentconst init = async () => {const { userSig } = GenerateTestUserSig.genTestUserSig({userID: callerUserID,SDKAppID,SecretKey: SDKSecretKey,});await TUICallKitServer.init({userID: callerUserID,userSig,SDKAppID,});alert('TUICallKit init succeed');}
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 | |
SDKSecretKey | String | |
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. |
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.//【3】Make a 1v1 video callconst call = async () => {await TUICallKitServer.call({userID: calleeUserID,type: TUICallType.VIDEO_CALL,});};
step1. init
to login (caller and callee). step2. call
to make a call. If you have a call problem, refer to FAQs.
Was this page helpful?