react-redux-chromecast

BETA: Do not use in production

Helper to communicate with the Google Chromecast, keeping current state in redux.

Prerequisites

1. In order to communicate with the Chromecast the Google Cast extension from Google must be installed. Install it from the Chrome Web Store.
2. You need to register your Chromecast for development mode. This has a one-time fee of $5. Register at the Google Cast SDK Console.
3. Create a new app and write down the applicationId

For more detailed instructions follow the guide in the Cast developer documentation.

Usage

Note: For universal applications only include the cast middleware on the client

After installing you probably want to create some middleware to translate the raw messages to whatever is applicable to your application.

Sender

Store configuration

import {createStore, applyMiddleware} from 'redux';
import {castSender} from 'react-redux-chromecast';

// sender
const middleware = [castSender(
  '<app id>',   // app id assigned by Google
  '<namespace>' // namespace for communication (namespace must match on receiver)
)];
const store = applyMiddleware(...middleware)(createStore);

Add the sender script to the page

<script async src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js" charset="utf-8"></script>

Events

All events are fired as redux actions.

Constants:

import {
  API_AVAILABLE,
  RECEIVER_AVAILABLE,
  ...
} from 'react-redux-chromecast';

API_AVAILABLE

Chromecast API is available (will only work in Chrome with the Chromecast extension installed)

API_UNAVILABLE

Chromecast API not available (e.g., browser not supported)

RECEIVER_AVAILABLE

Chromecasts detected. Use this to show the chromecast button.

Note that this happens asynchronously and can occur later in the lifecycle of the app, for instance if the user changes wifi network to the same one as the Chromecast is on.

RECEIVER_UNAVAILABLE

No Chromecasts detected. Use this to hide the button.

Note that even if chromecasts were detected before they can disappear. This action fires if this happens.

SESSION_CONNECTING

Connecting to Chromecast. Show an animated chromecast icon.

SESSION_CONNECTED

Session established. Show the lit icon.

SESSION_DISCONNECTING

User has requested to disconnect the session.

SESSION_DISCONNECTED

Chromecast is not connected.

SESSION_CONNECT_ERROR

An error occurred while trying to connect.

SESSION_DISCONNECT_ERROR

An error occurred while trying to disconnect.

MESSAGE_SENDING

A message is being sent.

MESSAGE_SENT

A message was succesfully sent.

MESSAGE_ERROR

An error occurred while trying to send a message.

MSG_RECEIVED

A message was received.

Commands

Commands to Chromecast as triggered by firing redux actions.

Constants:

import {
  SESSION_CONNECT,
  SESSION_DISCONNECT,
  ...
} from 'react-redux-chromecast/commands';

SESSION_CONNECT

Try to establish a connection.

Fires actions asynchronously:

SESSION_CONNECT
|- Event: SESSION_CONNECTING
...
|- Success
|  |- SESSION_CONNECTED
|- Failed
   |- SESSION_CONNECT_ERROR

SESSION_DISCONNECT

Disconnect current session. Doesn't do anything if not connected.

Fires actions asynchronously:

SESSION_DISCONNECT
|- Event: SESSION_DISCONNECTING
...
|- Success
|  |- SESSION_DISCONNECTED
|- Failed
   |- SESSION_DISCONNECT_ERROR