DRM-protected playback

Suggest Edits

In the current version of our React Native SDK, only FairPlay is supported on iOS and tvOS, and only Widevine is supported on the Android platform. More DRM systems will be added in the future.

Playing of protected assets can be enabled with the following configuration on SourceConfig.drmConfig:

import { Platform } from 'react-native';
import { SourceConfig, SourceType } from 'bitmovin-player-react-native';

// Source configuration for protected assets.
const drmSource: SourceConfig = {
  // Protected stream URL.
  url:
    Platform.OS === 'ios'
      ? 'https://fps.ezdrm.com/demo/video/ezdrm.m3u8' // iOS stream url
      : 'https://bitmovin-a.akamaihd.net/content/art-of-motion_drm/mpds/11331.mpd', // Android stream url
  // Stream type.
  type: Platform.OS === 'ios' ? SourceType.HLS : SourceType.DASH,
  // DRM setup.
  // Each key in this object maps to a different DRM system config (`widevine` or `fairplay`).
  drmConfig: {
    // Widevine is the default and only DRM system supported on Android for now.
    widevine: {
      licenseUrl: 'https://cwip-shaka-proxy.appspot.com/no_auth',
    },
    // FairPlay is the default and only DRM system supported on iOS for now.
    fairplay: {
      licenseUrl:
        'https://fps.ezdrm.com/api/licenses/09cc0377-6dd4-40cb-b09d-b582236e70fe',
      certificateUrl: 'https://fps.ezdrm.com/demo/video/eleisure.cer',
      prepareMessage: (message, assetId) => {
        return message;
      },
    },
  },
};

Prepare hooks

Some DRM properties like message and license can have their value transformed before use in order to enable some more complex use cases, e.g. extracting the license from a JSON.

In order to handle such transformations, it is possible to hook methods of SourceConfig.drmConfig to proxy DRM values and potentially alter them:

import { Platform } from 'react-native';
import { SourceConfig, SourceType } from 'bitmovin-player-react-native';

// Source configuration for protected assets.
const drmSource: SourceConfig = {
  // Protected stream URL.
  url:
    Platform.OS === 'ios'
      ? 'https://fps.ezdrm.com/demo/video/ezdrm.m3u8' // iOS stream url
      : 'https://bitmovin-a.akamaihd.net/content/art-of-motion_drm/mpds/11331.mpd', // Android stream url
  // Stream type.
  type: Platform.OS === 'ios' ? SourceType.HLS : SourceType.DASH,
  // DRM setup.
  drmConfig: {
    // Widevine is the default and only DRM system supported on Android for now.
    widevine: {
      licenseUrl: 'https://cwip-shaka-proxy.appspot.com/no_auth',
      // Data is passed as a base64 string and expects to return a base64 string.
      prepareLicense: (license: string) => {
        // Do something with the `license` value...
        // And return processed data as base64 string.
        return license; // base64 string
      },
    },
    // FairPlay is the default and only DRM system supported on iOS for now.
    fairplay: {
      licenseUrl:
        'https://fps.ezdrm.com/api/licenses/09cc0377-6dd4-40cb-b09d-b582236e70fe',
      certificateUrl: 'https://fps.ezdrm.com/demo/video/eleisure.cer',
      // Data is passed as a base64 string and expects to return a base64 string.
      prepareLicense: (license: string) => {
        // Do something with the `license` value...
        // And return processed data as base64 string.
        return license; // base64 string
      },
      // Data is passed as a base64 string and expects to return a base64 string.
      prepareMessage: (message: string, assetId: string) => {
        // Do something with the `assetId` and `message` values...
        // And return processed data as base64 string.
        return message; // base64 string
      },
    },
  },
};

The [FairplayConfig](FairplayConfig) interface provides a number of hooks that can be used to fetch and transform different DRM-related data. Refer to the documentation for a complete list and detailed information on them.

Also, don't forget to check out our complete example app for a complete iOS/Android DRM example.

Updated 5 months ago