React Group Video Chat

This is a practice project for Agora SDK by implementing a group chat SPA.

Project Spec

Basics

• Implement all the channel life-cycle hooks of Agora SDK
• Implement 1-1 video call feature
• Use of FE framework: React
• Use Promise & async/await to simplify logic

Advanced

• Support Stream mute/unmute
• Use TypeScript
• Support group video call
• Use of third party UI kit（SCSS in this repo）
• Use of Redux
• Error handling of each event handler
• Unit test

How to run

In the project directory, run:

1. yarn install

2. yarn start

3. Open http://localhost:3000 to view it in the browser.

4. Enter the appId, temp token and channel name set from Agora.io project console.

Result Screenshot

Landing page

Chat room page

Project Planning

• Go through document and resources
• Design simple prototype
  
• Go through all the client init flow
• Establish local stream and show UI
• Handle remote stream event handlings
• Add remote streams' UI
• Handle mute function
• Fine tune CSS