Introduction to WebRTC - Speaker Deck

Slide 1

Slide 1 text

Introduction to WebRTC Introduction to WebRTC - @ErikHellman

Slide 2

Slide 2 text

WebRTC Apps Introduction to WebRTC - @ErikHellman

Slide 3

Slide 3 text

Classic web vs WebRTC Introduction to WebRTC - @ErikHellman

Slide 4

Slide 4 text

Classic Web Introduction to WebRTC - @ErikHellman

Slide 5

Slide 5 text

WebRTC - Peer-to-Peer Introduction to WebRTC - @ErikHellman

Slide 6

Slide 6 text

Two parts of WebRTC • Media Devices • Peer Connections Introduction to WebRTC - @ErikHellman

Slide 7

Slide 7 text

WebRTC - Media Devices • Microphone • Camera • Screen capture • Streams & Tracks • Recording Introduction to WebRTC - @ErikHellman

Slide 8

Slide 8 text

getUserMedia() and MediaTrackConstraints const constraints = { video: { height: { ideal: 720 }, width: { ideal: 1280 } } } navigator.mediaDevices.getUserMedia(constraints) .then(mediaStream => { // Do something with the media stream }) Introduction to WebRTC - @ErikHellman

Slide 9

Slide 9 text

getUserMedia() and MediaTrackConstraints async function openCamera(videoElement) { const stream = await navigator .mediaDevices .getUserMedia({video: true, audio: true}) videoElement.srcObject = stream } Introduction to WebRTC - @ErikHellman

Slide 10

Slide 10 text

Discover Media Devices async function disocverDevices(selectElement) { const devices = await navigator.mediaDevices.enumerateDevices() devices.forEach(device => { const option = document.createElement('option') option.value = device.deviceId option.label = device.label selectElement.appendChild(option) }) Introduction to WebRTC - @ErikHellman

Slide 11

Slide 11 text

Media Demos! Introduction to WebRTC - @ErikHellman

Slide 12

Slide 12 text

Peer Connections Introduction to WebRTC - @ErikHellman

Slide 13

Slide 13 text

Introduction to WebRTC - @ErikHellman

Slide 14

Slide 14 text

STUN and TURN Introduction to WebRTC - @ErikHellman

Slide 15

Slide 15 text

WebRTC Protocols • SRTP and SRTCP • Session Description Protocol (SDP) • TURN & STUN (ICE) Introduction to WebRTC - @ErikHellman

Slide 16

Slide 16 text

RTCPeerConnection async function createPeerConnection() { const iceConfig = { iceServers: [{ urls: turn:myturnserver.com:19301 }] } return new RTCPeerConenction(iceConfig) } Introduction to WebRTC - @ErikHellman

Slide 17

Slide 17 text

Signalling • Not part of WebRTC • Needed for connection setup • Asynchronous! • Two types of messages: • Session Description • ICE candidates Introduction to WebRTC - @ErikHellman

Slide 18

Slide 18 text

Session Description const peerConnection = createPeerConnection() const offer = await peerConnection.createOffer() await peerConnection.setLocalDescription(offer) // TODO: Send offer to remote peer (SIGNALLING) Introduction to WebRTC - @ErikHellman

Slide 19

Slide 19 text

Session Description const peerConnection = createPeerConnection() const offer = await peerConnection.createOffer() await peerConnection.setLocalDescription(offer) // Signalling is NOT part of WebRTC! signallingChannel.send(offer) Introduction to WebRTC - @ErikHellman

Slide 20

Slide 20 text

Session Description signallingchannel.addEventListener('message', async message => { if (message.offer) await answerCall(message.offer) }) async function answerCall(offer) { const peerConenction = createPeerConnection() peerConnection.setRemoteDescription(offer) const answer = await peerConnection.createAnswer() signallingChannel.send(answer) return peerConnection } Introduction to WebRTC - @ErikHellman

Slide 21

Slide 21 text

ICE Candidates async function collectAndSendIceCandidates(peerConnection) { peerConnection.addEventListener('icecandidate', async e => { if (e.candidate) { signallingChannel.send(e.candidate.toJSON()) } }) } Introduction to WebRTC - @ErikHellman

Slide 22

Slide 22 text

ICE Candidates async function listenForRemoteCandidates(peerConnection, signallingChannel) { signallingChannel.addEventListener('message', async message => { if (message.iceCandidate) { const candidate = new RTCIceCandidate(message.iceCandidate) peerConnection.addICeCandidate(candidate) } }) } Introduction to WebRTC - @ErikHellman

Slide 23

Slide 23 text

Media + Peer Connection async function setupPeerConnectionAndVideo() { const peerConnection = createPeerConenction() const constraints = {video: true, audio: true} const stream = await navigator.mediaDevices .getUserMedia(constraints) stream.getTracks().forEach(track => { peerConnection.addTrack(track) }) } Introduction to WebRTC - @ErikHellman

Slide 24

Slide 24 text

Media + Peer Connection const peerConnection = createPeerConenction() const videoElement = document.querySelector('video#remote') const remoteStream = new MediaStream() // Starts empty! videoElement.srcObject = remoteStream peerConnection.addEventListener('track', track => { remoteStream.addTrack(track) }) Introduction to WebRTC - @ErikHellman

Slide 25

Slide 25 text

Final Demo! Introduction to WebRTC - @ErikHellman

Slide 26

Slide 26 text

Resources • webrtc.org - Official documentation • developer.mozilla.org/docs/Web/API/WebRTC_API - API References • webrtc.github.io/samples - Many small demos of the WebRTC API • github.org/webrtc - Additional resources Introduction to WebRTC - @ErikHellman

Slide 27

Slide 27 text

Thanks for listening! @ErikHellman Introduction to WebRTC - @ErikHellman