Reibungsloses Video-Streaming mit React Native

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 Bildungs-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 zur Installation, Konfiguration und Verwendung 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: Installieren Sie das Paket

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

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

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 an ihre Funktionalität verwendet werden.

b) iOS:

i) Fügen Sie in ios/your_app/AppDelegate.mm in didFinishLaunchingWithOptions Folgendes hinzu:

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

Stellt sicher, 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';

          <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. 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: Laden Sie Videos vor, 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.

Das obige ist der detaillierte Inhalt vonReibungsloses Video-Streaming mit React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!