Multi-DRM Cross-platform Client Integration Guide

Overview

Cross-platform framework is an app development method that can support various client environments such as web, Android, and iOS with a single development language and framework.

The final result of a cross-platform app is converted into native code for each environment, so it has a performance advantage over a hybrid app that is based on a webview control. Among the various cross-platform frameworks, Flutter developed by Google and React Native from Facebook are the most popular as of now.

This document guides how to support DRM content playback easily and quickly when you develop a client app using Flutter or React Native.

Cross-platform Integration Samples

For easy and fast PallyCon multi-DRM integration for Flutter and React Native environment, we provide the integration samples as below.

The cross-platform integration samples linked below only support streaming playback of DRM content. If you need download/offline support, you need to implement the function yourself or use our Cross-Platform Client SDK product which is described later in this document. Alternatively, you can also use cross-platform SDKs from commercial player solutions that support download functionality.

Flutter Sample

PallyCon Multi-DRM Flutter Integration Sample is based on Better Player open-source project. Please refer to the source and guide from the below link for more details.

PallyCon Multi-DRM Flutter Sample

React Native Sample

PallyCon Multi-DRM React Native Integration Sample is based on react-native-video open-source project. Please refer to the source and guide from the below link for more details.

PallyCon Multi-DRM React Native Sample

Cross-platform Client SDK

If you need support for downloading and offline playback of DRM content in a client app developed with a cross-platform framework, you can use the PallyCon Multi-DRM Flutter SDK or PallyCon Multi-DRM React Native SDK depending on the framework you use.

PallyCon Multi-DRM Flutter SDK

PallyCon Multi-DRM Flutter SDK (Flutter SDK for short) is a product that makes it easy to apply Widevine and FairPlay DRM when developing media service apps in a Flutter-based cross-platform application development environment. It supports streaming and downloading scenarios of content encrypted with Widevine and FairPlay DRM on Android and iOS apps developed with Flutter.

Flutter SDK products can be downloaded from PallyCon Github Repository and Flutter Pub Package Manager. In the trial account, you can freely test SDK products within the limit on the trial licenses. But in order to apply SDK to commercial services, you must subscribe to a plan that includes the SDK usage right. (e.g. Standard Plus plan)

SDK structure

The Flutter SDK registered in the Github repository consists of the following.

  • pallycon-drm-sdk:
    • pallycon_drm_sdk: A plugin package that supports DRM content playback in Flutter-based Android/iOS apps
    • pallycon_drm_sdk_android: Android version implementation of pallycon_drm_sdk plug-in
    • pallycon_drm_sdk_ios: iOS version implementation of pallycon_drm_sdk plugin
    • pallycon_drm_sdk_interface: common platform interface for pallycon_drm_sdk plugin
  • player-samples: Flutter sample app that supports DRM content playback
    • basic: a basic sample that only supports streaming scenario
    • advanced: an advanced sample that supports streaming and download/offline playback

Support environment

  • Android 5.0 Lollipop (target SDK 31) or higher
  • iOS 11.2 or higher
  • Android ExoPlayer 2.18.1 or higher

SDK configuration

Refer to the Installation Guide and add PallyConDrmSdk to the Flutter app project. After that, set the following properties for each Android and iOS project.

Android version

Set the compileSdkVersion value in the android/app/build.gradle file as follows:

android {
  compileSdkVersion 31
  ...
}

To use the Flutter SDK, the following permissions must be added to the target application.

<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 version

Add PallyConFPSSDK to your project using cocoapods.

SDK initialization

Initialize the Flutter SDK by adding the code below to the app initialization step.

PallyConDrmSdk.initialize(siteId); // siteId: 4 alphanumeric characters generated when signing up for PallyCon service

Event settings

Set events related to the Flutter SDK as follows:

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) {
});

APIs related to content download

Content download for offline playback is implemented using the following APIs.

// start download
PallyConDrmSdk.addStartDownload(PallyConContentConfiguration);

// cancel downloads
PallyConDrmSdk.cancelDownloads();

