Blog Post

Open Sourcing our Client-side Thumbnail Generator

Blog Single

We recently upgraded the metigy content publishing platform to support video uploads - you can read our article about the AWS Upload solution we created. To complete the first phase of our upload tools, Metigy needed to create thumbnails from videos as they were uploaded.

Image creation from video normally gets done on the server at high cost. But we have been aiming to push as much processing as possible to the browser. Side note: we will be covering some AI work we've pushed to the browser another time. Being graphically and processor intensive, this is a prime candidate to make use of all that juicy hardware you're currently reading this article on.

You can find a demo showing the code in operation, and the source code and instructions on our GitHub page, along with the instructions to get started.

Background

After recently releasing our uploader, we wanted to make it easier for clients to create posts from their uploaded video. We saw the value in letting them choose an automatic thumbnail from their uploaded video. They obviously may still want to override, but giving them that quick choice means they can save time.

We also wanted to reduce the requirements on the server and lessen any risk of latency slowing our users down. Node JS running on AWS' Lambda Functions provide our server side compression and thumbs, but only when we need to.

And we wanted to reduce any delay in our user's seeing the thumbnails so they can get on with making their content and running their businesses.

The solution

We utilise a trick in JavaScript using formdata() to grab the local file and run it as a native <video /> tag invisibly in the user's browser. This means as soon as they've selected a file we can start crunching the thumbnails instantly. We found that sub 500mb videos have their thumbnails read within about 10 to 12 seconds depending on the resolution.

Our users have told they like the seeing the thumbnails appear quickly and rarely choose to override. We also found, combined with our direct to S3 upload class that the server load is negligible. The bulk of the load being uploading the generated thumbs - we upload them and store them against the video in our asset management system.

Future Plans

  • Add more customisation options for thumbnails generation
  • Combine with Node.js for end to end support of more types

We are hiring

We are an Artificial intelligence Marketing Technology startup that is growing quickly and working globally. Metigy is pushing into bigger markets and we’re looking for Engineers who are after their next challenge building a multi-lingual, multi-regional real-time platform built on big data and machine learning.

To find out more about your next company and see the current opportunities, visit our careers page https://metigy.com/careers

If this kind of work excites you, let's have a chat over coffee

Metigy : The Future is AI Tailored Marketing

Share this Post:

Posted by

Gregory Brine
CPO & Co-Founder

Greg has a passion for what AI and Deep Learning can bring to the MarTech stack and how small and medium businesses can benefit from these new technologies. He has over 20 years experience as an engineer and product developer, having worked for significant global marketing agencies, Razorfish and We Are Social.