Peerly

Meet someone new. Start a conversation.
Random real-time video and text conversations, powered by peer-to-peer WebRTC.

---

📖 Overview

Peerly is a browser-based, real-time video chat platform that pairs strangers for anonymous, ephemeral conversations. No accounts, no history — just direct peer-to-peer video, mediated by a lightweight Socket.IO signaling layer and backed by STUN/TURN relay infrastructure for reliable connectivity across NATs and firewalls.

Built with Next.js 14, WebRTC, and Socket.IO.

✍️ Deep Dive

Curious how Peerly's NAT traversal, SDP handshakes, and media relays actually work under the hood?

📘 How WebRTC Finds a Way Through NAT: STUN, TURN, and the Hidden Infrastructure Behind Video Calls — by Jayesh Jadhav

---

✨ Features

• 🎥 Real-Time Video Calling — High-quality, low-latency audio/video via native WebRTC.
• 🔗 Peer-to-Peer Connection — Direct browser-to-browser transport for secure, low-latency chats.
• 🎲 Anonymous Matching — Random pairing of users for spontaneous video conversations.
• 💬 Real-Time Chatbox — Text messaging alongside live video meets.
• 🛡️ Anonymity — The server doesn't persist any chat history, recordings, or profiles.
• 🌐 NAT / Firewall Traversal — STUN and TURN relay support keeps calls connecting on restrictive networks.

---

🌐 STUN and TURN Servers

For Peerly to function effectively — especially behind restrictive NATs or firewalls — you need to configure your own STUN and TURN servers. These servers assist in establishing and maintaining peer-to-peer connections.

Purpose

• STUN Servers — Help discover public IPs and ports for establishing direct peer-to-peer connections.
• TURN Servers — Relay media when direct connections are blocked or unreliable.

Note: Configure your own STUN and TURN servers for optimal performance and security.

Configuration

1. Obtain Server Information — Use public servers for testing, or set up your own for production. You can get a free set from Metered STUN/TURN.

2. Integrate Servers — Update the WebRTC configuration in your application's config/config.ts:

   const configuration = {
     iceServers: [
       { urls: "stun:stun.example.org" },
       {
         urls: "turn:turn.example.org",
         username: "yourUsername",
         credential: "yourPassword",
       },
     ],
   };

3. Test the Configuration — Ensure connections are stable across various network environments (e.g. via chrome://webrtc-internals/).

---

🛠️ Technologies Used

• WebRTC — Enables peer-to-peer video and audio exchange for real-time video calling.
• Socket.IO — Transfers signaling messages and SDP offers/answers between peers.
• Next.js 14 — React framework for building server-side rendered applications.
• TypeScript — Type-safe development across frontend and backend.
• Tailwind CSS — Utility-first styling.
• Metered — STUN/TURN relay provider.

---

🚀 Installation

git clone https://github.com/JayeshJadhav28/Peerly.git
cd Peerly

Start the Frontend

cd app
npm install
npm run dev
# Open http://localhost:3000

Start the Server

cd ../server
npm install
npm run dev

---

🔗 Links

• 🌐 Live App: peerlynow.vercel.app
• ⚡ Signaling Server: peerly-server.onrender.com
• 📁 Repository: github.com/JayeshJadhav28/Peerly
• ✍️ Medium Deep-Dive: How WebRTC Finds a Way Through NAT
• 👤 Developer: jayeshjadhav.com

---

If you found this project or article helpful, consider giving the repository a ⭐ on GitHub!