Video Digital Rights Management for Roku Apps

The Roku platform supports various types of DRM; see the Roku documentation for more details. With You.i Platform, you can specify the DRM scheme and attributes for your video stream.

Note that if using Widevine, you’ll also need to update your manifest file.

If your application uses only the required attributes for the PlayReady or Widevine DRM scheme, it’s simple to specify the needed DRM attributes in the source prop.

Here is an example with PlayReady DRM:

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Video } from '@youi/react-native-youi';

export default class YiReactApp extends Component {

  render() {
    const content = {
      type: 'DASH',
      uri: 'http://amssamples.streaming.mediaservices.windows.net/d444b1c9-c64a-4d65-b0f4-433810cf5e92/SintelMultiAudio.ism/manifest(format=mpd-time-csf)',
      drmScheme: "playready",
      drmInfo: "https://amssamples.keydelivery.mediaservices.windows.net/PlayReady/",
      // Note, if using a custom PlayReady license acquisition request, specify drmInfo in the format: "<AcquisitionUrl>%%%<CustomData>"
    };

    return (
      <Video 
        style={{ flex: 1 }}
        source={content}
        ref={ref => this.videoRef = ref}
        onReady={() => this.videoRef.play()}
      />
    );
  }
}

AppRegistry.registerComponent('YiReactApp', () => YiReactApp);

Or, for Widevine, structure your video prop as follows:

const content = {
  type: 'DASH',
  uri: 'http://amssamples.streaming.mediaservices.windows.net/d444b1c9-c64a-4d65-b0f4-433810cf5e92/SintelMultiAudio.ism/manifest(format=mpd-time-csf)',
  drmScheme: "widevine_modular",
  drmInfo: {
    licenseAcquisitionUrl:"<WidevineLicenseServerURL>"
  },
};

If you need to set optional Roku DRM parameters, you must use the metadata prop of the Video or Video Ref component. Remove drmScheme and drmInfo from the source prop, and add the metadata prop as shown below. Then pass this metadata prop into your Video or VideoRef component:

//for PlayReady
const metadata = {
  drmParams = {
    keySystem: 'playready',
    encodingType: 'PlayReadyLicenseAcquisitionUrl',
    encodingKey: '<PlayReadyLicenseServerURL>'
  }
};
      
//for Widevine
const metadata = {
  drmParams = {
    keySystem: 'widevine',
    licenseServerURL: '<WidevineLicenseServerUrl>',
  }
};