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 a high cost. However, 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 videos. 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 provides our server-side compression and thumbs, but only when we need to.
And we wanted to reduce any delay in our users seeing the thumbnails so they can get on with making their content and running their businesses.
The solution
We utilize a trick in JavaScript using form-data () 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-500 mb videos have their thumbnails read within about 10 to 12 seconds depending on the resolution.
Our users have said they like 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 is 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 thumbnail 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
