https://github.com/agoraio/video-sdk-samples-reactjs
https://github.com/agoraio/video-sdk-samples-reactjs
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/agoraio/video-sdk-samples-reactjs
- Owner: AgoraIO
- Created: 2023-05-12T02:41:41.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-27T18:18:42.000Z (over 1 year ago)
- Last Synced: 2024-11-14T12:20:00.435Z (7 months ago)
- Language: TypeScript
- Size: 2.91 MB
- Stars: 4
- Watchers: 7
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Agora Video SDK for ReactJS reference app
This app demonstrates use of [Agora's Video SDK](https://docs.agora.io/en/video-calling/get-started/get-started-sdk) for real-time audio and video communication. It is a robust and comprehensive documentation reference app for Android, designed to enhance your productivity and understanding. It's built to be flexible, easily extensible, and beginner-friendly.
Clone the repo, run and test the samples, and use the code in your own project. Enjoy.
- [Samples](#samples)
- [Prerequisites](#prerequisites)
- [Run this project](#run-this-project)
- [Contact](#contact)
## Samples
The runnable code examples are:
- [SDK quickstart](./src/get-started-sdk/README.md) - The minimum code you need to integrate high-quality, low-latency Video
Calling features into your app using Video SDK.
- [Authentication Workflow](./src/authentication-workflow/README.md) - Authenticate the current user and channel with a token
retrieved from a token server.
- [Connect through restricted networks with Cloud Proxy](./src/cloud-proxy/README.md) - Connect from an environment
with a restricted network.
- [Stream media to a channel](./src/play-media/README.md) - Use the media player classes in Video SDK to enable your
users to publish media files to a channel.
- [Call quality best practice](./src/ensure-call-quality/README.md) - use Video SDK features to ensure optimal audio and video quality in your app.
- [Audio and voice effects](./src/audio-and-voice-effects/README.md) - Modify the captured audio to add sound
effects, mix in a pre-recorded audio, or change the voice quality.
- [Geofencing](./src/geofencing/README.md) - Control and customize data routing in your app by specifying the Agora SD-RTN™
region users
connect to.
- [Custom video and audio sources](./src/custom-audio-and-video/customVideoAudioManager.tsx) - Customize your audio and video sources.
- [Screen share, volume control and mute](./src/product-workflow/productWorkflowManager.tsx) - implement a simple workflow in your app.
- [Live streaming over multiple channels](./src/live-streaming-over-multiple-channels/liveStreamingMultipleChannels.tsx) - Join multiple channels at the same time and broadcast or receive audio and video over them.
## Prerequisites
Before getting started with this reference app, ensure you have the following set up:
- A [supported browser](../reference/supported-platforms#browsers).
- Physical media input devices, such as a camera and a microphone.
- A JavaScript package manager such as [npm](https://www.npmjs.com/package/npm).
## Run this project
To run the sample projects in this folder, take the following steps:
1. **Clone the repository**
To clone the repository to your local machine, open Terminal and navigate to the directory where you want to clone the repository. Then, use the following command:
```bash
git clone https://github.com/AgoraIO/video-sdk-samples-reactjs
```
1. **Install the dependencies**
In Terminal, navigate to `video-sdk-samples-reactjs`, and execute the following command.
``` bash
npm install
```
1. **Modify the project configuration**
The app loads connection parameters from the [`config.json`](.`src/agora-manager/config.json`) file. Ensure that the file is populated with the required parameter values before running the application.
- `uid`: The user ID associated with the application.
- `appId`: (Required) The unique ID for the application obtained from [Agora Console](https://console.agora.io).
- `channelName`: The default name of the channel to join.
- `rtcToken`: An token generated for `channelName`. You generate a temporary token using the [Agora token builder](https://agora-token-generator-demo.vercel.app/).
- `serverUrl`: The URL for the token generator. See [Secure authentication with tokens](authentication-workflow) for information on how to set up a token server.
- `tokenExpiryTime`: The time in seconds after which a token expires.
If a valid `serverUrl` is provided, all samples use the token server to obtain a token except the **SDK quickstart** project that uses the `rtcToken`. If a `serverUrl` is not specified, all samples except **Secure authentication with tokens** use the `rtcToken` from `config.json`.
1. **Build and run the project**
In Terminal, run the following command:
``` bash
yarn dev
```
1. **Run the samples in the reference app**
1. Open the project in your browser. The default URL is http://localhost:5173/.
1. In the dropdown, select this document and test .
## Contact
If you have any questions, issues, or suggestions, please file an issue in our [GitHub Issue Tracker](https://github.com/AgoraIO/video-sdk-samples-reactjs/issues).