tencent cloud

npm install @trtc/calls-uikit-react

import { useState } from 'react';
import { TUICallKit, TUICallKitAPI } from "@trtc/calls-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 />
  </>
);

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('');
  
//【2】Initialize the TUICallKit component
const init = async () => {
  const { userSig } = GenerateTestUserSig.genTestUserSig({ 
    userID: callerUserID,
    SDKAppID,
    SecretKey: SDKSecretKey,
  });
  await TUICallKitAPI.init({
    userID: callerUserID,
    userSig,
    SDKAppID,
  });
  alert('TUICallKit init succeed');
}

import { TUICallKitAPI, CallMediaType } from "@trtc/calls-uikit-react";
//【3】Make a 1v1 video call
const call = async () => {
  await TUICallKitAPI.calls({
    userIDIDList: [calleeUserID],
    type: CallMediaType.VIDEO,
  });
};

import { TUICallKit, TUICallKitAPI } from "./components/TUICallKit/src/index";