使用 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">

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

b) iOS：

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

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

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

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 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. 優化技巧

為了確保影片播放流暢：

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

---

結論

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

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