使用 React Native 實現流暢的視訊串流

使用 React Native Video 建立流暢的視訊串流體驗

在當今以行動為中心的世界中，視訊串流是許多應用程式的核心功能。無論是影片分享平台、教育應用程式還是多媒體豐富的社交網絡，提供無縫的視訊體驗都是至關重要的。 React Native 是一種用於建立跨平台行動應用程式的流行框架，透過 React-native-video 庫可以輕鬆整合視訊串流。

在本部落格中，我們將逐步完成安裝、設定和使用 React-native-video 的步驟，以便在 React Native 應用程式中建立流暢的視訊串流體驗。

---

1. 安裝

首先，您需要在 React Native 專案中安裝react-native-video 函式庫。

第 1 步：安裝軟體套件

首先，使用npm或yarn安裝庫：

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

或

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

對於 iOS，您可能需要安裝必要的 pod：

cd ios
pod install
cd ..

第 2 步：針對 iOS/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"
        }
    }
}

此配置在ExoPlayer 中啟用各種串流媒體協定（IMA、RTSP、Smooth Streaming、DASH、HLS），並設定儲存庫以包括本機、Google、JCenter 和用於react-native-video-的自訂Maven 儲存庫快取。
啟用的每個功能都會增加 APK 的大小，因此僅啟用您需要的功能。預設啟用的功能有：useExoplayerSmoothStreaming、useExoplayerDash、useExoplayerHls

ii) AndroidManifest.xml

    <application ... android:largeheap="true" android:hardwareaccelerated="true">
</application>

這種組合確保應用程式有足夠的記憶體來處理大型資料集（透過largeHeap），並且可以有效地渲染圖形（透過硬體加速），從而帶來更流暢、更穩定的使用者體驗。但是，兩者的使用都應考慮應用程式的效能及其功能的特定需求。

b) iOS：

i) 在 ios/your_app/AppDelegate.mm 裡面 didFinishLaunchingWithOptions 新增：

#import <avfoundation> 

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

即使應用程式處於背景或靜音模式，也確保音訊繼續播放

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;

...

此組態透過新增處理快取和資源載入的特定 CocoaPod（SPTPercientCache 和 DVAssetLoaderDelegate）來在 iOS 專案中啟用視訊快取。標誌 $RNVideoUseVideoCaching=true 表示項目應該使用這些快取功能。此設定透過減少重新獲取視訊檔案的需要來提高視訊播放的效能。

---

2、使用方法：

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 should be resized to cover entire area posterresizemode="cover" sets source uri if visible otherwise it avoids isvisible uri: converttoproxyurl converts url proxy : undefined avoid not configures buffer settings manage and playback bufferconfig="{{" minbufferms: minimum before starts maxbufferms: maximum allowed bufferforplaybackms: required start bufferforplaybackafterrebufferms: after rebuffering ignores silent switch on device allowing play with sound even mode ignoresilentswitch="{'ignore'}" prevents from playing when app inactive or in background playwheninactive="{false}" playinbackground="{false}" disables use of textureview which can optimize performance but might limit certain effects usetextureview="{false}" hides default media controls provided by player focus useful for accessibility ui management disablefocus="{true}" applies defined styles container style="{styles.videoContainer}" pauses based ispaused state paused="{isPaused}" repeats indefinitely repeat="{true}" shutter view black screen that appears hideshutterview number retry attempts fails load minloadretrycount="{5}" ensures maintains correct aspect ratio covering resizemode="cover" color transparent so invisible shuttercolor="transparent" callback function triggered ready onreadyfordisplay="{handleVideoLoad}"></video>

---

3. 優化技巧

為了確保影片播放流暢：

• 使用 CDN：將影片託管在 CDN（內容交付網路）上以加快載入速度。
• 自適應串流：實施自適應串流媒體（HLS 或 DASH）以根據網路條件調整視訊品質。
• 預先載入影片：預先載入影片以避免播放過程中出現緩衝。
• 最佳化影片檔案：在不損失品質的情況下壓縮影片文件，以減少載入時間。

---

結論

react-native-video 函式庫是一個強大的工具，用於為 React Native 應用程式添加影片功能。憑藉其廣泛的配置選項和事件處理功能，您可以為用戶創建流暢且客製化的視訊串流體驗。無論您需要基本的播放器還是完全客製化的播放器，react-native-video 都能滿足您的需求。

以上是使用 React Native 實現流暢的視訊串流的詳細內容。更多資訊請關注PHP中文網其他相關文章！