I recently stumbled across whammy.js , a tool that converts images to video on the client side (I know, you’re going whaaaaaaat). It requires images of the webp format, a format brought around by google and which is supported only in chromium based browsers. It doesn’t really seem like firefox would be supporting that in the near future. These images are substantially smaller than their png or jpeg counterparts. whammy.js converts these itsy-bitsy images into webm format video, (mostly supported by browsers). It also makes it easier to embed the video in your html document.

I knew I needed this. It was perfect, client side image to video conversion, that’s a developer’s and a user’s dream. Server-hassle free. Instant conversion, reduced size without the loss of resolution or pixels.

However I was riddled with the problem of using the javascript file in angular. :(

After about half a day of googling up articles on the internet, I was convinced that I would either have to include a typings.d.ts file (which does not exist) for the javascript file, or completely rewrite it in typescript. I was pretty beaten up and frustrated, I mean, typescript is a superset of javascript , it’s going to end up being javascript at some point of time.O.o

Turns out, it isn’t that hard. You just have to be an expert at googling stuff and putting together pieces and it didn’t take me more than ten minutes to put it all together and get it working. Although the code was riddled with bugs, so i spent more than an entire day, figuring out how it worked and tracing where the execution with horrendously wrong, but in the end I had a working script, I’ve given users (chrome and opera users only, sorry :( ..) the power to download >5o mb worth of images as a super compressed video in milliseconds (I do give whammy most of the credit though, can’t deny that).

We’ll be looking at how to write a client side multipart download code in angular 5. If you do not know what multipart download is , please do checkout my previous write up multipart-download.

This comes in handy if you are scripting a client side web application that needs to download a couple of objects that a pretty big in size. In my case, they were images of the range 5–15 mb. Which is pretty huge. It also helps you use your entire allocated bandwidth (uses all the allocated browser threads).

The why and how of it.

Let's break down what happens when you click on a button to download a file online.  You happen to send a HTTP get request to the website's respective web server, requesting for the object, the website responds back with a "200 OK" , "you're good to go" , with the requested object in it's body. Our browser takes care of the requests and processing the responses (pretty smart-ass). You can track all of this by toggling the network tab on your browser's developer toolkit (ctrl + shift + I ).