Web app for previewing your own basketball highlights
Try it out
Check out the application for yourself at:
https://www.hoop-archives.comOverview
Introduction
Web-app that provides the ability to turn basketball videos into clips that can later be filtered to compile all clips of:
- Johnny scoring a contested three-pointer over Adam
- Adam locking up Johnny on defense in 2022
- Chris scoring a game-winner
Motivation
Before this app came along, I had an Instagram account where I'd post edited basketball games that I played with my friends.
It got to a point where there'd be over 100 posts, which made it harder to go through the games and find specific clips or highlights.
In addition, the video editor that I was using, iMovie, was okay, but I noticed that i had a specific editing workflow that involved:
- Scrubbing through a 10-20 minute video just for the clips where somebody scored or blocked someone
- Then applying an updated score on each clip
It was a simple workflow, but since iMovie was built to be multi-purposeful, I would often get dragged by the extra set of options or buttons that I wouldn't ever touch during my editing sessions.
Simplified video editor
To overcome the shortcomings I had with iMovie, I developed a video editing workflow that simplified the process of minimizing an extensive basketball video into a set of clips.
Quantitative data collection
A big benefit of being able to create each clip through this app is that you can now define metadata that makes each clip searchable.
Yes, that means you can now create a video compilation of each time you scored over your basketball arch nemesis.
Architecture
Video editing (Next.js)
The Next.js app houses the functionality for editing a game by marking each clip and the metadata that defines it.
Some metadata that the user can configure are:
- Player scoring
- Teammate assisting
- Opponent defending
- Tags (e.g. #dunk #anklebreaker #midrange)
- And more...
Once a game is completed, a request is sent to an SQS queue to be processed in the background.
Video processing (FFmpeg + Lambda + SQS)
Processing video clips and can be computation-intensive.
Instead of handling this on a resource-limited browser, all of the logic and resources are all packaged on a dedicated Java-based Lambda.
Video clip storage (S3 + DynamoDB)
After the video-processing Lambda handles an upload request, all of the clip video files are stored in S3, and the URL of each clip is stored in DynamoDB along with its metadata.
