This project is a simple video call application built using WebRTC. Users can initiate a video call with another user by entering the user ID. The frontend is developed using React, and the backend uses Node.js. No WebRTC libraries were used in this implementation built using only the Raw WebRTC API.
Live Demo: https://webrtc-brown.vercel.app
- One-to-One Video Chat: Users can have a seamless video chat with another user by entering their user ID.
- Real-Time Communication: The application leverages WebRTC for real-time video and audio communication.
- Simple User Interface: The UI is straightforward and user-friendly, allowing for easy initiation of video calls.
- React: For building the user interface.
- Tailwind CSS: For styling the application.
- Vite: For fast development and build processes.
- Node.js: For the server environment.
- Express.js: For the server framework.
- WebRTC: For real-time video and audio communication.
- Node.js (v14 or above)
- npm or yarn
-
Clone the repository:
git clone https://github.com/yourusername/webrtc-video-call.git cd webrtc-video-call
-
Navigate to the backend directory:
cd backend
-
Install backend dependencies:
npm install
-
Start the backend server:
npm run dev
-
Navigate to the frontend directory:
cd ../frontend
-
Install frontend dependencies:
npm install
-
Start the frontend development server:
npm run dev
-
Open your browser and navigate to:
http://localhost:5173
-
Initiate a video call:
- Copy your user ID and share it with another user.
- Enter the other user's ID in the input field and press Call to start the video call.
- If you want to access the video call from different devices in your local network then you must use ssl certificate in the frontend and backend as chrome does not allow media access without "https" and also make sure your backend also running on https.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request