I'm Matthias and I've been into video streaming for quite a while now. Over the years I've built plenty of small setups, often CLI tools to test and debug streaming video. About a month ago, during my annual holiday, I started working on a simple API on top of my CLI tools. It's time consuming to craft and run multiple ffmpeg jobs, get GOP / keyframes right, merge playlists, package to HLS, ... One thing led to another and I eventually started exploring HLS interstitials, VMAP / VAST and dynamic ad insertion, MSE / EME (HLS.js in general), React (perf) as a player UI (although I have some experience with that from the past).
Once transcode or package jobs are finished, they'll sync back to S3 (or any S3 compliant storage service).
From the get go I built in public, including:
1. Scale transcode (ffmpeg) jobs over multiple machines, crafting multiple video renditions, audio and text tracks. The API endpoint to start this job is rather simple, you define your source files (what you have, eg; an mp4 as video; an mp4 as audio with language "eng", ...) and the output (streams) of what you want (eg; H264 video 1080p, 720p, aac audio with language "eng", ...).
2. Package all transcode streams into an HLS playlist, uses shaka-packager under the hood. Uploads every playlist and segment to S3 publicly, at this point your asset is playable.
3. An on-the-fly playlist manipulator where you can limit the max. quality, add HLS interstitials for ad or bumper insertion or use VMAP / VAST to insert ads in stream. When a VAST is not yet transcoded and packaged, stitcher will start that job. When a playlist is found for that particular ad, stitcher will add an interstitial to the playlist. An HLS Interstitials supported player will then be able to play the ad at the given time defined in the VMAP.
4. A facade on top of HLS.js that makes working with interstitials a bit easier. Know that interstitials support with HLS.js is ongoing work (https://github.com/video-dev/hls.js/issues/5730).
5. When I was toying around, I felt I missed the experience of interacting with a player (that's the only part in video streaming your end users interact with, and the default HTML5 player UI doesn't fit more advanced use cases such as quality selection, display ad points on the seekbar, ...) thus I built a small React component that functions as a player UI on top of the facade I built earlier.
I'm having a blast so far. Hope it provides value to some of you. Feedback is appreciated!
No comments yet.
