플레이어 설치

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 사전 설정

참고

Expo로 빌드하는 경우 이 단계는 필요하지 않습니다.

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"
     ]
     ...
   },
 }
}