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.
yarn add react-native-google-castou
yarn add react-native-google-castiOS
- Dentro de
ios/NOME-DO-APP/AppDelegate.madicione
#import <GoogleCast/GoogleCast.h>- Ainda dentro de
AppDelegate.madicione o seguinte trecho de código antes doreturn 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
Podfileadicione
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-iosAndroid
- Dentro de
android/app/src/main/AndroidManifest.xmladicione
<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.javaadicione
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-androidCaso você deseje customizar seu receiver, siga os passos abaixos:
- Dentro de
android/app/src/main/AndroidManifest.xmlaltere o nomecom.reactnative.googlecast.GoogleCastOptionsProviderparacom.nativecast.CastOptionsProvidercomo 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-APPcrie um arquivo chamadoCastOptionsProvider.javae 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.xmlque fica emandroid/app/src/main/res/values/strings.xmle acrescente uma nova string dentro de<resources>com sua app id
<string name="app_id">E038DH47</string>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/valuescrie um novo arquivo chamadoarrays.xmle 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 chamadostyles.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>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