WebTorrent Workshop
00 - Build a real-time whiteboard with file sharing support
This last workshop is very open ended. We’re going to provide no guidance, but just give you an idea for a project to build.
Your task is to build a real-time whiteboard app. Users who visit the site should be able to draw on the whiteboard and all the other users should be able to see what has been drawn immediately. Additionally, if a user drops an image or video into the whiteboard, it should show up on the whiteboard for all the participants.
We recommend you use WebRTC to connect all users of the whiteboard together. And you can use WebTorrent to make the file transfers of images and videos work efficiently.
For an example of what this whiteboard would look like when finished, take a look at this video demonstration from Feross, the founder of WebTorrent.
Tips
We recommend you use the following technologies:
-
Web Canvas API - provides a means for drawing graphics via JavaScript and the HTML
<canvas>element -
simple-peer- Easiest library for getting started with WebRTC data channels -
Node.js - You’ll need a server-side component to send signaling data between peers to help them get connected over WebRTC. You can use any server language for this, but Node.js has the advantage of being JavaScript which we’re already using on the frontend.
-
ws- WebSocket server for Node.js. This library helps your users connect to the server over a real-time socket connection so that both the browser and the server can push data to each other immediately. This is very useful for handling the'signal'events that thesimple-peerlibrary will emit. -
WebTorrent - Use WebTorrent to make the file transfers of the images and videos work efficiently (with swarming)
Verify
Deploy your website and share the URL with us! If you build a cool website, please share it with us on Twitter @WebTorrentApp or on Discord. We love to share and promote the things created by the amazing WebTorrent community – and now that you’ve completed this workshop, that includes you!
Congrats you’ve finished all the workshops and you’re well on your way to being a master of peer-to-peer and all things WebTorrent and WebRTC!