WarsawJS Slides: Overview

We talk about JavaScript. Each month in Warsaw, Poland.

Speaker

Tomasz Rzeźnik

"WebRTC, komunikacja peer-to-peer." PL

2018-10-10

rzeznik.tom@gmail.com

Web Real-Time Communication

What is WebRTC

A set of JavaScript APIs in the browser to enable peer-to-peer, real-time media and data exchange.

Adapter

Same code in all browsers adapter.js

  • Remove vendor prefixes
  • Abstracts Chrome/Firefox differences
  • Minimizes effects of spec churn

Github | npm install webrtc-adapter | bower install webrtc-adapter
adapter-latest.js

Adapter.js is the glue that sticks your code to the different browser implementations of WebRTC.

WebRTC across platforms

Supported browsers & platforms

Chrome

Firefox

Opera

Android

iOS

Not supported

IE

Safari

WebRTC API

Three main RTC components

MediaStream

MediaDevices.getUserMedia()

            
                const constraints = { video: true, audio: true };

                navigator.mediaDevices.getUserMedia(constraints)
                .then(stream => {
                    const localVideo = document.getElementById('local-video');
                    localVideo.srcObject = stream;
                })
                .catch(error => {
                    console.log("navigator.mediaDevices.getUserMedia error: ", error);
                });

Video capability

            
                {
                    audio: true,
                    video: {
                        width: { min: 1024, ideal: 1280, max: 1920 },
                        height: { min: 776, ideal: 720, max: 1080 }
                    }
                }

Video on mobile devices

Access to front camera, if one is available

            
                {
                    video: { facingMode: "user" }
                }

Access rear camera

            
                {
                    video: { facingMode: { exact: "environment" } }
                }

Sample: 1.1

Sample: 1.2

RTCPeerConnection

RTCPeerConnection: P2P Connection Between Clients

RTCPeerConnection: Key Methods

• RTCPeerConnection() – constructor, returns a new RTCPeerConnection object

• .addStream(mediaStream) – attaches a MediaStream as a local audio / video source

• .createOffer() – creates offer session description

• .createAnswer() – creates answer session description

• .setLocalDescription(description) – sets description as local session description

• .setRemoteDescription(description) – sets description as remote session description

Signaling plane

Signaling is the process of coordinating communication and is use to exchange information:

– Session control messages used to open or close communication.

– Error messages. – Media metadata such as codec settings, bandwidth and media types.

– Key data, used to establish secure connections.

– Network data, such as a host's IP address and port as seen by the outside world.

SDP structure

SDP structure (conti.)

RTCPeerConnection: Connection Establishment

RTCPeerConnection: Connection Establishment

Sample: 2.1

RTCPeerConnection (conti.)

            
                const servers = null;
                const alice = new RTCPeerConnection(servers);
                const bob = new RTCPeerConnection(servers);

chrome://webrtc-internals/

RTCPeerConnection (conti.)

            
                servers: [
                {
                    "urls":"stun:u1.xirsys.com"
                }, {
                    "username":"dec22e 00-a1ff-11e7-9bfc- ce8483d9a683",
                    "urls":"turn:u1.xirsys.com:80?transport=udp",
                    "credentia l":"dec22e78-a1ff-11e7-98bd-5f53926dfc20"
                }
                ...
                ]

RTCDataChannel

Not Only Media – WebRTC Data Channels

• Enable exchange of arbitrary application data between peers

• Think WebSockets, but peer-to-peer

• Customizable delivery properties:

• Reliable or partially reliable delivery of sent messages

• In-order or out-of-order delivery of sent messages

• RTCDataChannel objects, created using RTCPeerConnection.createDataChannel()

• Some exciting ideas and use cases out there

The WebRTC Protocol Stack

• Peer-to-peer connection is established over UDP using ICE, STUN and TURN

• We can live without a few lost frames; low latency is more important

• DTLS (Datagram Transport Layer Security) is used to secure all data transfers between peers

• Unlike TLS, DTLS can be used over UDP

• Encryption is WebRTC’s mandatory feature

• SRTP (Secure Real-Time Protocol) is used to transport audio and video streams

• SCTP (Stream Control Transport Protocol) is used to transport application data

The WebRTC Protocol Stack (conti.)

RTCDataChannel

            
                const pc = new RTCPeerConnection();
                const dataChannel = pc.createDataChannel('sendDataChannel', {
                    reliable: true;
                });
                dataChannel.onerror = (error) => {
                    console.log('Channel Error:', error);
                };
                dataChannel.onmessage = (event) => {
                    console.log('Got Message:', event.data);
                };
                dataChannel.send('Hello World!');

Resources

Samples

webrtc.org

w3c.github.io

Thanks you for listening