React Native によるスムーズなビデオストリーミング-jsチュートリアル-php.cn

Smooth Video Streaming with React Native

React Native Video を使用してスムーズなビデオストリーミングエクスペリエンスを構築する

今日のモバイル中心の世界では、ビデオストリーミングは多くのアプリケーションの中核機能です。ビデオ共有プラットフォーム、教育アプリ、マルチメディアが豊富なソーシャルネットワークのいずれであっても、シームレスなビデオエクスペリエンスを提供することが不可欠です。クロスプラットフォームのモバイルアプリを構築するための人気のあるフレームワークである React Native では、react-native-video ライブラリを使用してビデオストリーミングを簡単に統合できます。

このブログでは、React Native アプリケーションでスムーズなビデオストリーミングエクスペリエンスを作成するために、react-native-video をインストール、構成、使用する手順を順を追って説明します。

1. インストール

始めるには、React Native プロジェクトに React-native-video ライブラリをインストールする必要があります。

ステップ 1: パッケージをインストールする

まず、npmまたはyarnを使用してライブラリをインストールします:

リーリー

か

リーリー

iOS の場合、必要なポッドをインストールする必要がある場合があります:

リーリー

ステップ 2: iOS/Android 用の追加のネイティブ設定

a) アンドロイド:

i) android/build.gradle

リーリー

この構成により、ExoPlayer でさまざまなストリーミングプロトコル (IMA、RTSP、Smooth Streaming、DASH、HLS) が有効になり、ローカル、Google、JCenter、react-native-video-cache のカスタム Maven リポジトリを含むリポジトリが設定されます。これらの各機能を有効にすると APK のサイズが増加するため、必要な機能のみを有効にしてください。デフォルトで有効になっている機能は次のとおりです: useExoplayerSmoothStreaming、useExoplayerDash、useExoplayerHls
ii) AndroidManifest.xml

リーリー

この組み合わせにより、アプリには大規模なデータセットを処理するのに十分なメモリが確保され (largeHeap 経由)、グラフィックスを効率的にレンダリングできるようになり (hardwareAccelerated 経由)、よりスムーズで安定したユーザーエクスペリエンスが実現します。ただし、どちらもアプリのパフォーマンスとその機能の特定のニーズを考慮して使用する必要があります。

b) iOS:

i) DidFinishLaunchingWithOptions 内の ios/your_app/AppDelegate.mm に次を追加します:

リーリー

アプリがバックグラウンドまたはサイレントモードにある場合でもオーディオが再生され続けるようにする

ii) ios/Podfile:

リーリー

この構成では、キャッシュとアセットの読み込みを処理する特定の CocoaPods (SPTPersistentCache および DVAssetLoaderDelegate) を追加することで、iOS プロジェクトでビデオキャッシュを有効にします。 $RNVideoUseVideoCaching=true フラグは、プロジェクトがこれらのキャッシュ機能を使用する必要があることを示します。この設定により、ビデオファイルを再フェッチする必要性が減り、ビデオ再生のパフォーマンスが向上します。

2. 使用方法:

リーリー

3. 最適化のヒント