Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Learn how WebRTC actually works. A book on the protocols, not just APIs (webrtcforthecurious.com)
667 points by Sean-Der on Aug 30, 2020 | hide | past | favorite | 72 comments



Hey HN! This is a book I am working on to help de-mystify WebRTC. It is wonderful technology, but many find it hard to understand. Especially if you don't have a telephony background. Before this I worked on https://github.com/pion/webrtc and https://github.com/awslabs/amazon-kinesis-video-streams-webr...

I wanted to share all my knowledge from working on these.

------

Come learn about the WebRTC specification and how all the protocols work in depth, not just a tour of the APIs. The book is completely Open Source and available at https://github.com/webrtc-for-the-curious/webrtc-for-the-cur...

Learn the full details of ICE, SCTP, DTLS, SRTP, and how they work together to make up the WebRTC stack.

Hear how WebRTC implementers debug issues with the tools of the trade.

Listen to interviews with the authors of foundational WebRTC tech! Hear the motivations and design details that pre-dated WebRTC by 20 years.

Explore the cutting edge of what people are building with WebRTC. Learn about interesting use cases and how real-world applications get designed, tested and implemented in production.

Written by developers who have written all of this from scratch. We learned it the hard way, now we want to share it with you!

This book is vendor agnostic and multiple Open Source projects and companies are involved. We would love to have you involved!

reply


Hi Sean,

I remember your username from earlier posts, IIRC also quality content about WebRTC or similar ( implementation? )

I am not a writer, but did get some extended language education, and I suggest you get rid of most exclamation marks in your texts.

It makes the reading ... boring might the wrong word ( not a native speaker ).

Good luck and many thanks for your contributions.


Thanks for the feedback. I agree.

When talking to people I really want to emote. I am self conscious that people will think I am not interested/excited in the conversation. Through most of my life 'programming/tech' was something that I cared about. I never had any friends/family that cared though. When I became an adult and started working it felt like a re-birth of sorts :)

I just don't ever want anyone else to feel like I am not interested/excited. I will try dropping the exclamation points, and I hope that my enthusiasm still comes through.


My suggestion would be to throw in related illustrative real world anecdotes that drive a point home (personal experiences of real world impact of the tech or the architecture decisions, for example) instead of exclamation marks. That conveys the 'interested' part, and shows you can demonstrate real world connections to stuff that might otherwise be dry and academic. But it doesn't use exclamation marks! ;)


Just to be clear : I am talking about the book, not your HN comment ( for example at https://webrtcforthecurious.com/docs/01-what-why-and-how/ there are multiple examples )


I’m glad I saw this follow-up reply before commenting, as I was about to respectfully disagree. I only saw one ! in the HN comment you replied to that I thought was superfluous. Checking your example link however, I instead feel your feedback is well warranted.


Wow, me too! And I also use lots of exclamation marks when I write! You explained it better than I could have. Glad I'm not the only one.


Hi mate, just wanted to say thanks for the hard work, it's really appreciated honestly


For someone like myself who knows absolutely nothing about WebRTC, it would be helpful to add an introduction with the very basics: It stands for Real Time Communications, it has to do with videoconferencing? etc.


Video chatting is just one application. It's ideal for any application of real-time peer-to-peer streaming of data.


Exactly what we need! I'm tired of new comer programming some API using some terminal can call it programming. Understand the protocol!


Very cool! I was trying to get into WebRTC a couple of years ago and it was very hard to find proper information on it. Thank you!


Awesome work


I was fiddling with webrtc last week and I end up creating a very simplistic video chat. I was amazed on how easy it is to implement that kind of stuff. server (signaling) and client didn't took more than a few hundred lines of JS code.

I was determined to make a real app out of it, but everything I could think of, there were already other people doing similar stuff.

But its a nice piece of tech WebRTC, really impressed me.

here's my video chat in action: https://www.youtube.com/watch?v=YbQsQqbt70g (no audio cause I was using it to capture me speaking for the video recording)


I strongly suggest, for your next step up as a JS person, to take a peek at mediasoup.org. P2P has obvious scalability limitations. That lib not only makes server side forwarding easy (once you read example code), but it abstracts a lot of real-world needed WebRTC features such as simulcast and bandwidth estimation. You'll be making high quality Zoom-like pages in no time (beware though, the dev community ain't great for that lib because at least one of the authors comes off quite rude in the forums).

Also I'd be remiss to not point out the OP's own pion Go libs which do similar on the server side.


Is the server-side implementation of Mediasoup fairly light? Would be cool to run SFU inside something like a Cloudflare worker.


Not that light. It's a set of workers built in c++ and works with libwebrtc over udp. Cloudflare workers is js/v8 only and is specific to HTTP.


I'll check it out. thanks for the suggestion.


I suspect we will see a deluge of video chat apps in the near future. They will be similar to the wave of chat apps that appeared around 2015. I hope that the technology will mature soon. The current state of video communication seems improvable.


well, I thought about doing a video chat over some game play, so two friends could play a match of anything while having a video conversation, next day some one posted something similar here on HN.

