Créer une expérience de streaming vidéo fluide avec React Native Video

Dans le monde actuel centré sur le mobile, le streaming vidéo est une fonctionnalité essentielle de nombreuses applications. Qu'il s'agisse d'une plateforme de partage de vidéos, d'une application éducative ou d'un réseau social riche en multimédia, offrir une expérience vidéo fluide est essentiel. Avec React Native, un framework populaire pour la création d'applications mobiles multiplateformes, l'intégration du streaming vidéo est facilitée grâce à la bibliothèque vidéo React-Native-Video.

Dans ce blog, nous passerons en revue les étapes d'installation, de configuration et d'utilisation de React-native-video pour créer une expérience de streaming vidéo fluide dans vos applications React Native.

1.Installation

Pour commencer, vous devez installer la bibliothèque React-Native-Video dans votre projet React Native.

Étape 1 : Installer le package

Tout d'abord, installez la bibliothèque en utilisant npm ou Yarn :

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

ou

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

Pour iOS, vous devrez peut-être installer les pods nécessaires :

cd ios
pod install
cd ..

Étape 2 : configuration native supplémentaire pour iOS/Android

a)Androïde :

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"
        }
    }
}

Cette configuration active divers protocoles de streaming (IMA, RTSP, Smooth Streaming, DASH, HLS) dans ExoPlayer et configure des référentiels pour inclure local, Google, JCenter et un référentiel Maven personnalisé pour réagir-native-video- cache.
Chacune de ces fonctionnalités activées augmentera la taille de votre APK, activez donc uniquement les fonctionnalités dont vous avez besoin. Les fonctionnalités activées par défaut sont : useExoplayerSmoothStreaming, useExoplayerDash, useExoplayerHls

ii) AndroidManifest.xml

La combinaison garantit que l'application dispose de suffisamment de mémoire pour gérer de grands ensembles de données (via largeHeap) et peut restituer les graphiques efficacement (via hardwareAccelerated), conduisant à une expérience utilisateur plus fluide et plus stable. Cependant, les deux doivent être utilisés en tenant compte des performances de l'application et des besoins spécifiques de ses fonctionnalités.

b) iOS :

i) Dans ios/your_app/AppDelegate.mm dans didFinishLaunchingWithOptions, ajoutez :

#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 la lecture audio continue même lorsque l'application est en arrière-plan ou en mode silencieux

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;

...

Cette configuration permet la mise en cache vidéo dans le projet iOS en ajoutant des CocoaPods spécifiques (SPTPersistentCache et DVAssetLoaderDelegate) qui gèrent la mise en cache et le chargement des actifs. L'indicateur $RNVideoUseVideoCaching=true signale que le projet doit utiliser ces capacités de mise en cache. Cette configuration améliore les performances de lecture vidéo en réduisant le besoin de récupérer à nouveau les fichiers vidéo.

2. Utilisation :

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

          

3. Conseils d'optimisation

Pour garantir une lecture vidéo fluide :

• Utilisez un CDN : hébergez vos vidéos sur un CDN (Content Delivery Network) pour un chargement plus rapide.
• Streaming adaptatif : implémentez le streaming adaptatif (HLS ou DASH) pour ajuster la qualité vidéo en fonction des conditions du réseau.
• Précharger les vidéos : précharger les vidéos pour éviter la mise en mémoire tampon pendant la lecture.
• Optimiser les fichiers vidéo : compressez les fichiers vidéo sans perte de qualité pour réduire les temps de chargement.

Conclusion

La bibliothèque React-Native-Video est un outil puissant pour ajouter des fonctionnalités vidéo à vos applications React Native. Grâce à ses options de configuration étendues et à ses capacités de gestion des événements, vous pouvez créer une expérience de streaming vidéo fluide et personnalisée pour vos utilisateurs. Que vous ayez besoin d'un lecteur de base ou d'un lecteur entièrement personnalisé, React-Native-Video est là pour vous.