Web&H5 (React)

npm install -g create-react-app

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

cd tuicallkit-demo

npm install @tencentcloud/call-uikit-react

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