Play HLS video from S3 using CookPete/react-player - reactjs

Question

In my s3 bucket I have two objects:
https://mybucketname.s3-eu-west-1.amazonaws.com/public/myfilename.m3u8
https://mybucketname.s3-eu-west-1.amazonaws.com/public/myfilename_360.ts
Because I'm using Storage.get from AWS Amplify, I'm able to get a signed url. So when I'm requesting the signed .m3u8 link in my front-end using the react-player https://github.com/CookPete/react-player, everything works fine.
However, the player executes automatically a get request to the .ts url so I've got a 403 forbidden error because this URL is not signed.
Before the player executes automatically the get request to the .ts file, I would like to be able to sign it using Storage.get (or to be able to do any other logic before the get request), from AWS Amplify then only after, to execute the get request with this signed .ts url.

Answer 1

AWS has the amplify-video samples on GitHub here: https://github.com/awslabs/amplify-video
There's also a cloudformation template and details about setting up a backend to automatically create VOD assets based on a file uploaded to S3: https://aws.amazon.com/solutions/implementations/video-on-demand-on-aws/
This worked and simplified the setup.

Answer 2

If you need to do this via signed url, you can use AWS.CloudFront.Signer (In nodejs, must be also available in other languages):
const cloudFront = new AWS.CloudFront.Signer(publicKey, privateKey);
const policy = JSON.stringify({
Statement: [
{
Resource: 'https://*',
Condition: {
DateLessThan: {
'AWS:EpochTime': 1757120800,
},
},
},
],
});
const url = cloudFront.getSignedCookie({
policy,
});
console.log(url);
Note that the public-private keys should be:
an SSH-2 RSA key pair.
in base64-encoded PEM format.
a 2048-bit key pair.
Reference: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-trusted-signers.html#private-content-creating-cloudfront-key-pairs
The privateKey in the above will be as-it-is-generated; you might as well read the string from the private key .pem file that got generated. The public key, however, will be the Public Key Id, not the public key itself. In the above reference, it tell how you need to create a key-group and upload the generate public key there. On uploading the public key, there is an id that gets assigned to it. This very id needs to be passed to the first parameter of the AWS.CloudFront.Signer constructor.
However, as a side-note, if you are planning to stream a video, using a signed url approach is not recommended.
The reason is simple: You are streaming because probably you want to load the videos faster and have a better video experience. Signing is CPU-expensive, so it takes some time to sign a string(here, url)(Read more here how things work under the hood: https://en.wikipedia.org/wiki/RSA_(cryptosystem)#Encryption).It would have been fine if this was a one-time affair. But the signing needs to be done for every .ts url also.
I have explained how to do this here: https://stackoverflow.com/a/67929204/5657783