TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Show HN: WebRTC Data Channels Example

91 点作者 tomashubelbauer超过 7 年前
<a href="https:&#x2F;&#x2F;github.com&#x2F;TomasHubelbauer&#x2F;webrtc-data-channel-demo" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;TomasHubelbauer&#x2F;webrtc-data-channel-demo</a><p>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.<p>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&#x27;s going on on each end of the connection) as well as combined approach where a peer can be both offerer and answerer.<p>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&#x27;s why it returns off file protocol - no server needed, just open and play!<p>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&#x2F;await instead of promises which also tremendously helps readability.<p>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.<p>If you&#x27;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!

3 条评论

Hydraulix989超过 7 年前
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.<p>[1] <a href="https:&#x2F;&#x2F;www.sococo.com&#x2F;blog&#x2F;webrtc-signaling-here-be-dragons" rel="nofollow">https:&#x2F;&#x2F;www.sococo.com&#x2F;blog&#x2F;webrtc-signaling-here-be-dragons</a>
评论 #15939791 未加载
评论 #15939981 未加载
评论 #15951834 未加载
评论 #15939772 未加载
indescions_2017超过 7 年前
Thanks! I&#x27;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.<p>Another useful resource for starting with WebRTC is Sam Dutton&#x27;s Simple Info site:<p><a href="https:&#x2F;&#x2F;simpl.info&#x2F;" rel="nofollow">https:&#x2F;&#x2F;simpl.info&#x2F;</a>
评论 #15942688 未加载
AquiGorka超过 7 年前
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: <a href="https:&#x2F;&#x2F;github.com&#x2F;AquiGorka&#x2F;webrtc-connect-experiments" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;AquiGorka&#x2F;webrtc-connect-experiments</a><p>On the games side, I am coding a web version of Kuhhandel (a german boardgame) where people play using their smartphones: <a href="https:&#x2F;&#x2F;github.com&#x2F;AquiGorka&#x2F;kuhhandel" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;AquiGorka&#x2F;kuhhandel</a><p>Here I used webrtc data channels to send a smartphone&#x27;s gyroscope data to a webapp that renders a virtual puppet. The puppets control bar mimics the smartphone&#x27;s orientation: <a href="https:&#x2F;&#x2F;github.com&#x2F;AquiGorka&#x2F;puppets" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;AquiGorka&#x2F;puppets</a><p>For really simple connections you can use this: <a href="https:&#x2F;&#x2F;github.com&#x2F;feross&#x2F;simple-peer" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;feross&#x2F;simple-peer</a>