Agora Web UIKit：快速構建視訊通話或直播_天行無忌

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第 2 天，點選檢視活動詳情

Agora 每月平均為人們提供超過 500 億分鐘的視訊社交支援，隨著開源、社群驅動的 Web UIKit 的釋出，比以往任何時候都更容易構建自定義視訊聊天應用程式或啟動實時流媒體服務。

Agora Web UIKit 使用 React 構建在 Agora Web SDK 之上。它可以以 React 元件的形式或用於非 React 專案的 Web 元件形式，可以將其新增到網站並準備好視訊通話或實時流媒體體驗。

如何工作

只需一個 Agora 開發者帳戶即可開始使用，在這裡免費註冊，註冊後進入 Agora 控制檯，建立一個新專案並複製 Agora App ID，將其用於應用程式。

使用 Web 元件

Web 元件允許在任何 Web 應用程式中使用 Agora Web UIKit，如果網站或者專案是使用原生 JavaScript 或 Angular、Vue.js 或 Svelte 等框架構建的，則可以使用這種方式：

```

首先匯入 Web 元件指令碼，然後，設定上面申請的 Agora App ID 和頻道名稱，除此之外，還可以定義是否啟用主動說話者檢測、更改佈局、作為觀眾加入等屬性。

React

Agora Web UIKit 是為從頭開始定製和擴充套件而構建的。可以自定義 UI 並選擇活動發言人、雙流模式和僅通過傳遞引數作為觀眾加入等功能。它是用 Typescript 編寫的，並使用模組化功能元件構建，因此可以選擇單獨的部分並構建喜歡的任何東西。

設定 Agora App ID 和頻道名稱來渲染 <AgoraUIKit> 元件：

首先需要安裝元件：

npm install agora-react-uikit --save

安裝成功後，構建元件，按照以下程式碼引入：

``` import React, { useState } from "react"; import AgoraUIKit from "agora-react-uikit"; export default function VideoCall() { const [videoCall, setVideoCall] = useState(true); const rtcProps = { appId: "Agora App ID", channel: "devpoint", // your agora channel token: "", // use null or skip if using app in testing mode }; const callbacks = { EndCall: () => setVideoCall(false), };

return videoCall ? (
    <div
        style={{
            display: "flex",
            width: "100%",
            height: "60vh",
        }}
    >
        <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
    </div>
) : (
    <h3 onClick={() => setVideoCall(true)}>Start Call</h3>
);

} ```

更多功能屬性可以閱讀文件來詳細瞭解，簡單的示例程式碼 Github 。