Wireless Connection! Enhancing User Experience and Engagement!

OVERVIEW

Chromecast is a streaming media player which enables users to cast live videos and contents from the Mobile Apps directly to a large screen like TV or Monitor. The Mobile App becomes the remote control to play, pause, seek, rewind, stop and control the media on TV. It uses an HDMI dongle that plays audio or video content on a display like TV/Monitor by direct Wi-Fi streaming from the Internet. This iOS and Android based feature allows users to get an enhanced and user-friendly video display on to a large screen.

IT’S DIFFERENT FROM MIRRORING

People usually relate Casting to Screen Mirroring as both connect two devices i.e Apps and TV together allowing for content to be shared between them. However, the manner in which they work differs. With casting, you can do other things in your Apps without interrupting whatever content is being sent to the TV, whereas in Mirroring the whole screen is being cast in TV and not any specific content.

CASTING

OUR CLIENT’S REQUIREMENT

We, at BigStep Technologies, have already developed numerous Applications based on clients’ specific requirements, so we were excited to work on this new and challenging feature. One of our clients wanted us to develop Chromecast SDK Integration with the Mobile Application, allowing users to cast video from the App directly to a large screen, say TV.

Browsing videos in the Mobile Application restrict members of the community to view and play videos in a smaller screen of the Android or iPhone Devices. So, to improvise this working, the client reached out to us with this unique idea. The primary objective of the client was to provide a more user-friendly and enhanced playing of videos on a wider screen.

The Idea of the client was to provide feasibility to:

• Cast the Videos directly on the Screen using “Play Now action”
• Create a Queue “Add to Queue”, in which videos can be added. Videos will be cast respectively from the queue list.

Videos have to be managed from Mobile Apps itself and would directly reflect in the TV.

APP FEATURE

SENDER: It is the iOS or Android device that initiates a connection and provides the user with an interface to control the connection.

Development

The Mobile Device is the SENDER which controls the playback. The development includes integration of Chromecast SDK with App, which will allow casting contents through the Mobile App to TV/Monitor. It includes Integration of sender framework to the App.

Post completion of Sender’s end Development, we were able to come up with below implementations in the app.

Introductory Overlay: It is an overlay available to the user to call attention to the Cast button, the first time a Cast receiver is available.

Cast Button: It is visible when a receiver is available that supports the app. When the user first clicks on the cast button, a cast dialog is displayed which lists the available devices nearby.

Mini Controller: If a user has navigated away from the current content page while casting content, the mini controller is displayed at the bottom of the screen to allow the user to see the currently casting media metadata and to control the playback.

Video Queue Page: It will be the most important page which includes a list of all the added videos in the Queue. Actions like Removing a video from the queue, Clear Queue, Play/Pause video, etc can be performed in this Page.

Expanded Controller: While casting a content, if a user clicks on the media notification or mini controller, the expanded controller launches, which displays the currently playing media metadata and provides several buttons to control the media playback.

Lock Screen: If a user navigates to the lock screen while casting, a media lock screen control is displayed that shows the currently casting media metadata, details and playback controls.

RECEIVER:  It’s the one loaded onto the Cast device and displayed via the TV which will ultimately be responsible for displaying what the user has selected on the sender, say like a TV or Monitor.

Development

For Receiver end, i.e to cast the videos on the TV, we have used Styled Media Receiver (SMR). It allows the sender application to play media on a Cast device without creating our own custom receiver application. The SMR color scheme and branding can be customized by providing our own CSS file.

This also includes the display of Progress Bar, Background Image, Watermark, and Splash Image (displayed in the TV/Monitor before the video starts casting). All these are managed by our own custom CSS file.

BENEFITS

• By adding Google Cast functionality to Apps, clients can gain visits, engagement, and thus, higher monetization.
• Allow content from personal mobile devices to display on the largest and most beautiful & wider screen in the house.
• Increased  user engagement.
• Enhanced user experience.

CHALLENGES

We faced few Challenges while Integration of Chromecast with the app, but we managed to overcome them with our expertise and teamwork.

Challenges And Our Solution

1. Chromecast connection with TV/Monitor:

In order to establish the Connection of Mobile Apps to TV/Monitor, we needed to get them connected for Cast. We were not aware that this would require set-up of our own Account for Chromecast in the Google Developer Account. Exploring this and finally succeeding took us some time.

2. Mini-Controller UI Design:

The Mini-Controller provided by cast SDK allowed limited functionality which did not meet the client’s requirements. Our developers after some brainstorming and research designed a customized Mini-Controller across the app. so in order to get an advanced feature for Video Queue Page, we

3. Sample Code for Chromecast SDK:

Sample code for Chromecast SDK provided on GIT Account is quite old and have some deprecated methods as well. As a result, the code didn’t work for Chromecast Integration with the app. We needed to explore it and even customize the code as per the client’s requirement. The effective development skills of our developers made it possible to come up with the best outcome.

TECHNOLOGY

Android

Android OS Support: greater than 4.3

Development: Java using Android Studio

Android Supported Devices: All Android Models

iOS

iOS OS Support: greater than 10

Development: Swift using Xcode

iOS Supported Devices: All iPhone Model