WidevineCustomRequestDRMHandler Module

The Widevine Modular Custom Request DRM Handler handles the DRM setup for encrypted playback in the video player. This module provides developers an opportunity to modify the request and response of a Widevine license acquisition request. The following steps are performed whenever Widevine DRM authentication with custom license request is done in the video player of an application:

  1. For either the Video or VideoRef components, the source.drmScheme property must be set to "widevine_modular_custom_request" for initialization of the Widevine DRM authentication process. If the PlayerResource API is being used to play video, the loadSource method call must include { drmScheme: "widevine_modular_custom_request" }.
  2. When the video player is ready to make the license acquisition request, the Widevine native module emits the DRM_POST_REQUEST_AVAILABLE event with the following arguments:
    1. tag: number or string - The Video component tag or the PlayerResource tag corresponding to the request.
    2. drmRequestUrl: The DRM request URL. drmRequestUrl is of string type.
    3. postData: An array of bytes representing the data posted as the body of the request.
    4. headers: An object for which the each property represents a header, where property name is the header key and the property value is the header value.
  3. Use the post request information, which consists of drmRequestUrl, postData, and headers, with any necessary modifications, to handle all license acquisition network calls to get the required license data.
  4. When the license data is obtained it must be provided to the player by emitting WidevineCustomRequestDrmHandler.NotifySuccess. Once the license data is provided to the video player, it is ready to play the DRM-protected media.

Widevine Custom Request Authentication Flow



removeEventListener(type, handler)

  • Description: Removes an event listener
  • Parameter roles and types:
    • Type: DrmEventName - The name of the DRM event being listened to.
    • handler: Function - The call to the function that will handle the event.

addEventListener(type, handler)

  • Description: Adds an event listener
  • Parameter roles/types:
    • Type: DrmEventName - The name of the DRM event to listen to.
    • handler: Function - The call to the function that will handle the event.

notifySuccess(tag, array)

  • Description: Notifies that the license data has been successfully fetched.
  • Parameter roles/types:
    • tag: number or string - The video tag that returns the same tag passed into the Widevine DRM event being handled.
    • array: licenseData - The widevine license data.


  • Description: Notifies that a failure has occurred.
  • Parameter roles/types:
    • tag: number or string - The video tag that returns the same tag passed into the Widevine DRM event being handled.


Include the following header file in the app’s main .cpp file, such as app.cpp, to ensure the Widevine Custom Request DRM Handler module is included in the app:

#include <youireact/modules/drm/WidevineCustomRequestDrmHandlerModule.h>

The following code snippet illustrates how to initialize Widevine DRM playback with a custom license request by setting the DRM scheme to widevine_modular_custom_request with a video source object:

// This corresponds to step 1 in the Video/VideoRef component
source: {
  uri: "sourceuri://",
  type: "HLS",
  drmScheme: "widevine_modular_custom_request",
  drmInfo: {
    licenseAcquisitionUrl:"https://licenseUrl.com" // Where this URL is replaced with the Widevine License URL

The following code snippet illustrates the authentication process using the Widevine Custom Request DRM Handler module:

import { WidevineCustomRequestDrmHandler } from '@youi/react-native-youi';

var base64 = require('base-64');

export default class TestVideo extends Component {
  constructor(props) {
     // Connect to the event listener to the WidevineCustomRequestDrmHandler module.
     WidevineCustomRequestDrmHandler.addEventListener('DRM_POST_REQUEST_AVAILABLE', this.onWidevineDRMPostRequestAvailable);

  // Handling of the DRM_POST_REQUEST_AVAILABLE event.
  // This corresponds to step 2
  onWidevineDRMPostRequestAvailable = (args) => {
  // Use the arguments, which represent the information required for a POST request to carry out license acquisition network calls
  // This corresponds to step 3

  // In this case we're using an XMLHttpRequest to call the license request exactly as it would have been posted, but you can modify the license request and response as you wish
  var xmlhttp = new XMLHttpRequest();

  xmlhttp.open("POST", args.drmRequestUrl, true);

  // Configure the HTTP request to send and receive binary data
  xmlhttp.responseType = "arraybuffer";
  xmlhttp.setRequestHeader("Content-Type", "application/octet-stream");

  // Set custom request headers if they're included
  for (var headerKey in args.headers) {
    if (args.headers.hasOwnProperty(headerKey)) {
      xmlhttp.setRequestHeader(headerKey, args.headers[headerKey]);

  // Set the response callback function
  xmlhttp.onload = function() {
    if (xmlhttp.status === 200) {
      if(xmlhttp.response) {
        var typedArray = new Uint8Array(xmlhttp.response);
        const array = [...typedArray];

        // Return the license data as an array of bytes
        // This corresponds to step 4
        WidevineCustomRequestDrmHandler.notifySuccess(args.tag, array);

        console.error("Unhandled HTTP DRM request result: {status: " + xmlhttp.status + ", response text: " + xmlhttp.responseText + "}");

    // Send the POST request
 xmlhttp.send(new Uint8Array(args.postData));