How to build a Video Transcoder Pipeline with AWS Amplify in React?

Question

I am building a web app with AWS Amplify and React. The functionality I am trying to accomplish is an authenticated user uploads a video. The S3 storage bucket has a lambda trigger that transcodes the video into multiple formats for diffrent viewers. Those files are uploaded to a separate bucket which is to be consumed by the React Web App.

The issue is Amplify projects may only have one bucket associated to them. I completed a tutorial on using the serverless platform here which worked well but when I tried to transfer the second bucket into my project the second bucket was denied. I believe direct manipulation of the cloudformation template is necessary but I don't know how or if this is possible.

AWS offers a few media transcoder services that can complete transcoding per job but I don't know how to start a transcoder job via a lambda function initiated from React then associate the result with my Amplify project....

Any suggestions?

Answer 1

Multiple buckets are not yet supported on Amplify.

There are 2 issues opened on Amplify repository:

This: https://github.com/aws-amplify/amplify-cli/issues/1923 This one was closed, and the recommendation is that you should use different prefixes on the same repository as "best practice".

But if you can't do that, there are some workarounds to get the job done.

This is the other ticket: https://github.com/aws-amplify/amplify-js/issues/329

The simplest solution is in case you just need to call a get and the buckets are in the same region, then you should need to do

Storage.get(key1, {bucket: 'other-bucket'});  

The other solution is recalling the configure

Amplify.configure({
    ...
    Storage: {
        bucket: 'other-bucket', //REQUIRED -  Amazon S3 bucket
        region: 'XX-XXXX-X', //OPTIONAL -  Amazon service region
    }
});

Which is a bit more annoying, but is the only solution so far if the buckets are in different regions and you need different operations than get