Agora Web UIKit：快速构建视频通话或直播

作者：devpoint

2022 年 6 月 01 日
本文字数：1104 字
阅读完需：约 4 分钟

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 等框架构建的，则可以使用这种方式：

<body>    <script src="agora-uikit.js"></script>    <agora-react-web-uikit        style="width: 100%; height: 100vh; display: flex;"        appId='<YourAgoraAppIDHere>'        channel='test'    /></body>

复制代码

首先导入 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 。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/c08e6eba6d6ab9b248c55083f】。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

Agora Web UIKit：快速构建视频通话或直播

如何工作

使用 Web 组件

React

devpoint

评论