tencent cloud

npm install -g create-react-app

npx create-react-app callkit-demo --template typescript

cd callkit-demo

# cd callkit-demo
npm install @tencentcloud/call-uikit-react

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,
      SDKAppID,
      SecretKey: SDKSecretKey,
    });
    await TUICallKitServer.init({
      userID: callerUserID,
      userSig,
      SDKAppID,
    });
    alert('TUICallKit init succeed');
  }
}

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 />
  </>
);

//【3】Make a 1v1 video call
const call = async () => {
  await TUICallKitServer.call({
    userID: calleeUserID,
    type: TUICallType.VIDEO_CALL,
  });
};