本文将介绍如何快速完成 TUICallKit 组件的接入,您将在10分钟内完成以下几个关键步骤,并最终得到一个包含完备 UI 界面的视频通话功能。
视频通话 | 语音通话 |
| |
单人通话 | 群组通话 |
| |
TUICallKit Demo 体验
如果您想要直接体验音视频通话,进入 Demo 体验页面。
如果您想要直接跑通一个新工程,请直接阅读 Web Demo 快速跑通。
开发环境要求
React ≥ v18.0。
Node.js 版本:Node.js ≥ 12.13.0(推荐使用官方 LTS 版本,npm 版本请与 node 版本匹配)。
Modern browser, supporting WebRTC APIs.
步骤一:开通服务
步骤二:创建项目
1. 如果您尚未安装 create-react-app ,可以在 terminal 或 cmd 中采用如下方式进行安装:
npm install -g create-react-app
2. 创建一个新的 React 项目,您可自行选择是否需要使用 ts 模板。
npx create-react-app tuicallkit-demo --template typescript
3. 创建项目完成后,切换到项目所在目录。
cd tuicallkit-demo
步骤三:下载 TUICallKit 组件
1. 通过 npm 方式下载 @tencentcloud/call-uikit-react组件并在项目中使用。
npm install @tencentcloud/call-uikit-react
2. 将 debug 目录复制到您的项目目录 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 组件
1. 如下代码示例中的 SDKAppID、SecretKey 、userID、callUserID 四个参数。
SDKAppID:在腾讯云创建的音视频应用 SDKAppID,参见 开通服务。
SecretKey:用户签名,参见 开通服务。
userID:主叫的 userID,字符串类型,只允许包含英文字母(a-z 和 A-Z)、数字(0-9)、连词符(-)和下划线(_)。
callUserID:被叫的 userID,需要已初始化存在。(demo 中的 callUserID,当有被叫时输入,无被叫可以不输入)。
2. 在
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 SDKAppIDSecretKey: "", // Replace with your SecretKeyisLogin: false,});const init = async () => {const { SDKAppID, SecretKey, userID } = userData;if (SDKAppID && SecretKey && userID) {try {await login(SDKAppID, SecretKey, 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;
步骤五:拨打您的第一通电话
1. 在终端输
npm run start
运行 tuicallkit-demo。2. 输入登录的 userID,点击 login 按钮,弹出 login success 表示初始化成功。
3. 输入被叫的 userID,点击 call 按钮,发起 1v1 视频通话。
更多特性
设置昵称、头像
群组通话
悬浮窗
自定义铃声
界面定制
常见问题
技术咨询