search

awslabs / amplify-video

An open source Category Plugin for the AWS Amplify-CLI that makes it easy to deploy live and file based streaming video services and integrate them into your Amplify applications.
https://www.npmjs.com/package/amplify-category-video
Apache License 2.0
267 stars 56 forks source link

CORS error for some unsigned videos through CloudFront with React #171

Open dub6ix opened 3 years ago

dub6ix commented 3 years ago

Describe the bug I am unable to load some unsigned .m3u8 video files from CloudFront in my React applications. The videos that do not load throw a CORS error. About 1 in every 10 videos we upload has the problem. As far as I can tell it is completely random. We are using multiple frontends, one mobile app (React Native with Expo) and two web apps (both React). The mobile app works fine and has no problem showing all videos, but on out React web apps the same videos consistently fail to load. The other 90% of the videos load fine and don't throw errors.

All the videos we upload come from our mobile application where they are recorded natively.

I have done lots of digging and can find no correlation to anything that might be causing this. At first it seemed that videos that were < 1 second and > 10 seconds were the problem, but after we tested hundreds videos this was not the case.

I have found the same results on Chrome, Safari, and Firefox. When viewing the cloudfront links directly in Safari and Chrome(through the Native HLS Playback plugin), all videos load fine. The problem is not fixed by running the app in production as it still exists on both localhost:3000 and my production URL. I have also tested on multiple computers.

Within React I am using a package to help display load the .m3u8 files. I have tried React Player and React HLS Player but both have the problem. Maybe it has something to do with the configuration of these packages since everything else works, but then again it is strange becasue they load the vast majority of the files just fine.

Here are some examples:

  1. Video 1 (works): React Link, Cloudfront Link
  2. Video 2 (CORS error ): React Link, Cloudfront Link screenshot of CORS error below
  3. Video 3 (works): React Link, Cloudfront Link
  4. Video 4 (CORS error): React Link, Cloudfront Link

As a quick note, we uploaded Video 1, then Video 2, then Video 3 all back to back and in the exact same manner, but video 3 doesn't load. Video 4 is just another video that doesn't load.

To Reproduce There isn't really a way for me to explain how to reproduce since it is random. However, I am attaching the screenshot I took of the Amplify CLI when I added Amplify Video to my project for reference. In addition, the only changes I made to the resources created by Amplify Video were adding thumbnail generation (from your docs) and then modifying the input lambda settings to handle auto rotation (I added the changes for reference in additional context).

Expected behavior All videos load.

Screenshots

Screen Shot 2020-12-11 at 2 06 24 PM

5 - amplify video add

Desktop:

Versions:

Additional context Just for reference, here is the change I made to the -inputWatcher lambda to handle auto rotation: 

   {
      ...
      "Inputs": [
         {
            ...
            "VideoSelector": {
               "ColorSpace": "FOLLOW",
               "Rotate": "AUTO" //NEW
            },
            ...
         }
      ]
   }
dub6ix commented 3 years ago

Update:

As of 9:30 PM Central tonight: Video 2 is now working. It is still throwing CORS errors and it is a weird size, but it does display. Video 4 is still not working.

dub6ix commented 3 years ago

Update:

As of 5:00 PM Central tonight: Video 4 is now working, but showing the same CORS error as video 2 is still showing.

Currently can't find any of our videos that are not playing. We will try uploading a lot of videos again and see if we continue to see some not loading.

For now, we are giving users a link to the cloudfront file in case the video doesn't load for them.

I am going to leave this open because it still seems like some sort of bug.

dub6ix commented 3 years ago

Found a video still broken: React Link, CloudFront Link

smp commented 3 years ago

Heya @walter-scott, I think we traced this down to a header issue in the cloudfront distribution. Maybe you can manually modify your distro with these settings in the PR to confirm? Will be merging/releasing soon.

https://github.com/awslabs/amplify-video/pull/213