DEV Community

Cover image for Building a Custom Home Casting App with Rust and React
Abiodun Paul Ogunnaike
Abiodun Paul Ogunnaike

Posted on

Building a Custom Home Casting App with Rust and React

Have you ever wanted a simple, lightweight way to cast videos from your phone to your smart TV without relying on third-party apps or dealing with complex Chromecast/DLNA setups? In this article, I am going to show you how I built "Home Cast" – a fully self-hosted video casting application using a Rust backend and a sleek React frontend.

The Architecture

The system consists of two main parts:

  • The Server (Rust/Axum): A fast, concurrent backend that handles video uploads via multipart forms and communicates with the TV using WebSockets.

  • The Client (React/Vite): A beautiful, modern interface that lets you upload videos and cast them with a single tap.

The magic relies on WebSockets. When you open the application on your TV's web browser, it connects to the Rust server's WebSocket endpoint and passively listens. When you upload a video from your phone, the Rust server saves it locally. Then, when you click "Cast to TV," the server broadcasts a message containing the new video URL to the TV. The TV receives the message, dynamically updates its HTML5 <video> player, and immediately begins playback.

Handling Browser Autoplay Policies

One major hurdle with web-based video players on TVs is the dreaded "Playback Blocked" error. Modern browsers restrict videos with audio from playing automatically unless the user interacts with the page first. I solved this by catching the rejected play promise and gracefully prompting the user to press the OK button on their TV remote (which simulates a click event). This bypasses the restriction and starts the stream seamlessly.

Why Rust?

Using Axum and Tokio made it incredibly easy to handle WebSocket connections and file uploads concurrently. Rust's memory safety guarantees mean we never have to worry about null pointer exceptions or memory leaks crashing our server right in the middle of movie night.

My Conclusion

Building your own casting app is a fun weekend project that teaches you a lot about WebSockets, multipart uploads, and HTML5 video APIs. Best of all, you get a custom media solution that works entirely on your local network, without any cloud dependencies!

I probably will be adding more features as time goes on, below is the github repo: https://github.com/abbeymaniak/cast-app

Top comments (0)