Video Calling App

A real-time video calling application built with React, TypeScript, and Supabase. This app allows users to create and join video call rooms, with features like screen sharing, camera toggling, and microphone control.

Features

• Create and join video call rooms
• Real-time video and audio communication
• Screen sharing
• Camera on/off toggle
• Microphone mute/unmute
• Simple user interface
• Room ID sharing

Technologies Used

• React
• TypeScript
• WebRTC (using simple-peer)
• Supabase (for signaling and room management)
• Styled Components
• UUID

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• A Supabase account and project

Setup

1. Clone the repository:

   git clone <repository-url>
   cd video-app
   

2. Install dependencies:

   npm install
   

3. Create a Supabase project and set up the database:

   • Create a new Supabase project at https://supabase.com
   • Use the provided SQL script in setup-supabase.sql to create the necessary tables and policies
   • You can run this script in the Supabase SQL Editor

4. Set up your environment variables:

   • Create a .env file in the root directory
   • Add your Supabase URL and anonymous key:

     REACT_APP_SUPABASE_URL=your_supabase_url
     REACT_APP_SUPABASE_ANON_KEY=your_supabase_anon_key
     

5. Start the development server:

   npm start
   

6. Open your browser and navigate to http://localhost:3000

How to Configure Supabase for WebRTC Signaling

1. Navigate to your Supabase project dashboard
2. Go to Database > Replication > Realtime
3. Enable the "Broadcast" option for Realtime functionality
4. Under "Tables", add the "rooms" table to be tracked for Realtime changes

This configuration is necessary for the WebRTC signaling to work properly between peers.

How to Use

1. Create a Meeting:

   • Click on "Create New Meeting" on the home page
   • You'll be redirected to a new room
   • Share the room ID with others to join

2. Join a Meeting:

   • Enter the room ID in the input field on the home page
   • Click "Join Meeting"

3. During a Call:

   • Use the control buttons at the bottom to toggle camera, microphone, or share your screen
   • Click "End Call" to leave the meeting and return to the home page

Deployment

The application is configured for easy deployment to Vercel, but can be deployed to any static hosting provider.

Deploying to Vercel

1. Create a Vercel account if you don't have one already at https://vercel.com

2. Install the Vercel CLI (already included as a dev dependency):

   # Or install globally
   npm install -g vercel

3. Login to Vercel:

   npx vercel login

4. Deploy to Vercel:

   npm run deploy

   Or for a preview deployment:

   npm run deploy:preview

5. Set up environment variables on Vercel:

   • Go to your Vercel project dashboard
   • Navigate to Project Settings > Environment Variables
   • Add your environment variables:
     • REACT_APP_SUPABASE_URL
     • REACT_APP_SUPABASE_ANON_KEY

Alternative: One-Click Deployment

You can also deploy directly from the Vercel dashboard:

1. Import your GitHub/GitLab/Bitbucket repository
2. Configure the project:
   • Set the build command to npm run build
   • Set the output directory to dist
3. Add your environment variables
4. Deploy

Manual Build for Other Platforms

To build the application for deployment anywhere:

1. Build the production bundle:

   npm run build

2. The build output will be in the dist directory
3. Deploy the contents of the dist directory to your hosting provider

Important Deployment Considerations

1. Ensure your hosting provider supports URL rewriting for SPAs (Single Page Applications)
2. Set up appropriate environment variables for your Supabase configuration
3. Configure CORS on your Supabase project to allow requests from your deployment domain

License

MIT