[BUG]: IOS DRM Custom License Request Not Working

[paulvictory]

Version

"react-native-video": "^6.5.0"

What platforms are you having the problem on?

iOS

System Version

Mac mini M2

On what device are you experiencing the issue?

Real device, Simulator

Architecture

new architecture

What happened?

Video error: {
"error": {
"localizedRecoverySuggestion": "",
"code": 1718449215,
"domain": "CoreMediaErrorDomain",
"localizedDescription": "The operation couldn’t be completed. (CoreMediaErrorDomain error 1718449215.)",
"localizedFailureReason": ""
},
"target": 3
}

Reproduction

Step to reproduce this bug are:

import React, { useRef } from 'react';
import { View, Platform, Alert } from 'react-native';
import Video from 'react-native-video';

const VideoPlayer = () => {
const isIos = Platform.OS === 'ios';
const videoRef = useRef(null);

return (
<View style={{ flex: 1 }}>
<Video
ref={videoRef}
source={{
uri: isIos
? 'https://d2a1rntxelqk4o.cloudfront.net/transcoded/xxxxxxxxxxx/video.m3u8'
: 'https://d384padtbeqfgy.cloudfront.net/transcoded/xxxxxxxxxxx/video.mpd',
type: isIos ? 'm3u8' : 'mpd',
drm: {
type: 'fairplay',
certificateUrl: https://app.tpstreams.com/static/fairplay.cer,
licenseServer: 'https://app.tpstreams.com/api/v1/xxxxxx/assets/xxxxxxxxxxx/drm_license/?access_token=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&drm_type=fairplay',
base64Certificate: true,
getLicense: async (spcBase64, contentId, licenseUrl) => {
return await fetch('https://app.tpstreams.com/api/v1/xxxxxx/assets/xxxxxxxxxxx/drm_license/?access_token=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&drm_type=fairplay', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
}).then(response => response.text()).then((response) => {
console.log(response);
return response;
}).catch((error) => {
console.error('Error', error);
});
}

  }

    }}
    style={{ flex: 1 }}
    controls
    onLoad={(data) => console.log('Video loaded:', data)}
    onReadyForDisplay={() => console.log('Video ready for display')}
    onError={(error) => {
      console.log('Video error:', JSON.stringify(error, null, 2));
    
    }}
  />
</View>

);
};

export default VideoPlayer;

[github-actions]

Thank you for your issue report. Please note that the following information is missing or incomplete:

• reproduction link

Please update your issue with this information to help us address it more effectively.

Note: issues without complete information have a lower priority

There is a newer version of the library available. You are using version "react, while the latest stable version is native. Please update to the latest version and check if the issue still exists.

Note: If the issue still exists, please update the issue report with the latest information.

[github-actions]

Thank you for your issue report. Please note that the following information is missing or incomplete:

• reproduction link

Please update your issue with this information to help us address it more effectively.

Note: issues without complete information have a lower priority

There is a newer version of the library available. You are using version "react, while the latest stable version is native. Please update to the latest version and check if the issue still exists.

Note: If the issue still exists, please update the issue report with the latest information.

[freeboub]

@paulvictory It would be interesting for you to test following PR: #4136
I hope, it will be merged soon.
BTW, did you ensure all the request to the server work fine ? certificate + key request. It should be tested with charles proxy
I think you don't need to provide licenseServer if you use getLicense callback...

Additionnally it's hard to test on our side as I guess access_token is expired

[freeboub]

unfortunatelly, I don't have ios device for now ... So I cannot test. maybe @KrzysztofMoch can have a try on his branch.
@paulvictory notice that ios emulator doesn't support fairplay

[KrzysztofMoch]

I did not have time to test it and @freeboub can not test it as he does not have iOS device - you can try this PR #4136 - I have working app with custom license request that is using it

[AlexEKoren]

Can confirm that DRM content is working on 6.4.5 but is NOT working on 6.5.0.

Steps I took:

• Validated DRM protected HLS stream using Safari on https://sample.pallycon.com/drm-tools/tester/#web-player
• Used same Video tag configuration in both projects. One with 6.4.5, one with ^6.4.5 (confirmed resolved to 6.5.0)
• Playback failed in 6.5.0, Playback succeeded in 6.4.5

<Video
  ref={audioRef}
  source={{
    uri: <URI_TO_M3U8>,
    drm: {
      "base64Certificate": true, 
      "certificateUrl": "https://license.pallycon.com/ri/fpsKeyManager.do?siteId=<SITE_ID>", 
      "headers": {
        "Content-Type": "application/x-www-form-urlencoded", 
        "pallycon-customdata-v2": "<VALID PALLYCON TOKEN>"}, 
        "licenseServer": "https://license-global.pallycon.com/ri/licenseManager.do", 
        "type": "fairplay"
     },
  }}
  onBuffer={onBuffer}
  onLoad={onLoad}
  onError={onError}
  onPlaybackStateChanged={onPlaybackStateChanged}
  onProgress={onProgress}
  progressUpdateInterval={1000}
/>

[github-actions]

Thank you for your issue report. Please note that the following information is missing or incomplete:

• reproduction link

Please update your issue with this information to help us address it more effectively.

Note: issues without complete information have a lower priority

There is a newer version of the library available. You are using version "react, while the latest stable version is native. Please update to the latest version and check if the issue still exists.

Note: If the issue still exists, please update the issue report with the latest information.