멀티DRM 크로스플랫폼 클라이언트 연동 가이드
개요
크로스플랫폼 프레임워크는 단일 개발 언어와 프레임워크로 웹, 안드로이드, iOS 등의 다양한 클라이언트 환경을 지원할 수 있는 앱 개발 방식입니다.
크로스플랫폼 앱의 최종 결과물은 각각의 환경에 대한 네이티브 코드로 변환되어 적용되므로, 네이티브 앱과 웹 앱을 결합한 하이브리드 앱보다 성능적으로 유리하다는 장점이 있습니다. 여러 크로스플랫폼 프레임워크 중에서도 최근에는 구글에서 개발한 Flutter와 페이스북의 React Native가 개발자들에 의해 가장 많이 사용되고 있습니다.
본 문서는 PallyCon 멀티 DRM 서비스의 고객사에서 Flutter 또는 React Native를 이용해 클라이언트 앱을 개발하는 경우에 DRM 콘텐츠 재생을 쉽고 빠르게 지원할 수 있는 방법들을 안내합니다.
크로스플랫폼 연동 예제
Flutter와 React Native 환경에 대한 쉽고 빠른 PallyCon 멀티 DRM 연동을 위해 각각의 연동 예제와 가이드를 제공합니다.
크로스플랫폼 클라이언트 SDK 제품을 사용하시기 바랍니다. 또는 다운로드 기능을 지원하는 상용 플레이어 솔루션의 크로스플랫폼 SDK를 이용할 수도 있습니다.
Flutter 예제
PallyCon 멀티 DRM Flutter 연동 예제는 오픈 소스 프로젝트인 Better Player를 기반으로 작성되었습니다. 예제 코드와 연동 가이드 문서는 아래 링크를 참고하시기 바랍니다.
React Native 예제
PallyCon 멀티 DRM React Native 연동 예제는 오픈 소스 프로젝트인 react-native-video를 기반으로 작성되었습니다. 예제 코드와 연동 가이드 문서는 아래 링크를 참고하시기 바랍니다.
크로스플랫폼 클라이언트 SDK
크로스플랫폼 프레임워크로 개발된 클라이언트 앱에서 DRM 콘텐츠의 다운로드 및 오프라인 재생 지원이 필요한 경우, 사용하는 프레임워크에 따라 PallyCon 멀티 DRM Flutter SDK 또는 PallyCon 멀티 DRM React Native SDK 제품을 사용할 수 있습니다.
PallyCon 멀티 DRM Flutter SDK
PallyCon 멀티DRM Flutter SDK(이하 Flutter SDK)는 Flutter 기반의 크로스플랫폼 어플리케이션 개발 환경에서 미디어 서비스 앱을 개발할 때 Widevine과 FairPlay DRM을 쉽게 적용할 수 있게 해주는 제품입니다. Flutter로 개발된 안드로이드와 iOS 앱에서 각각 Widevine과 FairPlay DRM으로 암호화된 콘텐츠의 스트리밍과 다운로드 시나리오를 지원합니다.
SDK 구성
Github 저장소에 등록된 Flutter SDK는 다음과 같이 구성되어 있습니다.
pallycon-drm-sdk:pallycon_drm_sdk: Flutter 기반의 안드로이드/iOS 앱에서 DRM 콘텐츠 재생을 지원하는 플러그인 패키지pallycon_drm_sdk_android:pallycon_drm_sdk플러그인의 안드로이드 버전 구현pallycon_drm_sdk_ios:pallycon_drm_sdk플러그인의 iOS 버전 구현pallycon_drm_sdk_interface:pallycon_drm_sdk플러그인을 위한 공통 플랫폼 인터페이스
player-samples: DRM 콘텐츠 재생을 지원하는 Flutter 샘플 앱basic: 스트리밍 재생만 지원하는 기본 기능 샘플advanced: 스트리밍과 다운로드/오프라인 재생을 지원하는 샘플
지원 환경
- 안드로이드 5.0 롤리팝 (target SDK 31) 이상
- iOS 11.2 이상
- 안드로이드 ExoPlayer 2.18.1 이상
SDK 적용
설치 가이드를 참고해 Flutter 앱 프로젝트에 PallyConDrmSdk를 추가합니다. 그 후 안드로이드와 iOS 프로젝트 별로 다음과 같은 속성을 설정합니다.
안드로이드 버전
android/app/build.gradle 파일에 다음과 같이 compileSdkVersion 값을 설정합니다.
android {
compileSdkVersion 31
...
}
Flutter SDK를 사용하려면 대상 어플리케이션에 다음과 같은 퍼미션이 추가되어야 합니다.
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
iOS 버전
cocoapods를 이용해 PallyConFPSSDK를 프로젝트에 추가합니다.
SDK 초기화
앱 실행 후 초기화 단계에 아래 코드를 추가해 Flutter SDK를 초기화 합니다.
PallyConDrmSdk.initialize(siteId); // siteId: PallyCon 서비스 가입 시 생성되는 네 자리 사이트 ID
이벤트 설정
Flutter SDK와 관련한 이벤트를 다음과 같이 설정합니다.
PallyConDrmSdk.onPallyConEvent.listen((event) {
var downloadState = DownloadStatus.pending;
switch (event.eventType) {
case PallyConEventType.prepare:
//
break;
case PallyConEventType.complete:
// Called when download is complete
break;
case PallyConEventType.pause:
// Called when downloading is stopped during download
break;
case PallyConEventType.download:
// Called when download starts
break;
case PallyConEventType.contentDataError:
// Called when an error occurs in the parameters passed to the sdk
break;
case PallyConEventType.drmError:
// Called when a license error occurs
break;
case PallyConEventType.licenseServerError:
// Called when an error comes down from the license server
break;
case PallyConEventType.downloadError:
// Called when an error occurs during download
break;
case PallyConEventType.networkConnectedError:
// Called in case of network error
break;
case PallyConEventType.detectedDeviceTimeModifiedError:
// Called when device time is forcibly manipulated
break;
case PallyConEventType.migrationError:
// Called when sdk migration fails
break;
case PallyConEventType.unknown:
// Internally called when an unknown error occurs
break;
}
// content state
}).onError((error) {
});
콘텐츠 다운로드 관련 기능
오프라인 재생을 위한 콘텐츠 다운로드는 다음과 같은 API를 사용해 구현합니다.
// start download
PallyConDrmSdk.addStartDownload(PallyConContentConfiguration);
// cancel downloads
PallyConDrmSdk.cancelDownloads();
// pause downloads
PallyConDrmSdk.pauseDownloads();
// resume downloads
PallyConDrmSdk.resumeDownloads();
콘텐츠 다운로드 시 진행 상황을 UI 상에 표시하려면 아래와 같은 이벤트 리스너를 등록합니다.
PallyConDrmSdk.onDownloadProgress.listen((event) {
// event.url is url
// event.percent is downloaded percent
});
다운로드 진행 중 또는 완료 등의 상황은 다음의 코드로 확인할 수 있습니다.
PallyConDownloadState downloadState =
await PallyConDrmSdk.getDownloadState(PallyConContentConfiguration);
switch (downloadState) {
case PallyConDownloadState.DOWNLOADING:
break;
case PallyConDownloadState.PAUSED:
break;
case PallyConDownloadState.COMPLETED:
break;
default:
break;
}
다운로드된 콘텐츠와 DRM 라이선스는 다음과 같은 API로 삭제할 수 있습니다.
// remove downloaded content
PallyConDrmSdk.removeDownload(PallyConContentConfiguration);
// remove license for content
PallyConDrmSdk.removeLicense(PallyConContentConfiguration);
SDK 릴리즈
어플리케이션 종료 시점에 다음과 같은 코드로 SDK를 릴리즈합니다.
PallyConDrmSdk.release();
PallyCon 멀티 DRM React Native SDK
PallyCon 멀티 DRM React Native SDK(이하 React Native SDK)는 React Native 기반의 크로스플랫폼 어플리케이션 개발 환경에서 미디어 서비스 앱을 개발할 때 Widevine과 FairPlay DRM을 쉽게 적용할 수 있게 해주는 제품입니다. React Native로 개발된 안드로이드와 iOS 앱에서 각각 Widevine과 FairPlay DRM으로 암호화된 콘텐츠의 스트리밍과 다운로드 시나리오를 지원합니다.
지원 환경
- 안드로이드 5.0 롤리팝 (target SDK 31) 이상
- iOS 11.2 이상
- 안드로이드 ExoPlayer 2.18.1 이상
SDK 적용
설치 가이드를 참고해 React Native 앱 프로젝트에 PallyConMultiDrmSdk를 추가합니다. 그 후 안드로이드와 iOS 프로젝트 별로 다음과 같은 속성을 설정합니다.
안드로이드 버전
android/app/build.gradle 파일에 다음과 같이 compileSdkVersion 값을 설정합니다.
android {
compileSdkVersion 31
...
}
iOS 버전
cocoapods를 이용해 PallyConFPSSDK를 프로젝트에 추가합니다.
Import
import PallyConMultiDrmSdk , {
PallyConEventType,
PallyConContentConfiguration,
PallyConDownloadState
} from 'pallycon-react-native-sdk';
SDK 초기화
앱 실행 후 초기화 단계에 아래 코드를 추가해 React Native SDK를 초기화 합니다.
PallyConMultiDrmSdk.initialize(siteId); // siteId: PallyCon 서비스 가입 시 생성되는 네 자리 사이트 ID
이벤트 설정
React Native SDK와 관련한 이벤트를 다음과 같이 설정합니다.
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.complete, (event) => {
// Called when download is complete
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.pause, (event) => {
// Called when downloading is stopped during download
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.remove, (event) => {
// Called when download remove
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.stop, (event) => {
// Called when download stops
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.download, (event) => {
// Called when download starts
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.contentDataError, (event) => {
// Called when an error occurs in the parameters passed to the sdk
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.drmError, (event) => {
// Called when a license error occurs
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.licenseServerError, (event) => {
// Called when an error comes down from the license server
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.downloadError, (event) => {
// Called when an error occurs during download
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.networkConnectedError, (event) => {
// Called in case of network error
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.detectedDeviceTimeModifiedError, (event) => {
// Called when device time is forcibly manipulated
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.migrationError, (event) => {
// Called when sdk migration fails
})
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.unknownError, (event) => {
// Internally called when an unknown error occurs
})
콘텐츠 다운로드 관련 기능
오프라인 재생을 위한 콘텐츠 다운로드는 다음과 같은 API를 사용해 구현합니다.
// start download
PallyConMultiDrmSdk.addStartDownload(PallyConContentConfiguration);
// cancel downloads
PallyConMultiDrmSdk.cancelDownloads();
// pause downloads
PallyConMultiDrmSdk.pauseDownloads();
// resume downloads
PallyConMultiDrmSdk.resumeDownloads();
콘텐츠 다운로드 시 진행 상황을 UI 상에 표시하려면 아래와 같은 코드를 이용합니다.
PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.progress, (event) => {
// event.url is url
// event.percent is downloaded percent
})
다운로드 진행 중 또는 완료 등의 상황은 다음의 코드로 확인할 수 있습니다.
try {
const state =
await PallyConMultiDrmSdk.getDownloadState(config);
switch (state) {
case PallyConDownloadState.DOWNLOADING:
break;
case PallyConDownloadState.PAUSED:
break;
case PallyConDownloadState.COMPLETED:
break;
default:
break;
}
} catch (e) {
setError(e.message);
}
다운로드된 콘텐츠와 DRM 라이선스는 다음과 같은 API로 삭제할 수 있습니다.
// remove downloaded content
PallyConMultiDrmSdk.removeDownload(PallyConContentConfiguration);
// remove license for content
PallyConMultiDrmSdk.removeLicense(PallyConContentConfiguration);
SDK 릴리즈
어플리케이션 종료 시점에 다음과 같은 코드로 SDK를 릴리즈합니다.
PallyConMultiDrmSdk.release();
서드파티 상용 플레이어 SDK
Bitmovin과 THEOplayer 등의 상용 플레이어 솔루션들도 최근 React Native 용 SDK를 출시하며 크로스플랫폼 지원에 나서고 있습니다. 해당 솔루션을 이용해 React Native 앱을 개발하려는 고객사는 아래 링크를 참고하시기 바랍니다.