// pause downloads
PallyConDrmSdk.pauseDownloads();

// resume downloads
PallyConDrmSdk.resumeDownloads();

To display the progress of content download on the UI, register an event listener as shown below.

PallyConDrmSdk.onDownloadProgress.listen((event) {
    // event.url is url
    // event.percent is downloaded percent
});

You can check the download completion status with the following code.

PallyConDownloadState downloadState =
        await PallyConDrmSdk.getDownloadState(PallyConContentConfiguration);
    switch (downloadState) {
      case PallyConDownloadState.DOWNLOADING:
        break;
      case PallyConDownloadState.PAUSED:
        break;
      case PallyConDownloadState.COMPLETED:
        break;
      default:
        break;
    }

Downloaded content and DRM licenses can be deleted with the following API.

// remove downloaded content
PallyConDrmSdk.removeDownload(PallyConContentConfiguration);

// remove license for content
PallyConDrmSdk.removeLicense(PallyConContentConfiguration);

Releasing the SDK

At the time of application termination, the SDK is released with the following code.

PallyConDrmSdk.release();

PallyCon Multi-DRM React Native SDK

PallyCon Multi-DRM React Native SDK (React Native SDK for short) is a product that makes it easy to apply Widevine and FairPlay DRM when developing media service apps in a cross-platform application development environment based on React Native. Android and iOS apps developed with React Native support streaming and download scenarios of content encrypted with Widevine and FairPlay DRM, respectively.

The corresponding SDK product can be downloaded through PallyCon Github Repository. In the trial account, you can freely test SDK products within the limit on the number of licenses issued, but in order to apply SDK to commercial services, you must apply for a rate plan that includes the right to use SDK when subscribing to PallyCon commercial services.

Support environment

  • Android 5.0 Lollipop (target SDK 31) or higher
  • iOS 11.2 or higher
  • Android ExoPlayer 2.18.1 or higher

Apply SDK

Refer to the Installation Guide and add PallyConMultiDrmSdk to the React Native app project. After that, set the following properties for each Android and iOS project.

Android version

Set the compileSdkVersion value in the android/app/build.gradle file as follows:

android {
   compileSdkVersion 31
   ...
}
iOS version

Add PallyConFPSSDK to your project using cocoapods.

Import
import PallyConMultiDrmSdk , {
	PallyConEventType,
	PallyConContentConfiguration,
	PallyConDownloadState
} from 'pallycon-react-native-sdk';

SDK initialization

Initialize the React Native SDK by adding the code below to the initialization stage after running the app.

PallyConMultiDrmSdk.initialize(siteId); // siteId: 4-digit site ID generated when signing up for PallyCon service

event settings

Set events related to React Native SDK as follows.

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
})

Features related to content download

Content download for offline playback is implemented using the following API.

// start download
PallyConMultiDrmSdk.addStartDownload(PallyConContentConfiguration);

// cancel downloads
PallyConMultiDrmSdk.cancelDownloads();

// pause downloads
PallyConMultiDrmSdk.pauseDownloads();

// resume downloads
PallyConMultiDrmSdk.resumeDownloads();

Use the code below to display the progress on the UI when downloading content.

PallyConMultiDrmSdk.addPallyConEvent(PallyConEventType.progress, (event) => {
// event.url is url
// event.percent is downloaded percent
})

You can check the download progress or completion status with the following code.

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);
}

Downloaded content and DRM licenses can be deleted with the following API.

// remove downloaded content
PallyConMultiDrmSdk.removeDownload(PallyConContentConfiguration);

// remove license for content
PallyConMultiDrmSdk.removeLicense(PallyConContentConfiguration);

SDK release

At the time of application termination, the SDK is released with the following code.

PallyConMultiDrmSdk.release();

3rd Party Commercial Player SDK

Commercial player solutions such as Bitmovin and THEOplayer have also recently released SDKs for React Native, providing cross-platform support. Customers who want to develop React Native apps using one of those solutions, please refer to the link below.

Previous
Next

Last updated on May 3, 2023