--- title: "Multi-DRM Cross-platform Client Integration Guide" description: "This document guides how to integrate DoveRunner Multi-DRM with cross-platform frameworks such as Flutter and React Native." --- > For the complete documentation index, see [llms.txt](/llms.txt). `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](https://flutter.dev/) developed by Google and [React Native](https://reactnative.dev/) 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](https://github.com/SunnatilloShavkatov/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**](https://github.com/doverunner/better_player_plus_doverunner_streaming_integration) ### React Native Sample `DoveRunner Multi-DRM React Native Integration Sample` is based on [react-native-video](https://github.com/react-native-video/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**](https://github.com/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](https://github.com/doverunner/multi-drm-flutter-sdk) and [Flutter Pub Package Manager](https://pub.dev/packages/dr_multi_drm_sdk/install). 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**](https://github.com/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](https://pub.dev/packages/dr_multi_drm_sdk) 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: ```js android { compileSdkVersion 34 ... } ``` To use the Flutter SDK, the following permissions must be added to the target application. ```xml ``` ##### 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. ```java 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: ```java 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. ```java // 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. ```java DrMultiDrmSdk.onDownloadProgress.listen((event) { // event.url is url // event.percent is downloaded percent }); ``` You can check the download completion status with the following code. ```java 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. ```java // 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. ```java 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](https://github.com/doverunner/multi-drm-react-native-sdk). 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**](https://github.com/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](https://yarnpkg.com/) 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: ```js android { compileSdkVersion 34 ... } ``` ##### iOS version Add `DoveRunnerFairPlay` to your project using `cocoapods`. ##### Import ```sh 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. ```java 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. ```java // ex) advanced/src/presentation/controllers/DrmMovieController.ts MultiDRMReactNativeSDK.setMultiDrmEvents() ``` - Multi Drm Event Type ```java // 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. ```java // 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. ```java 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. ```java 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. ```java // 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. ```java 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](https://github.com/bitmovin/bitmovin-player-react-native) - [THEOplayer SDK for React Native](https://www.theoplayer.com/sdk/react-native)