Simple WebRTC Video Chat

This project is a minimal implementation of a one-to-one video chat application using WebRTC. It demonstrates the core concepts of WebRTC, including accessing user media, creating a peer-to-peer connection, and the "signaling" process required to connect two browsers.

How it Works: The Manual Signaling Flow

WebRTC requires a "signaling" mechanism for two peers (browsers) to exchange connection information. In a real-world application, this is typically handled by a server (using WebSockets or another transport). This project simplifies the concept by performing signaling manually. Users must copy and paste connection details (called Session Descriptions or SDP) between two browser windows to establish the connection.

Here is the step-by-step flow:

1. Initialization:

   • When you open index.html in a browser, the init() function in script.js is called.
   • It requests access to your camera.
   • Once you grant permission, your local video stream appears in the "User 1" video box.

2. Peer 1 (The Caller) Creates an Offer:

   • The first user clicks the "Create Offer" button.
   • This triggers the createOffer() function, which:
     • Creates an RTCPeerConnection object.
     • Generates an "offer" (an SDP string) that describes Peer 1's desired connection settings (e.g., video codecs).
     • Sets this offer as its localDescription.
     • Displays the offer in the "Offer SDP" text area.

3. Peer 2 (The Callee) Creates an Answer:

   • Peer 1 copies the offer text and sends it to Peer 2 (e.g., via a messaging app).
   • Peer 2 opens the application, sees their own video, and pastes the offer into the "Offer SDP" text area.
   • Peer 2 clicks the "Create Answer" button, which triggers createAnswer():
     • It creates its own RTCPeerConnection.
     • It sets the received offer as its remoteDescription.
     • It generates an "answer" (an SDP string) in response.
     • It sets the answer as its localDescription.
     • Displays the answer in the "Answer SDP" text area.

4. Peer 1 Adds the Answer:

   • Peer 2 copies the answer text and sends it back to Peer 1.
   • Peer 1 pastes the answer into the "Answer SDP" text area.
   • Peer 1 clicks the "Add Answer" button, which triggers addAnswer():
     • It sets the received answer as its remoteDescription.

5. Connection Established!

   • At this point, both peers have exchanged all necessary information. The WebRTC engine in their browsers works in the background to establish a direct peer-to-peer connection.
   • Once connected, the remote user's video stream will appear in the "User 2" video box.

Key Functions in script.js

• init(): Gets local camera access and displays the stream.
• createPeerConnection(): A helper function that sets up the RTCPeerConnection object, configures STUN servers (for NAT traversal), and defines event handlers.
  • ontrack: This event fires when a media track is received from the remote peer. The code adds this track to the "User 2" video element.
  • onicecandidate: This event fires when the browser finds a network path (ICE candidate). In this simple app, the candidates are bundled into the offer/answer.
• createOffer(): Initiates the connection by creating an SDP offer.
• createAnswer(): Responds to an offer by creating an SDP answer.
• addAnswer(): Finalizes the connection by accepting the answer.

How to Run

1. Open index.html in two separate browser tabs or windows.
2. Follow the manual signaling flow described above.