I then thought about drawing on top of the video stream so you can use as like one os those games where you have to guess what the other people is drawing or, to coach someone one to one and being able to "comment" on their screen as they speak, but again, I'm pretty sure every video chats does that. So I left the idea on the drawer for now.

https://www.youtube.com/watch?v=yS3_CRr7tys (draw on the stream)


Any chance you can link the first one (video chat over gameplay)? I'm working on something similar. I've tried searching and didn't turn up all that much.


no, because not the game nor the app is ready, haha. sorry to disappoint

I was thinking something about Yahoo used to do: a chat room with several types of games and you and your friend could play one of those games while trash talk to each other on video


Sorry, I meant the link you saw here about someone doing something similar. I tried to find it on HN Search but only found stuff about board games.




Thank you!


You're discounting the applications far too readily !!! I'm absolutely convinced there's lots of open space for video apps.

Heck, maybe the Zoom ubiquity might have removed barriers for entry !


Sean, the author of this book, is an awesome human being. He is so passionate about helping and teaching others. He is also far too humble, he works on Amazon's C++ WebRTC implementation for AWS services, and then rewrote everything in Go to create Pion, an open source community around WebRTC. If you want to join the community, check out the #pion channel in Slack!


Thanks Ryan. I really enjoyed working together on Pion. All the relationships/experiences are what make it :) we still need to finish ffmpeg/desktop capture example.

https://pion.ly/slack if people want to join! If you are interested in RTC/VoIP/P2P it’s a great channel to be in. Lots of people working on many interesting projects in it.

I got the KVS job thanks to Pion! It was fun to have a second shot and not make the same mistakes.


For a client I created a telehealth system for mobile and desktop browsers atop Twilio Video and later OpenTok.

As an experiment in cost savings, I dove into the details and made a raw WebRTC version which worked well for a small number of users in peer to peer mode.

While I found plenty of device farms, none allowed use the device camera and mic.

How would you test a raw WebRTC video chat system short of buying a bunch of devices every generation?


This is what I do. You can make any audio or video the audio and video source. https://webrtc.org/getting-started/testing


I've never used or looked into WebRTC but seen it floated around and I think I heard Sean on a gotime podcast once? Not sure, but overall I have some offshoot interest as I generally like network protocols. The following is just some minor feedback after starting to go through this.

I started reading and got down to "Connecting" section in the "What, Why, and How" and realized I had no idea what it was used for still. I reread the "What is WebRTC" section, and yep:

> 'The WebRTC protocol is a set of rules for two WebRTC agents to negotiate bi-directional secure real-time communication.'

Totally missed that the first time through.

So, maybe it's just me or maybe I'm just tired, but I feel like it could be called out more what it is and what it is/can be used for. Like the first line in the "Media Communication" section:

> 'WebRTC allows you to send and receive an unlimited amount of audio and video streams.'

That was helpful. And then the "Applied WebRTC" page seems helpful as well. Maybe point these out early on in the document somewhere?

Hope this helps. I've bookmarked and looking forward to reading this more (when I'm not so tired).


I remember working on a simple peer-peer chat using WebRTC [1] and it took me a long time to actually grok what the whole protocol was and how it worked, even with off-the-shelf libraries available. This would have saved me so much time!

[1] https://github.com/cktang88/markdown-chat


Thanks :)

It is really empowering to build stuff quickly. When you hit that wall of abstraction it is so frustrating (especially when debugging).

If there are any topics/ideas you have would love to hear! I want this to be a community owned resource.


This is great! I recently built a similar thing because I wanted to learn more about WebRTC. Fun to see someone else's take.

https://tmpch.at


I create this website using webRTC to play torrent videos https://popcorntime.tube/ on the browser


That's really cool!

Do you plan on open-sourcing it some day?


Hah! OK, now that is cool. Props!


That is awesome!


Maybe this is something most people already know, but I didn't. The acronym RTC was not expanded or the term WebRTC explained anywhere on the site. It seems this is for the curious who already know what it is.

I did a search and found that it means Real Time Communication. That was one of my guesses, but you might think if someone is trying to draw in and educate the curious, you would want to explain the very basics of the topic right off the bat.


It is the first thing of the first chapter:

> WebRTC, short for Web Real-Time Communication

https://webrtcforthecurious.com/docs/01-what-why-and-how/

Unfortunately the landing page is not the first chapter but an "about" page. It would make sense to me to have the landing page be the first chapter.


Pretty sure that wasn't there when I made my comment. That's the first section I went to, and only found the name used in reference to itself.

I found an aggregator link to the article, and first line of that section is: WebRTC is both and API and a protocol. No "short for" part.

Glad it has been added now. The rest of that paragraph has been improved too so now it gives a good quicky overview of what this is.


Hi, thanks for this and making it freely available. just wondering why you chose the license to waive all attribution as well?


I don't want to make the book (or my other projects) to be about me. Some developers use their Open Source projects to further their celebrity. Then no one else wants to contribute, why just help someones vanity project. The projects languish and die out.

So I try not to put my name on things, and license liberally. My hope is that Pion and 'WebRTC for the Curious' will generate more of a community.


