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>
);
} ```
- Neo4J 快速入門
- 使用 ChatGPT 輕鬆建立使用者註冊頁面
- 5 個 JavaScript 程式碼優化技巧
- 複習前端:前端應掌握的網路知識
- JSON.stringify() 的 5 使用場景
- WEB開發人員應該知道 10 個 Docker 命令
- 8 個很酷的 GitHub 技巧
- 使用OpenAI ChatGPT 進行了編碼嘗試
- 元宇宙(Metaverse)的 7 層結構
- 分享 7 個不錯的人工智慧(AI)工具
- 藉助免費AI藝術平臺生成頭像
- 分享7 個VUE專案用得上的JavaScript庫
- 如何在 Solidity 中為 Web3 遊戲開發錦標賽排行榜
- Web 實時通訊技術WebRTC
- Web3 中最佳 AI 藝術工具
- 從 async 和 await 函式返回值說原理
- 推薦 6 個實用的 Vue 元件庫
- 使用 PixCap 和 ReadyPlayerMe 快速製作3D 模型動畫
- 生成二維碼或條形碼JavaScript指令碼庫
- 區塊鏈開發:如何從 Solidity 智慧合約中傳送和取款