Have you ever been in a Zoom call you didn’t want to be in?1 The presenter is droning on, slogging through a bunch of slides. Your mind starts to wander. If you’re like me, you might start clicking around the UI and realize how incredibly complicated the Zoom app is. It has to do so much because every Zoom customer uses the same UI.
At this point, we’re all pretty familiar with using real-time video. What the world needs now is real-time video with a better UI (and, of course, love, sweet love).
Mux recently introduced our real-time video product: Real-Time Video. We’ve been building, testing, and using it ourselves for the past year — and we’re not just talking about automated tests; we built a complete video conferencing application on top of it. Now, we’re excited for you to try it out.
This was actually, kinda, pretty difficult
Real-time communication is tricky. It relies on a notoriously fragmented technology called WebRTC — which is actually a bunch of standards cobbled together — that each browser implements slightly differently. Not to mention the fact that video calling requires a large amount of bandwidth and processing power for video rendering and capture. Oh, and don’t forget about all of the network inconsistencies that can cause a call to not go through. Some networks have complicated NAT traversals, or they don’t support UDP and require TURN support instead.
You need infrastructure in regions close to your callers. And that infrastructure needs to scale in a cost-effective way. It’s complex and requires the time-consuming work of actually using the service to know that it works for your customers. You can build a system that handles thousands of simultaneous fake connections, but can you have a call between people on different OSs and browsers? And most importantly, can they understand each other?
That’s why we built Mux Meet. It’s a video conferencing web app that runs on Mux Real-Time Video. Mux Meet is an open-source React app, built with Next.js.
Mux Meet started out as a hack-week project and quickly became an invaluable tool for testing Mux Spaces. It was a little like constructing the rocket ship while it was launching into space. Or should I say, launching into Spaces?
We were building the infrastructure and Web SDK while simultaneously building the video conferencing app that uses them. This gave us the chance to tweak our API abstractions and tune video and audio quality to give ourselves the best real-time video call experience.
We’re making video easier for you
For many of our customers, React integration is a must. From the beginning, we built a Web SDK that works well with React as well as with vanilla JavaScript.
import React, { useEffect, useState } from "react";
import { Space, SpaceEvent } from "@mux/spaces-web";
export default function Sample({ jwt }) {
const [participants, setParticipants] = useState([]);
useEffect(() => {
const handleParticipantJoined = (newParticipant) => {
setParticipants([...participants, newParticipant]);
};
let space;
try {
space = new Space(jwt);
} catch (e) {
return;
}
space.on(SpaceEvent.ParticipantJoined, handleParticipantJoined);
space.join();
return () => {
space.off(SpaceEvent.ParticipantJoined, handleParticipantJoined);
space.leave();
};
}, [jwt]);
return <div>{participants.length}</div>;
}Our goal is not to recreate Zoom or Google Meet with Spaces but to allow developers to go wild building every idea they can think of. We are the solution for developers who want to build real-time video into their own UI.
Maybe you’ve built an amazing marketplace for auctions and want to let buyers and sellers interact. Or you already have a great collaborative editing tool and don’t want to kick your users out to a Zoom call where they have to do the screen-share dance every time they want to discuss something.
Real-time video is not just a grid of rectangular talking head videos. It’s a fundamental building block of the internet. And with Spaces, we just set that free.
Lessons learned along the way
Building real-time video from the ground up is hard. With Mux Real-Time Video, you don’t have to do it yourself. We want you to benefit from our lessons learned so you can focus on building your own product with real-time video as a feature.
Thanks to all the testing we’ve done with Mux Meet, we have a battle-hardened product for you: no duplicate participants, no lost tracks, and no mysteriously disappearing screen shares. We ran into these problems ourselves, and we’ve built resilient backend systems and client-side SDKs to prevent them.
Your users will have crappy internet
Your customers will want to have video calls on all sorts of networks, but many networks don’t support the features needed to make standard WebRTC calls. Hotel and conference Wi-Fi is notoriously bad, and corporate networks are sometimes so locked down that they don’t allow UDP traffic. We learned quickly that when building real-time video, TURN support is crucial. Mux Meet made it easy for us to discover and debug these sorts of issues; all we had to do was open a link in a web browser to know if Spaces worked on that network.
When we discovered a network with issues, we used a combination of browser developer tools, backend server logs, and our own quality of service analytic tool to work out any bugs. In other words, you won’t have to debug network issues, because we’ve done that for you.
Your SDK has gotchas until you find them
You’re also getting a great SDK out of the box, because we’ve already used it to build Mux Meet. Rather than releasing the SDK and simply hoping we got the abstraction right, we iterated on the API as we discovered common use cases while building Mux Meet. One example is the “lobby” page that displays a webcam preview and audio level indicator before actually joining a Space.
Originally, the SDK only supported accessing the user’s media after joining a Space, but as soon as we started building this “lobby” feature into Mux Meet, it became obvious that applications need support for webcam and microphone media access before users join a Space. This was easy for us to fix in the SDK, but we didn’t know it needed fixing until we were actually faced with it.
CSS-only layouts still fall short
And what about rendering a gallery view of all the participants in a Space? You might start by throwing a bunch of video elements into a Flexbox container, but that results in confusing layouts with variably sized video elements. All the video elements need to be uniformly sized and retain their aspect ratio. You could try CSS Grid, but it’s not really designed for a dynamic number of participants. You’d end up writing strict grid layouts for each configuration of participants or waste space because the layout doesn’t efficiently fit participants within the grid.
That’s why we wrote a basic layout engine in JavaScript that calculates the optimum width and height of n number of rectangles with the same aspect ratio given a fixed gap and within a fixed container. The result is a responsive gallery layout that’s smooth as butter! And we’ve open sourced it in Mux Meet, so you don’t have to write it yourself. Check out the Meeting.tsx and Gallery.tsx components in https://github.com/muxinc/meet/ to see what I mean.
Let’s see what you can build
We learned a lot building Mux Meet on top of Mux Spaces and had a lot of fun along the way. But it’s only the beginning. I’m excited to keep building examples and higher-level abstractions for developers who want to build real-time video right into their app. Try it out today, and let us know what you’re building. We’d love to help you out!
