Penstriman Video Lancar dengan React Native

Membina Pengalaman Penstriman Video Lancar dengan React Native Video

Dalam dunia tertumpu mudah alih hari ini, penstriman video ialah ciri teras bagi banyak aplikasi. Sama ada platform perkongsian video, aplikasi pendidikan atau rangkaian sosial yang kaya dengan multimedia, menyediakan pengalaman video yang lancar adalah penting. Dengan React Native, rangka kerja popular untuk membina apl mudah alih merentas platform, penyepaduan penstriman video menjadi mudah dengan pustaka video react-native.

Dalam blog ini, kami akan menjalankan langkah-langkah untuk memasang, mengkonfigurasi dan menggunakan react-native-video untuk mencipta pengalaman penstriman video yang lancar dalam aplikasi React Native anda.

---

1. Pemasangan

Untuk bermula, anda perlu memasang pustaka react-native-video dalam projek React Native anda.

Langkah 1: Pasang pakej

Mula-mula, pasang perpustakaan menggunakan npm atau benang:

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

atau

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

Untuk iOS, anda mungkin perlu memasang pod yang diperlukan:

cd ios
pod install
cd ..

Langkah 2: Persediaan asli tambahan untuk 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"
        }
    }
}

Konfigurasi ini mendayakan pelbagai protokol penstriman (IMA, RTSP, Smooth Streaming, DASH, HLS) dalam ExoPlayer dan menyediakan repositori untuk memasukkan setempat, Google, JCenter dan repositori Maven tersuai untuk react-native-video- cache.
Setiap ciri yang didayakan ini akan meningkatkan saiz APK anda, jadi dayakan ciri yang anda perlukan sahaja. Secara lalai, ciri yang didayakan ialah: useExoplayerSmoothStreaming, useExoplayerDash, useExoplayerHls

ii) AndroidManifest.xml

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

Gabungan ini memastikan apl mempunyai memori yang mencukupi untuk mengendalikan set data yang besar (melalui largeHeap) dan boleh menghasilkan grafik dengan cekap (melalui perkakasanAccelerated), yang membawa kepada pengalaman pengguna yang lebih lancar dan stabil. Walau bagaimanapun, kedua-duanya harus digunakan dengan mengambil kira prestasi apl dan keperluan khusus fungsinya.

b) iOS:

i) Dalam ios/your_app/AppDelegate.mm di dalam didFinishLaunchingWithOptions tambah:

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

Memastikan audio terus dimainkan walaupun semasa apl berada di latar belakang atau dalam mod senyap

ii) ios/Fail Pod:

...
# 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;

...

Konfigurasi ini mendayakan caching video dalam projek iOS dengan menambahkan CocoaPods tertentu (SPTPersistentCache dan DVAssetLoaderDelegate) yang mengendalikan caching dan pemuatan aset. Bendera $RNVideoUseVideoCaching=true memberi isyarat bahawa projek harus menggunakan keupayaan caching ini. Persediaan ini meningkatkan prestasi main balik video dengan mengurangkan keperluan untuk mengambil semula fail video.

---

2. Penggunaan:

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. Petua untuk Pengoptimuman

Untuk memastikan main balik video yang lancar:

• Gunakan CDN: Hos video anda pada CDN (Rangkaian Penghantaran Kandungan) untuk pemuatan yang lebih pantas.
• Penstriman Suaian: Laksanakan penstriman suai (HLS atau DASH) untuk melaraskan kualiti video berdasarkan keadaan rangkaian.
• Pramuat Video: Pramuat video untuk mengelakkan penimbalan semasa main balik.
• Optimumkan Fail Video: Mampatkan fail video tanpa kehilangan kualiti untuk mengurangkan masa muat.

---

Kesimpulan

Pustaka video react-native ialah alat yang berkuasa untuk menambahkan fungsi video pada aplikasi React Native anda. Dengan pilihan konfigurasi yang luas dan keupayaan pengendalian acara, anda boleh mencipta pengalaman penstriman video yang lancar dan disesuaikan untuk pengguna anda. Sama ada anda memerlukan pemain asas atau pemain tersuai sepenuhnya, video react-native telah anda bincangkan.

Atas ialah kandungan terperinci Penstriman Video Lancar dengan React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!