https://github.com/agoraio-community/videouikit-web-react
A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code.
https://github.com/agoraio-community/videouikit-web-react
livestreaming low-code react uikit videocall web webcomponents
Last synced: 2 months ago
JSON representation
A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code.
- Host: GitHub
- URL: https://github.com/agoraio-community/videouikit-web-react
- Owner: AgoraIO-Community
- License: mit
- Created: 2021-12-08T15:20:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-07T19:18:44.000Z (about 1 year ago)
- Last Synced: 2024-05-08T15:32:42.697Z (about 1 year ago)
- Topics: livestreaming, low-code, react, uikit, videocall, web, webcomponents
- Language: TypeScript
- Homepage:
- Size: 4.2 MB
- Stars: 48
- Watchers: 6
- Forks: 39
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [ARCHIVED] Agora React VideoUIKit
**⚠️ This project is no longer maintained and has been archived.**
Please note that this repository is now in a read-only state and will not receive any further updates or support.
We recommend migrating to the following alternatives:
- **Agora SDK**: For developers seeking a customizable solution with full control over the user experience. [Learn more](https://www.agora.io/en/products/video-call/)
- **Agora App Builder**: For those preferring a no-code approach to integrate real-time engagement features. [Get started](https://appbuilder.agora.io/)
For documentation and support, please visit the [Agora Documentation](https://docs.agora.io/en/).
[](https://www.npmjs.com/package/agora-react-uikit) [](https://standardjs.com)
> Instantly integrate Agora video calling or streaming into your web application using a React based VideoUIKit.
## Getting started
### Requirements
- [An Agora developer account](https://sso.agora.io/en/signup?utm_source=github&utm_repo=Web-React-UIKit)
- A React project
### Installation
To a react application, add the following:
```bash
npm i agora-react-uikit
```
### Usage
This UIKit contains a high level component called `AgoraUIKit`. You can check out code explanation [here](https://github.com/AgoraIO-Community//VideoUIKit-Web-React/wiki/Guide).
**A simple sample app integrating Agora UI Kit:**
```jsx
import React, {useState} from 'react';
import AgoraUIKit from 'agora-react-uikit';
const App = () => {
const [videoCall, setVideoCall] = useState(true);
const rtcProps = {
appId: '',
channel: 'test', // your agora channel
token: '' // use null or skip if using app in testing mode
};
const callbacks = {
EndCall: () => setVideoCall(false),
};
return videoCall ? (
) : (
setVideoCall(true)}>Start Call
);
};
export default App;
```
**Insert your Agora AppID and Token**.
### Demo Project
There's a demo project in the repo [here](https://github.com/AgoraIO-Community/VideoUIKit-Web-React/tree/main/example).
### Instructions for running the demo:
1. Add your Agora App ID to `/example/src/App.tsx`
2. Run `npm start` to start the bundler to build the library
3. Execute `cd example && npm start` to run the example app
## Documentation
For full documentation, see our [docs page](https://agoraio-community.github.io/VideoUIKit-Web-React/).
You can visit the [wiki](https://github.com/AgoraIO-Community/VideoUIKit-Web-React/wiki) for other examples and in depth guide.
You can also export the UIKit to use outside a React project (for example in a vanilla-js project) using web-components. Find out more in the `/web-component` directory.
## UIKits
The plan is to grow this library and have similar offerings across all supported platforms. There are already similar libraries for [Android](https://github.com/AgoraIO-Community/VideoUIKit-Android), [iOS](https://github.com/AgoraIO-Community/VideoUIKit-iOS), [React Native](https://github.com/AgoraIO-Community/VideoUIKit-ReactNative), and [Flutter](https://github.com/AgoraIO-Community/VideoUIKit-Web-Flutter), so be sure to check them out.