$30 off During Our Annual Pro Sale. View Details »

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. Introduction to
    WebRTC
    Introduction to WebRTC - @ErikHellman

    View Slide

  2. WebRTC Apps
    Introduction to WebRTC - @ErikHellman

    View Slide

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

    View Slide

  4. Classic Web
    Introduction to WebRTC - @ErikHellman

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  11. Media Demos!
    Introduction to WebRTC - @ErikHellman

    View Slide

  12. Peer Connections
    Introduction to WebRTC - @ErikHellman

    View Slide

  13. Introduction to WebRTC - @ErikHellman

    View Slide

  14. STUN and TURN
    Introduction to WebRTC - @ErikHellman

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  25. Final Demo!
    Introduction to WebRTC - @ErikHellman

    View Slide

  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

    View Slide

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

    View Slide