Creación de una experiencia de transmisión de vídeo fluida con React Native Video

En el mundo actual centrado en los dispositivos móviles, la transmisión de video es una característica central de muchas aplicaciones. Ya sea una plataforma para compartir videos, una aplicación educativa o una red social rica en multimedia, es esencial brindar una experiencia de video perfecta. Con React Native, un marco popular para crear aplicaciones móviles multiplataforma, la integración de la transmisión de video se simplifica con la biblioteca de videos nativos de reacción.

En este blog, explicaremos los pasos para instalar, configurar y usar reaccionar-native-video para crear una experiencia de transmisión de video fluida en sus aplicaciones React Native.

1. Instalación

Para comenzar, debes instalar la biblioteca de videos nativos de reacción en tu proyecto de React Native.

Paso 1: Instalar el paquete

Primero, instale la biblioteca usando npm o hilo:

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

o

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

Para iOS, es posible que necesites instalar los pods necesarios:

cd ios
pod install
cd ..

Paso 2: Configuración 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 configuración habilita varios protocolos de transmisión (IMA, RTSP, Smooth Streaming, DASH, HLS) en ExoPlayer y configura repositorios para incluir local, Google, JCenter y un repositorio Maven personalizado para reaccionar-nativo-video- cache.
Cada una de estas funciones habilitadas aumentará el tamaño de su APK, así que habilite solo las funciones que necesite. De forma predeterminada, las funciones habilitadas son: useExoplayerSmoothStreaming, useExoplayerDash, useExoplayerHls

ii) AndroidManifest.xml

La combinación garantiza que la aplicación tenga suficiente memoria para manejar grandes conjuntos de datos (a través de LargeHeap) y pueda representar gráficos de manera eficiente (a través de hardware acelerado), lo que lleva a una experiencia de usuario más fluida y estable. Sin embargo, ambos deben usarse teniendo en cuenta el rendimiento de la aplicación y las necesidades específicas de su funcionalidad.

b) iOS:

i) En ios/your_app/AppDelegate.mm dentro de didFinishLaunchingWithOptions agregue:

#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];
}

Asegurar que el audio continúe reproduciéndose incluso cuando la aplicación esté en segundo plano o en 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 configuración permite el almacenamiento en caché de video en el proyecto iOS agregando CocoaPods específicos (SPTPersistentCache y DVAssetLoaderDelegate) que manejan el almacenamiento en caché y la carga de activos. La bandera $RNVideoUseVideoCaching=true indica que el proyecto debe utilizar estas capacidades de almacenamiento en caché. Esta configuración mejora el rendimiento de la reproducción de video al reducir la necesidad de volver a buscar archivos de video.

2. Uso:

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

          

3. Consejos para la optimización

Para garantizar una reproducción de vídeo fluida:

• Usa una CDN: aloja tus videos en una CDN (Red de entrega de contenido) para una carga más rápida.
• Transmisión adaptativa: implemente transmisión adaptativa (HLS o DASH) para ajustar la calidad del video según las condiciones de la red.
• Precargar videos: precarga videos para evitar el almacenamiento en búfer durante la reproducción.
• Optimizar archivos de video: comprime archivos de video sin perder calidad para reducir los tiempos de carga.

Conclusión

La biblioteca de videos nativos de reacción es una herramienta poderosa para agregar funcionalidad de video a sus aplicaciones React Native. Con sus amplias opciones de configuración y capacidades de manejo de eventos, puede crear una experiencia de transmisión de video fluida y personalizada para sus usuarios. Ya sea que necesite un reproductor básico o uno totalmente personalizado, reaccionar-nativo-video lo tiene cubierto.