arrow_back Volver
Inicio keyboard_arrow_right Artículos keyboard_arrow_right Artículo

Integrar Chromecast con tu App de Android

Carlos Cantoral

Desarrollador Android

av_timer 5 Min. de lectura

remove_red_eye 28486 visitas

calendar_today 23 Febrero 2017

Android Google Cast Sender App

Con la gran variedad de dispositivos receptores vendidos como el Chrome Cast o Android TV, saber cómo desarrollar aplicaciones que permitan realizar Casting es fundamental para desarrolladores de Android, a continuación, abordaremos como realizar Android Sender Apps implementando la API Google Cast para transmitir videos a una aplicación receptora y así mostrar el contenido en el Televisor.

Registro

Todas las Sender Apps que se desarrollen con Google Cast deben ser registradas sin importar en que plataforma se estén realizando, o si se se utilizan componentes por defecto o se crean personalizados.

Para registrar la aplicación:

  1. Registrarte en Google Cast SDK Developer Console (Toma en cuenta que este proceso tiene un costo de $5 Dólares)
  2. Una vez en la página principal da selecciona la opción Add New Application
  3. Selecciona el tipo de receiver app que utilizaras:
    • Styled Media Receiver: Selecciona esta opción si tu aplicación transmite contenido de audio y video utilizando los tipos de soporte admitidos y si desea proporcionar una interfaz de usuario predeterminada proporcionada por el framework de Google Cast.
    • Custom Receiver: Selecciona esta opción si tu aplicación requiere de componentes, medios o interfaces de usuario que no son provistos por Styled Media Receiver, para este caso tu debes de implementar tu propio reproductor en el servidor y configurar la aplicación para interactuar con este.
    • Remote Display Receiver: Selecciona esta opción para registrar una aplicación que admita la conversión directamente en el dispositivo receptor desde un dispositivo remitente mediante la visualización remota (Esta opción es unicamente para el SDK v2 y no debe mezclarse con la v3).
  4. Llena los detalles de tu aplicación.
  5. Selecciona Save, Te mostrara los detalles de tu aplicación includio el ID que es necesario dentro de la aplicación para las llamadas de la API.
  6. Selecciona Done.

Setup

Prerrequisitos:

  • Tener la versión de Android SDK actualizada.
  • Instalar Android Support Libraries 19.0.1 o superior.
  • Instalar los Google Play Services 9.0.2 o puerior.
  • Colocar el nivel minimo de Android SDK permitido en el proyecto 9 (Gingerbread o superior).

Agrega los Google Play Services a tu proyecto:
Abre el archivo build.gradle que se encuentra dentro del directorio de la aplicación, dentro de este archivo agregaremos las siguientes dependencias:
(Asegúrate de usar la versión más reciente de los play-services).

apply plugin: 'com.android.application'
    ...
    dependencies {
        compile 'com.android.support:appcompat-v7:25.1.0'
        compile 'com.android.support:mediarouter-v7:25.1.0'
        compile 'com.google.android.gms:play-services-cast-framework:10.0.1'
    }

Inicializar el Cast Context

El CastContext es un objeto singleton perteneciente al framework que coordina sus interacciones.
La aplicación debe implementar la interfaz OptionsProvider para Inicializar el CastContext. OptionsProvider proporciona una instancia de CastOptions el cual contiene opciones que afectan el comportamiento del framework, el más importante es el ID de la Receiver App, el cual se utiliza para filtrar los resultados e iniciar la sesión de Cast, aquí te dejo un ID con el cual puedes practicar: 4F8B3483, este ID es solo de ejemplo por lo cual al transmitit veras una marca de agua con la palabra SAMPLE.
Agrega la siguiente clase al paquete del proyecto:

public class CastOptionsProvider implements OptionsProvider {

    @Override
    public CastOptions getCastOptions(Context context) {
        return new CastOptions.Builder()
                .setReceiverApplicationId(context.getString(R.string.app_id)).build();
    }

    @Override
    public List<SessionProvider> getAdditionalSessionProviders(Context context) {
        return null;
    }
}

Dentro del AndroidManifest.xml se debe declarar el nombre completo del OptionsProvider como campo de metadatos de la aplicación:

<application>
    ...
    <meta-data
        android:name=
            "com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
        android:value="com.foo.CastOptionsProvider" />
</application>

Inicializa el CastContext dentro del método onCreate del Activity:

public class MyActivity extends FragmentActivity {

    private CastContext mCastContext;

    @Override
    public void onCreate() {
        mCastContext = CastContext.getSharedInstance(this);
    }
}

Añadir el Cast Button

Se debe agregar el Cast Button como parte de la interfaz de usuario, esto para permitir al usuario seleccionar el medio a transmitir.
El framework facilita la adición de este botón de dos maneras distintas, ya sea agregandolo directamente al ActionBar de la Activity como un elemento del menú:

// menu.xml
<item
    android:id="@+id/media_route_menu_item"
    android:title="@string/media_route_menu_title"
    app:actionProviderClass="android.support.v7.app.MediaRouteActionProvider"
    app:showAsAction="always" />

de esta manera necesario sobrescribir el método onCreateOptionMenu de las Activities donde se implemente el Cast Button:

// MyActivity.java
@Override public boolean onCreateOptionsMenu(Menu menu) {
    super.onCreateOptionsMenu(menu);
    getMenuInflater().inflate(R.menu.main, menu);
    CastButtonFactory.setUpMediaRouteButton(getApplicationContext(),
                                            menu,
                                            R.id.media_route_menu_item);
    return true;
}

De otro modo se puede agregar el botón directamente al layout y así manipularlo como otro elemento más de la vista:

