रिएक्ट नेटिव वीडियो के साथ एक सहज वीडियो स्ट्रीमिंग अनुभव का निर्माण

आज की मोबाइल-केंद्रित दुनिया में, वीडियो स्ट्रीमिंग कई एप्लिकेशन की मुख्य विशेषता है। चाहे वह वीडियो-शेयरिंग प्लेटफ़ॉर्म हो, शैक्षिक ऐप हो, या मल्टीमीडिया-समृद्ध सोशल नेटवर्क हो, एक सहज वीडियो अनुभव प्रदान करना आवश्यक है। रिएक्ट नेटिव के साथ, क्रॉस-प्लेटफ़ॉर्म मोबाइल ऐप बनाने के लिए एक लोकप्रिय ढांचा, रिएक्ट-नेटिव-वीडियो लाइब्रेरी के साथ वीडियो स्ट्रीमिंग को एकीकृत करना आसान बना दिया गया है।

इस ब्लॉग में, हम आपके रिएक्ट नेटिव एप्लिकेशन में एक सहज वीडियो स्ट्रीमिंग अनुभव बनाने के लिए रिएक्ट-नेटिव-वीडियो को इंस्टॉल करने, कॉन्फ़िगर करने और उपयोग करने के चरणों के बारे में जानेंगे।

1. स्थापना

आरंभ करने के लिए, आपको अपने रिएक्ट नेटिव प्रोजेक्ट में रिएक्ट-नेटिव-वीडियो लाइब्रेरी स्थापित करनी होगी।

चरण 1: पैकेज स्थापित करें

सबसे पहले, एनपीएम या यार्न का उपयोग करके लाइब्रेरी स्थापित करें:

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

या

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

आईओएस के लिए, आपको आवश्यक पॉड इंस्टॉल करने की आवश्यकता हो सकती है:

cd ios
pod install
cd ..

चरण 2: आईओएस/एंड्रॉइड के लिए अतिरिक्त मूल सेटअप

ए) एंड्रॉइड:

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

यह कॉन्फ़िगरेशन एक्सोप्लेयर में विभिन्न स्ट्रीमिंग प्रोटोकॉल (आईएमए, आरटीएसपी, स्मूथ स्ट्रीमिंग, डीएएसएच, एचएलएस) को सक्षम करता है और स्थानीय, Google, जेसेंटर और प्रतिक्रिया-मूल-वीडियो के लिए एक कस्टम मावेन रिपॉजिटरी को शामिल करने के लिए रिपॉजिटरी सेट करता है। कैश.
सक्षम की गई इनमें से प्रत्येक सुविधा आपके APK के आकार को बढ़ाएगी, इसलिए केवल उन्हीं सुविधाओं को सक्षम करें जिनकी आपको आवश्यकता है। डिफ़ॉल्ट रूप से सक्षम सुविधाएँ हैं: यूज़एक्सोप्लेयरस्मूथस्ट्रीमिंग, यूज़एक्सोप्लेयरडैश, यूज़एक्सोप्लेयरएचएलएस

ii) AndroidManifest.xml

संयोजन यह सुनिश्चित करता है कि ऐप में बड़े डेटासेट (लार्जहीप के माध्यम से) को संभालने के लिए पर्याप्त मेमोरी है और ग्राफिक्स को कुशलतापूर्वक (हार्डवेयर एक्सेलेरेटेड के माध्यम से) प्रस्तुत कर सकता है, जिससे एक सहज और अधिक स्थिर उपयोगकर्ता अनुभव प्राप्त होता है। हालाँकि, दोनों का उपयोग ऐप के प्रदर्शन और इसकी कार्यक्षमता की विशिष्ट आवश्यकताओं को ध्यान में रखते हुए किया जाना चाहिए।

बी) आईओएस:

i) ios/your_app/AppDelegate.mm में madeFiishLaunchingWithOptions के अंदर जोड़ें:

#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) आईओएस/पॉडफ़ाइल:

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

...

यह कॉन्फ़िगरेशन विशिष्ट CocoaPods (SPTPersistentCache और DVAssetLoaderDelegate) को जोड़कर iOS प्रोजेक्ट में वीडियो कैशिंग को सक्षम बनाता है जो कैशिंग और एसेट लोडिंग को संभालता है। ध्वज $RNVideoUseVideoCaching=true संकेत देता है कि प्रोजेक्ट को इन कैशिंग क्षमताओं का उपयोग करना चाहिए। यह सेटअप वीडियो फ़ाइलों को पुनः प्राप्त करने की आवश्यकता को कम करके वीडियो प्लेबैक के प्रदर्शन में सुधार करता है।

2. उपयोग:

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

          

3. अनुकूलन के लिए युक्तियाँ

सुचारू वीडियो प्लेबैक सुनिश्चित करने के लिए:

• सीडीएन का उपयोग करें: तेजी से लोड करने के लिए अपने वीडियो को सीडीएन (कंटेंट डिलीवरी नेटवर्क) पर होस्ट करें।
• अनुकूली स्ट्रीमिंग: नेटवर्क स्थितियों के आधार पर वीडियो की गुणवत्ता को समायोजित करने के लिए अनुकूली स्ट्रीमिंग (HLS या DASH) लागू करें।
• वीडियो प्रीलोड करें: प्लेबैक के दौरान बफरिंग से बचने के लिए वीडियो प्रीलोड करें।
• वीडियो फ़ाइलों को अनुकूलित करें: लोड समय को कम करने के लिए गुणवत्ता खोए बिना वीडियो फ़ाइलों को संपीड़ित करें।

निष्कर्ष

रिएक्ट-नेटिव-वीडियो लाइब्रेरी आपके रिएक्ट नेटिव एप्लिकेशन में वीडियो कार्यक्षमता जोड़ने के लिए एक शक्तिशाली उपकरण है। इसके व्यापक कॉन्फ़िगरेशन विकल्पों और इवेंट हैंडलिंग क्षमताओं के साथ, आप अपने उपयोगकर्ताओं के लिए एक सहज और अनुकूलित वीडियो स्ट्रीमिंग अनुभव बना सकते हैं। चाहे आपको एक बुनियादी प्लेयर की आवश्यकता हो या पूरी तरह से अनुकूलित प्लेयर की, रिएक्ट-नेटिव-वीडियो ने आपको कवर कर लिया है।