使用 React、Tailwind 和 Zegocloud 构建视频通话应用程序

Source: Dev.to

Introduction

大家好，最近我构建了一个完整的视频通话应用，惊讶于使用 ZEGOCLOUD 服务只需几分钟就能快速搭建。

ZEGOCLOUD 提供强大的 SDK 和 UIKit，帮你处理实时通信的所有复杂部分。你不必从零实现视频流、设备管理或连接逻辑，只需设计一个基础 UI，集成它们的 API，应用即可直接使用。

在本指南中，我将一步一步带你使用 ZEGOCLOUD 构建自己的视频通话应用。

Step 1 – Sign up on ZEGOCLOUD

访问 ZEGOCLOUD 官网。

Step 2 – Create a Project

1. 点击 Create Your Project。
2. 选择 Voice and Video Call 作为应用类型。

Step 3 – Name Your Project

输入项目名称并点击 Start with UIKits。

Step 4 – Select Platform

选择 For Web，然后点击 Save & Start to integrate。

Step 5 – Retrieve Credentials

从刚创建的项目中复制 AppID 和 AppSecret。

Step 6 – Install Development Tools

• VS Code
• Node.js

Step 7 – Set Up a New Workspace

1. 在 VS Code 中打开一个新窗口。
2. 在桌面上创建一个文件夹（任意名称），将其拖入 VS Code 窗口以作为工作区打开。

Step 8 – Install Tailwind CSS with Vite

在 VS Code 的终端中打开，按照官方 Tailwind CSS 指南的说明进行操作。

Step 9 – Install ZEGOCLOUD SDK and React Router

npm install @zegocloud/zego-uikit-prebuilt react-router-dom

Step 10 – Create Component Files

在 src 文件夹内，创建一个名为 components 的文件夹。
添加两个文件：

• Home.jsx
• VideoCall.jsx

Step 11 – Home.jsx (Create / Join Rooms)

import { useState } from "react";
import { useNavigate } from "react-router-dom";

export default function Home() {
  const [roomCode, setRoomCode] = useState("");
  const [userName, setUserName] = useState("");
  const [showRoomLink, setShowRoomLink] = useState(false);
  const [generatedRoomLink, setGeneratedRoomLink] = useState("");
  const [copied, setCopied] = useState(false);
  const navigate = useNavigate();

  const handleCreateRoom = () => {
    if (userName.trim()) {
      setGeneratedRoomLink(
        `${window.location.origin}/room?roomID=${Math.random()
          .toString(36)
          .substring(2, 8)
          .toUpperCase()}`
      );
      setShowRoomLink(true);
    }
  };

  const copyToClipboard = () => {
    navigator.clipboard.writeText(generatedRoomLink);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const joinCreatedRoom = () =>
    navigate(
      `/room?roomID=${new URLSearchParams(
        new URL(generatedRoomLink).search
      ).get("roomID")}&userName=${userName}`
    );

  return (
    <>
      {/* UI elements for entering user name, creating room, showing link, etc. */}
    </>
  );
}

(根据需要在返回的 fragment 中添加相应的 JSX UI 代码。)

Step 12 – VideoCall.jsx (Integrate ZEGOCLOUD UI Kit)

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { ZegoUIKitPrebuilt } from "@zegocloud/zego-uikit-prebuilt";

export default function VideoCall() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const roomID = params.get("roomID");
  const userName = params.get("userName");

  useEffect(() => {
    const appID = YOUR_APP_ID;          // replace with your AppID
    const appSign = "YOUR_APP_SECRET"; // replace with your AppSecret

    const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
      appID,
      appSign,
      roomID,
      userName
    );

    const zp = ZegoUIKitPrebuilt.create(kitToken);
    zp.joinRoom();
    // Additional configuration (e.g., UI layout, event listeners) can be added here.
  }, [roomID, userName]);

  return null;
}

Note: Replace YOUR_APP_ID and YOUR_APP_SECRET with the credentials obtained in Step 5.

Step 13 – Configure Routing

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import VideoCall from "./components/VideoCall";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/room" element={<VideoCall />} />
      </Routes>
    </Router>
  );
}

export default App;

Step 14 – Run the Application

npm run dev   # or the script defined for Vite

打开提供的本地 URL（例如 http://localhost:5173）在浏览器中，创建房间并开始视频通话。

Conclusion

现在你已经拥有一个使用 React、Tailwind CSS 和 ZEGOCLOUD 构建的功能完整的视频通话应用。可以根据需要自定义 UI、添加认证或扩展功能。