DRM and React Native Video: Ensuring content security across platforms

Introduction

DRM Support is vital for protecting your video content, and React Native Video extends this protection with detailed customization options for DRM data. However, it's important to note that DRM is not currently supported on visionOS.‍

What is DRM?

‍Digital Rights Management (DRM) is a technology used to protect digital content from unauthorized access and distribution. It ensures that only legitimate subscribers or purchasers can access and consume digital media, such as videos, music, ebooks, and software. DRM works by encrypting the content and requiring users to authenticate themselves to obtain the decryption keys. This process helps content creators, publishers, and distributors control how their digital products are used and distributed, preventing piracy and copyright infringement. 

DRM data configuration

To facilitate DRM playback, React Native Video allows the configuration of DRM data, a critical feature for apps dealing with secured content. While this has been primarily tested with HTTP/HTTPS assets, the library offers several DRM object members for precise control:

For iOS:

‍You can specify whether the certificate URL returns a base64 encoded certificate (base64Certificate) and provide a URL to fetch a valid certificate for FairPlay (certificateUrl). Interestingly, you have the option to manually acquire the license through the getLicense function, bypassing the need for a licenseServer URL. This approach allows for a custom license acquisition flow, where you can handle the SPC, content ID, and license URL directly in JavaScript, offering a flexible solution to DRM integration.'

getLicense: (spcString, contentId, licenseUrl, loadedLicenseUrl) => {
  const base64spc = Base64.encode(spcString);
  const formData = new FormData();
  formData.append('spc', base64spc);
  return fetch(`https://license.pallycon.com/ri/licenseManager.do`, {
    method: 'POST',
    headers: {
      'pallycon-customdata-v2':
        'd2VpcmRiYXNlNjRzdHJpbmcgOlAgRGFuaWVsIE1hcmnxbyB3YXMgaGVyZQ==',
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: formData,
  })
    .then((response) => response.text())
    .then((response) => {
      return response;
    })
    .catch((error) => {
      console.error('Error', error);
    });
};

For both Android and iOS:‍

Custom headers can be sent to the licenseServer, enabling the use of cookies or other necessary authentication methods. This feature is particularly useful when your license server requires specific headers for authorization.

License server and DRM types:

‍The licenseServer property is crucial for directing where the DRM license should be fetched from, supporting both Android and iOS platforms. React Native Video supports a variety of DRM types, including Widevine for Android and FairPlay for iOS, which can be specified through the type property. This versatility ensures that your content remains secure across the major platforms.

source={{
    uri: 'https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p.mpd',
}}
drm={{
      type: DRMType.WIDEVINE,
      licenseServer: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',
      headers: {
          'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImZpcnN0X3BsYXlfZXhwaXJhdGlvbiI6NjAsInBsYXlyZWFkeSI6eyJyZWFsX3RpbWVfZXhwaXJhdGlvbiI6dHJ1ZX0sImtleXMiOlt7ImlkIjoiOWViNDA1MGQtZTQ0Yi00ODAyLTkzMmUtMjdkNzUwODNlMjY2IiwiZW5jcnlwdGVkX2tleSI6ImxLM09qSExZVzI0Y3Iya3RSNzRmbnc9PSJ9XX19.FAbIiPxX8BHi9RwfzD7Yn-wugU19ghrkBFKsaCPrZmU'
      },
}}

Common usage scenarios

React Native Video's DRM support accommodates common usage scenarios such as sending cookies to the license server - a crucial feature for maintaining session consistency or handling CSRF tokens.

drm: {
    type: DRMType.WIDEVINE
    licenseServer: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',
    headers: {
        'Cookie': 'PHPSESSID=etcetc; csrftoken=mytoken; _gat=1; foo=bar'
    },
}

Additionally, the library provides a sophisticated mechanism for custom license acquisition on iOS, where developers can override the default license fetching process. This is particularly useful for integrating with license servers that require specific request formatting or handling, allowing for a more tailored DRM setup.

drm: {
    type: DRMType.FAIRPLAY,
    getLicense: (spcString) => {
        const base64spc = Base64.encode(spcString);
        return fetch('YOUR LICENSE SERVER HERE', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Accept: 'application/json',
            },
            body: JSON.stringify({
                getFairplayLicense: {
                    foo: 'bar',
                    spcMessage: base64spc,
                }
            })
        })
            .then(response => response.json())
            .then((response) => {
                if (response && response.getFairplayLicenseResponse
                    && response.getFairplayLicenseResponse.ckcResponse) {
                    return response.getFairplayLicenseResponse.ckcResponse;
                }
                throw new Error('No correct response');
            })
            .catch((error) => {
                console.error('CKC error', error);
            });
    }
}

Need support for DRM streams on visionOS?

We're here to help! We are offering commercial support options tailored to your project's needs. Don't miss the opportunity to enhance your setup with expert assistance. For more details or to get started, contact us!

Implementing DRM support

Implementing DRM in React Native Video involves specifying the DRM configuration within the drm prop of the Video component. This configuration includes defining the DRM type, license server URL, and any necessary headers. For iOS, you can also define how to fetch the DRM certificate and manually acquire the license, providing a high degree of customization for your content protection needs.

Conclusion

In conclusion, DRM support in React Native Video offers a robust framework for securing your video content. With detailed configuration options and support for custom license acquisition flows, developers can ensure their content is protected against unauthorized use while maintaining a seamless viewing experience for authorized users.