Создание бесперебойной потоковой передачи видео с помощью React Native Video

В современном мире, ориентированном на мобильные устройства, потоковое видео является основной функцией многих приложений. Будь то платформа для обмена видео, образовательное приложение или социальная сеть с мультимедийными возможностями, крайне важно обеспечить бесперебойную работу с видео. Благодаря React Native, популярной платформе для создания кроссплатформенных мобильных приложений, интеграция потокового видео упрощается с помощью библиотеки React-native-video.

В этом блоге мы рассмотрим шаги по установке, настройке и использованию React-native-video для создания плавной потоковой передачи видео в ваших приложениях React Native.

1. Установка

Чтобы начать, вам необходимо установить библиотеку React-native-video в ваш проект React Native.

Шаг 1. Установите пакет

Сначала установите библиотеку с помощью npm или Yarn:

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

или

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

Для iOS может потребоваться установка необходимых модулей:

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"
        }
    }
}

Эта конфигурация включает различные протоколы потоковой передачи (IMA, RTSP, Smooth Streaming, DASH, HLS) в ExoPlayer и настраивает репозитории, включающие локальный, Google, JCenter и пользовательский репозиторий Maven для реагирования-native-video- кэш.
Каждая из этих включенных функций приведет к увеличению размера вашего APK, поэтому включайте только те функции, которые вам нужны. По умолчанию включены следующие функции: useExoplayerSmoothStreaming, useExoplayerDash, useExoplayerHls

ii) AndroidManifest.xml

Комбинация гарантирует, что приложение будет иметь достаточно памяти для обработки больших наборов данных (с помощью bigheap) и сможет эффективно отображать графику (с помощью аппаратного ускорения), что обеспечивает более плавный и стабильный пользовательский интерфейс. Однако оба варианта следует использовать с учетом производительности приложения и особенностей его функциональности.

б) iOS:

i) В ios/your_app/AppDelegate.mm внутри DidFinishLaunchingWithOptions добавьте:

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

Гарантия продолжения воспроизведения звука, даже когда приложение находится в фоновом режиме или в беззвучном режиме

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;

...

Эта конфигурация включает кэширование видео в проекте iOS путем добавления определенных CocoaPods (SPTPersistentCache и DVAssetLoaderDelegate), которые обрабатывают кэширование и загрузку ресурсов. Флаг $RNVideoUseVideoCaching=true сигнализирует о том, что проект должен использовать эти возможности кэширования. Эта настройка повышает производительность воспроизведения видео за счет уменьшения необходимости повторной загрузки видеофайлов.

2. Использование:

import Video from 'react-native-video';
import convertToProxyURL from 'react-native-video-cache';

          

3. Советы по оптимизации

Чтобы обеспечить плавное воспроизведение видео:

• Используйте CDN: разместите свои видео в CDN (сети доставки контента) для более быстрой загрузки.
• Адаптивная потоковая передача: реализация адаптивной потоковой передачи (HLS или DASH) для настройки качества видео в зависимости от условий сети.
• Предварительная загрузка видео: предварительная загрузка видео, чтобы избежать буферизации во время воспроизведения.
• Оптимизация видеофайлов: сжимайте видеофайлы без потери качества, чтобы сократить время загрузки.

Заключение

Библиотека React-native-video — это мощный инструмент для добавления функций видео в ваши приложения React Native. Благодаря обширным возможностям конфигурации и возможностям обработки событий вы можете создать для своих пользователей плавную и настраиваемую потоковую передачу видео. Нужен ли вам базовый плеер или полностью настроенный, React-native-video поможет вам.