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

You're on Mute! WebRTC and our Lives on Screen ...

You're on Mute! WebRTC and our Lives on Screen - GIDS Live 2021

WebRTC is the technology that powers video calls in browsers. What you might not know are all the features WebRTC unlocks for the web. In this talk we'll take a journey through WebRTC, from the primitives and protocols to the projects that have been built.

You'll learn the basics of getting two peers connected in a video chat and move on to advanced topics like camera control, screen sharing, audio analysis, using the data channel and more. We might even be able to solve the "You're on mute!" problem that plagues every video chat.

When you understand WebRTC and the related APIs you'll be amazed with what you can build.

--

Links:

Choosing cameras in JavaScript: https://www.twilio.com/blog/choosing-cameras-javascript-mediadevices-api-html
MediaDevices API examples: https://github.com/philnash/mediadevices-camera-selection
Screen capture with getDisplayMedia: https://www.twilio.com/blog/screen-sharing-javascript-twilio-programmable-video

RTC Diagnostics library. Test bitrate, audio input, audio output and video input in the browser: https://github.com/twilio/rtc-diagnostics/

Phil Nash

April 27, 2021
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. Today 1. Basics of WebRTC 2. WebRTC Usage 3. Controlling

    the user experience 4. Tools and takeaways @philnash
  2. ICE • ICE — Interactive Connectivity Establishment • NAT —

    Network Address Translation • STUN — Session Traversal Utilities for NAT • TURN — Traversal Using Relays around NAT @philnash
  3. getUserMedia - Permissions navigator.mediaDevices.getUserMedia({ audio: true, video: true }) .then(stream

    => { // success }) .catch(error => { // permission denied }); 01. 02. 03. 04. 05. 06. @philnash
  4. Media Constraints - facingMode { audio: true, video: { facingMode:

    "user" // "environment", "right", "left" } } 01. 02. 03. 04. 05. 06. @philnash
  5. Media Constraints - deviceId { audio: true, video: { deviceId:

    { exact: device.id } } } 01. 02. 03. 04. 05. 06. @philnash
  6. Media Constraints - resolution { audio: true, video: { width:

    1920, height: 1080 } } 01. 02. 03. 04. 05. 06. 07. @philnash
  7. Media Constraints - resolution { video: { width: { min:

    320, max: 1920, ideal: 1920 }, height: { min: 240, max: 1080, ideal: 1080 } } } 01. 02. 03. 04. 05. 06. @philnash
  8. Media Constraints - resolution { video: { width: { exact:

    1920 }, height: { exact: 1080 } } } // => 🚨 OverconstrainedError 01. 02. 03. 04. 05. 06. 07. @philnash
  9. Media Constraints - torch 🔦😄 { video: { advanced: [{

    torch: true }], } } 01. 02. 03. 04. 05. @philnash
  10. Media Constraints - torch 🔦😄 { video: { advanced: [{

    torch: false }], // doesn't work 🤨 } } 01. 02. 03. 04. 05. @philnash
  11. Web Audio API Not part of WebRTC Vital part of

    displaying audio to the user @philnash