视频通话

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.5.2",
+    "@tencentcloud/call-uikit-react": "^3.3.9",
     "antd": "^5.23.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/App.tsx

@@ -2,6 +2,7 @@ import './App.css'
 import {BrowserRouter} from "react-router-dom";
 import CreateRouter from "./router";
 
+
 function App() {
 
   return (

src/debug/GenerateTestUserSig-es.js

@@ -0,0 +1,26 @@
+import LibGenerateTestUserSig from './lib-generate-test-usersig-es.min.js';
+
+let SDKAPPID = 1600070519;
+
+let SECRETKEY = 'c3100b8b932a1ffed2e2ab8172db85e5f8ed2577a015747b333759a1117af4df';
+
+/**
+ * Expiration time for the signature, it is recommended not to set it too short.
+ * Time unit: seconds
+ * Default time: 7 x 24 x 60 x 60 = 604800 = 7 days
+ */
+const EXPIRETIME = 604800;
+
+export function genTestUserSig({ userID, SDKAppID, SecretKey }) {
+  if (SDKAppID) SDKAPPID = SDKAppID;
+  if (SecretKey) SECRETKEY = SecretKey;
+  const generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
+  const userSig = generator.genTestUserSig(userID);
+
+  return {
+    SDKAppID: SDKAPPID,
+    userSig,
+  };
+}
+
+export default genTestUserSig;

src/pages/detail/index.tsx

@@ -1,6 +1,6 @@
-import {Link, useSearchParams} from "react-router-dom";
-import {useEffect, useState} from "react";
-import {Button} from "antd";
+import { Link, useSearchParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { Button } from "antd";
 
 function Index() {
   const [searchParams] = useSearchParams();
@@ -22,6 +22,12 @@ function Index() {
         <Button type={'primary'} className={'float-end'}>
           在线呼叫
         </Button>
+        <Link
+          to={`/tonghua`}
+          className=""
+        >
+          <span className="">11223</span>
+        </Link>
       </div>
     </>
   );

src/pages/tonghua/index.tsx

@@ -0,0 +1,63 @@
+import { TUICallKit, VideoDisplayMode, VideoResolution, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-react";
+import { useState } from 'react';
+// import * as GenerateTestUserSig from "../../../debug/GenerateTestUserSig-es"; // Refer to Step 3
+import * as GenerateTestUserSig from "../../debug/GenerateTestUserSig-es.js"; // Refer to Step 3
+<TUICallKit
+	videoDisplayMode={VideoDisplayMode.CONTAIN}
+	videoResolution={VideoResolution.RESOLUTION_1080P}
+	beforeCalling={handleBeforeCalling}
+	afterCalling={handleAfterCalling}
+/>
+
+
+
+function handleBeforeCalling(type: string, error: any) {
+	console.log("[TUICallkit Demo] handleBeforeCalling:", type, error);
+}
+function handleAfterCalling() {
+	console.log("[TUICallkit Demo] handleAfterCalling");
+}
+
+
+export default function ServiceGuide() {
+	const SDKAppID = 1600070519;        // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number）
+	const SDKSecretKey = 'c3100b8b932a1ffed2e2ab8172db85e5f8ed2577a015747b333759a1117af4df';   // 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 TUICallKitServer.init({
+			userID: callerUserID,
+			userSig,
+			SDKAppID,
+		});
+		alert('TUICallKit init succeed');
+	}
+	//【3】Make a 1v1 video call
+	const call = async () => {
+		await TUICallKitServer.call({
+			userID: calleeUserID,
+			type: TUICallType.AUDIO_CALL,
+		});
+	};
+	return (
+		<>
+			<span> 输入登录ID: </span>
+			<input type="text" placeholder='input caller userID' value={callerUserID} onChange={(event) => setCallerUserID(event.target.value)} />
+			<button onClick={init}> 用户1. 登录 </button> <br />
+			<span> 输入呼叫ID: </span>
+			<input type="text" placeholder='input callee userID' value={calleeUserID} onChange={(event) => setCalleeUserID(event.target.value)} />
+			<button onClick={call}> 用户2. 呼叫 </button>
+
+			{/* 【1】Import the TUICallKit component: Call interface UI */}
+			<TUICallKit />
+		</>
+	);
+}

src/router/index.tsx

@@ -1,6 +1,7 @@
 import {RouteObject, useRoutes} from "react-router-dom";
 import Home from "../pages/home";
 import Detail from "../pages/detail";
+import Tonghua from "../pages/tonghua";
 
 const routes:RouteObject[] = [
   {
@@ -10,6 +11,10 @@ const routes:RouteObject[] = [
   {
     path: '/detail',
     element: <Detail />
+  },
+  {
+    path: '/tonghua',
+    element: <Tonghua />
   }
 ]