설치하기

VPE React Native CLI SDK를 설치하고 프로젝트를 설정하는 방법을 안내합니다.

안내: vpe-react-native-cli 패키지가 npm 에 정식 배포되었습니다. 아래 설치 명령으로 바로 사용할 수 있습니다. npmjs 패키지 보기 →

React Native CLI(bare) 전용

네이티브 모듈을 포함하므로 React Native CLI(bare) 프로젝트에서만 동작합니다. Expo Go 환경은 지원하지 않습니다.

요구 사항

React Native >= 0.79 / React 19 권장
iOS 13+ / Android 7.0 (API 24)+
React Native Video 라이브러리 V6.x 기반

패키지 설치

npm install vpe-react-native-cli

의존성(peer dependencies) 설치

아래 라이브러리는 peer dependency 이므로 호스트 앱에 함께 설치되어 있어야 합니다.

npm install @sgrsoft/react-native-video @react-native-community/netinfo \
  react-native-device-info react-native-localize react-native-orientation-locker \
  react-native-safe-area-context react-native-svg phosphor-react-native

iOS 사전 설정 (CocoaPods)

네이티브 모듈은 autolinking 으로 연결됩니다. iOS는 pod install 후 앱을 다시 빌드해야 합니다.

cd ios && pod install && cd ..

패키지 설치 후에는 반드시 앱을 다시 빌드해야 네이티브 모듈이 링크됩니다. 빌드하지 않으면 doesn't seem to be linked 에러가 발생합니다.

Android 설정

Android는 별도 수동 링크 없이 autolinking 으로 연결됩니다. PiP·백그라운드 재생·화면 녹화 방지 등 기능별 네이티브 설정은 각 기능 페이지(PIP / 캡쳐 및 화면녹화 방지)를 참고하세요.

개발용 테스트 키 및 테스트용 AppId 설정

Video Player Enhancement 는 AppId + AccessKey 조합으로 라이선스 체크를 실시합니다. 개발/테스트 단계에서 앱 번들 ID 와 일치하는 라이선스가 아직 없을 때 사용할 수 있도록 개발 모드 전용 props 가 제공됩니다.

<VpePlayer
    ...
    devTestAppId={'TEST DEV AppID'} //개발/테스트용 앱 아이디 (개발모드에서만 사용)
    accessKey={'VPE ACCESS KEY'}    //AppID 와 일치하는 Access Key
    ...
/>

기본 사용 예시

import { VpePlayer } from 'vpe-react-native-cli';

export default function PlayerScreen() {
    return (
        <VpePlayer
            accessKey={'VPE ACCESS KEY'}
            platform={'pub'}
            options={{
                playlist: [
                    { file: 'https://example.com/video/master.m3u8' }
                ],
                autostart: true,
                aspectRatio: '16/9',
            }}
        />
    );
}