Blob and Mime type
--
Problem: I have an instagram Video url. How to download this in JS?
Solution: https://www.npmjs.com/package/downloadjs to the rescue.
download(data, strFileName, strMimeType);Here data is the blob which we make when we hit the url. And strMimeType is the MIME-type in string.
Let’s understand what is Blob and what is MIME.
Blob
A very good read on Blob can be found here: https://medium.com/javascript-in-plain-english/javascript-blob-why-is-it-useful-20c372dfca00
Blob is a data structure to store data. Binary Large OBjects. They can go very big and can store videos, audios, heavy images, etc.
Uses:
1. They can be created from content from the network.
2. They can be saved to disk or read from a disk.
3. They are the underlying data structure for File used in the FileReader API, for example. Eg: When we use <input type=”file”> The file which comes up is of File type. File is made from Blog. A Blob has its size and MIME type just like a file has. Blob data is stored in the memory or filesystem depending on the browser and blob size. A Blob can be used like a file wherever we use files
Creating a blob:
let customBlob = new Blob([“<h1>This is my blob content</h1>”], {type : “text/plain”});// customBlob has 2 properties. size and typeOrawait fetch(videoUrl).then(r => r.blob())
Blob URL
let blobHtml = new Blob(['<html><head><title>Hello text</title></head><body><h1 style="color: red">Hello JavaScript!</h1></body></html>'], {type: 'text/html'});let blobLink = URL.createObjectURL(blobHtml);<a href="${blobLink}">Click here</a>
Blob URLs can only be generated internally by the browser. URL.createObjectURL() will create a special reference to the Blob or File object which later can be released using URL.revokeObjectURL() Data URL
Blob URL/Object URL is a pseudo protocol to allow Blob and File objects to be used as URL source for things like images, download links for binary data and so forth.
For example, you can not hand an Image object raw byte-data as it would not know what to do with it. It requires for example images (which are binary data) to be loaded via URLs.
Data URL (just like the blob url)
A Data URL is a URI scheme that provides a way to inline data in an HTML document.
Say you want to embed a small image. You could go the usual way, upload it to a folder and use the img tag to make the browser reference it from the network:
<img src="image.png" />or you can encode it in a special format, called Data URL, which makes it possible to embed the image directly in the HTML document, so the browser does not have to make a separate request to get it.
Data URLs might save some time for small files, but for bigger files there are downsides in the increased HTML file size, and they are especially a problem if the image reloads on all your pages, as you can’t take advantage of the browser caching capabilities.
Also, an image encoded as Data URL is generally a bit bigger than the same image in binary format.
They aren’t much practical if your images are frequently edited, since every time the image is changed, it must be encoded again.
<img src="data:image/png,%89PNG%0D%0A..." />MIME
A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) is a standard that indicates the nature and format of a document, file, or assortment of bytes.
Browsers use the MIME type, not the file extension, to determine how to process a URL, so it’s important that web servers send the correct MIME type in the response’s Content-Type header. If this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled.
type/subtype;parameter=valueEg: text/plain;charset=UTF-8
See all MIME types and read more about them here.
How I downloaded the video files?
import download from "downloadjs";let blob = await fetch(videoUrl).then(r => r.blob());
download(blob, `${fileName}_video_by_grambuddy.mp4`, "video");
You may contact the author at abhinav.rai.1996@gmail.com
