webRTC HTML5 whiteboard/video chat

Question

I'm exploring the options for building a bleeding edge whiteboard application (much like Big Blue Button or Wimba) using webRTC, HTML5, socket.io and node.js. This would be for one-on-one communication ... no more than two users communicating with each other at a time.

I'd like use data channels to pass whiteboard data between clients, then have some sort of listener on the server end that can record the video/audio/whiteboard actions. The server listeners would in effect be wire-tapping the whiteboard/audio/video chat. In other words, if the server to client connection gets laggy, it would not affect the quality of the P2P (client-to-client) webRTC connection. This way the server can record the whiteboard interactions at a lower priority leaving the one-on-one chat interactions as high speed as possible.

Are there any libraries or javascript frameworks that would work well for a shared whiteboard that I should know about?

Answer 1

Disclaimer: this answer is outdated, see this answer on how something like this can be accomplished.

---

WebRTC is still very new, support is also still a bit shaky. Needless to say no libraries or frameworks that do this sort of thing for you exist.

What you probably want to do is use WebSockets (with socket.io which you are already using) to send some of the data from the client to the server, and simultaneously send the data over WebRTC.

You can check how fast the connection is (by a sample upload and a sample download) and decide which strategy you want to use:

1. Use WebRTC and record nothing, or record only on the client side and upload to the server when done
2. Use both WebRTC and WebSockets , only use WebSockets to transfer 'some' data to the server where 'some' depends on what the connection can hold.
3. Use only WebSockets and transfer all the data to the server, with no P2P involved.

I think the most viable options are the first and second.

This also greatly depends on the implementation of the White Board, if you're only passing vector data for what was drawn on the board, even AJAX can handle the load, however, if you are passing live video I think nothing but WebRTC will effectively handle the load.

Good luck! This sounds like an interesting idea. I hope I will be able to edit this answer in a few months with a long list of libraries and frameworks that would let you easily do this.