abnercosta/chromecast-react-native

Transmissão de mídia com React Native e Google Cast

IMPORTANTE: Funciona apenas para televisões com Chromecast built-in ou com Chromecast. Nem todas as televisões são suportadas pois usam tecnologias diferentes. Saiba mais sobre o Chromecast built-in.

Transmissão de vídeos com Chromecast e React Native utilizando o Google Cast, que é a biblioteca oficial da Google para transmissões. Antes de seguir para as configurações necessárias, é importante ressaltar que até então, não há nada oficial ou um padrão para utilizar o Google Cast com React Native e que a biblioteca e configurações utilizadas são os passos iniciais para tornar o feito algo padronizado. Por último, a biblioteca em questão está em desenvolvimento e não está cobrindo todas as funcionalidades que o Google Cast oferece e, o mais importante, é que você ajude colaborando com novas features e resoluções de problemas.

Instalação

yarn add react-native-google-cast

ou

yarn add react-native-google-cast

Configurações

iOS

• Dentro de ios/NOME-DO-APP/AppDelegate.m adicione

#import <GoogleCast/GoogleCast.h>

• Ainda dentro de AppDelegate.m adicione o seguinte trecho de código antes do return YES;

GCKDiscoveryCriteria *criteria = [[GCKDiscoveryCriteria alloc] initWithApplicationID:kGCKDefaultMediaReceiverApplicationID];
GCKCastOptions* options = [[GCKCastOptions alloc] initWithDiscoveryCriteria:criteria];
[GCKCastContext setSharedInstanceWithOptions:options];

Obs: Para receivers customizados, adicione no lugar do kGCKDefaultMediaReceiverApplicationID seu ApplicationID (ex: @"E038DH47"). Leia mais em Styled Media Receiver

• Dentro da pasta iOS no arquivo Podfile adicione

pod 'react-native-google-cast/NoBluetooth', path: '../node_modules/react-native-google-cast/ios/'

• Por fim, abra a pasta iOS no seu terminal e rode o comando

pod install

• Tudo pronto. Inicie sua aplicação

npx react-native run-ios

Android

• Dentro de android/app/src/main/AndroidManifest.xml adicione

<activity android:name="com.reactnative.googlecast.GoogleCastExpandedControlsActivity" />

<meta-data
    android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
    android:value="com.reactnative.googlecast.GoogleCastOptionsProvider" />

• Adicione dentro de android/app/build.gradle

implementation "com.google.android.gms:play-services-cast-framework:+"

• Dentro de android/app/src/main/java/com/cast/MainActivity.java adicione

import com.facebook.react.GoogleCastActivity;

public class MainActivity extends GoogleCastActivity {
  // ..
}

IMPORTANTE: Com o emulador do Android Studio, o botão de Google Cast não aparece, e não sei ao certo porque isso ocorre, mas em contrapartida, emulando a aplicação com um dispositivo físico, funciona perfeitamente. Outra forma é utilizar o scrcpy, que conectando seu dispositivo físico via USB ao computador, você consegue emular seu celular.

Independente da forma como você for emular sua aplicação, inicie sua aplicação com

npx react-native run-android

Caso você deseje customizar seu receiver, siga os passos abaixos:

• Dentro de android/app/src/main/AndroidManifest.xml altere o nome com.reactnative.googlecast.GoogleCastOptionsProvider para com.nativecast.CastOptionsProvider como no exemplo abaixo

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

• No caminho android/app/src/main/java/com/NOME-DO-APP crie um arquivo chamado CastOptionsProvider.java e adicione o trecho de código

package com.nativecast;

import com.reactnative.googlecast.GoogleCastOptionsProvider;
import android.content.Context;
import com.google.android.gms.cast.framework.CastOptions;

public class CastOptionsProvider extends GoogleCastOptionsProvider {
  @Override
  public CastOptions getCastOptions(Context context) {
    CastOptions castOptions = new CastOptions.Builder()
        .setReceiverApplicationId(context.getString(R.string.app_id))
        .build();
    return castOptions;
  }
}

• Para finalizar, acesse o arquivo strings.xml que fica em android/app/src/main/res/values/strings.xml e acrescente uma nova string dentro de <resources> com sua app id

<string name="app_id">E038DH47</string>

Expanded Controller no Android

Por padrão, o Expanded Controller que é a tela que controla a reprodução das mídias, vem diferente no Android e no iOS, não em questão de design, mas sim nos botões e nas cores do título, descrição e botão de cast. No iOS, por padrão, vem os botões (legenda, voltar 30s, play/pause, avançar 30s e volume) e cores branca no cabeçalho. Já no Android, os botões são (legenda, anterior, play/pause, próximo e volume) e o cabeçalho está todo preto, dificultando a visibilidade.

Como corrigir os botões do Expanded Controller no Android

• Dentro de android/app/src/main/res/values crie um novo arquivo chamado arrays.xml e insira o trecho de código abaixo

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="cast_expanded_controller_control_buttons">
        <!-- Para outros botões olhe esse link: https://developers.google.com/cast/docs/android_sender/customize_ui#choose-mini-controller-buttons -->
        <item>@id/cast_button_type_closed_caption</item>
        <item>@id/cast_button_type_rewind_30_seconds</item>
        <item>@id/cast_button_type_forward_30_seconds</item>
        <item>@id/cast_button_type_mute_toggle</item>
    </array>
</resources>

• Por fim, dentro da pasta values, também tem um arquivo chamado styles.xml. Adicione o seguinte trecho de código dentro de <resources>

<style name="CustomCastExpandedController" parent="CastExpandedController">
    <item name="castControlButtons">@array/cast_expanded_controller_control_buttons</item>
</style>

E no <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> adicione

<item name="castExpandedControllerToolbarStyle">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
<item name="castExpandedControllerStyle">@style/CustomCastExpandedController</item>

Links que você pode querer ler

Para informações mais detalhadas sobre problemas de compatibilidade, usabilidade, APIs, consulte o repositório oficial do projeto: react-native-google-cast

Dúvida sobre o que você precisa para criar um Cast App? App components

Dúvida sobre mídias suportadas pelo Google Cast? Supported Media

Dúvida sobre estilos do receiver? Styled Media Receiver

Google Cast SDK Developer Console