설치하기

VPE 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

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