Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to WebRTC

2307a37297162f815342545a2068b2f1?s=47 Erik Hellman
November 14, 2018

Introduction to WebRTC

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

2307a37297162f815342545a2068b2f1?s=128

Erik Hellman

November 14, 2018
Tweet

Transcript

  1. Introduction to WebRTC Introduction to WebRTC - @ErikHellman

  2. WebRTC Apps Introduction to WebRTC - @ErikHellman

  3. Classic web vs WebRTC Introduction to WebRTC - @ErikHellman

  4. Classic Web Introduction to WebRTC - @ErikHellman

  5. WebRTC - Peer-to-Peer Introduction to WebRTC - @ErikHellman

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

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

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

    await navigator .mediaDevices .getUserMedia({video: true, audio: true}) videoElement.srcObject = stream } Introduction to WebRTC - @ErikHellman
  10. 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
  11. Media Demos! Introduction to WebRTC - @ErikHellman

  12. Peer Connections Introduction to WebRTC - @ErikHellman

  13. Introduction to WebRTC - @ErikHellman

  14. STUN and TURN Introduction to WebRTC - @ErikHellman

  15. WebRTC Protocols • SRTP and SRTCP • Session Description Protocol

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

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

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

    { if (e.candidate) { signallingChannel.send(e.candidate.toJSON()) } }) } Introduction to WebRTC - @ErikHellman
  22. 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
  23. 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
  24. 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
  25. Final Demo! Introduction to WebRTC - @ErikHellman

  26. 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
  27. Thanks for listening! @ErikHellman Introduction to WebRTC - @ErikHellman