March 22, 2023 (3 months ago)
Cloud infrastructure has made streaming video content to millions of people easier than ever. However, developers looking to add live video creation into their products have limited choices.
Live video generally consists of some text, image, video, and basic UI. These layouts are deceptively simple compared with the complex, responsive web layouts that we’re used to.
If live video layouts are simpler than responsive web layouts, then shouldn’t they be easier to build?
There’s a problem, though. You can’t currently tell the browser:
Perhaps you could capture your screen, crop the video, and send it to a broadcasting service (like Mux). But the browser doesn’t speak RTMP, and on top of that, you have very little control over the resulting resolution, quality, available bandwidth, etc. Not exactly ideal.
So we can’t go live from the browser… but what if we could “go live from the browser?”
We’re building Web Broadcast to give you the tools to build live video layouts right in your browser using the HTML and CSS you already know. The difference is that it does all of the rendering and compositing on the server.
Here’s an example of a simple layout using the Web Broadcast SDK:
Want to change scenes? Simply swap out the HTML with new elements. You can also let your framework of choice update it for you.
Want to add a screenshare to your stream? We have a special web component that makes it easy. You can add it to the layout when needed.
Like many of our other elements, the <web-broadcast> element itself is a standard web component. It doesn’t require any third-party framework or library and will work out of the box in any evergreen browser.
Here’s what the Web Broadcast SDK looks like in action.
The SDK is still being actively developed, but we’d love for you to try it out. Sign up for early access or email us at email@example.com if you’d like to learn more.
We’ve been building the Web Broadcast server-side infrastructure for a while. It takes in a URL, loads it into a headless browser on the server, and captures what it sees. On its own, this is very powerful; if you host a webpage containing the content that you’d like to capture, then we can turn it into a video stream with an API call. You can learn more about how this standalone API powers multiple Mux products here.
The question then becomes: If my content isn’t on a separate webpage, but tightly integrated into my product, how do I capture it? This is where the Web Broadcast SDK comes in.
The Web Broadcast web component can be placed into any regular webpage, like a user’s dashboard. It takes advantage of the shadow DOM to create some isolation between itself and the surrounding page. Unlike an iFrame, the layout elements are easily accessible by your code, but the shadow DOM lets us keep them separate from the rest of the page.
Every change to the layout triggers a synchronization between the browser and the server. Changing the background image URL, removing an element, updating some text, swapping some classes — these all trigger a layout synchronization without requiring you to do anything else. A real-time database sits between the browser and the server to mediate layout changes and keep them in sync.
You might be wondering: If we’re moving HTML elements to the server, how does your webcam or screen sharing work?
Mux’s real-time video product helps here. We use Real-Time behind the scenes to share your local media with the server doing the compositing. By joining the same Space — similar to a room in other real-time products — we can make this happen in the background, with no extra steps required from you.
With all these pieces in place, you can produce live video experiences that are fully customizable, using standard web technologies, without users having to leave your product. We’re so excited to share Web Broadcast with you, so sign up for early access today or email us at firstname.lastname@example.org if you’d like to learn more.
No credit card to start. $20 in free credits when you're ready.
Vercel's Edge Config can come in handy in many different ways. See how we used it to cut down on the amount of spam we were dealing with from our forms.
By Justin Sanford
With lazy-loading and a blurhash placeholder, we make the loading experience of Mux Player feel great in our Next.js app
By Darius Cepulis
While hunting for a pesky live streaming bug, we discovered that virtual load balancers don’t always simulate their physical counterparts the way you might expect.
By Dmitry Ilyevsky