Modern, secure and instant video chat application built with React, TypeScript, and WebRTC

Live Demo • Documentation • Report Bug • Request Feature

Table of Contents

Click on any section to navigate quickly.

	Section		Section
	Features		Configuration
	Tech Stack		Deployment
	Quick Start		Contributing
	Available Scripts		Roadmap
	Project Structure		Known Issues
	Usage		License

Features

Feature	Description
HD Video Calls	High quality video with WebRTC technology
Crystal Clear Audio	Clear sound with noise cancellation
Private & Secure	Encrypted P2P connection, no data on server
Multi-device	Works on desktop, tablet and mobile
Instant Rooms	Create or join rooms quickly
Unlimited Time	No time restrictions on calls
Camera Test	Test your camera and microphone before joining
Modern UI	Clean, responsive design with modern header

Tech Stack

Quick Start

Prerequisites

Installation

# 1. Clone the repository
git clone https://github.com/your-username/chat-real.git
cd chat-real

# 2. Install dependencies
npm install

# 3. Start development server
npm run dev

# 4. Open your browser
# http://localhost:5173

graph LR
    A[Clone Repository] --> B[Install Dependencies]
    B --> C[Start Dev Server]
    C --> D[Open Browser]
    D --> E[Start Video Chatting!]

Loading

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint
npm run type-check	Run TypeScript compiler

Project Structure

src/
├── 📁 components/          # React components
│   ├── CameraTest/     # Camera/microphone testing
│   ├── Controls/       # Video call controls
│   ├── Header/         # Navigation header
│   ├── Landing/        # Landing page
│   ├── ShareButton/    # Room link sharing
│   ├── VideoChat/      # Main video chat interface
│   └── VideoContainer/ # Video display container
├── 📁 hooks/              # Custom React hooks
│   └── useVideoChat.ts # Video chat state management
├── 📁 services/           # Business logic
│   └── WebRTCService.ts # WebRTC implementation
├── 📁 types/              # TypeScript type definitions
├── 📁 utils/              # Utility functions
│   └── roomUtils.ts    # Room ID generation
├── App.tsx             # Main app component
├── main.tsx           # App entry point
└── index.css          # Global styles

Usage

Creating a Room

sequenceDiagram
    participant U as User
    participant A as App
    participant B as Browser
    
    U->>A: Click "Create New Room"
    A->>B: Request Camera/Mic Permissions
    B->>A: Grant Permissions
    A->>U: Generate Room ID & Show Video
    U->>A: Share Room Link

Loading

1. Click "Create New Room" on the homepage
2. Allow camera and microphone permissions
3. Share the room link with others

Joining a Room

1. Paste the room ID in the "Join Existing Room" input
2. Click "Join Room" or press Enter
3. Allow camera and microphone permissions

During a Call

Feature	Description
Camera Toggle	Toggle video on/off
Microphone Toggle	Toggle audio on/off
End Call	End call and return home
Share Room	Copy room link to share

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

# Optional: Custom STUN/TURN servers for better connectivity
VITE_STUN_SERVER=stun:your-server.com:3478
VITE_TURN_SERVER=turn:your-server.com:3478
VITE_TURN_USERNAME=your-username
VITE_TURN_PASSWORD=your-password

# Optional: App configuration
VITE_APP_NAME="Chat Real"
VITE_APP_VERSION=1.0.0

Browser Compatibility

Browser	Version	Status
Chrome	60+	Fully Supported
Firefox	60+	Fully Supported
Safari	13+	Fully Supported
Edge	79+	Fully Supported

Note: Requires HTTPS for camera/microphone access in production.

Deployment

Deploy to Netlify

1. Click the deploy button above
2. Connect your GitHub repository
3. Deploy automatically

Manual Deployment

# Build the project
npm run build

# The dist/ folder is ready for deployment

Supported Platforms:

• Netlify
• Vercel
• GitHub Pages
• Firebase Hosting
• Any static hosting service

🤝 Contributing

We love your input! We want to make contributing as easy and transparent as possible.

Development Workflow

graph LR
    A[Fork Repository] --> B[Create Branch]
    B --> C[Make Changes]
    C --> D[Run Tests]
    D --> E[Submit PR]
    E --> F[Review & Merge]

Loading

Steps to Contribute

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Development Guidelines

• Use TypeScript for all new code
• Follow React best practices
• Use CSS Modules for styling
• Write meaningful commit messages
• Test your changes thoroughly
• Update documentation if needed

Roadmap

Status	Feature	Description
🔄	Screen Sharing	Share your screen during calls
🔄	Chat Messages	Text chat alongside video
🔄	Recording	Record your video calls
⏳	Background Effects	Virtual backgrounds and blur
⏳	Room Passwords	Secure rooms with passwords
⏳	Mobile App	React Native application
⏳	Multiple Participants	Support for group calls
⏳	File Sharing	Share files during calls
⏳	Whiteboard	Collaborative drawing board

Known Issues & Solutions

Issue	Solution
Camera access denied initially	Refresh the page and allow permissions
iOS Safari audio issues	Use Chrome or Firefox on iOS
Firefox media device enable	Manually enable in browser settings
Connection issues	Check firewall and network settings

License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• WebRTC API - Real-time communication technology
• React Team - Amazing frontend framework
• Material Design - Beautiful icon system
• Inter Font - Clean typography by Rasmus Andersson
• Vite - Lightning-fast build tool

📞 Support

Platform	Link	Response Time
GitHub Issues	Report Bug	24-48 hours
Discussions	Start Discussion	12-24 hours
Bug Reports	Bug Tracker	24 hours
Feature Requests	Feature Ideas	48 hours

---

⭐ Don't forget to star the repository if you find this project useful!

Happy Video Chatting!

Made with ❤️ by juninhokaponne the Chat Real community