Samuel Edwin (@_e_Sam) header
Samuel Edwin (@_e_Sam) profile picture

Building things Next.js, React and React Native

Indonesia
Joined March 2010
Once the video processing is finished, we need to update the status of the video in DB to "done". In order to do so we need to be notified when the Media Convert finishes its job. Thankfully it's easy to do so by using CloudWatch event: • Create an event filter for finished or failed jobs that comes from the raw video bucket • Forward the event to the post-processing lambda • Let the lambda update the status of the video to "done" One cool thing about Media Convert is we can put a custom user metadata in each job. I put the bucket name and the object key of the finished job so my Lambda knows which row to update in DB.
1
32
Once the raw video is processed, it will be stored with the db primary key as the main folder. This makes video deletion easier. All I need to do is list out the objects in that folder and delete them.
1
12
The uploaded videos will have the status set to "processing". The videos with this status will not show up on home screen.
1
5
The video upload is done in two parts: • Upload the file to S3 • Add a new video record to DB How do we make sure that this S3 object belongs to that new row? My approach is: • Generate a presigned POST with a random string as the object key • Use the random string as a primary key for the new row
1
7
The big problem with regular S3 presigned URL is users can abuse the upload with gigantic files. S3 presigned POST can prevent this from happening. Presigned POST has upload rules such as maximum file size.
1
8
The NextJS app is hosted on Elastic Beanstalk. All I need to do is to setup the build as standalone output, package the output as a zip file and upload. Beanstalk is quite easy to use, at least for development.
1
30
Now I need a web app for users to sign in an upload their videos. Teaching myself to use AWS Cognito to manager users. Need to use Amplify SDK to make the sign in work otherwise the setup is unbearable. Clerk and Auth0 are miles better.
1
66
JS bundle optimization trick that people overlook. You need to use a large JS package on the frontend for specific operations, such as on a button click. Using dynamic imports can defer the bundle download until the code is actually executed. This approach not only reduces initial load times but also improves the overall performance of your web application by loading resources on demand.
47
Since I want to publish my work to GitHub, I need a way to setup the same infra quickly. Terraform comes to mind. It works perfectly with Claude Sonnet 3.5 producing 200 lines of config in a couple minutes. It would take me at least a couple hours handcrafting all the configs by myself.
1
28
Made a Lambda function that: • Receives an SQS message containing a new S3 object event • Creates a MediaConvert job to generate a thumbnail and an HLS playlist with adaptive bitrates • And of course delete the message once the MediaConvert job is created. The most time consuming task is defining the MediaConvert job config. Claude helps a lot with generating the code although I need a few retries to make things work.
1
36
Now I need to test whether the generated HLS playlist work or not. Used castr.com to test the generated playlist. Quality options show up as expected although the bitrate looks weird. The next thing to do is to automate the video processing job with Lambda.
1
31
Using MediaConvert is relatively simple: • Choose the input video from your S3 bucket • Define the outputs of the job. In this case a thumbnail and an HLS playlist • Set the output bucket of the job • Run the job and that's it The results are store in the output bucket.
1
22
Turns out MediaConvert is the perfect tool for this use case. I can: • Generate a thumbnail • And also create an HLS playlist with adaptive bitrate All I need to do is to define the resolutions I want for the adaptive bitrate.
1
37
Running FFMPEG on lambda is super slow. Takes 7 seconds to extract a thumbnail from a 33mb video. I can think of several options to speed it up • Increase CPU by increasing RAM size • Spin up an EC2 instance with higher spec to process the video While throwing more money at the problem is an option, I still prefer to use a free/low cost tier. Going to look for more solutions.
2
29
The first thing I'm going to try: • Extract thumbnail from the uploaded video • Downsize the video to a certain size The plan is to: • Push S3 object created events to SNS • SNS will fan out the events to two SQS queues, one for thumbnail job, another for downsizing • Lambda will do the job, and store the result in another S3 bucket
1
13
Authorization is a quite tricky in GraphQL. In REST APIs, developers can just: 1. Send 400 when the user is unauthorized 2. Or send only the data the users have access to. In GraphQL however, authorization often needs to be done at the field level. samueledwin.com/posts/graphq…
51
Replying to @jamonholmgren
The class component days? I think I skipped all that bind nonsense with this.
1
3
574
The difference between indie hackers Twitter and JS Twitter.
17