Videoconferencing on a personal website

Over the weekend, I worked on adding a new feature to my personal website: videoconfencing. I was motivated to explore this space by Angelo ^1, who used Twilio to run a video conference on his personal website. Twilio is reliable but is not free, so we explored alternatives. Angelo told me about a piece of software called MediaSoup ^2, an open-source project that enables you to run video calls through self-hosted infrastructure.

To run a call using MediaSoup, you need to run:

1. A MediaSoup server. This server implements a Selective Forwarding Unit (SFU) architecture, where the server acts as the intermediary through which requests are run. Video is sent from the client to the server, then the server sends that video to all of the clients. The SFU architecture scales significantly better than peer-to-peer setups.
2. A client capable of interfacing with the server. For my purposes, I used the open-source mediasoup-demo application ^3. This application implements all of the front-end logic you need to run a call. The app comes with features like share screen, mute and unmute, and chat. With that said, the client doesn't have everything you may need, such as call admin (remove participants, etc.) and the chat interface is not ideal. For my purposes, the demo application works well.

I installed MediaSoup on my personal website server and built a full-stack application using Node that lets me create meeting rooms through which people can access the MediaSoup client. The client runs in an iframe next to an embedded Etherpad. Below these two embedded elements, there are buttons to copy a link to the call, the Etherpad, and to leave the call. Etherpad has a chat interface available. I pass in a URL parameter to Etherpad to ensure the chat interface is auto-expanded when the pad is opened. This means that call participants have access to:

1. Video conferencing
2. A notepad
3. A chat system

I added in a feature that lets me specify a custom background image for a call. At the weekend, I used a photo I took of the Golden Gate Bridge from my trip to San Francisco as the background. For a holiday themed-call, I could use a background appropriate for the holiday; for an IndieWeb event, I could use an IndieWeb background.

I ran a few calls with friends using this service over the weekend. One person joined the call in 10 different tabs and we had no issues with the video quality. The server did not experience notable performance degredation. We did notice that the video quality degraded when the video camera input was showing video that changed frequently.

One participant streamed Forza through an OBS virtual webcam. On some race tracks, video performance was good enough; on a track where there were lots of buildings that changed every few frames as the car drove, the video became almost unwatchable. This was resolved when we moved back to regular webcam video mode.

With this feature, I can now issue invite links and run calls on my personal website. I have had a lot of fun with this project already and I'm excited to do more!

Tagged in videoconferencing.