首页 前端 React.js 正文

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

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,如果网站或者项目是使用原生 JavaScriptAngularVue.jsSvelte 等框架构建的,则可以使用这种方式:

<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

原文:https://juejin.cn/post/7104277545071149070
打赏
海报

本文转载自互联网,旨在分享有价值的内容,文章如有侵权请联系删除,部分文章如未署名作者来源请联系我们及时备注,感谢您的支持。

转载请注明本文地址:https://www.shouxicto.com/article/6032.html

相关推荐

在 React 中为什么要用JSX?

大家好,我是爱吃鱼的桶哥Z。相信使用React开发的童鞋,在编写组件的过程中接触最多的就是JSX。那么为什么React要用JSX来编写组件呢?JSX的本质是什么?是不是只有React才能用JSX?针对...

React.js 2022.08.20 0 631

useEffect 与 useLayoutEffect 有什么区别?

在使用React开发的过程中,尤其是使用Hook开发组件,我们需要与后端进行交互的时候,通常我们会在useEffect这个勾子函数中执行,它与class组件中的componentDidMount生命周...

React.js 2022.08.20 0 485

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

     Agora 每月平均为人们提供超过 500 亿分钟的视频社交支持,随着开源、社区驱动的 Web UIKit 的发布,比以往任何时候都更容易构建自定义视频聊天应用程序或启动实时流媒...

React.js 2022.06.02 0 577

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
支付宝
微信
赞助本站