Add iOS and Android basic DRM support

[danielmarino24i]

This PR adds support for DRM streams on iOS (Fairplay) and Android (Playready, Widevine, Clearkey)

I am neither Android nor iOS developer, so feel free to provide feedback to improve this PR.

Test stream for ANDROID:

testStream = {
        uri: 'http://profficialsite.origin.mediaservices.windows.net/c51358ea-9a5e-4322-8951-897d640fdfd7/tearsofsteel_4k.ism/manifest(format=mpd-time-csf)',
        type: 'mpd',
        drm: {
            type: DRMType.PLAYREADY,
            licenseServer: 'http://test.playready.microsoft.com/service/rightsmanager.asmx?cfg=(persist:false,sl:150)'
        }
    };

or

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

Test stream for iOS:
Sorry but I can not provide free streams to test. If anyone can provide test streams, or found some we can use, please let me know to also test them.

It has been tested with a private provider and they work, at least with the getLicense override method. (An example implementation is provided in the README)

[rogerkerse]

What do we need for it to be merged? I think all the requested changes have been made. Also we are successfully using it in production with the DRM streams.

[luiscerqueira]

I tested this branch in android with dash+widevine (i dont have some fairplay streams to test yet) and it is working.

e.g.
url: 'https://bitmovin-a.akamaihd.net/content/art-of-motion_drm/mpds/11331.mpd'
licenseServer: 'https://widevine-proxy.appspot.com/proxy'

Is there anything missing for this feature to be merged?

[vimalkodoth]

I'm trying to play encrypted ( DASH + Widevine ) stream and I end up getting as below checking the device logs through adb

ExoPlayerImplInternal: com.google.android.exoplayer2.ExoPlaybackException: java.lang.IllegalStateException: Media requires a DrmSessionManager

[bjacog]

@vimalkodoth are you sure your device has DRM support?

[vimalkodoth]

hey @bjacog , yes, it does have support. I get the same error infact on android for mobile and as well for bigscreen ( android tv ) devices. I'm using DRMInfo application on appstore to verfiy the support for DRM.

[sunnyoui]

@vimalkodoth, are you able to share the code and I can try debugging

[EyMaddis]

I can confirm that Fairplay works, however the getLicense does not work because on the device (runnning in JSC) the spc data is empty, not so in v8, here it does work.

I tested based on this commit 24i@32748d5

[canhnm]

Hi guys, I would like to check if it's possible to play HLS encrypted with AES-128, example on m3u8 content:

#EXT-X-KEY:METHOD=AES-128,URI="file.key",IV=0x9256b016abc7ad3deaef1f093be826d3

[rogerkerse]

Who is working on it and can this be merged? And all the following bugs be fixed in future pull requests? 😊

This is working in most cases and it has been in works for over a year.

[rogerkerse]

After updating to RN 0.62 the subtitles and audios are not returned in this branch anymore

[jenshandersson]

I can't see how this PR will get merged to be honest, I feel we have to streamline the project and add support for addons/plugins before adding DRM support....

[TalhaArshad]

I'm trying to play encrypted ( DASH + Widevine ) stream and I end up getting as below checking the device logs through adb

ExoPlayerImplInternal: com.google.android.exoplayer2.ExoPlaybackException: java.lang.IllegalStateException: Media requires a DrmSessionManager

I am facing same issue. Did you find any solution?

[TalhaArshad]

@vimalkodoth I have fixed it. It was my bad. I was using drm and source prop in wrong way. may be you are doing same mistake. Here is the sample code for of video component for widewine

<Video style={{ height: 400, width: 300 }}
source={{
uri: 'https://bitmovin-a.akamaihd.net/content/art-of-motion_drm/mpds/11331.mpd'
}}
drm={{
type: 'widevine', //or DRMType.WIDEVINE
licenseServer: 'https://widevine-proxy.appspot.com/proxy',
}}
/>

[aprofromindia]

@vimalkodoth I have fixed it. It was my bad. I was using drm and source prop in wrong way. may be you are doing same mistake. Here is the sample code for of video component for widewine

<Video style={{ height: 400, width: 300 }}
source={{
uri: 'https://bitmovin-a.akamaihd.net/content/art-of-motion_drm/mpds/11331.mpd'
}}
drm={{
type: 'widevine', //or DRMType.WIDEVINE
licenseServer: 'https://widevine-proxy.appspot.com/proxy',
}}
/>

