在 React.js 中集成实时 ZEGOCLOUD SDK

Source: Dev.to

简介

视频通话和直播已成为当今应用的必备功能，ZEGOCLOUD API 能显著简化集成过程。你可以仅用少量代码实现完整的直播功能、创建独立房间、添加应用内聊天等。ZEGOCLOUD 为每个新账号提供 10,000 免费分钟——非常适合测试或发布应用的基础版本。

无论项目规模如何，ZEGOCLOUD 都能提供流畅的开发体验。本指南将一步步带你创建一个直播应用。按照说明操作，使用本文或 ZEGOCLOUD 官方文档提供的代码片段。

ZEGOCLOUD

灵活性并不局限于 React。ZEGOCLOUD 支持多种现代框架，包括 Next.js、Angular、Vue，以及 WordPress 和纯 HTML，每种框架都有对应的代码示例。

完成本教程后，你将拥有一个在 React 中高效、简洁地实现的完整直播应用。让我们开始吧！ 🚀

项目设置与前置条件

1️⃣ Node.js

确保你的机器已安装 Node.js。如果没有，请全局安装：

npm install -g nodejs

检查已安装的版本并在必要时更新：

node -v          # 检查已安装的版本
npm update nodejs   # 如有需要，更新 Node.js

使用 Vite 搭建 React

1. 创建一个新文件夹（例如 live-stream-app-react），并在编辑器中打开它（VS Code 等）。
2. 在该文件夹中打开终端，运行：

npm create vite@latest .

3. 在第一个提示中选择 React，随后根据需要选择 JavaScript 或 TypeScript。Vite 会自动安装所有必需的包和依赖。

3️⃣ 注册 ZEGOCLOUD 账号（免费）

要使用 ZEGOCLOUD SDK，请注册免费账号并获取你的 App ID 与 App Sign：

🔗 在 ZEGOCLOUD 注册

注册后，你将获得 10,000 免费分钟，用于测试和部署你的直播应用。

开始吧：在 React 中使用 ZEGOCLOUD 构建直播应用

步骤 1：安装 ZEGOCLOUD SDK

npm install @zegocloud/zego-uikit-prebuilt

步骤 2：获取 AppID 与 ServerSecret

登录 ZEGOCLOUD，进入开发者控制台，复制你的 AppID 与 ServerSecret。请务必保密，不要公开分享这些值。

步骤 3：在 React 中初始化 SDK

编辑 App.jsx（或 App.tsx），并添加以下代码：

import * as React from "react";
import { ZegoUIKitPrebuilt } from "@zegocloud/zego-uikit-prebuilt";

function randomID(len) {
  let result = "";
  const chars =
    "12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP";
  const maxPos = chars.length;
  len = len || 5;
  for (let i = 0; i  {
    const zp = ZegoUIKitPrebuilt.create(kitToken);
    zp.joinRoom({
      container: element,
      scenario: {
        mode: ZegoUIKitPrebuilt.LiveStreaming,
        config: { role },
      },
      sharedLinks,
    });
  };

  return (
    
  );
}

注意： 将 YOUR_APP_ID 与 YOUR_APP_SECRET 替换为你在 ZEGOCLOUD 控制台获取的对应值。

步骤 4：运行应用

启动开发服务器：

npm run dev

现在，你的直播应用应该已经成功运行！ 🎉

结论

恭喜你！ 🎉 你已成功使用 React 与 ZEGOCLOUD 构建了一个功能完整的直播应用。

敬请关注后续教程，内容包括 Next.js、更多 React 功能以及其他前端开发主题。

祝编码愉快！