WebRTC Tutorial

Demo

How WebRTC works? (by Minko Gechev)

Prerequisites of this tutorial:

Web server, database, socket handler, WebRTC adapter, etc. In this demo, Node.js and Express.js are used to build the web server, nginx is used as the proxy server handling load balancing, standalone MongoDB is used as the database to store socket information, Redis is used to handle session information, socket.io is used to handle socket channel, official adapter.js is the WebRTC adapter, Angular.js is used to construct the front-end MVC architecture, and so on.

Technical Terms of WebRTC:

Network Address Translation (NAT)

Session Traversal Utilities for NAT (STUN)

Traversal Using Relays around NAT (TURN): Relay Extensions to STUN

Interactive Connectivity Establishment (ICE): A Protocol for NAT Traversal for Offer/Answer Protocols

Demo 1. Broadcasting with recording mechanism (Chrome/Firefox)

1-1. Initiate a Node.js project:

See package.json as the reference of required modules

1-2. Back-end Development:

Get streams.js and socketHandler.js ready, before creating a server.js; streams handles the stream information and conmmunication with the database which is MongoDB in our case, and socketHandler.js handles the communication between streams.js and socket.io

1-3. Front-end Development:

Start to construct the front-end architecture built with angular.js, socket.io-client, WebRTC adapter.js, and rtcClient.js; angular.js is used to construct front-end MVC architecture, socket.io-client is used to handle the socket comminucation between front-end and back-end, adapter.js is an interface to handle RTC Peer, rtcClient.js is used to create a PeerManager to handle the communication between WebRTC adapter and front-end application which is built with angular.js

1-4. Put all together and start to test

http(s)://<IP:PORT or YOUR_DOMAIN>/broadcast is for broadcasting real-time video streams

http(s)://<IP:PORT or YOUR_DOMAIN>/watcher is for watching the broadcasted video streams

Flows:

  * General (users visit the web site)

    Browser --(1. Visit Website Broadcast/Watcher)--> Web Server --(2. Handle Socket Information)--> Socket Handler --(3. Send Notification)--> Browser

  * Broadcast

    ng-controller --(1. Configure Media Stream)--> adapter --(2. Set Local Stream)--> rtcClient --(3. Set Camera Stream)--> camera --(Notify All Scope to Update Message on Views)--> mg-controller


  * Watcher

    ng-controller --(1. Add Remote Peer)--> rtcClient --(2. Return Remote Peer)--> ng-controller

      1. Add Remote Peer

        Initiate a new Peer with peerConnectionConfig and peerConnectionConstraints. If success, send an notification to others via socket that a new ICE candidate is available

        Send **init** message to notify others via socket.io

        Remote broadcast site receives **init** notification and then send **offer** back to watcher site

        Watcher site receives **offer**, set session description, and then send **answer** back to broadcast site

        Broadcast site receives **answer** and set session description

===

SocketIO with Redis

socket.io-redis

Using multiple nodes of SocketIO

===

NOTE:

1. BinaryJS and rtcRecorder.js are for real-time recoding. Help yourself, if you get interested.

2. The configuration template of Nginx and the setting of binaryjs server are stored respectively in my_nginx and my_binaryjs folders

Ref.

PPT and Description for Broadcasting

WebRTC Infrastructure

Understanding WebRTC Media Connections: ICE, STUN and TURN

WebRTC beyond one-to-one communication

W3C WebRTC

Symmetric NAT and It’s Problems

Multi-User Video Conference with WebRTC

WebRTC adapter.js

WebRTC-everywhere

Temasys

Kurento Introduction (for Java developers)

Kurento (for Java developers)

BinaryJS API

MediaRecorder

DataChannel for Beginner

MediaStreamer

A mobile-first WebRTC client framework for building native apps

A React Native wrapper for the Twilio mobile SDK

A WebRTC module for React Native

Others:

Video Processing Experiments with OpenCV and WebRTC (WebRTC could be used to do something similar to the project of Commma.ai)

Fingerprint

Talks:

WebRTC for Beginners

Google: What's next for WebRTC?

WebRTC How it Works and How it Breaks

Swatting NATs with TURN and WebRTC

WebRTC Everywhere

The Future of ORTC with WebRTC

Recordings WebRTC Meetup Barcelona 2016

Companies:

TokBox

Appear.in

Temasys

Issues:

Can't create RTCIceCandidate