Manipulate live video using nothing but HTML, CSS, and JS
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.
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.
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.
The layout is self contained and doesn’t inherit styles from the surrounding page. Only content inside the <web-broadcast> element is captured. The server is able to produce a high-definition live stream, regardless of what size the user's browser happens to be, how powerful their device is, or if they have less than ideal bandwidth. You can change the layout however you want using plain JavaScript — every change is automatically kept in sync with your live stream in real time.
