WebRTC fullmesh learning system

Warning

This system is built for learning purpose, and is supposed to only run locally. Not secure for production use on the internet. DO NOT USE FOR PRODUCTION.

About

WebRTC API is very useful for realtime communication between multiple endpoints. However, the handling of WebRTC API on browser side requires dealing with a lot of events which makes it harder to understand and implement, especially when connecting multiple endpoints. This system is aimed at helping understand the API by making these events visibly tracable by logs.

Characteristics of the system

  1. Queue based WebRTC instance management

    This is the most important part of the system. The WebRTC instance is handled by queue and only one is handled at a time so that its icecandidate events are sequentially being handled while exchanging sdps between peers. This is because "onicecandidate" event only gives you an event scope while each endpoint needs to know what(offering offer,received offer, answer)sdps they are exchanging with whom.

  2. Simplified message handling

    This apaproach is applied for both WebSocket and WebRTC. Every message object has "type" attribute for simplicity. The received message can be handled by a dedicated single responsible method(or function) for switching processes.

    This is simple but not a trivial thing. The practical value of this type of simplification on messaging shall appear much more realistic to you when you imagine a system with multiple realtime messaging interfaces constantly communicating without any common message handling protocol.

Running Enviroment

This system requires Docker,Web browser and an internet connected enviroment(for preparation)as running enviroment.

The tools for development are as follows:

OS

Windows 10

Docker

19.03.5

docker-compose

1.24.1

However, running on {Debian 10, Chromium and Node.js v10} stack is also checked.

Running issues may be related to the older vereions of your OS,Web brwoser, Docker. Try updating them when things dont work.

Preparation

Assuming you are at cloned repository directory from your terminal(or Command Prompt).

  1. Install Docker

    (If you are using Windows, make sure repository directory is shared with Docker. Make sharing available when disabled)

  2. build Docker image. by running:

    docker-compose -f docker-compose.run.yml build --no-cache

    For Windows user, alternative command is:

    prepare

Running

Assuming you are at cloned repository directory from your terminal(or Command Prompt).

  1. run:

    docker-compose -f docker-compose.run.yml run

    For Windows user, alternative command is:

    run

  2. Open multiple browser(Chrome) windows, then access

    localhost:8080

  3. Type names and press OK.This process will connect each windows.

  4. Check the connection by messaging.

  5. Time to read logs and codes.

Stopping the system

  1. Stopping from termnal(or Command Prompt), press:

    Ctrl(Command)+c

    If you're asked to press Y/N, then type y and enter.

  2. If you have closed the terminal.

    docker ps

    Shows all the containers currently running. Remember first few letters of the container id(first column)

    docker stop ${first few letters of the id}

    replace ${id} with the remembered first few letters of the id.

    You need to do this for those two(of docker ps):

    • ${id} webrtc-fullmesh-learning-system_ws-server

    • ${id} webrtc-fullmesh-learning-system_page-server

Further readings

WebRTC API

MDN's articles

Related sample

Chat sample