• Stars
    star
    216
  • Rank 183,179 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

  1. Use a supported browser to open Demo/index.html and select a demo.
  2. 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

  1. Navigate to /react/simple-demo and run the following command to install dependencies.

    npm install
  2. Use the following command to run the sample project.

    npm run start
  3. 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

  1. 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
  2. Run the following command to install dependencies.

    npm install
  3. 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.

More Repositories

1

Basic-Video-Call

Sample app to join/leave a channel, mute/unmute, enable/disable the video, and switch between front/rear cameras.
C++
690
star
2

Tools

C++
377
star
3

API-Examples

Play with AgoraSDK and have fun! Everything you need to start learning Agora.
C++
301
star
4

Basic-Video-Broadcasting

Sample app to join/leave a channel, set the role as a host/audience, mute/unmute, switch between front/rear cameras, and set the video parameters.
C++
269
star
5

Advanced-Video

C++
261
star
6

RTM

C++
141
star
7

Basic-Audio-Call

Sample app to join/leave a channel, mute/unmute, and switch between the speaker/headset.
Java
108
star
8

Agora-Miniapp-Tutorial

Hello world for Agora SDK running in https://en.wikipedia.org/wiki/WeChat#WeChat_Mini_Program
JavaScript
102
star
9

React-Native-SDK

React Native Beta wrapper around the Agora RTC SDKs for Android and iOS
Java
68
star
10

FaceUnity

Things related to FaceUnity SDK and Agora SDK
C++
64
star
11

agora-react-native-rtm

React Native around the Agora RTM SDKs for Android and iOS agora
Java
63
star
12

Electron-With-Web-SDK

JavaScript
61
star
13

AgoraRtcEngine_iOS

iOS Package for Agora Video RTE SDK. Perfect for video calls and live streaming.
Swift
58
star
14

Advanced-Audio

C++
57
star
15

Advanced-Interactive-Broadcasting

C++
56
star
16

Basic-Recording

C++
51
star
17

FaceUnityLegacy

Things related to FaceUnity SDK and Agora SDK
Java
51
star
18

OBS

C++
47
star
19

Basic-Audio-Broadcasting

Sample app to join/leave a channel, set the role as a host/audience, mute/unmute, and switch between the speaker/headset.
Java
45
star
20

Voice-Call-for-Mobile-Gaming

Java
42
star
21

Video-Call-for-Mobile-Gaming

C#
33
star
22

Agora-with-QT

QML
27
star
23

Agora-RESTful-Service

Java
24
star
24

rtc-web-archive

23
star
25

Agora-WordPress

The Agora Video for WordPress plugin allows you to easily add live broadcast or video conferencing functionality into your posts and pages.
PHP
22
star
26

Docs-Source

A repository for the Agora Docs source content.
MDX
20
star
27

Signaling

C++
18
star
28

app-builder-backend

Agora App Builder: The Real-Time Engagement Platform for meaningful human connections
Go
17
star
29

Agora-Chat-API-Examples

Java
16
star
30

BytedEffect

Java
14
star
31

AgoraAudio_iOS

Agora's Audio SDK Swift Package for iOS đŸ“Ļ
Swift
11
star
32

agora_doc_source

XSLT
10
star
33

Agora-With-SenseTime

Java
10
star
34

APICloud-SDK

APICloud SDK for Agora Video SDK
Objective-C
8
star
35

video-sdk-samples-ios

Swift
6
star
36

AgoraChat_iOS

Swift
6
star
37

agora-rtt-server

Java
5
star
38

video-sdk-samples-android

Android reference app for Agora Video SDK
Kotlin
5
star
39

AgoraRTM_iOS

Agora's Real-time Messaging SDK Swift Package for iOS đŸ“Ļ
Swift
4
star
40

video-sdk-samples-reactjs

TypeScript
4
star
41

video-sdk-samples-flutter

Dart
4
star
42

video-sdk-samples-unity

C#
3
star
43

Agora-Video-With-ByteDance-Android

Agora with ByteDance Effect SDK demo
Java
3
star
44

Agora-Extensions

Java
3
star
45

agora-rtc-web

JavaScript
3
star
46

AgoraRtm_Apple

[Beta] Agora's Signaling 2.0 SDK Swift Package for iOS, macOS and visionOS đŸ“Ļ
Swift
3
star
47

Meta-iGame

Swift
2
star
48

Basic-RTSA

C++
2
star
49

Agora-Web-Components.Collection

TypeScript
2
star
50

full-sdk

C++
2
star
51

RTM2

TypeScript
1
star
52

agora-videojs-examples

Vue
1
star
53

AgoraRtcEngine_macOS

Agora Video RTC Engine for macOS
Swift
1
star
54

video-sdk-samples-windows

C++
1
star
55

FPA

Java
1
star