プレイヤーインストール

Classic/VPC環境で利用できます。

このページでは、Expo環境で Video Player Enhancement React Native SDKを活用してプレイヤーをインストール・起動するための環境設定について説明します。

EXPOベースライブラリ

expo環境で起動します。

Expo GOサポート不可

VPE RN SDKはネイティブブリッジを使用する領域があるため、Expo GOテストはサポートしません。
Development buildをご利用ください。

React Native 0.68.2以上必要

React Native Videoライブラリ V6.xをベースにサービスを提供します。
React Nativeバージョンは0.68.2以上である必要があります。

npm使用

npm install vpe-react-native

依存関係のセットアップ

npm install @sgrsoft/react-native-video react-native-svg react-native-capture-protection phosphor-react-native expo-screen-orientation expo-navigation-bar expo-localization expo-application

iOSの事前設定

cd ios && pod install

開発用テストとテスト用 AppIdの設定

Video Player Enhancementは AppId + AccessKeyの組み合わせでライセンスをチェックします。
Expo GOでは正式 AppIdを利用できないため、開発モード専用の propsが存在します。

<VpePlayer
   ...
   devTestAppId={'TEST DEV AppID'} //EXPO GO対応、開発モードのみで使用
   accessKey={'VPE ACCESS KEY'} //AppIDと一致する Access Key
   ...
/>

app.json設定

• plugins項目追加
• PictureInPictureサポートのためのオプション追加
• Background playのためのオプション追加が必要

{
 "expo": {
   ...
   "plugins": [
       [
           "react-native-capture-protection",
           {
               "captureType": "fullMediaCapture"
           }
       ],
       [
           "@sgrsoft/react-native-video",
           {
               "enableAndroidPictureInPicture": true,
               "enableNotificationControls": true
           }
       ]
   ],
   "ios": {
     ...
     "infoPlist": {
       "UIBackgroundModes": [
           "audio",
           "fetch"
       ]
     }
     ...
   },
   "android": {
     ...
     "edgeToEdgeEnabled": true,
     "supportsPictureInPicture": true,
     "permissions": [
           "android.permission.FOREGROUND_SERVICE"
     ]
     ...
   },
 }
}