Building a JavaScript Client Library for Amplify Video
Authored by Nathan Agez, a Software engineer at TrackIt with a master's degree in computer science from EPITECH France. Nathan has deep knowledge of the AWS Amplify ecosystem and also has extensive experience in building Serverless infrastructure for a variety of projects. He is passionate about open source, automation, travel, and loves playing his guitar when he’s not busy coding.
AWS Amplify and AWS Amplify Video
AWS Amplify is a set of tools and cloud services that help front-end developers build scalable full-stack web and mobile applications powered by Amazon Web Services (AWS). Amplify tools can be used together or independently to develop applications with popular web frameworks including JavaScript, React, Angular, Vue, Next.js, and mobile platforms including Android, iOS, React Native, Ionic and Flutter.
The Amplify Command Line Interface (CLI) is used within Amplify projects to configure, deploy, and manage backend resources for categories like Authentication, Storage, Application Programming Interface (API), and Analytics. These categories abstract away common AWS architecture patterns to increase velocity for developers and make it easier to focus on the truly unique features of the application.
The AWS M&E Solutions Architecture team recognized that the proliferation of streaming media applications would increase demand for an Amplify category focused on video. In April 2019, the team released an open-source plugin category for the Amplify CLI named AWS Amplify Video. Amplify Video helps developers implement and deploy video streaming without specialized engineering expertise. With Amplify Video, any developer can follow a set of Amplify CLI prompts to deploy a streaming backend with the same user experience provided by other AWS Amplify categories.
Fast forward to 2021 and project maintainers launched a host of new features including support for Amazon Interactive Video Service (Amazon IVS) and Video-on-Demand. Concurrently the community worked to balance new feature enhancements with support from such companies as Orangetheory Fitness, who used Amplify Video to launch entirely new services like Orangetheory At Home. The maintainers also sought a better way to test the architectures deployed by the Amplify CLI and Amplify Video.
Note: The Amplify video plugin is an exploratory project developed by TrackIt. This is not an official library maintained by Amplify Video team.
Link to the Client Library: https://github.com/trackit/amplify-video.js
Release of amplify-video.js, a JavaScript Client Library Dedicated to amplify-video
Amplify developers currently use the amplify (js, ios, android) client libraries to interact with their first-party resource categories generated by Amplify-CLI (storage, auth, API, etc). As Amplify Video develops increasingly complex implementations for working with video assets, the effort was to create an amplify-video client library that is purpose-built for Amplify Video managed resources. It’s a superset of the existing amplify.js libraries for video assets.
This abstraction allows us to maintain our own opinionated implementation of client-side functionality that works best with Amplify Video resources
The JavaScript Client Library is an abstraction to the existing amplify-js library and was built to make it easier for end-users to work with Amplify Video plugins.
At minimum, the client library is required to support the following:
- Plug into the category plugin — Amplify Video
- Reuse the Amplify Javascript library core
- Allow Analytics, Create, Read, Update, Delete on video assets, metadata through the CMS API
AWS Amplify Architecture
As more and more modules were being introduced to AWS Amplify, it became necessary to modularize the library into smaller pieces. Developers could now avoid importing nonessential components into their application. The goal of the design was to modularize AWS Amplify while also keeping it backward compatible.
Modular import prevents unnecessary code dependencies from being included with the app, and thus decreases the bundle size and enables adding new functionality without the risk of introducing errors related to the unused code.
Amplify will act as a wrapper around the following packages:
- @aws-amplify/auth
- @aws-amplify/analytics
- @aws-amplify/api
- @aws-amplify/storage
- @aws-amplify/pubsub
- @aws-amplify/core
Reusing The Existing AWS Amplify Core
When building the amplify-video.js library, we took advantage of this architecture to implement our own module.
Creating a List and Building the Most Used Features
The Amplify Video team listed the five most applicable functions that users would execute when using the Amplify Video plugin. These functions, built using the existing Amplify JS core, help manage the content of the library.
Each Amplify module is encapsulated as a class that is instantiated by a master class in charge of exposing to the end-user the methods above. This pattern enables contributors to easily add their own methods.
Video upload
- Uploads a video asset to the Amazon S3 input bucket and creates the metadata related to the file in DynamoDB using AppSync API.
Metadata delete
- Deletes a video asset from the Amazon S3 input bucket and also deletes its associated metadata from DynamoDB using AppSync.
Metadata fetch
- Fetches the metadata related to a specific video asset.
Metadata update
- Fetches and updates the metadata related to a specific video asset if a Javascript object is provided.
Playback URL generation
- Returns the playback URL for the specified video asset.
Video Player Analytics (amplify.analytics.record)
- Creates a hook on the video player instance of the end-user application, and tracks all buffering events for collecting metrics (how long it takes to fetch the next asset, to load the video, etc.)
- Tracks the play, stop, and all basic events related to video players, and how long it takes to load the video when an end-user is playing a specific media asset for the first time.
Uses Amazon Kinesis to collect, process, and analyze data. All the events are collected using the Amplify JS library Analytics module.
Conclusion
Readers can leverage the Client Library to execute basic CRUD operations on Amplify Video assets.
The Amplify ecosystem is a robust framework for Proof of Concept projects. However, for more sophisticated implementations, developers can consider other cloud-native frameworks with minimal abstraction. The TrackIt team can assist in the migration to frameworks like Amazon CloudFormation, AWS Serverless Application Model (SAM), or AWS Cloud Development Kit (CDK).
