Show HN: WebRTC Data Channels Example

91 points by tomashubelbauer 8 years ago | 9 comments

https://github.com/TomasHubelbauer/webrtc-data-channel-demo

Hi! I made this GitHub repo to try and show WebRTC data channels and the connection establishment flow in a different way from what I was able to find online.

My aim with this repository is to make WebRTC data channels accessible to any web developer by showcasing offerer and answerer separately for total novices (makes it much clearer what's going on on each end of the connection) as well as combined approach where a peer can be both offerer and answerer.

I use postMessage instead of a real signalling channel, because I got fed up with people bringing whatever 3rd party signalling solutions to their WebRTC tutorials and I want for this to be as simple to set up and run as possible. That's why it returns off file protocol - no server needed, just open and play!

One more goal with this tutorial is to keep it up to date. Once a supported browser (Chrome, Firefox) starts complaining about a deprecated API or the WebRTC spec evolves, I try to rewrite the demo to use the latest and greatest. You can see that in me using async/await instead of promises which also tremendously helps readability.

In the future, I will extend this to support mesh connection topology and make it possible to hold group conversations or multiple conversations at the same time.

If you've been waiting to see what all the fuss with WebRTC is about, I hope this encourages you to start exploring. Any feedback is welcome!

Hydraulix989 8 years ago |

The signaling server is where a lot of the real complexity comes from [1]. I even had to write my own from scratch for our production implementation.

[1] https://www.sococo.com/blog/webrtc-signaling-here-be-dragons

joantune 8 years ago | |

Did you look into any of these:

https://www.html5rocks.com/en/tutorials/webrtc/infrastructur... before implementing that one?

Hydraulix989 8 years ago | | |

Yes, that's the first Google result, and they suggested building your own using socket.io -- read my article, if you haven't already (but some of their other _stack_ suggestions are decent).

Their ready-made signaling server suggestions are complete garbage (Signalmaster is buggy and incorrect).

moron4hire 8 years ago | |

I've not found signalling to be complex at all. You're just forwarding messages from one user to another. The server in the middle doesn't need to know anything other than to whom the messages go.

The one thing that is not handled in any material I've ever read on WebRTC: how to sequence more-than-two users joining a session at the same time, and how to recover from errors and stalled connection attempts (where the latter is a significant impediment to the former).

Hydraulix989 8 years ago | | |

Let me test your implementation then. ;-)

GroSacASacs 8 years ago | |

How did the situation evolve since 2014

indescions_2017 8 years ago |

Thanks! I'd be curious also to hear what sort of applications you plan on building with WebRTC. My own interest lies in HTML5 web gaming and peer networks.

Another useful resource for starting with WebRTC is Sam Dutton's Simple Info site:

https://simpl.info/

fiatjaf 8 years ago | |

Ok, let me jump in with https://fiatjaf.alhur.es/pouch-replicate-webrtc/, you can replicate a totally in-client database between browsers.

The example doesn't use a signaling server, you must copy and paste the ICE candidates between browsers (do not use the same browser for the example, that's cheating) and then the connection is established and the database is replicated every time you add a document.

Also, read the source, it's very very simple (since you must provide your own WebRTC DataChannels).

AquiGorka 8 years ago |

I have some repos that use WebRTC to connect clients, I created this experiment where I will try to send the needed ice data via audio, to connect peers: https://github.com/AquiGorka/webrtc-connect-experiments

On the games side, I am coding a web version of Kuhhandel (a german boardgame) where people play using their smartphones: https://github.com/AquiGorka/kuhhandel

Here I used webrtc data channels to send a smartphone's gyroscope data to a webapp that renders a virtual puppet. The puppets control bar mimics the smartphone's orientation: https://github.com/AquiGorka/puppets

For really simple connections you can use this: https://github.com/feross/simple-peer