AWS Media Services + AWS Amplify

YouToad

For the first Metal Toad hackathon of 2020, our goal was to build a web based social media platform for on demand video using AWS Media Services and AWS Amplify. Amplify allows users to store media in s3 buckets using different privacy settings based on a users authorization status. However, on its own, it does not handle video conversion or packaging. AWS Media Services would allow us to convert uploaded videos into a common streamable and optimized file output for on demand viewing. The name we came up with—YouToad—is a pun that pays homage to the most popular video sharing platform as well as our company Metal Toad.

Our project goals were not just about implementing YouToad, it was also about learning and having fun! As such, we would mob on everything as one team, not just split the work up based on our areas of expertise. Sure, we could have gotten more work done that way, but we would not have learned as much. Personally I would not have learned as much about AWS Media Services since my area of expertise lies more on the front end side of the code.

YouToad would allow a user to be able to upload their videos to a public playlist once they were signed in. Once their video was uploaded, AWS would convert the file to the desired output and then notify the user that the conversion is complete. It sounds simple in theory, but was not so simple to implement. 

Implementation

Setting up a MediaConvert job in the AWS console is very easy, however implementing it in a AWS Lambda was a bit challenging. We used the lambda test capability in the console to validate our code but were getting errors without useful messages. We finally ended up fixing it using a trial and error approach by commenting out code, but it took awhile. Even though this was our biggest obstacle, it was also our biggest success, the project centered around a MediaConvert job working.

Another obstacle we encountered was a recursive call to trigger the MediaConvert job. It happened because we used the same bucket for the video upload as the converted video and the s3 trigger was being called when we uploaded the converted video. Our intent was for it to be triggered only when we uploaded the video that was to be converted. The solution is to use a filter on the trigger. However, Amplify does not allow specifying a filter for the trigger in the CLI, you must go into the CloudFormation template and add that manually. Doing so fixed our problem.

The file format we were initially converting to was hls, however this format is not supported in every browser and a cross browser solution was not found within a suitable time. We ended up switching to dash iso, which ended up working for us.

Once we got the backend working it was just a matter of making the App look presentable. Luckily we came up with an awesome logo and had a plethora of npm libraries for React to choose from. It was a bit duct taped together, but I think it came out pretty good.

Takeaways

Some of the takeaways I got from this project:

1. Amplify does not come with AWS Media Services, however, some of the AWS developers put together an add library which does do that! We did not use it because we wanted to take a deeper dive into AWS Media Services.
2. You can create a job in the MediaConvert console and use the json as a template for the code in your lambda. This is very useful in simple situations where not many of your options will change. It was great for our project!
3. We could have used a better architecture for the video upload, MediaConvert job creation, and video conversion finished flow, but we did what we could in 2 days.  

Conclusion

Ultimately we did achieve all of our main goals for YouToad, though if we had the time there is much more we could have done. A few other things that we would have liked to accomplish:

1. Associating the users video with the user using GraphQL
2. Adding the video to an overarching blog post
3. Public, private, and shared videos
4. Using other MediaServices such as LiveStream or MediaPackage
5. Make the app look a bit nicer

Overall I had a lot of fun on this project. It was fun to see backend developers learning JavaScript and React, and I also had a fun time learning more about lambdas and AWS Media Services.