Construindo uma experiência de streaming de vídeo tranquila com React Native Video

No mundo atual centrado em dispositivos móveis, o streaming de vídeo é um recurso central de muitos aplicativos. Quer se trate de uma plataforma de compartilhamento de vídeo, um aplicativo educacional ou uma rede social rica em multimídia, é essencial fornecer uma experiência de vídeo perfeita. Com o React Native, uma estrutura popular para a construção de aplicativos móveis multiplataforma, a integração do streaming de vídeo é facilitada com a biblioteca react-native-video.

Neste blog, percorreremos as etapas para instalar, configurar e usar react-native-video para criar uma experiência de streaming de vídeo tranquila em seus aplicativos React Native.

1. Instalação

Para começar, você precisa instalar a biblioteca react-native-video em seu projeto React Native.

Etapa 1: Instale o pacote

Primeiro, instale a biblioteca usando npm ou yarn:

npm install react-native-video react-native-video-cache

ou

yarn add react-native-video react-native-video-cache

Para iOS, pode ser necessário instalar os pods necessários:

cd ios
pod install
cd ..

Etapa 2: configuração nativa adicional para iOS/Android

a) Androide:

i) android/build.gradle

buildscript {
  ext {
    // Enable IMA (Interactive Media Ads) integration with ExoPlayer
    useExoplayerIMA = true

    // Enable support for RTSP (Real-Time Streaming Protocol) with ExoPlayer
    useExoplayerRtsp = true

    // Enable support for Smooth Streaming with ExoPlayer
    useExoplayerSmoothStreaming = true

    // Enable support for DASH (Dynamic Adaptive Streaming over HTTP) with ExoPlayer
    useExoplayerDash = true

    // Enable support for HLS (HTTP Live Streaming) with ExoPlayer
    useExoplayerHls = true
  }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
         maven {
            url "$rootDir/../node_modules/react-native-video-cache/android/libs"
        }
    }
}

Esta configuração permite vários protocolos de streaming (IMA, RTSP, Smooth Streaming, DASH, HLS) no ExoPlayer e configura repositórios para incluir local, Google, JCenter e um repositório Maven personalizado para react-native-video- cache.
Cada um desses recursos ativados aumentará o tamanho do seu APK, portanto, habilite apenas os recursos necessários. Por padrão, os recursos habilitados são: useExoplayerSmoothStreaming, useExoplayerDash, useExoplayerHls

ii) AndroidManifest.xml

A combinação garante que o aplicativo tenha memória suficiente para lidar com grandes conjuntos de dados (via largeHeap) e possa renderizar gráficos com eficiência (via hardwareAccelerated), levando a uma experiência de usuário mais suave e estável. No entanto, ambos devem ser usados ​​levando em consideração o desempenho do aplicativo e as necessidades específicas de sua funcionalidade.

b) iOS:

i) Em ios/your_app/AppDelegate.mm dentro de didFinishLaunchingWithOptions adicione:

#import  

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"your_app";

  // --- You can add your custom initial props in the dictionary below.
  [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:nil];
  // --- They will be passed down to the ViewController used by React Native.

  self.initialProps = @{};
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

Garantir que o áudio continue sendo reproduzido mesmo quando o aplicativo estiver em segundo plano ou no modo silencioso

ii) ios/Podfile:

...
# ENABLE THIS FOR CACHEING THE VIDEOS 
platform :ios, min_ios_version_supported
prepare_react_native_project!
# -- ENABLE THIS FOR CACHEING THE VIDEOS 
$RNVideoUseVideoCaching=true

...

target 'your_app' do

  config = use_native_modules!
  # ENABLE THIS FOR CACHEING THE VIDEOS 
  pod 'SPTPersistentCache', :modular_headers => true;
  pod 'DVAssetLoaderDelegate', :modular_headers => true;

...

Esta configuração permite o cache de vídeo no projeto iOS adicionando CocoaPods específicos (SPTPersistentCache e DVAssetLoaderDelegate) que lidam com cache e carregamento de ativos. A sinalização $RNVideoUseVideoCaching=true sinaliza que o projeto deve usar esses recursos de cache. Essa configuração melhora o desempenho da reprodução de vídeo, reduzindo a necessidade de buscar novamente os arquivos de vídeo.

2. Uso:

import Video from 'react-native-video';
import convertToProxyURL from 'react-native-video-cache';

          

3. Dicas para otimização

Para garantir uma reprodução de vídeo suave:

• Use uma CDN: hospede seus vídeos em uma CDN (Content Delivery Network) para carregamento mais rápido.
• Streaming adaptativo: implemente streaming adaptativo (HLS ou DASH) para ajustar a qualidade do vídeo com base nas condições da rede.
• Pré-carregar vídeos: Pré-carregue vídeos para evitar buffering durante a reprodução.
• Otimizar arquivos de vídeo: compacta arquivos de vídeo sem perder qualidade para reduzir o tempo de carregamento.

Conclusão

A biblioteca react-native-video é uma ferramenta poderosa para adicionar funcionalidade de vídeo aos seus aplicativos React Native. Com suas amplas opções de configuração e recursos de manipulação de eventos, você pode criar uma experiência de streaming de vídeo personalizada e tranquila para seus usuários. Se você precisa de um player básico ou totalmente personalizado, o react-native-video tem o que você precisa.