Introducing Roomboard Live Streams

One of the most requested features when setting up a new VR experience with our customers are roomboards. Out of the box, Mozilla Hubs doesn't offer an easy-to-use UI to allow you to see who's online in what room. Since most VR experiences are set up to offer multiple rooms—sometimes including dozens to even hundreds of rooms—it would be nice to see where your friends are, where the tour guide is waiting, or what the most popular rooms are.

That is why, from the very beginning, Mohuni runs its own room and user directory to allow just that. We're exposing this functionality via roomboards: Easy to use, easy to set up web pages that group together a bunch of rooms and allow you to quickly see how many users are currently online in each room, and their Mozilla Hubs usernames. Additionally, this serves as the foundation for Auto-Join.

Why Live Streams?

You know what would be really neat? Being able to see a roomboard from inside a Mozilla Hubs room.

We found early, that providing a lobby as a default room for users to get started and get help if needed is a great way to onboard users and allow them to navigate and explore an experience in a seamless way. Unfortunately, Mozilla Hubs only offers limited support to display web pages (no JavaScript), and since roomboards necessarily need to stay up-to-date (using JavaScript), we had to come up with a different solution.

Since Mozilla Hubs does support embedding Live Streams we would just capture a live recording of a roomboard, and embed that live stream. This turned out to be a rather laborious manual process to set up and I'm happy to announce that all the heavy lifting is now done automatically for you.

From the user's perspective, all you need to do is to go to the "Live Stream" tab for your roomboard, enter the details for your Youtube, Twitch, etc. Live Stream and click start. That's it!

How does it work?

Technically, this works by invoking ffmpeg to live stream a series of screenshots created with puppeteer.

Each live-streaming process is isolated and automatically restarts when something goes wrong. For now, we're testing this feature on a single server and are looking into sizing up this server, setting up multiple servers to increase capacity.

Initially I had a look at queue processing managers, namely bull, but the non-completing nature of our live-stream process (meaning it is managed completely manually: the users starts the stream and stops it when no longer needed) made me ultimately decide on using the excellent pm2 as our process manager. I can't say enough good things about it: It's lightweight, documentation is superb, it offers a Javascript-API that I used to integrate into a express.js server, it automatically restarts failed processess or when the server needs to restart—it's just great. It now manages the express server and creates and stops live-streaming processes when needed.

The express server itself provides a simple API to manage live-streams and authenticate requests, and is proxied by an Apache server set up to serve SSL provided by certbot

This feature is very much still in beta and we're looking into improving streaming quality and encoding efficiency to (obviously) ramp up our streaming quality and concurrent streaming capabilities. It's all a matter of finding the right ffmpeg arguments...

We hope you find this useful. Contact me if you have questions.

Cheers, Armin