react-video-call

ReactVideoCall

ReactVideoCall is a simple yet powerful WebRTC-based video call component for React. It uses Firebase for signaling and supports both desktop and mobile views with minimal setup.

✨ Features

• 📞 Peer-to-peer video calling using WebRTC
• 🔐 Firebase-based signaling (with security rules)
• 📱 Responsive UI for mobile and desktop
• 🔧 Easily configurable ICE/TURN servers
• ⚡ Quick integration with just a few lines
• 📷 Option to select/Switch Camera

📦 Installation

Install via npm:

npm install react-video-call

🔗 Demo

👉 Live Demo

📥 Component Props

Prop	Type	Description
roomName	string	Common room name used by both users to connect.
firebaseConfig	FirebaseOptions	Firebase configuration object for signaling. Use secure Firebase Auth and Firestore Rules.
RTCConfiguration	RTCConfiguration	WebRTC configuration including iceServers. You can use your own TURN servers or services like Xirsys.

🚀 Example (App.tsx)

"use client";
import React, { useState } from "react";
import firebaseConfig from "./../../firebasecrads.json";
import { ReactVideoCall } from 'react-video-call';

export default function Home() {
  const [roomName, setRoomName] = useState("");

  const configuration = {
    iceServers: [
      { urls: 'stun:stun1.l.google.com:19302' },
      { urls: 'stun:stun2.l.google.com:19302' },
      { urls: 'stun:stun3.l.google.com:19302' },
      { urls: 'stun:stun4.l.google.com:19302' },
    ]
  };

  return (
    <div className="flex flex-col items-center h-full font-[family-name:var(--font-geist-sans)]">
      <div className="w-full p-1">
        <input
          type="text"
          value={roomName}
          onChange={(e) => setRoomName(e.target.value)}
          placeholder="Enter the same room name for both users"
          className="w-full px-4 py-2 bg-gray-800 text-white border border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-400"
        />
      </div>

      <div className="flex-1 w-full p-4">
        <ReactVideoCall
          roomName={roomName}
          firebaseConfig={firebaseConfig}
          RTCConfiguration={configuration}
        />
      </div>
    </div>
  );
}

🔐 Firebase Security Recommendation

For production use, apply proper Firebase Authentication and Firestore Rules to restrict access and ensure user privacy.

🧠 Notes

• Both users must enter the same room name to establish a connection.
• Ensure TURN servers are properly configured if behind firewalls or NAT (especially on mobile networks).

📄 License

ISC