Adding new features to your app is an exciting experience. This article covers how we added Chromecast compatibility to Retimer, our meeting timer app.
At Moka, one of our latest challenges was to work on and develop our own product: Retimer, an app for tracking the cost of your meetings.
A few weeks ago, Fer -our PO- asked us to suggest some features that could add value to our users and be interesting to include in future releases. I didn’t hesitate to think of “Chromecast support” and added it to the roadmap. The main idea is to enable users to show the timer and other relevant info on a TV or big screen to all participants when they are in a meeting. Fernando’s reaction?
The feature was approved for development and assigned to me, as I was the one to blame.
I immediately started researching how to add new enchantments to our app (casting… enchantments… get it? ? ).
But first, I needed to know more about how the Chromecast communication flow works and how to adapt it to what we wanted to do. It turns out that 99% of all Chromecast apps are for media playback! There weren’t many examples of apps that allow sending custom data to a Chromecast device and displaying a custom mini web-app.
In this article, I’ll show you: devs, geeks, and other curious Mandalorians who are reading this, how to code and build a basic Cordova App to cast a simple app to communicate with.
With this approach, you could even build games or other apps that do other things beyond media playback. I’ll let the repo links below.
What’s casting, you may ask? In this context, casting means connecting an app to a Google Chromecast device and use your mobile as a companion. Netflix lets you use its mobile app as a remote control when you connect it to your Chromecast. The Prime Video app shows you more info regarding actors/actresses on screen and so on. What about us? Well, we’re doing some similar things here, but without the media playback approach, as we’ve mentioned earlier.
Enabling and Configuring the Google Cast SDK Developer Console
Before we begin, we need to know the requirements to add this feature to your app and infrastructure.
Firstly you need to know there are two types of Chromecast apps: media receivers for apps such as Netflix, YouTube, and other media apps, and custom receivers for non-media apps, like games and other stuff. At this time I think you know which one we are going to use… If you didn’t get it, we’d need a custom receiver because our app it’s a timer without media features.
Once you decide which type of cast app you need, you have to register as a Chromecast developer in the cast dev console (https://cast.google.com/u/0/publish/#/signup) and pay a $5 USD fee.
Now that money’s on the table, you’re almost there! Next, you need to configure the devices allowed to debug our app so that you can have an idea of what’s going on backstage.
Once you’ve finished this step you’re ready to push some code and start testing your app.
Setting up your receiver
Once you’ve completed the previous step, log in and click “Add New Application”, select Custom Receiver, and then complete the form with the information of your cast app.
Here in the Receiver Application URL, you have to use a local mini-web page (exposed via Ngrok). After getting up the receiver project, you’ll get that URL in http://localhost:4551 to tinker with the receiver code (it’s all set and configured in our docker-compose YAML file). When you’re done editing, you can change it to the final or production URL.
After that, an AppID will be assigned to your app, and you’ll be using this AppID to configure your sender app to let Chromecast know which app should cast to your screen.
Once you have your app created in the dashboard, you’ll need to configure your sender’s properties so only your device app can connect to your cast app. Go to edit your application, and you’ll see new options to configure in addition to the ones above.
Here’s an example of a basic custom receiver that you can use to test this setup:
(it’s based on google’s example)
Now we have the receiver “ready”, we only need an app to send data to it!
Installation of the Cordova Chromecast Plugin
Since we are using Cordova in our project, we need a plugin to integrate Google Cast SDK into our app. It took me some time, but I eventually found this fork of Jellyfin‘s plugin, which is up to date.
First, you have to change the URL of the plugin like this:
cordova plugin add <https://github.com/miloproductionsinc/
cordova-plugin-chromecast.git>
After that, follow the remaining steps from the ReadMe file.
Configuring our sender application
Since we are also using VueJS in this project, we can add some functions to our default component to control the casting feature (this is based on the official example).
- HelloWorld.vue
Once you have all your code set, you can start using your Chromecast custom sender/receiver. And not only for media playback!?
I don’t want to go into the details of a Chromecast app life cycle or namespaces because this is clearly explained in their documentation, and it’s self-explanatory. But you will find some interesting links below.
Final thoughts
This was a really challenging feature to implement. I think that it can add value to your product when it’s used correctly. Just picture a few use cases: adding a live stream of a filtered Twitter search, custom statistics of your site’s health, or real-time metrics, among others. The sky is the limit! (well… Mars is, for now… but you get it ?)
Notes
- If you change something in the cast console, you have to restart your Chromecast device to get these changes applied.
- The Chromecast plugin we’re using works really well in Android, but it has some flaws in iOS that need to be solved to be fully functional on that platform.
Useful links
https://github.com/wearemoka/chromecast_example
https://medium.com/@valeriocapogna/how-to-setup-a-cordova-app-using-vue-js-8ba1315b9666
https://developers.google.com/cast/docs/debugging#chrome
https://developers.google.com/cast/docs/reference/chrome#chrome.cast
https://casttool.appspot.com/cactool/
https://issuetracker.google.com/issues/117136854#comment13
https://karnamalone.com/t/building-a-custom-chromecast-web-app
https://codelabs.developers.google.com/codelabs/cast-receiver#0
https://codigofacilito.com/articulos/chromecast-android
https://developers.google.com/cast/docs/ux_guidelines
This is an original article by Maximiliano Sosa, our backend developer.