Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

WebRTC and Peer-to-Peer Video Calling with Ian Ramzy

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk with Ian Ramzy about <a href="http://zipcall.io/">ZipCall.io</a> — how he built it, why, and some of the surprising choices he made along the way.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sentry__Sponsor_9" name="Sentry__Sponsor_9"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11">If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code “tastytreat”.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Stackbit__Sponsor_12" name= "Stackbit__Sponsor_12"></a>Stackbit - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. <a href= "https://syntax.fm/show/250/stackbit.com" target="_blank" rel= "noopener noreferrer">stackbit.com</a></p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Guests_15" name="Guests_15"></a>Guests</h2> <ul> <li class="has-line-data" data-line-start="16" data-line-end="18"> <a href="https://ianramzy.com/">Ian Ramzy</a></li> </ul> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes</h2> <p class="has-line-data" data-line-start="20" data-line-end="21"> 02:08 - Who are you and what’s your background?</p> <p class="has-line-data" data-line-start="22" data-line-end="23"> 05:34 - Why did you build this?</p> <p class="has-line-data" data-line-start="24" data-line-end="25"> 13:55 - What is it built in?</p> <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> Express server</li> <li class="has-line-data" data-line-start="27" data-line-end="29"> Web sockets</li> </ul> <p class="has-line-data" data-line-start="29" data-line-end="30"> 16:10 - Why is there no tooling?</p> <ul> <li class="has-line-data" data-line-start="31" data-line-end="32"> GetUserMedia</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> WebRTC</li> <li class="has-line-data" data-line-start="33" data-line-end="36"> Twilio STUN/TURN/ICE infrastructure <ul> <li class="has-line-data" data-line-start="34" data-line-end="36"> <a href= "https://www.twilio.com/docs/stun-turn/faq">https://www.twilio.com/docs/stun-turn/faq</a></li> </ul> </li> </ul> <pre data-initialized="true" data-gclp-id="0"> <code class="has-line-data" data-line-start="37" data-line-end= "41">VideoChat.peerConnection = new RTCPeerConnection({         iceServers: token.iceServers,       }); </code> </pre> <p class="has-line-data" data-line-start="42" data-line-end="43"> 24:31 - How does your server deal with an influx of users?</p> <p class="has-line-data" data-line-start="44" data-line-end="45"> 27:11 - How do each of these features work?</p> <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> Auto-scaling video quality</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> Text chat</li> <li class="has-line-data" data-line-start="48" data-line-end="49"> Screen sharing</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> Picture in picture</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Live captions</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> Loading animation</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> No download required, entirely browser based</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> Direct peer to peer connection ensures lowest latency</li> <li class="has-line-data" data-line-start="54" data-line-end="56"> Single use disposable chat rooms</li> </ul> <p class="has-line-data" data-line-start="56" data-line-end="57"> 41:32 - Have you looked into any of the recording APIs?</p> <h2 class="code-line" data-line-start="58" data-line-end="59"> <a id="Links_58" name="Links_58"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href= "https://github.com/ianramzy/decentralized-video-chat">ZipCall</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://zoom.us/">Zoom</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://jquery.com/">jQuery</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://webtorrent.io/">WebTorrent</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://www.heroku.com/">Heroku</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://github.com/webrtc/adapter">Adopter.js</a></li> <li class="has-line-data" data-line-start="65" data-line-end="67"> <a href="https://www.figma.com/">Figma</a></li> </ul> <h2 class="code-line" data-line-start="67" data-line-end="68"> <a id="_SIIIIICK__PIIIICKS__67" name= "_SIIIIICK__PIIIICKS__67"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="68" data-line-end="69"> Ian: <a href="https://www.notion.so/">Notion</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> Scott: <a href= "https://www.youtube.com/channel/UCtUbO6rBht0daVIOGML3c8w">Summoning Salt</a></li> <li class="has-line-data" data-line-start="70" data-line-end="72"> Wes: <a href="https://amzn.to/3e4WfE4">4 Channel WiFi Momentary Inching Relay Self-Lock Switch Module</a></li> </ul> <h2 class="code-line" data-line-start="72" data-line-end="73"> <a id="Shameless_Plugs_72" name="Shameless_Plugs_72"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="73" data-line-end="74"> Ian <a href="https://zipcall.io/">ZipCall</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> Scott: <a href="https://www.leveluptutorials.com/pro">All Courses</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="75" data-line-end="77"> Wes: <a href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="77" data-line-end="78"> <a id="Tweet_us_your_tasty_treats_77" name= "Tweet_us_your_tasty_treats_77"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Scott and Wes talk with Ian Ramzy about ZipCall.io — how he built it, why, and some of the surprising choices he made along the way.
 Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
 Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com
 Guests  Ian Ramzy

  Show Notes 02:08 - Who are you and what’s your background?
 05:34 - Why did you build this?
 13:55 - What is it built in?
  Express server
 Web sockets
  16:10 - Why is there no tooling?
  GetUserMedia
 WebRTC
 Twilio STUN/TURN/ICE infrastructure  https://www.twilio.com/docs/stun-turn/faq

  VideoChat.peerConnection = new RTCPeerConnection({     iceServers: token.iceServers,    });  24:31 - How does your server deal with an influx of users?
 27:11 - How do each of these features work?
  Auto-scaling video quality
 Text chat
 Screen sharing
 Picture in picture
 Live captions
 Loading animation
 No download required, entirely browser based
 Direct peer to peer connection ensures lowest latency
 Single use disposable chat rooms
  41:32 - Have you looked into any of the recording APIs?
 Links  ZipCall

 Zoom

 jQuery

 WebTorrent

 Heroku

 Adopter.js

 Figma

  ××× SIIIIICK ××× PIIIICKS ×××  Ian: Notion

 Scott: Summoning Salt

 Wes: 4 Channel WiFi Momentary Inching Relay Self-Lock Switch Module

  Shameless Plugs  Ian ZipCall

 Scott: All Courses - Sign up for the year and save 25%!
 Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
  Tweet us your tasty treats!  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

WebRTC and Peer-to-Peer Video Calling with Ian Ramzy

Poslechněte si podcast