135 followers

🏆 Milestone #46 ·

Added video support to Makerlog

I finally managed to add video support to Makerlog! You can now post short videos (less than 100MB). It's in beta, so do report bugs.

Loading task...

Chronicles of Being Cheap

Turns out uploading video isn't as simple as just uploading an MP4 to S3 and calling it a day. There's stuff involved here: the biggest roadblock was generating video thumbnails.

Why generate video thumbnails?

Turns out if you pipe a good ol' MP4 to the HTML5 video element, it'll show thumbnails for you. That's nice and all, but...

It isn't magic: under the hood, it's literally downloading the entire file. Lots of Makerlog users are on data plans and can't afford to load 50-200MB everytime they want to view the feed.

What are the options?

Well, things were looking bleak.

  • Pay an external video API (expensive, annoying)
  • Process videos on server and generate thumbs (expensive, big load on server, annoying)

Aha! There's a third option!

Loading task...

Turns out with a bit of wizardry you can generate thumbs for videos on the client. Just play the video locally on a <canvas> element, screenshot it, and call it a day.

I found a React element that did this automagically, made a better UX for it, and it's now live.

How it works

In a nutshell: once you upload a video, I set the processing state to true to prevent you from posting until the thumbnail is generated. The canvas does its magic. Then, I use the existing attachment field on the Task object to upload the preview for the video.

It's hackish, but not bad for a 3-hour effort. I can eventually make it more formal or switch to a paid provider. But right now we can't, so... MVP hack it is!

It's live

Start uploading short videos and let me know how it goes!

Loading task...


Loading comments, hold on...
Makerlog

Where makers learn, build, and grow in public.

© Nifty Development, LLC