# Chromecast

To enable Chromecast, follow the steps below.

## Add dependency

Add the dependency in your app level `build.gradle` and replace *"x.x.x"* with the latest version as noted below:

![](https://maven-badges.herokuapp.com/maven-central/com.flowplayer.android.player/flowplayer-chromecast/badge.svg?color=2B829A)


```txt
dependencies {
    implementation 'com.flowplayer.android.player:flowplayer-chromecast:x.x.x'
}
```

## Specify OptionsProvider

Add the following `<meta-data>` in your `AndroidManifest.xml`:


```xml
<meta-data
    android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
    android:value="com.flowplayer.android.chromecast.ChromecastOptionsProvider" />
```

### (Optional) Specify custom receiver

The `ChromecastOptionsProvider`, by default, uses Wowza Flowplayer's Chromecast receiver application. If you wish to use your own receiver, then simply add it to your strings resource file with the following name:


```xml
<string name="flowplayer_chromecast_app_id">ID_OF_YOUR_CHROMECAST_RECEIVER</string>
```

Additionally, you can specify an array of namespaces by declaring an array with the following name in your strings resource file:


```xml
<string-array name="flowplayer_chromecast_namespaces">
    <item>YOUR_NAMESPACE</item>
</string-array>
```

## Initialize ChromecastManager

Before you can start using Chromecast, you need to initialize the `ChromecastManager`. You can do this inside your Application class:


```js
override fun onCreate() {
    super.onCreate()
    ChromecastManager.initialize(this)
}
```

## Add a Chromecast button

To allow users to select a Chromecast device and play their media on it, you need to add a Chromecast button to your application.
You can add this either to your ActionBar or anywhere inside your view's layout.

### Add a Chromecast button to the ActionBar

First, add the following menu item to your Activity's menu layout:


```xml
<item
    android:id="@+id/media_route_menu_item"
    android:title="Cast"
    app:actionProviderClass="androidx.mediarouter.app.MediaRouteActionProvider"
    app:showAsAction="always" />
```

Then use `ChromecastManager` to bind the button with Chromecast. Add the following line inside `onCreateOptionsMenu`:


```js
override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.menu_activity_player, menu)
    
    // Bind the button with Chromecast.
    ChromecastManager.getInstance().setMediaRouteButton(this, menu, R.id.media_route_menu_item)

    ... 
    
    return true
}
```

### Add a Chromecast button to the layout

Fist, add the button to the layout:


```xml
<androidx.mediarouter.app.MediaRouteButton
    android:id="@+id/media_route_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:mediaRouteTypes="user"
    android:visibility="gone" />
```

Then use `ChromecastManager` to bind the button with Chromecast. Add the following line inside `onCreate`:


```js
val mediaRouteButton = findViewById<MediaRouteButton>(R.id.media_route_button)

// Bind the button with Chromecast.
CastManager.getInstance().setMediaRouteButton(this, mediaRouteButton)
```

## Connect ChromecastPlayer with FlowplayerView

Finally, you need to connect `ChromecastPlayer` with `FlowplayerView` for the media to be played on the appropriate player (Chromecast or local), depending on whether there is a Chromecast session established.


```js
// Get Chromecast player instance
val chromecastMediaPlayer = ChromecastPlayer.getInstance(this)

// Pass the chromecast player to the flowplayerView
flowplayerView.setChromecastMediaPlayer(chromecastMediaPlayer)
```

## Control ChromecastPlayer's playback

If you don't wish to manually control `ChromecastPlayer`'s playback, you can simply add a `PlayerControlView` to your layout and pass it to the `ChromecastPlayer`.

First add the control view:


```xml
<com.google.android.exoplayer2.ui.PlayerControlView
    android:id="@+id/cast_control_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:visibility="gone"
    app:repeat_toggle_modes="all|one"
    app:show_timeout="-1" />
```

Then pass it to the player:


```js
val chromecastControlView = findViewById<PlayerControlView>(R.id.cast_control_view)
chromecastMediaPlayer.setControlView(chromecastControlView)
```

For more information on how to customize the `PlayerControlView`, read the [API reference](https://exoplayer.dev/doc/reference/com/google/android/exoplayer2/ui/PlayerControlView.html).

### Control playback using Mini and Expanded Controllers

Mini and Expanded Controllers are parts of the [Cast UX Widgets](https://developers.google.com/cast/docs/android_sender/integrate#the_cast_ux_widgets) that enable you to control `ChromecastPlayer` playback and multiple subtitle, audio, and video tracks that a media may contain.

For a basic usage of these two widgets, follow these steps:

1. Subclass abstract class [ExpandedControllerActivity](https://developers.google.com/cast/docs/android_sender/integrate#the_cast_ux_widgets) and declare your activity in your app's manifest.

```js
override fun onCreateOptionsMenu(menu: Menu): Boolean {
    super.onCreateOptionsMenu(menu)
    menuInflater.inflate(R.menu.menu_activity_player, menu)
    CastButtonFactory.setUpMediaRouteButton(this, menu, R.id.media_route_menu_item)
    return true
}
```

```xml
<application>
...
<activity
    android:name=".expandedcontrols.ExpandedControlsActivity"
    android:label="@string/app_name"
    android:launchMode="singleTask"
    android:theme="@style/Theme.CastVideosDark"
    android:screenOrientation="portrait">
  <intent-filter>
    <action android:name="android.intent.action.MAIN"/>
  </intent-filter>
  <meta-data
        android:name="android.support.PARENT_ACTIVITY"
        android:value="com.google.sample.cast.refplayer.VideoBrowserActivity"/>
</activity>
</application>
```
2. Extend `ChromecastOptionsProvider` class and override `getCastMediaOptions` function, to add your activity as the expanded controller of your sender app, and replace `ChromecastOptionsProvider` with your class in the `<meta-data>` of your AndroidManifest.xml.

```js
override fun getCastMediaOptions(): CastMediaOptions? {
    val notificationOptions = NotificationOptions.Builder()
            .setTargetActivityClassName(ExpandedControlsActivity::class.java.name)
            .build()

    return CastMediaOptions.Builder()
            .setNotificationOptions(notificationOptions)
            .setExpandedControllerActivityClassName(ExpandedControlsActivity::class.java.name)
            .build()
}
```

```xml
<meta-data
    android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
    android:value="com.package.MyChromecastOptionsProvider" />
```
3. Add a mini controller to your sender app simply by adding [MiniControllerFragment](https://developers.google.com/android/reference/com/google/android/gms/cast/framework/media/widget/MiniControllerFragment) to your layout.

```xml
<fragment
   android:id="@+id/castMiniController"
   android:layout_alignParentBottom="true"
   class="com.google.android.gms.cast.framework.media.widget.MiniControllerFragment"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:visibility="gone" />
```


For more information on how to customize Cast UX Widgets UI, read [API reference](https://developers.google.com/cast/docs/android_sender/customize_ui).