Video Call | Audio Call |
| |
One-on-one call | Group call |
| |
npm install -g create-react-app
npx create-react-app tuicallkit-demo --template typescript
cd tuicallkit-demo
npm install @tencentcloud/call-uikit-react
tuicallkit-demo/src
.cp -r node_modules/@tencentcloud/call-uikit-react/debug ./src
xcopy node_modules\\@tencentcloud\\call-uikit-react\\debug .\\src\\debug /i /e
tuicallkit-demo/src/App.tsx
.import React, { useState, useMemo } from "react";// @ts-ignoreimport { 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 SDKAppIDSDKSecretKey: "", // Replace with your SDKSecretKeyisLogin: 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 componentuserID: 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><inputvalue={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;
npm run start
in the terminal to run tuicallkit-demo.
Was this page helpful?