Peer-to-Peer Video Chat with PeerJS

I was speaking with a potential customer about their project which has a video component to it. Their need was to build out a system for peer-to-peer video, record it, and distribute the video. It’s a pretty tall order that got me thinking about how difficult that would be to build out.

It turns out to be very difficult in a real life scenario so naturally I had to try it out. This is how the network diagram looked once I got it working.

webrtc diagram

WebRTC is a fascinating technology that will give us access to the mic and camera through the browser. Under the hood it’s also going to give us some really nice video and audio codecs. The browser can use network hole punching to achieve peer-to-peer in the browser.

After reading through a lot of the information about WebRTC and the associated libraries I came to understand that it is quite the undertaking. No wonder the customer could not easily accomplish the goal of integrating their video feature that way.

Peers

I used the web server to connect up the peers and save their username.

webrtc diagram

Rooms

We’re going to need different rooms for people to talk in.

webrtc diagram

Video chat

It worked! Finally, we get in the room and activate our video.

webrtc diagram

Strategy

In the demo I had the peers in a room all try to maintain connections to all other peers. That is not the most efficient way to connect the peers because they will each have to send their video to all the other peers rather than to some intermediate server. However, when you’re just messing around it’s great!

If you’re looking for more sophisticated architectures you can look for:

  • webrtc sfu
  • webrtc mcu

Try it!

If you get the time it’s pretty neat to learn about and experiment with.

Reference and interesting libraries

Author Tony Crowe, Salt Lake City, UT
top
home
Attribution
Lato font by Łukasz Dziedzicwww.latofonts.com/team
Roboto font by Christian Robertson, Google Incchristianrobertson.comwww.google.com/fonts
Inconsolata font by Raph Levien, Google Incwww.levien.comwww.google.com/fonts
hexo: fast, simple & powerful blog frameworkhexo.io
ace editorace.c9.io
virtual-domwww.npmjs.com/package/virtual-dom
Black Granite Water Droplets, William Warbyhttps://www.flickr.com/photos/wwarby