Sample projects for Agora RTC Web SDK 4.x
English | įŽäŊä¸æ
Overview
This repository contains sample projects using the Agora RTC Web SDK 4.x.
If you are still not familiar with Agora RTC Web SDK 4.x, please follow our community interactive tutorial to quickly understand the SDK and use CodePen iframes to call the SDK in your browser.
The Web SDK 4.x refactors the Web SDK 3.x. Based on the features of 3.x, 4.x fully optimizes the internal architecture of the SDK and provides more flexible and easy-to-use APIs.
Compared to the Web SDK 3.x, the Web SDK 4.x has the following advantages:
- Uses promises for asynchronous operations, which improves the robustness and readability of your code.
- Supports TypeScript.
- Replaces the Stream object with Track objects for separate and flexible control over audio and video.
- Improves the channel event notification mechanism, making it easier for you to deal with reconnection.
- Provides more accurate and comprehensive error codes for troubleshooting.
Projects using jQuery and Bootstrap
Feature | Sample project location |
---|---|
Adjust video profile | /Demo/adjustVideoProfile |
Audio mixing and audio effect | /Demo/audioMixingAndAudioEffect |
Live streaming | /Demo/basicLive |
Enable/disable Video/Audio track | /Demo/basicMute |
Video call | /Demo/basicVideoCall |
Cloud proxy | /Demo/cloudProxy |
Custom video source | /Demo/customVideoSource |
Display call status | /Demo/displayCallStats |
Dual stream | /Demo/dualStream |
Geofencing | /Demo/geoFencing |
Join multiple channels | /Demo/joinMultipleChannel |
Push stream to CDN | /Demo/pushStreamToCDN |
Control recording devices | /Demo/recordingDeviceControl |
Custom rendering | /Demo/selfRendering |
Custom Capturing | /Demo/selfCapturing |
Share the screen | /Demo/shareTheScreen |
Video beauty effect | /Demo/videoBeautyEffect |
How to run the sample projects
Prerequisites
You need a supported browser to run the sample projects. See Product Overview for a list of supported browsers.
Steps to run
- Use a supported browser to open
Demo/index.html
and select a demo. - In the demo page, enter your App ID, token, and channel name and join the channel.
- See Get Started with Agora to learn how to get an App ID and token. You can get a temporary access token to quickly try out this sample project.
- The channel name must be the same as the channel ID used to generate the token.
Projects using React.js
Feature | Sample project location |
---|---|
Video call | /react/simple-demo |
OpenLive | /react/open-live |
How to run the sample projects
Prerequisites
- You need a supported browser to run the sample projects. See Product Overview for a list of supported browsers.
- npm
Steps to run the ReactDemo
-
Navigate to /react/simple-demo and run the following command to install dependencies.
npm install
-
Use the following command to run the sample project.
npm run start
-
In the demo page, enter your App ID, token, and channel name and join the channel.
- See Get Started with Agora to learn how to get an App ID and token. You can get a temporary access token to quickly try out this sample project.
- The channel name must be the same as the channel ID used to generate the token.
Steps to run OpenLive
-
Navigate to /react/open-live. Rename the .env.example file as .env. In the .env file, replace
<#YOUR APP ID#>
with the App ID, and replace<#YOUR TOKEN#>
with the token.See Get Started with Agora to learn how to get an App ID and token. You can get a temporary access token to quickly try out this sample project.
REACT_APP_AGORA_APP_ID=<#YOUR APP ID#> REACT_APP_AGORA_APP_TOKEN=<#YOUR TOKEN#> REACT_APP_AGORA_LOG=true
-
Run the following command to install dependencies.
npm install
-
Run the following command to start the project.
The channel name must be the same as the channel ID used to generate the token.
npm run dev
Reference
Feedback
If you have any problems or suggestions regarding the sample projects, feel free to file an issue.
Related resources
- Check our FAQ to see if your issue has been recorded.
- Dive into Agora SDK Samples to see more tutorials
- Take a look at Agora Use Case for more complicated real use case
- Repositories managed by developer communities can be found at Agora Community
- If you encounter problems during integration, feel free to ask questions in Stack Overflow
License
The sample projects are under the MIT license. See the LICENSE file for details.