SACHIT MISHRA: Do you want to get your Chrome web
apps on the big screen?
Well, we've made it easier than ever before.
Hi, I'm Sachit Mishra from the Google Developer Relations
team, and I'm going to tell you about the Cast Sender Framework
API for Chrome.
In October 2016, we launched the Cast Framework API
for the Google Cast SDK.
The framework API is built on top of the Cast Center SDK,
and simplifies several parts of the SDK while
addressing the major pain points identified by content partners
and developers.
The Cast Framework API significantly
reduces the amount of code needed
by providing a UI widget that fully complies with the Cast UX
design checklist, and a remote player binding that
is super simple to hook into your media player
implementation.
First, here's some terminology about how casting works.
The Google Cast sender application
refers to Chrome running on a mobile device or laptop.
And the receiver application refers to an HTML application
running on Chromecast or other Google Cast receiver devices.
Now let's take a look at the typical lifecycle
of a Cast sender app.
When the sender app is launched, Cast receiver devices
need to be discovered on the local network.
Once the user selects a device, the sender app
will connect to that device and launch the receiver app.
The sender app then creates a message channel
to the receiver app to send and receive messages.
The user can also disconnect from that device.
The new framework API implements these new features-- a UI Cast
button which handles its own state
and complies with the Google Cast design checklist;
a remote player binding for easy remote media playback;
automatic device discovery, so that you don't
have to manage that in your code;
centralized Cast session state management;
and a reconnection service that automatically handles
network issues to keep your sender app connected
to the receiver.
Let's take a look at how to add Cast to your app.
To load the JavaScript library into your app,
add this script tag into all pages of your app
which require it.
When the library is loaded by the page,
it will call the __onGCastApiAvailable callback
on the global window object.
So make sure to set that before loading the library.
Now let's look at what this initialization function should
do.
The Cast framework has a global singleton object,
the CastContext, which coordinates
all Cast interactions.
To initialize, you must provide it
with a CastOptions object using the setOptions method.
In the CastOptions object, specify the receiver
application ID created in the Cast developer console,
or use the default media receiver app ID.
You can also set the language, auto-join policy,
and whether to resume the saved session in the CastOptions
object.
Before we move on, let's talk about UI for a second.
Chrome provides a Cast option in the browser menu.
But you can make the option more easily visible to your users
by adding the Cast button directly in your UI,
like your media control interface.
The Cast framework provides a button element for you.
Simply add it using the is=google-cast-button property.
This button provides the --connected-color
and --disconnected-color styling attributes
for state color control.
Style this button as necessary, and let the framework
handle the rest, like visibility management
and click event handling.
Going back to the code, once you've got the CastContext
instance, you can get the current CastSession object.
The framework handles maintenance of the session
and connection for you.
But you can listen for events like media or volume changes
using event listener callbacks set on the CastSession object.
All right.
Now that you've got your CastSession object,
we can move on to the fun stuff--
media playback.
Loading media onto the receiver works the same as before.
The sender app has to create a MediaInfo instance
with the URL and content type of the media stream.
It then has to use this MediaInfo object to initialize
a load request that can be used by the loadMedia method
of the CastSession object.
Now that media has been loaded, media playback
can be controlled with the RemotePlayer binding.
Here's where the framework API makes things super simple.
To control media playback, initialize a RemotePlayer
object and use it to instantiate a RemotePlayerController
object.
RemotePlayerController provides methods to directly control
remote media playback, like playing, pausing, stopping,
and more.
Let's take a deeper look at these objects.
The RemotePlayer object is actually
just a simple state encapsulation
with no behavior of its own.
RemotePlayerController binds the RemotePlayer object
to the device state and sometimes uses
its property values and playback control methods like seek.
Keep in mind that because RemotePlayer has no behavior,
you can really use any object you want which
contains the needed state.
This example in Angular perfectly
demonstrates how easy it is to hook the RemotePlayer
implementation into your app, and how
these two objects can be used.
So how do you monitor media status?
You can query the RemotePlayer State
object, as mentioned before, or you can directly
set event listeners on the RemotePlayerController.
Some events, like playing or pausing, muting, and volume
changes, can occur outside of your app's control.
Your app will need to act on the events
to synchronize itself with the receiver
app on the Cast device.
Once the user has finished casting,
they may disconnect your app.
Add a listener on the RemotePlayerController
for the IS_CONNECTED_CHANGED event
to update your app accordingly.
That's it.
That's everything you need to Cast-enable your app.
You can get more details about the Google Cast SDK
at developers.google.com/cast.
It's also important to take a look at the Cast design
checklist, which has design implications for your app.
We have also open-sourced sample Cast apps
that you can use as a reference.
If you have any developer questions,
post those on Stack Overflow.
Join our Google Cast developers community on G+ to keep up
to date with SDK updates and discuss with other developers.
I'm Sachit Mishra.
Thanks for watching, and happy casting.