Erstellen Sie ein reibungsloses Video-Streaming-Erlebnis mit React Native Video

In der heutigen, auf Mobilgeräte ausgerichteten Welt ist Video-Streaming eine Kernfunktion vieler Anwendungen. Ob es sich um eine Video-Sharing-Plattform, eine Lern-App oder ein multimediales soziales Netzwerk handelt, die Bereitstellung eines nahtlosen Videoerlebnisses ist von entscheidender Bedeutung. Mit React Native, einem beliebten Framework zum Erstellen plattformübergreifender mobiler Apps, wird die Integration von Video-Streaming mit der React-Native-Video-Bibliothek ganz einfach.

In diesem Blog gehen wir durch die Schritte zum Installieren, Konfigurieren und Verwenden von React-Native-Video, um ein reibungsloses Video-Streaming-Erlebnis in Ihren React Native-Anwendungen zu schaffen.

1. Installation

Um zu beginnen, müssen Sie die React-Native-Video-Bibliothek in Ihrem React Native-Projekt installieren.

Schritt 1: Paket installieren

Installieren Sie zunächst die Bibliothek mit npm oder Yarn:

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

oder

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

Für iOS müssen Sie möglicherweise die erforderlichen Pods installieren:

cd ios
pod install
cd ..

Schritt 2: Zusätzliche native Einrichtung für iOS/Android

a) Android:

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

Diese Konfiguration ermöglicht verschiedene Streaming-Protokolle (IMA, RTSP, Smooth Streaming, DASH, HLS) in ExoPlayer und richtet Repositorys ein, die lokale, Google, JCenter und ein benutzerdefiniertes Maven-Repository für React-Native-Video umfassen. Cache.
Jede dieser aktivierten Funktionen erhöht die Größe Ihres APK. Aktivieren Sie daher nur die Funktionen, die Sie benötigen. Standardmäßig aktivierte Funktionen sind: useExoplayerSmoothStreaming, useExoplayerDash, useExoplayerHls

ii) AndroidManifest.xml

Die Kombination stellt sicher, dass die App über genügend Speicher verfügt, um große Datensätze zu verarbeiten (über LargeHeap) und Grafiken effizient rendern kann (über HardwareAccelerated), was zu einem reibungsloseren und stabileren Benutzererlebnis führt. Beide sollten jedoch unter Berücksichtigung der Leistung der App und der spezifischen Anforderungen ihrer Funktionalität verwendet werden.

b) iOS:

i) In ios/your_app/AppDelegate.mm in didFinishLaunchingWithOptions hinzufügen:

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

Sicherstellen, dass der Ton auch dann weiter abgespielt wird, wenn sich die App im Hintergrund oder im lautlosen Modus befindet

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;

...

Diese Konfiguration ermöglicht das Video-Caching im iOS-Projekt durch Hinzufügen spezifischer CocoaPods (SPTPersistentCache und DVAssetLoaderDelegate), die das Caching und das Laden von Assets übernehmen. Das Flag $RNVideoUseVideoCaching=true signalisiert, dass das Projekt diese Caching-Funktionen nutzen soll. Dieses Setup verbessert die Leistung der Videowiedergabe, indem es die Notwendigkeit reduziert, Videodateien erneut abzurufen.

2. Verwendung:

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

          

3. Tipps zur Optimierung

Um eine reibungslose Videowiedergabe zu gewährleisten:

• Verwenden Sie ein CDN: Hosten Sie Ihre Videos auf einem CDN (Content Delivery Network), um das Laden zu beschleunigen.
• Adaptives Streaming: Implementieren Sie adaptives Streaming (HLS oder DASH), um die Videoqualität basierend auf den Netzwerkbedingungen anzupassen.
• Videos vorab laden: Videos vorab laden, um eine Pufferung während der Wiedergabe zu vermeiden.
• Videodateien optimieren: Komprimieren Sie Videodateien ohne Qualitätsverlust, um die Ladezeiten zu verkürzen.

Abschluss

Die React-Native-Video-Bibliothek ist ein leistungsstarkes Tool zum Hinzufügen von Videofunktionen zu Ihren React Native-Anwendungen. Mit seinen umfangreichen Konfigurationsoptionen und Event-Handling-Funktionen können Sie Ihren Benutzern ein reibungsloses und individuelles Video-Streaming-Erlebnis bieten. Egal, ob Sie einen einfachen oder einen vollständig angepassten Player benötigen, React-Native-Video ist genau das Richtige für Sie.