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

b) iOS:

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

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

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

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 vorladen: 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 Player 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!