Introduction to WebRTC

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

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