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 video react-native dalam projek React Native anda.

Langkah 1: Pasang pakej

Mula-mula, pasang perpustakaan menggunakan npm atau yarn:

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 cache-video-react-native.
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

Gabungan 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  - (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 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 membolehkan 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'; 

3. Petua untuk Pengoptimuman

Untuk memastikan main balik video lancar:

• Gunakan CDN: Hos video anda pada CDN (Rangkaian Penghantaran Kandungan) untuk pemuatan yang lebih pantas.
• Penstriman Adaptif: Laksanakan penstriman adaptif (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 lindungi.

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