Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Introduction to WebRTC

Erik Hellman
November 14, 2018

Introduction to WebRTC

Introduction to WebRTC presented at Uppsala.js, November 14th, 2018.

Erik Hellman

November 14, 2018
Tweet

More Decks by Erik Hellman

Other Decks in Programming

Transcript

  1. Two parts of WebRTC • Media Devices • Peer Connections

    Introduction to WebRTC - @ErikHellman
  2. WebRTC - Media Devices • Microphone • Camera • Screen

    capture • Streams & Tracks • Recording Introduction to WebRTC - @ErikHellman
  3. 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
  4. getUserMedia() and MediaTrackConstraints async function openCamera(videoElement) { const stream =

    await navigator .mediaDevices .getUserMedia({video: true, audio: true}) videoElement.srcObject = stream } Introduction to WebRTC - @ErikHellman
  5. 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
  6. WebRTC Protocols • SRTP and SRTCP • Session Description Protocol

    (SDP) • TURN & STUN (ICE) Introduction to WebRTC - @ErikHellman
  7. RTCPeerConnection async function createPeerConnection() { const iceConfig = { iceServers:

    [{ urls: turn:myturnserver.com:19301 }] } return new RTCPeerConenction(iceConfig) } Introduction to WebRTC - @ErikHellman
  8. Signalling • Not part of WebRTC • Needed for connection

    setup • Asynchronous! • Two types of messages: • Session Description • ICE candidates Introduction to WebRTC - @ErikHellman
  9. 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
  10. 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
  11. 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
  12. ICE Candidates async function collectAndSendIceCandidates(peerConnection) { peerConnection.addEventListener('icecandidate', async e =>

    { if (e.candidate) { signallingChannel.send(e.candidate.toJSON()) } }) } Introduction to WebRTC - @ErikHellman
  13. 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
  14. 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
  15. 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
  16. 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