Chromecast on QB Mobile

Introduction

Chromecast capability can be added to Android and iOS QB mobile apps.

The Applicaster solution consists of

• 2 plugins to add to your build
  • Chromecast (QB) enables the functionality
  • Chromecast Nav Item (QB) enables the Chromecast icon in the nav bar
• An introduction screen to promote the presence of the Chromecast button
• A sender application that enables app-level casting for the user to
  • enable, disable casting
  • cast individual items
  • play, pause, skip or use the scrub-bar
  • enable captions
  • control volume

Applicaster does not provide the receiver app for Chromecast devices. For more information on receiver apps see here https://developers.google.com/cast/docs/web_receiver

There are 3 types of receiver apps and it is important to know their limitations. As most apps want to support the casting of HLS and DASH content then as a minimum the Web Receiver application must be chosen.

• Web Receiver application. This further splits into
  • A pre-styled application called the styled media receiver. It provides a default UI for the Web Receiver application, but you can customize several elements in the UI with a CSS file https://developers.google.com/cast/docs/web_receiver#styled_media_receiver
  • Or a fully customisable receiver app. This is a custom built HTML5 app that a customer must host to handle the display of your app content on the TV. https://developers.google.com/cast/docs/web_receiver#custom_receiver
  • A third option available is the Default Media Web Receiver. This is a pre-built Web Receiver application hosted by Google that is designed for streaming your audio and video content. It does not require you to register with the Google Cast SDK Developer Console, but you cannot customize any of the UI in the Default Media Web Receiver. Also you cannot cast HLS, DASH or Smooth Streaming formats.

Setup and configuration of sender plugins

1. A customer should obtain a Chromecast App ID from Google 

https://applicaster.zendesk.com/hc/en-us/articles/360000721846-How-to-Obtain-a-Chromecast-App-ID 

and https://cast.google.com/publish/#/signup

2. Add these 2 plugins to your app pre-build

3. In the app's plugin configuration screen add your Chromecast App ID to the Chromecast (QB) plugin and save

3. In the app's plugin configuration screen you can customise the Chromecast message (localistion text) in the Chromecast Nav Item (QB) plugin and save

4. In UI Builder go to the Navigation tab and add item to add the Chromecast Nav Item (QB)

5. Select the Chromecast Nav Item (QB) and you can configure the colour of the Chromecast icon in the app and localise the introduction message

Image and metadata support

The Chromecast screen during casting will use a 2:3 poster image from the data feed of type key = chromecast_poster under media_group. Otherwise it will default to the image_base key.

"media_group": [
        {
          "type": "image",
          "media_item": [
            {
              "type": "image",
              "key": "chromecast_poster",
              "src": "url here"
            }
          ]
        }
      ],

Metadata will come from the item's feed as usual.

Chromecast is now configured in your app

Analytics

The following analytic events are supported

• Open / close Chromecast view
• Start / Stop casting
• Cast event ID

Not supported functions

The following capabilities are not supported

• Player level casting
  • The Chromecast icon does not appear in the player
• No mini player controls
  • There is no floating mini-player whilst casting is in progress, such as on YouTube
• No playlists / queuing
  • No support for adding multiple items to a casting queue
• No customisation of intro screen - this is a limitation of Chromecast itself, not Quick Brick
• No custom receiver app
  • The Google Default Media Receiver is available as standard (https://developers.google.com/cast/docs/caf_receiver)
  • If customers require a custom receiver they will require 3rd party design support

Screen examples

Welcome message on opening app

Select discovered Chromecast devices

Casting enabled button state

Casting disabled button state

The app screen whilst casting

Minimise to navigate the app

Stop casting screen

Select the Chromecast button in the Navbar