agoraio / video-sdk-samples-reactjs

Agora Video SDK for ReactJS reference app

This repository holds the code examples used for the Agora Video SDK for ReactJS documentation. Clone the repo, run and test the samples, and use the code in your own project. Enjoy.

Samples

The runnable code examples are:

• SDK quickstart - The minimum code you need to integrate high-quality, low-latency Video Calling features into your app using Video SDK.

• Authentication Workflow - Authenticate the current user and channel with a token retrieved from a token server.

• Connect through restricted networks with Cloud Proxy - Connect from an environment with a restricted network.

• Stream media to a channel - Use the media player classes in Video SDK to enable your users to publish media files to a channel.

• Call quality best practice - use Video SDK features to ensure optimal audio and video quality in your app.

• Audio and voice effects - Modify the captured audio to add sound effects, mix in a pre-recorded audio, or change the voice quality.

• Geofencing - Control and customize data routing in your app by specifying the Agora SD-RTN™ region users connect to.

Run this project

To run the sample projects in this folder, take the following steps:

1. Clone the Git repository by executing the following command in a terminal window:

   git clone https://github.com/AgoraIO/video-sdk-samples-reactjs

2. Install the dependencies:

   In Terminal, navigate to video-sdk-samples-reactjs, and execute the following command.

   npm install

3. In the video-sdk-samples-reactjs reference app, open src/agora-manager/config.json and set appId to the AppID of your project.

4. Set the authentication token:

   • Temporary token:
     1. Set rtcToken with the value of your temporary token
   • Authentication server:

     1. Setup an Authentication server

     2. In config.json:

        1. Set rtcToken to an empty string.
        2. Set serverUrl to the base URL of your authentication server. For example, https://agora-token-service-production-1234.up.railway.app.

     3. Start a proxy server so this web app can make HTTP calls to fetch a token. In a Terminal instance in the reference app root, run the following command:

        node ./utils/proxy.js

5. Start this reference app.

   In Terminal, run the following command:

   yarn dev

6. Open the project in your browser. The default URL is http://localhost:5173/.

7. In the dropdown, select this document and test .

video-sdk-samples-reactjs's Issues

update: use `useLocalScreenTrack` for screenshare example

useLocalScreenTrack has landed in v2.0.0-alpha.1, it should make screensharing much much simpler coupled with useRTCScreenShareClient.

fix: ondevicechange callbacks exist on AgoraRTC not on the Client

[after beta] update picker component

When I duplicate the tab with an option in the picker selected, the state isn't duplicated across the tab meaning I see a blank screen till i "dirty" the field (change it to a different option and back). Can we update the picker component in the root?

chore: use agora-rtc-react beta

when we're ready to publish please let us make sure we're using the latest release of the sdk 2.0.0-beta.0: https://www.npmjs.com/package/agora-rtc-react/v/2.0.0-beta.0