connectRTC

A real-time video communication application built with React, Socket.io, and WebRTC. This application allows users to join rooms, make video calls, and manage their streams effectively.

Table of Contents

• Features
• Demo
• Installation
• Usage
• Technologies Used
• Screenshots
• Project Structure

Features

• Real-time communication: Make and receive video calls in real-time.
• Room Management: Create or join rooms using unique room IDs.
• Stream Control: Toggle webcam streams on and off.
• WebRTC Integration: Utilizes WebRTC for peer-to-peer communication.
• Socket.io Signaling: Manages signaling between peers via Socket.io.

Demo

Check out the live demo of the project here.

Installation

Follow these steps to set up the project locally:

1. Clone the repository:

   git clone https://github.com/UKD1211/connectRTC
   cd connectRTC

2. Install dependencies::

   npm install

3. Run the server::

   node/nodemon server.js

4. Start the client::

   npm start/npm run dev

Usage

1. Open the application in your browser.
2. Enter your email and a room ID to join or create a room.
3. Once in a room, use the interface to make video calls.
4. Toggle your webcam stream using the provided buttons.

Technologies Used

Frontend:

• React
• ReactPlayer
• CSS (with custom styles)

Backend:

• Node.js
• Socket.io

WebRTC:

• RTCPeerConnection
• MediaDevices API

Screenshots

• Lobby Screen:

• Room Page:

• Video Call in Action:

• Remote Calling:"

Project Structure

/root
├── /public
├── /src
│   ├── /components
│   │   ├── LobbyScreen.jsx
│   │   ├── RoomPage.jsx
│   ├── /context
│   │   ├── SocketProvider.js
│   ├── /service
│   │   ├── peer.js
│   ├── App.js
│   ├── index.js
├── server.js
├── README.md
├── package.json