Press Release Our Fresh Work

Call us now

+91-9870635001
+91-7985202681
+91-7985202681 OR
For Demo Click Here

Select the demo

mlm software demo
MLM Plan Demo
blockchain software demo
Blockchain Demo

Chromecast App Development

Chromecast is a digital media player and a micro-console developed by Google. This device for a change is not a set-top box but it is a 2.83 inches HDMI Dongle that plays audio/video content on an HD television or any other HD display which can be directly streamed by a wireless connection. Users choose the media to play utilizing mobile apps and web apps that support Chrome Cast Technology.

Chromecast celebrates its first birthday in July 2014 and if we look back, it had definitely a great and successful one year. This small, affordable HDMI stick and its method of streaming all your favorite shows, music, and games are so effortless that you can enjoy it very much.

Chromecast has been quite famous among the people who are using it. Those who still have to decide about it must have a lot of questions regarding this tiny HDMI dongle. We have tried to cover all the queries regarding the same.
 
How does this device work?
 
Using apps from your mobile device and computer, you actually hands-off or cast to Chromecast. Applying the information it gets about what you wish to watch, the Chromecast searches all the materials on the internet and streams it directly to your TV. This way your phone or tablet's resources aren't gobbled up with streaming tasks and you can save your battery life in a simpler way. Your Mobile and device your computer will be the remote control for the Chromecast.
 
Which devices work with Chromecast?
 
Chromecast can run on all the Android phones, tablets, iPhones, iPads and Chrome for Windows and Mac. Blackberry and Windows phones have hard luck when It comes to Chromecast. But recently, a brand new app called Tube Cast was created which provides some limited Youtube Functionality on Windows Phones over Chromecast.
 
Google opened it's Software Development Kit, which provides developers a path to handle “Second screen interactions” and making their apps Chromecast enabled. Everything you love is now on your TV that is what you can say when we talk about Chromecast. It works with an increasing number of apps including some famous ones such as Netflix, HBO GO, Youtube, WatchESPN, Hulu Plus, and much more. You can also mirror your own Android phone or tablet to the attached TV and enjoy your favorite TV shows and movies. If you are working on your laptop, you can cast any website in Chrome. This is as simple as that.
 
Using Chromecast has become very easy that you can use it with the devices you already have including smartphones, tablets, and laptops. Chromecast gets updated automatically and adds the apps which are newly introduced by Google. So you don't have to worry at all just sit back and enjoy together with your friends and family.
 
We at Nadcab Technology devote our whole expertise to our client needs. If your need is to build the most creative and unique Chromecast App then we are the best solution for you. Our developers can serve you what you exactly want, using the best available technologies and resources. Contact us to create something best in class.

Chromecast and React Native 

Chromecast is one of the most well-known and used entertainment devices today: over 36 million people in the US alone use it. It grants easy access to entertainment as just by plugging in a small device you can enjoy streaming content and games on any TV or monitor that has an HDMI port. You can use Chromecast from your smartphone, tablet, React Native App or even from your laptop or PC using the Google Chrome browser.

If you are thinking about, or already are, developing an application that focuses on streaming video and/or music content, the possibility of including support for Chromecast within your application will certainly be crucial if you want your app to grow and offer users the best possible experience.

chromecast and react native

The React Native Library

In order to include Chromecast, we recommend using react-native-google-cast, a React Native library that allows you to easily integrate and provide your app with the streaming features that Chromecast includes and that also works for both mobile platforms, Android and iOS.

The library is based on a wrapper or trimmed version of the official SDK that Google provides for the use of your device. It includes a casting button, which is only rendered and shown if a Chromecast device is available on the phone connected network. When pressed, the button displays a list of the available devices and then the connection is ready to send content to the selected device. Once connected, the icon will be shown in color to indicate this. Moreover, it also has an introductory Overlay that highlights the Cast button for new users when they are near a Chromecast device for the first time. The native framework ensures that the user is only shown this once the first time the application is opened.

To be able to take control of the streaming, the library also offers expanded media control, which consists of a full-screen panel with the necessary controls to manage the streaming, such as a play/pause button, volume control and connection with the Chromecast device, as well as letting you see the cover image, title, and subtitle of the content that is currently being played.

The library also owns and supports three types of events: session events, casting events, and channel events. Let’s take a look a closer look at them.

Session events

Session events are based specifically on the connection-type communication between the device and the application, such as connection established, connection failed, trying to reconnect, and others.

Media events

Media events refer to reproduction-type events, where you can find and cache states such as media started, media ended, and media progress updated.