When I try the above, I get the following error in Android logcat and no video playing, It works perfectly with a normal video url (non DRM'ed) : -

E/MediaPlayerNative: error (1, -2147483648)

I have tried react-native link and autolinking and also with add exoplayer in settings.gradle

Anyone has any idea please?

[Ladonasc]

Hi @aprofromindia,

I guess your issue comes from the wrongly linked "Player", the auto-link capability of react-native (since v0.60.0) link the "classic" player of react-native-video.

Try to add a react-native.config.js in the root directory of your project and put this as the content (this is mine):

module.exports = {
    dependencies: {
        /*
            RN 0.60.X AutoLink wrongly link the react-native-video module. Without custom
            config (as below), the "MediaPlayer" is linked instead of the "ExoPlayer", and thus
            reading Dash stream failed....
         */
        'react-native-video': {
            platforms: {
                android: {
                    sourceDir: `${__dirname}/node_modules/react-native-video/android-exoplayer`,
                    folder: `${__dirname}/node_modules/react-native-video`,
                    packageImportPath:
                        'import com.brentvatne.react.ReactVideoPackage;',
                    packageInstance: 'new ReactVideoPackage()',
                },
            },
        },
    },
}

[nickfujita]

I've tested on the Android side, and have confirmed it's working as expected with DrmToday.

For those working with DrmToday, please be sure to use the url query param ?specConform=true, when passing in your licenseServer value. This is because DrmToday passes back a non-standard response by default, and this will pass just the license in in the correct format.

Seems like many others have tested as well above and confirmed that this solution is working. As well as for those that it was not working, it seems it mainly has to do with improper usage that has since been resolved.

@cobarx Would it be possible to get this code merged in after the conflicts are resolved?

[sunnyoui]

Have it working with widevine license server for android and fairplay for iOS for my project.

Would be a good idea to get this merged and made available.

[nickfujita]

@danielmarino24i Can you please clean up the conflicts and then merge this in?

[0xleeaki]

Hi, I encountered some errors and fixed them.

Error: E/MediaPlayerNative: error (1, -2147483648)

• Change Media Player to ExoPlayer,
• Add file react-native.config.js in root folder
• Coppy code

module.exports = {
  dependencies: {
    'react-native-video': {
      platforms: {
        android: {
          sourceDir: '../node_modules/react-native-video/android-exoplayer'
        }
      }
    }
  }
}

Error: Media requires a DrmSessionManager

• Update react-native-video to "5.1.0-alpha7" => "react-native-video": "5.1.0-alpha7" in package.json

For test android:

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'
      },
}}

For play FAIRPLAY in IOS

• Change Video.js file

const getLicenseOverride = this.props.drm.getLicense(data.spc, data.contentId, data.spcBase64, this.props);

to

const getLicenseOverride = this.props.drm.getLicense(data.spc, data.contentId, data.licenseUrl);

• Change ios/Video/RCTVideo.m file

NSString *spcStr = [[NSString alloc] initWithData:spcData encoding:NSASCIIStringEncoding];

to

NSString *base64Encoded = [spcData base64EncodedStringWithOptions:0];

and change self.onGetLicense function to

self.onGetLicense(@{@"licenseUrl": licenseUrl,@"contentId": contentId,@"spc": base64Encoded,@"target": self.reactTag});

For test ios(real devices):

drm={
        {
                    type: DrmPlayerComponentConfig.DRMType.FAIRPLAY,
                    certificateUrl: 'YOUR CERTIFICATE URL',
                    headers: {
                      Authorization: 'YOUR_TOKEN',
                      'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    getLicense: (
                      spc: string | Blob,
                      contentId: any,
                      licenseUrl: string,
                    ) => {
                      const formData = new FormData();
                      formData.append('spc', spc);
                      return fetch(licenseUrl.replace('skd', 'https'), {
                        method: 'POST',
                        headers: {
                          Authorization:
                            'YOUR_TOKEN',
                          'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: formData,
                      })
                        .then((response) => {
                          return new Promise((resolve, reject) => {
                            response.blob().then((blob) => {
                              new Response(blob).text().then((text) => {
                                resolve(
                                  text
                                    .replace('<ckc>', '')
                                    .replace('</ckc>', ''),
                                );
                              });
                            });
                          });
                        })
                        .catch((error) => {
                          setErrorMessage(error.toString());
                        });
                    },
                  }
            }

Good luck!

[nickfujita]

I've created a new PR with the changes described above by @Hobahung, and additionally support for license fetching without using getLicense for iOS.

#2208

Please have a look if you are already using iOS DRM in your project or are looking to use it in the near future.

[mtshv]

Hi, @nickfujita!

Could you please share with me your experience with DRMtoday?

I've tested on the Android side, and have confirmed it's working as expected with DrmToday.

I got it working with iOS, but on Android, I am getting

V/error: com.google.android.exoplayer2.ExoPlaybackException: com.google.android.exoplayer2.ParserException: org.xmlpull.v1.XmlPullParserException: unterminated entity ref (position:TEXT @15:190 in java.io.InputStreamReader@f8a2039) 

looks like the player is trying to play an XML text. I think I might be using the wrong headers:

drm={{
      type: DRMType.WIDEVINE,
      licenseServer: 'https://license-server-url-provided-by-drmtoday/cenc/?specConform=true',
      headers: {
          'x-dt-auth-token': '...',
          'x-dt-custom-data': '...',
      },
}}

Do you remember by any chance, if your successful approach was using the same headers, or different?