Search code examples
androidprogressive-web-appschromecastsmart-tv

Can a chromecast receiver and sender apps be the same one?


I read that it is possible to use the Web SDK to build a sender app that would run on Chrome in iOS or Android. Is it possible to make that same app being also the receiver to cast to a web enabled TV? So instead of having multiple apps, I'd only have one PWA?


Solution

  • Same codebase? Yes. Same app? No.

    The sender and receiver do very different jobs. It's not a bad idea to write your sender and receiver as part of the same project, or to serve them from the same server, but if make your own receiver app then your receiver needs its own URL. (To publish a receiver app, you tell Google your receiver URL, and then Chromecast devices load that url whenever you cast to them.)

    Your sender app is complicated. It's responsible for giving the user controls they can click on and sending those messages to the receiver, but it can have a variety of other responsibilities depending on your application. It might do search and browsing, real-time updates, or notifications, and it might let your users write messages or play games or draw beautiful digital art - anything you want your app to accomplish.

    The receiver's job is much simpler: play an audio or video file when the sender tells it to. The receiver also needs to respond to play/pause/stop commands and display basic status info, but this functionality is built in to the Cast receiver library, so you don't have to write any of it yourself. You can add bells and whistles like pop-up notifications or custom css styling, but all user interaction happens through the sender app (or from the Google Home app, which acts as a simple remote control). This limitation means that a lot of your features belong only in your sender app, not in the receiver.

    Your receiver app is also limited because it has to run on a tiny Chromecast dongle with limited processing and cooling power. Putting unnecessary code into your receiver app could result in the Chromecast overheating and shutting down.

    To keep your code as simple as possible, consider using the default Chromecast receiver. This way, you don't have to write or maintain any receiver code. If you need more control over the receiver's styling or behavior, then build your own, but it doesn't have to be complex. The basic Cast Receiver app is thirteen lines of HTML - that's it. Depending on your requirements, you might add css styling, custom message or event handling, or an autoplay queue, but even with all of these features the sample CastReceiver project is only 636 lines of code. Your receiver definitely doesn't need to be as complex as a Slack or Steam desktop web app.

    Take advantage of the project-management wins from sharing a codebase with your sender app, but you must keep your receiver small and lightweight. Use the full js/html/css stack if you need to, but consider writing your receiver as a short HTML document, or even using the default receiver. When you keep your receiver functionality to a minimum, you give your users a reliable and responsive Chromecast experience, while still allowing rich interactive features through the sender app.