https://github.com/varuns2002/react-webrtc-video-chat

Video chat app built with React, WebRTC and Firebase.
https://github.com/varuns2002/react-webrtc-video-chat

Last synced: about 1 year ago
JSON representation

Video chat app built with React, WebRTC and Firebase.

• Host: GitHub
• URL: https://github.com/varuns2002/react-webrtc-video-chat
• Owner: VarunS2002
• License: gpl-3.0
• Created: 2021-02-09T11:48:01.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2025-04-06T09:45:43.000Z (about 1 year ago)
• Last Synced: 2025-04-06T10:28:48.690Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 734 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React-WebRTC-Video-Chat

> [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)

A basic one-on-one video chat app built with React, WebRTC and Firebase,

enabling real-time, peer-to-peer and serverless video communication directly in the browser.

#### This project is heavily based on the video guide made by [Masoud](https://www.youtube.com/@ReactWithMasoud) which was posted [here](https://www.youtube.com/watch?v=-d45WHNU9J4&t=3153s&ab_channel=ReactwithMasoud).

## Requirements:

- [Node.js with npm](https://nodejs.org/en/download/)

- Google account with Firebase access

## Setup:

1. Run `npm install`

2. Setup a Firebase project with Realtime Database.

   Sample guide [here](https://grotoned.medium.com/tutorial-using-firebase-as-a-realtime-database-with-react-2a3a24c1df91)

3. Update `config.js` with your Firebase project config and a public STUN server

## Usage:

1. Run `npm start`

2. Open [http://localhost:3000](http://localhost:3000) to view it in your browser

3. Open the link in an incognito window/different browser/different machine on the same network

4. Login with a unique name in each window and allow camera and microphone permissions

5. Call the other name in one of the two windows

## Features:

- Start/End Call

- Turn-off Microphone

- Turn-off Camera

- Mute the Other Person

- Dark and Light theme

- Material Design

## Note:

- This project is a proof of concept and does not support many essential usability, privacy and security features, and 

 therefore, it should never be used in a production environment

## Screenshots:

- Login Page:

  
![Login_Page](https://i.imgur.com/i7YiGGq.png) 



- Call Lobby:

  
![Call_Lobby](https://i.imgur.com/xpmpBis.png) 



- Ongoing Call:

  
![Ongoing_Call](https://i.imgur.com/G748P8A.png)