// activity_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center_vertical"
   android:orientation="horizontal" >

   <android.support.v7.app.MediaRouteButton
       android:id="@+id/media_route_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       android:mediaRouteTypes="user"
       android:visibility="gone" />

</LinearLayout>
// MyActivity.java
private MediaRouteButton mMediaRouteButton;

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_layout);

   mMediaRouteButton = (MediaRouteButton) findViewById(R.id.media_route_button);
   CastButtonFactory.setUpMediaRouteButton(getApplicationContext(), mMediaRouteButton);
}

Si has llegado hasta este punto puedes realizar pruebas y verificar que al presionar el Cast Button este muestra la lista de los diferentes dispositivos encontrados a los que puedes establecer conexión y transmitir.

Manejo de la Sesión

Junto con el Cast framework se introduce el concepto de Sesión que se produce desde que la conexión de la transmisión es generada hasta que esta es concluida. Dicha sesión se puede administrar implementando la clase SessionManagerListenner como una subclase que controla los eventos que ocurran durante la transmisión como creación, suspensorio, reanudación y terminación.
Las sesiones son creadas y eliminadas automáticamente como respuesta a las interacciones de usuario con los diálogos del framework.
Debemos crear e inicializar los elementos utilizados para la sesión:

// MyActivity.java
private CastSession mCastSession;
private SessionManager mSessionManager;
private SessionManagerListener mSessionManagerListener = new SessionManagerListennerImpl();

@Override
protected void onCreate() {
    super.onCreate();
    mSessionManager = mCastContext.getSessionManager();
}

@Override
protected void onResume() {
    super.onResume();
    mCastSession = mSessionManager.getCurrentCastSession();
    mSessionManager.addSessionManagerListener(mSessionManagerListener);
}

@Override
protected void onPause() {
    super.onPause();
    mSessionManager.removeSessionManagerListener(mSessionManagerListener);
    mCastSession = null;
}

//Subclase que permite manipular las etapas de la sesión
private class SessionManagerListennerImpl implements SessionManagerListener {

    @Override
    public void onSessionStarting(Session session) {}

    @Override
    public void onSessionStarted(Session session, String s) {}

    @Override
    public void onSessionStartFailed(Session session, int i) {}

    @Override
    public void onSessionEnding(Session session) {}

    @Override
    public void onSessionEnded(Session session, int i) {}

    @Override
    public void onSessionResuming(Session session, String s) {}

    @Override
    public void onSessionResumed(Session session, boolean b) {}

    @Override
    public void onSessionResumeFailed(Session session, int i) {}

    @Override
    public void onSessionSuspended(Session session, int i) {}
}

Crear Media Metadata

La clase MediaMetadata representa la informacion acerca del elemento que deseas transmitir y que el usuario podrá visualizar mediante los diálogos del framework.

MediaMetadata videoMetadata = new MediaMetadata(MediaMetadata.MEDIA_TYPE_MOVIE);
videoMetadata.putString(MediaMetadata.KEY_TITLE, mVideo.getTitle());
videoMetadata.putString(MediaMetadata.KEY_SUBTITLE, mVideo.getSubtitle());

Cargal el Contenido

Para poder cargar el contenido multimedia es necesario utilizar una instancia de RemoteMediaClient al cual le pasaremos como parametros un objeto MediaInfo que contiene la información del contenido que se creo con MediaMetadata , un valor boolean que representa si del contenido debe iniciar una vez establecida la conexión o esperar a que el usuario lo inicie y por ultimo la posición en la que el video va a iniciar su reproducción.
La carga del contenido debe mandarse a llamar dentro de la subclase creada un vez establecida la conexión:

//Subclase SessionManagerListennerImpl
@Override
public void onSessionStarted(Session session, String s) {
    mCastSession = mSessionManager.getCurrentCastSession();
    loadMedia(mCastSession);
}

private void loadMedia(CastSession castSession) {
    MediaInfo mediaInfo = new MediaInfo.Builder(mSelectedMedia.getUrl())
                    .setStreamType(MediaInfo.STREAM_TYPE_BUFFERED)
                    .setContentType("videos/mp4")
                    .setMetadata(videoMetadata)
                    .setStreamDuration(mSelectedMedia.getDuration() * 1000)
                    .build();
    RemoteMediaClient remoteMediaClient = castSession.getRemoteMediaClient();
    remoteMediaClient.load(mediaInfo, autoPlay, position);
}

Controles

El google cast framework nos provee de controles predeterminados para que el usuario pueda manipular el contenido transmitido desde la Sender App, dependiendo de las necesidades que tengas puedes elegir entre implementar los controles por defecto o crear tus propios controles, para este ejemplo utilizaremos el Mini Controler que nos ofrece el framework este es un fragment que nos proporciona controles simples como de play, pausa, adelantar y retroceder.
Para esto solo debemos agregar el siguiente código al layout de nuestra aplicación:

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

Finalmente agregado el control puedes sentirte orgulloso de probar tu aplicación veras como el contenido multimedia es transmitido hacia tu televisor pudiendo controlar este desde tu Sender app.
(Nota: Si estuviste trabajando con el ID de ejemplo y cambias por un ID registrado de ves en cuando es necesario reiniciar el Chromecast ya que este quedo asociado a la aplicación con el ID anterior)

Donde Aprender Más?

Si quieres aprender más acerca de Google Cast puedes visitar su sitio oficial, ahí encontraras opciones de personalización, integración con otras plataformas y características avanzadas, solo tienes que seguir el enlace Google Developers Cast

Aumenta tu productividad con GitHub Copilot

  • done Curso GRATUITO
  • done Regístrate antes del 31 de Marzo
  • done Obtén una ventaja competitiva
  • done Aprovecha la IA a tu favor
Más información