/Wave

Video Conferencing web application in Vanilla Javascript utilizing WebRTC

Primary LanguageHTMLMIT LicenseMIT

WaveConnect Logo

WebRTC JavaScript Socket.IO Tailwind CSS PeerJS

Description • Architecture • WebRTC • Installation and Setup • License

Description

WaveConnect is a JavaScript-based video conferencing application using WebRTC, featuring a mesh topology to facilitate seamless multi-peer connections.

Architecture

architecture

WebRTC

  • A wants to connect to B.
  • A creates an offer, which includes SDP, ICE candidates, and security options.
  • A sends the offer to B using a chosen method.
  • B creates an answer after processing A's offer.
  • B sends the answer back to A.
  • Connection is established.

(Additional information about NAT, STUN, TURN, ICE, and SDP is provided.)

(Additional information about NAT, STUN, TURN, ICE, and SDP is provided.)

  1. NAT : Network Address Translation

  2. STUN Server :

    • Session Traversal Utilities for NAT
    • Does nothing, just required to get our public address so that we can share it to communicate with others, since we are using NAT.

  3. TURN Server :

    • Traversal Using Relays around NAT
    • Just a normal server that relays packets

  4. ICE :

    • Interactive Connectivity Establishment : protocol
    • ICE collects all available candidates(ice candidates)
    • All collected addresses are then sent to remote peer via SDP.

  5. SDP (Session Description Protocol)

    • A format that describes ice candidates, networking options,media options, securtiy options and a lot of other stuff
    • Not a protocol, its a format
    • The goal is to take the SDP generated by user and send it to the other party

  6. Signalling

    • Send the SDP to other party via any of methods available like web sockets, HTTP request.

Installation and Setup

Prerequisites: node js, yarn/npm, git

  1. Clone the repository:
git clone https://github.com/VenuChoudhary001/Wave.git

Change the directory to wave-server

cd wave-server
$ yarn dev

Setup Peer server

  • Using npm
$ npm install peer -g
  • Using yarn
$ yarn add peer -g

Running peer server

Open a new terminal window and run server

$ peerjs --port 9000

Change the directory to wave-client

Install dependencies

$ yarn

Add the socket port here

let socket = io(`${SOCKET_SERVER_URL}`);
const myPeer = new Peer(undefined, {
  host: "/",
  port: "9000",
});

Start client

$ yarn start

License

This project uses an MIT license.

(back to top)