Streaming vidéo fluide avec React Native

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

    <application
      ...
      android:largeHeap="true" 
      android:hardwareAccelerated="true">

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 à l'intérieur de didFinishLaunchingWithOptions, ajoutez :

#import <AVFoundation/AVFoundation.h> 

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

Assurer que l'audio continue de jouer 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';

          <Video
  // Display a thumbnail image while the video is loading
  poster={item.thumbUri}

  // Specifies how the thumbnail should be resized to cover the entire video area
  posterResizeMode="cover"

  // Sets the video source URI if the video is visible; otherwise, it avoids loading the video
  source={
    isVisible
      ? { uri: convertToProxyURL(item.videoUri) } // Converts the video URL to a proxy URL if visible
      : undefined // Avoid loading the video if not visible
  }

  // Configures buffer settings to manage video loading and playback
  bufferConfig={{
    minBufferMs: 2500, // Minimum buffer before playback starts
    maxBufferMs: 3000, // Maximum buffer allowed
    bufferForPlaybackMs: 2500, // Buffer required to start playback
    bufferForPlaybackAfterRebufferMs: 2500, // Buffer required after rebuffering
  }}

  // Ignores the silent switch on the device, allowing the video to play with sound even if the device is on silent mode
  ignoreSilentSwitch={'ignore'}

  // Prevents the video from playing when the app is inactive or in the background
  playWhenInactive={false}
  playInBackground={false}

  // Disables the use of TextureView, which can optimize performance but might limit certain effects
  useTextureView={false}

  // Hides the default media controls provided by the video player
  controls={false}

  // Disables focus on the video, which is useful for accessibility and UI focus management
  disableFocus={true}

  // Applies the defined styles to the video container
  style={styles.videoContainer}

  // Pauses the video based on the isPaused state
  paused={isPaused}

  // Repeats the video playback indefinitely
  repeat={true}

  // Hides the shutter view (a black screen that appears when the video is loading or paused)
  hideShutterView

  // Sets the minimum number of retry attempts when the video fails to load
  minLoadRetryCount={5}

  // Ensures the video maintains the correct aspect ratio by covering the entire view area
  resizeMode="cover"

  // Sets the shutter color to transparent, so the shutter view is invisible
  shutterColor="transparent"

  // Callback function that is triggered when the video is ready for display
  onReadyForDisplay={handleVideoLoad}
/>

---

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!