Channel events

These are a specific type of events to exchange messages between the sender device—which is the one that owns the app—and a receiver device—i.e. the Chromecast device. This allows several Chromecast devices to subscribe to the same reception channel making the connection multipoint.

The library also offers the possibility of linking the playback controls to certain actions, as it provides methods such as GoogleCast.play(), GoogleCast.pause(), GoogleCast.setVolume(volume), google cast.stop () and many more.

You can see the complete list and other documentation in this link.

Below, you’ll be able to see a more visual step-by-step guide of the installation and setup process for both iOS and Android.

Installation

$ npm install react-native-google-cast

or

$ yarn add react-native-google-cast

Linker

$ react-native link react-native-google-cast

Setup

  • iOS

In AppDelegate.m add:

#import <GoogleCast/GoogleCast.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// ADD THIS CODE SNIPPET ->
GCKDiscoveryCriteria *criteria = [[GCKDiscoveryCriteria alloc] initWithApplicationID:kGCKDefaultMediaReceiverApplicationID];
GCKCastOptions* options = [[GCKCastOptions alloc] initWithDiscoveryCriteria:criteria];
[GCKCastContext setSharedInstanceWithOptions:options];
// -
return YES;
}
@end
view raw AppDelegate.m hosted with ? by GitHub

Make sure you also enable Access WiFi Information in: 

your target > capabilities.

  • Android

Make sure your device or emulator has Google Play Services installed.

Add to AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.myapplication">
<application
android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
android:value="com.reactnative.googlecast.GoogleCastOptionsProvider" />
application>
manifest>
view raw AndroidManifest.xml hosted with ? by GitHub

In MainActivity.java, change your MainActivity to extend GoogleCastActivity:

package com.myapplication;
import com.facebook.react.GoogleCastActivity;

public class MainActivity extends GoogleCastActivity {
// ..
}
view raw MainActivity.java hosted with ? by GitHub

react native code chromecast integration

Example React Native Code Chromecast integration

import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import GoogleCast, { CastButton } from 'react-native-google-cast';

class MyChromecastApp extends React.Component {
// Play the casting, only if the device is connected and was playing something before in the actual sesion
playCast = () => GoogleCast.play();

// Pause the currently casting
pauseCast = () => GoogleCast.pause();

// Show the Expanded Control Panel
shwoControls = () => GoogleCast.launchExpandedControls();

// Start the cast with selected media passed by function parameter
startCast = (video, image, title, subtitle, duration, currentTime, mediaType, moreDetails) => {
GoogleCast.castMedia({
mediaUrl: video, // Stream media video uri
imageUrl: image, // Image video representative uri
title, // Media main title
subtitle, // Media subtitle
studio: 'Asap Developers', // Media or app owner
streamDuration: duration, // Stream duration in seconds
contentType: mediaType, // Optional media type, default is 'video/mp4'
playPosition: currentTime, // Stream play position in seconds
customData: {
// Optional, your custom object that will be passed to as customData to reciever
mediaDetails: moreDetails,
},
})
.then(console.log('Playing.. '))
.catch(e => console.log('An error has ocurred, reason: ', e));
};

render() {
return (
<View>
<Text>Connect with chromecast device with the button above:</Text>
<CastButton style={{ width: 30, height: 30 }} />
<Text>If the conecction was successfully, you are ready to send content now:</Text>
<TouchableOpacity onPress={() => this.startCast('video.mp4', 'video_image.jpg', 'Asap Sample Video', '-', 120, 0, 'video/mp4', 'No details')}>
<Text>Send my video</Text>
</TouchableOpacity>
</View>
);
}
}

export default MyChromecastApp;
view raw MyChromecastApp.js hosted with ? by GitHub

Chromecast and React Native final thoughts

As we’ve said, if you plan to develop a React Native app meant to play any type of video or audio content, adding Chromecast will open the door to a lot more possibilities and users and is something you should definitely consider. We hope this tutorial was helpful and you can take advantage of this and many other tools the React Native community has to offer.



Andhra Pradesh Delhi Gujarat Haryana Maharashtra Rajasthan Uttar Pradesh Uttarakhand Madhya Pradesh Kerala Goa Bihar Assam Arunachal Pradesh Chhattisgarh Himachal Pradesh Jammu and Kashmir Jharkhand Karnataka Odisha Banglore Jaipur Mumbai
Subscribe to our newsletter
Copyright © 2019, Naygon Technologies Pvt Ltd. All Rights Reserved.