Multi-DRM Cross-platform Client Integration Guide

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 DoveRunner multi-DRM integration for Flutter and React Native environment, we provide the integration samples as below.

Note

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

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

DoveRunner Multi-DRM Flutter Sample

React Native Sample

DoveRunner 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.

DoveRunner 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 DoveRunner Multi-DRM Flutter SDK or DoveRunner Multi-DRM React Native SDK depending on the framework you use.

DoveRunner Multi-DRM Flutter SDK

DoveRunner 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.

Note

Flutter SDK products can be downloaded from DoveRunner 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)

DoveRunner Multi-DRM Flutter SDK

SDK structure

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

• dr_multi_drm_sdk:
  • dr_multi_drm_sdk: A plugin package that supports DRM content playback in Flutter-based Android/iOS apps
  • dr_multi_drm_sdk_android: Android version implementation of dr_multi_drm_sdk plug-in
  • dr_multi_drm_sdk_ios: iOS version implementation of dr_multi_drm_sdk plugin
  • dr_multi_drm_sdk_interface: common platform interface for dr_multi_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 6.0 (API 23) & Android targetSdkVersion 34 or higher
• iOS 14.0 or higher

SDK configuration

Refer to the Installation Guide and add dr_multi_drm_sdk 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 34
  ...
}

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 DoveRunnerFairPlay to your project using cocoapods.

SDK initialization

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

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

Event settings

Set events related to the Flutter SDK as follows:

DrMultiDrmSdk.onDrEvent.listen((event) {
    var downloadState = DownloadStatus.pending;
    switch (event.eventType) {
        case DrEventType.prepare:
          //
          break;
        case DrEventType.complete:
          // Called when download is complete
          break;
        case DrEventType.pause:
          // Called when downloading is stopped during download
          break;
        case DrEventType.download:
          // Called when download starts
          break;
        case DrEventType.contentDataError:
          // Called when an error occurs in the parameters passed to the sdk
          break;
        case DrEventType.drmError:
          // Called when a license error occurs
          break;
        case DrEventType.licenseServerError:
          // Called when an error comes down from the license server
          break;
        case DrEventType.downloadError:
          // Called when an error occurs during download
          break;
        case DrEventType.networkConnectedError:
          // Called in case of network error
          break;
        case DrEventType.detectedDeviceTimeModifiedError:
          // Called when device time is forcibly manipulated
          break;
        case DrEventType.migrationError:
          // Called when sdk migration fails
          break;
        case DrEventType.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
DrMultiDrmSdk.addStartDownload(DrContentConfiguration);

// stop download
DrMultiDrmSdk.stopDownload(DrContentConfiguration);

// cancel downloads
DrMultiDrmSdk.cancelDownloads();

// pause downloads
DrMultiDrmSdk.pauseDownloads();

// resume downloads
DrMultiDrmSdk.resumeDownloads();

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

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

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

DrDownloadState downloadState =
        await DrMultiDrmSdk.getDownloadState(DrContentConfiguration);
    switch (downloadState) {
      case DrDownloadState.DOWNLOADING:
        break;
      case DrDownloadState.PAUSED:
        break;
      case DrDownloadState.COMPLETED:
        break;
      default:
        break;
    }

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

// remove downloaded content
DrMultiDrmSdk.removeDownload(DrContentConfiguration);

// remove license for content
DrMultiDrmSdk.removeLicense(DrContentConfiguration);

Releasing the SDK

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

DrMultiDrmSdk.release();

DoveRunner Multi-DRM React Native SDK

DoveRunner 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.

Note

The corresponding SDK product can be downloaded through DoveRunner 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 DoveRunner commercial services.

DoveRunner Multi-DRM React Native SDK

Support environment

• Android 6.0 (API 23) & Android targetSdkVersion 34 or higher
• iOS 15.1 or higher

Apply SDK

Refer to the Installation Guide and add MultiDRMReactNativeSDK 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 34
   ...
}

iOS version

Add DoveRunnerFairPlay to your project using cocoapods.

Import

import MultiDRMReactNativeSDK , {
  MultiDrmEventType,
  DrmContentConfiguration,
  ContentDownloadState
} from 'doverunner-react-native-sdk';

SDK initialization

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

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

event settings

Set events related to React Native SDK as follows.

• Register events that occur inside the SDK.

  // ex) advanced/src/presentation/controllers/DrmMovieController.ts
  MultiDRMReactNativeSDK.setMultiDrmEvents()

• Multi Drm Event Type

  // ex) advanced/src/presentation/controllers/DrmMovieController.ts
  export enum MultiDrmEventType {
      complete = 'complete',    /// The download completed
      pause = 'pause',          /// The download paused
      remove = 'remove',        /// The download is removed
      stop = 'stop',            /// The download is stop
      download = 'download',    /// The download is start
      /// Error when the content information to be downloaded is incorrect
      contentDataError = 'contentDataError',
      drmError = 'drmError',                            /// License error
      licenseServerError = 'licenseServerError',        /// Server error when issuing license
      downloadError = 'downloadError',                  /// Error during download
      networkConnectedError = 'networkConnectedError',  /// Error when there is no network connection
      /// Error that occurs when the time is forcibly manipulated on an Android device
      detectedDeviceTimeModifiedError = 'detectedDeviceTimeModifiedError',
      migrationError = 'migrationError',            /// Error that occurs when migrating from SDK
      licenseCipherError = 'licenseCipherError',    /// Error that occurs when licenseCipher from SDK
      unknownError = 'unknownError',                /// Unknown error type
      progress = 'progress'                         /// Download progress data
  }

Features related to content download

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

// start download
MultiDRMReactNativeSDK.addStartDownload(DrmContentConfiguration);

// cancel downloads
MultiDRMReactNativeSDK.cancelDownloads();

// pause downloads
MultiDRMReactNativeSDK.pauseDownloads();

// resume downloads
MultiDRMReactNativeSDK.resumeDownloads();

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

MultiDRMReactNativeSDK.addMultiDrmEvent(MultiDrmEventType.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 MultiDRMReactNativeSDK.getDownloadState(config);
  switch (state) {
    case ContentDownloadState.DOWNLOADING:
      break;
    case ContentDownloadState.PAUSED:
      break;
    case ContentDownloadState.COMPLETED:
      break;
    default:
      break;
  }
} catch (e) {
  setError(e.message);
}

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

// remove downloaded content
MultiDRMReactNativeSDK.removeDownload(DrmContentConfiguration);

// remove license for content
MultiDRMReactNativeSDK.removeLicense(DrmContentConfiguration);

SDK release

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

MultiDRMReactNativeSDK.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.

• Bitmovin Player SDK for React Native
• THEOplayer SDK for React Native