Introduction to WebRTC

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

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