Your stance is very nice and good intended, but I don't think being attributed your work should be a problem at all in forming a good community. IMHO the ingredients are not necessarily extreme humbleness and having the most liberal licensing, instead actually good contents and just basic politeness / not thinking of oneself as a superior being, should be enough.

Probably something like the GNU Free Documentation License [1] could have been also perfectly fine. It would also prevent some shark from waiting until the text is complete and polished and then take the work of authors and contributors and sell it while passing it as their own. And that's quite a nice feature in my book (pun intended)

Whatever, I like the idea of making this the best possible resource for all things WebRTC :-)

[1]: https://en.wikipedia.org/wiki/GNU_Free_Documentation_License


I made a live drone broadcasting platform called drohub at https://drohub.xyz based on webrtc. Webrtc is hard indeed even with the help of Janus gateway. Will definetly have a read, as I still consider myself a noob on it. Hope you get good feedback.


When you mention a protocol can clarify on what ISO/Stack it’s?

I have no idea if ICE is application protocols or connection and that really would me be understand the first chapter.

Just add something like “ICE (at the same stack level as TCP/TLS/HTTP”.


Will do! ICE is layer 4(I think ?)

ICE is used to establish connectivity over UDP, TCP, TLS or DTLS. With a preference in that order. It just keeps falling back to more expensive transports if the prior ones failed.


This is great! I just spent the weekend researching WebRTC for a language learning project I'm working on. I have a few questions about SFUs. Maybe someone here can help.

1. SFUs seem to be the clear winner for multi-party calls. Do they provide any advantage for 1-on-1 calls over peer'd connections? It seems like using an SFU in this case would double the number of connections, and hence double the connection issues.

2. Do clients communicate with SFUs by establishing a normal RTCPeerConnection like they would with another peer? Or is there some other video sharing protocol for SFUs that I don't know about?


1. Not as much benefit for 1-on-1 except that you can guarantee connectivity without a STUN server, can get a bit more predictable network paths from client to server than client to client, and can abstract choosing the best simulcasted stream quality. It won't double the connection count, but it can make you upload unnecessary streams in the case of simulcast, because the client won't be the one determining which stream quality is best, it'll just send multiple.

2. Yup, SFU acts like another client. Some libs do one connection for up and one for down or other ways to handle stream multiplexing, but overall it's the same WebRTC peer connections.


Thank you! This is very helpful! We are doing mostly 1-on-1 calls, so I'm considering if peered connections would be better. They're certainly cheaper. I hadn't considering simulcasting multiple quality streams. That's something to think about.

By "doubling connection count" I mean CLIENT <-> SFU <-> CLIENT is twice as many as CLIENT <-> CLIENT.


Some do peer to peer for 1:1, then upgrade to actually using the SFU for more participants. But that's a challenge on its own, so when more than 1:1 is expected, you might just prefer to use SFU from the start, and save the hassle for when to switch between those two models


Thank you! That’s good advice


Great, this would have helped us a lot in the implementation of a remote control app we did with webrtc. In my opinion, the best available resource at the moment is https://hpbn.co/webrtc/. (Also about a lot of other protocols)


Any hints on getting the browser makers to enable us to disable it?

I gave up on Chrome because it was preventing my mac from sleeping because "webRTC has active peer connections". Before de mistifying its inner workings, you may want to address why we'd want it and why it messes with power management.


You'll never get that. You'll just have to opt out of it. i think there is an extension or two to turn it off in chrome. Maybe that will fix your problem? Also I think there is just a bool to turn off in firefox as well.


In firefox, about:config and set media.peerconnection.enabled to false.


Yep, that's one of the reasons I'm on Firefox now. Was talking about Chrome though.


I would imagine contacting the browser makers could be a good start


Google? I don't think I could get this topic to the top of HN and I don't know anyone high in the food chain at Google. So... that wouldn't work.



I can. Doubt Google's Machine Learning!(tm) will pick it.


Sean is amazing and has great expertise with webrtc, excited to read this :)


Thanks! When you said you learned Go to use Pion it made my day. It felt great to make something people actually wanted.


I legitimately still think pions is one of the only good webrtc libraries out there, an absolute pleasure to use. The same day I learned go in 30 minutes, I converted 4k lines to use pions and the result was fantastically stable. Keep it up!


Before I know about WebRTC I always thought you need to spent enormous amount of time and money to built a video chat system. Turns out I was able to implement my idea in less than 3 days with WebRTC.


I did some stuff with WebRTC a year ago and it was so hard to find relevant learning materials. The technology is so cool and I can't wait to dig into this book. Thank you for putting this out!


Very cool!

First thing I noticed, on mobile this would benefit from a Next Page link.


I started working with webrtc and compatibility across browsers was a problem not sure if now it's been standardized


It still is, but webrtc-adapter [1] aims to provide shims wherever they are needed to transparently provide the same API across all supported browsers

[1]: https://github.com/webrtchacks/adapter


This is fantastic!!! Really well done.


Thanks! Hopefully you learned something. If you have any ideas on how to make it better would love to hear :)




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: