Testing Cloudflare R2 for Video Storage

In our lesson releasing tomorrow, we'll be testing two new setups.

Our Newly Rewritten Content Management System (CMS)

Back in late November, I started completely rewriting our CMS. I managed to finish this rewrite early last week, deprecating our old Studio. Our new CMS is built with AdonisJS 6, Inertia, & Vue 3. As always, if you'd like to give the code a look through you're more than welcome, it is public on GitHub.

Tomorrow's lesson will be the first lesson released with this new CMS - so fingers crossed everything goes smoothly 🤞.

Our New Video Delivery System

Currently, we use Bunny Stream as our video host & delivery provider. I've been super happy with their service thus far, and couldn't recommend them enough. That said, I'm a frugal guy, and egress costs have been a real long-term worry of mine with them. You can definitely tell when an influx of folks binge content - which is always a great problem to have! Below is their pricing structure at the moment.

A little over a month ago, I found out that Cloudflare R2 does not incur egress fees for their standard storage and has a rather generous free tier to boot. Which got me thinking ... should we switch? The main downside here is Cloudflare R2 is merely storage, it doesn't do transcoding, easy video identification, nor file protection (in the sense you'd need for video). They offer those services via their streaming service, but with much higher costs, current pricing show below.

Enter Last Week

Last week, after releasing the new CMS, I got to work on a solution that would suffice for my video workflow to host & use Cloudflare R2 in place of Bunny Stream. I got deeply engrossed in this, sorry for the lack of content 😅. I typically work on lessons in batches, which is why we typically release 2-4 lessons at a time. So, I wanted something where I would be able to:

Define a queue of files
Transcode that queue into HLS parts at desired resolutions using ffmpeg
Build a m3u8 playlist for those transcoded resolutions and their parts
Compress the original video into an MP4 (to allow downloading)
Generate an animated WebP (that animation you see when you hover over our thumbnails)
Hit play and let that queue run through all files while I go do other stuff

Using some code by Wes Bos and Steve Tenuto as a starting point, I began building a desktop application using Tauri 2, Vue 3, and a NodeJS Sidecar that does exactly what I wanted.

Tried Tauri for the first time tonight. I was mostly messing around and didn't get to far, but I was able to whip up a simple file queue pretty quickly! It doesn't currently do anything, but I think you can see my end goal.
— Tom Gobich (@tomgobich.com) December 23, 2024 at 7:50 PM

Little more progress today! I sideloaded a NodeJS console app, which performs the transcoding via ffmpeg, and have the stdout printing into an info panel. Goal is to just get it working & usable, then I'll take a look at learning a little Rust to get rid of sideloading Node.
— Tom Gobich (@tomgobich.com) December 24, 2024 at 3:11 PM

Below is a screenshot of the final result. Again, as always, if you're interested in the code it is public on GitHub.

I opted to use a NodeJS Sidecar console app because I don't know Rust, which Tauri uses, and given my timeframe for this project I didn't have time to learn it either. I opted for a desktop application because a GUI would make it easier to build the queue. Then, I didn't want to have to upload the files to transcode & process them so by using a desktop app I could leave the files as-is on the system and read them directly.

Once finished, I can then transcribe the videos then upload them to Cloudflare R2 when I'm done. The Cloudflare R2 bucket is private and can only be accessed via a Cloudflare Worker, which is in charge of adding those protections missing from Bunny Stream I mentioned earlier. This worker also manages caching for the video assets as well.

Lastly, came the site updates. I updated the new CMS to allow caption & chapter definitions for the R2 videos so that we wouldn't lose these lovely features provided by Bunny Stream. Then, I updated the Adocasts site to support an HLS friendly video player. Thankfully, the folks behind our previous video player, Plyr, build a new player called Vidstack that supports HLS video out of the box which made this a rather easy add.

What's Next?

We'll be using our Cloudflare R2 setup to test the feasibility of it going forward. These tests will be specifically on new content. During this test period, I'm not going to migrate any videos from Bunny Stream. I want to ensure all works a-okay before doing so. Once sufficiently tested, will likely last a month or two, we'll begin migrating our Bunny Stream videos over to Cloudflare R2.

If we notice anything of concern, we may need to rollback one or all videos using Cloudflare R2, switching to Bunny Stream in its stead. Hopefully that won't happen, but please don't hesitate to reach out if you experience any issues.

Code Links

Again, you can find the code for everything I discussed linked below. I wanted to include some code snippets in this blog, but