# Web-DL BLOB urls **URL:** \ **Category:** Discussion & Solutions\ **Tags:** solved\ **Created:** [April 1, 2021, 3:45pm UTC](https://onehack.st/t/web-dl-blob-urls/177330 "2021-04-01T15:45:45Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![Younes\_BraVodka](https://onehack.st/user_avatar/onehack.st/younes_bravodka/32/47198_2.png) [@Younes\_BraVodka](https://onehack.st/u/Younes_BraVodka)\ **Post date:** [April 1, 2021, 3:45pm UTC](https://onehack.st/t/web-dl-blob-urls/177330/1 "2021-04-01T15:45:45Z")
Everybody knows that when a new movie or a tv show comes to Entertainement plateforms such as Netflix, Amazon prime, HBO etc… you will find it illegally downloadable on internet in Web DL version, but when you try it alone you’ll find yourself bumped with what is called BLOB URLS, trully how they put all divided pieces of files in localstorage to get one unique synchronized Web-DL mp4 file, is there any kind of explanation about it ? thanks in advance. 🙂 ![](https://www.ifunia.com/blog/wp-content/uploads/2020/04/download-blob-video.png) ---
**Author:** ![Prometheus](https://onehack.st/user_avatar/onehack.st/prometheus/32/34950_2.png) [@Prometheus](https://onehack.st/u/Prometheus)\ **Post date:** [April 1, 2021, 7:30pm UTC](https://onehack.st/t/web-dl-blob-urls/177330/2 "2021-04-01T19:30:47Z")
Blob URLs (ref [W3C](https://w3c.github.io/FileAPI/#DefinitionOfScheme), official name) or Object-URLs (ref. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#Parameters) and method name) are used with a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) or a [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object. > src=“blob:[https://crap.crap](https://crap.crap)” I opened the blob url that was in src of video it gave a error and i can’t open but was working with the src tag how it is possible? Blob URLs can only be generated internally by the browser. [`URL.createObjectURL()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) will create a special reference to the Blob or File object which later can be released using [`URL.revokeObjectURL()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL). These URLs can only be used locally in the single instance of the browser and in the same session (ie. the life of the page/document). > What is blob url? > Why it is used? 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. This applies to anything that require an URL as source. Instead of uploading the binary data, then serve it back via an URL it is better to use an extra local step to be able to access the data directly without going via a server. It is also a better alternative to Data-URI which are strings encoded as [Base-64](https://en.wikipedia.org/wiki/Base64). The problem with Data-URI is that each char takes two bytes in JavaScript. On top of that a 33% is added due to the Base-64 encoding. Blobs are pure binary byte-arrays which does not have any significant overhead as Data-URI does, which makes them faster and smaller to handle. > Can i make my own blob url on a server? No, Blob URLs/Object URLs can only be made internally in the browser. You can make Blobs and get File object via the File Reader API, although BLOB just means Binary Large OBject and is stored as byte-arrays. A client can request the data to be sent as either ArrayBuffer or as a Blob. The server should send the data as pure binary data. Databases often uses Blob to describe binary objects as well, and in essence we are talking basically about byte-arrays. > if you have then Additional detail You need to encapsulate the binary data as a BLOB object, then use `URL.createObjectURL()` to generate a local URL for it: ```auto var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}), url = URL.createObjectURL(blob), img = new Image(); img.onload = function() { URL.revokeObjectURL(this.src); // clean-up memory document.body.appendChild(this); // add image to DOM } img.src = url; // can now "stream" the bytes ``` Note that `URL` may be prefixed in webkit-browsers, so use: ```auto var url = (URL || webkitURL).createObjectURL(...); ``` `Source: StackOverflow` # Blob The **`Blob`** object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) so its methods can be used for processing the data. Blobs can represent data that isn’t necessarily in a JavaScript-native format. The [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) interface is based on `Blob`, inheriting blob functionality and expanding it to support files on the user’s system. ## [Using blobs](https://developer.mozilla.org/en-US/docs/Web/API/Blob#using_blobs) To construct a `Blob` from other non-blob objects and data, use the [`Blob()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob) constructor. To create a blob that contains a subset of another blob’s data, use the [`slice()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice) method. To obtain a `Blob` object for a file on the user’s file system, see the [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) documentation. The APIs accepting `Blob` objects are also listed in the [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) documentation. ## [Constructor](https://developer.mozilla.org/en-US/docs/Web/API/Blob#constructor) [`Blob()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob) Returns a newly created `Blob` object which contains a concatenation of all of the data in the array passed into the constructor. ## [Instance properties](https://developer.mozilla.org/en-US/docs/Web/API/Blob#instance_properties) [`Blob.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/size) Read only The size, in bytes, of the data contained in the `Blob` object. [`Blob.prototype.type`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/type) Read only A string indicating the MIME type of the data contained in the `Blob`. If the type is unknown, this string is empty. ## [Instance methods](https://developer.mozilla.org/en-US/docs/Web/API/Blob#instance_methods) [`Blob.prototype.arrayBuffer()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/arrayBuffer) Returns a promise that resolves with an [`ArrayBuffer`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) containing the entire contents of the `Blob` as binary data. [`Blob.prototype.slice()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice) Returns a new `Blob` object containing the data in the specified range of bytes of the blob on which it’s called. [`Blob.prototype.stream()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/stream) Returns a [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) that can be used to read the contents of the `Blob`. [`Blob.prototype.text()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/text) Returns a promise that resolves with a [`USVString`](https://developer.mozilla.org/en-US/docs/Web/API/USVString) containing the entire contents of the `Blob` interpreted as UTF-8 text. ## [Examples](https://developer.mozilla.org/en-US/docs/Web/API/Blob#examples) ### [Creating a blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob#creating_a_blob) The [`Blob()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob) constructor can create blobs from other objects. For example, to construct a blob from a JSON string: ```auto const obj = {hello: 'world'}; const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'}); ``` ### [Creating a URL representing the contents of a typed array](https://developer.mozilla.org/en-US/docs/Web/API/Blob#creating_a_url_representing_the_contents_of_a_typed_array) The following code creates a JavaScript [typed array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays) and creates a new `Blob` containing the typed array’s data. It then calls [`URL.createObjectURL()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) to convert the blob into a [URL](https://developer.mozilla.org/en-US/docs/Glossary/URL). #### HTML ```auto

This example creates a typed array containing the ASCII codes for the space character through the letter Z, then converts it to an object URL. A link to open that object URL is created. Click the link to see the decoded object URL.

``` #### JavaScript The main piece of this code for example purposes is the `typedArrayToURL()` function, which creates a `Blob` from the given typed array and returns an object URL for it. Having converted the data into an object URL, it can be used in a number of ways, including as the value of the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) element’s [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src) attribute (assuming the data contains an image, of course). ```auto function typedArrayToURL(typedArray, mimeType) { return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType})) } const bytes = new Uint8Array(59); for(let i = 0; i < 59; i++) { bytes[i] = 32 + i; } const url = typedArrayToURL(bytes, 'text/plain'); const link = document.createElement('a'); link.href = url; link.innerText = 'Open the array URL'; document.body.appendChild(link); ``` #### Result Click the link in the example to see the browser decode the object URL. ### [Extracting data from a blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob#extracting_data_from_a_blob) One way to read content from a `Blob` is to use a [`FileReader`](https://developer.mozilla.org/en-US/docs/Web/API/FileReader). The following code reads the content of a `Blob` as a typed array: ```auto const reader = new FileReader(); reader.addEventListener('loadend', () => { // reader.result contains the contents of blob as a typed array }); reader.readAsArrayBuffer(blob); ``` Another way to read content from a `Blob` is to use a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response). The following code reads the content of a `Blob` as text: ```auto const text = await (new Response(blob)).text(); ``` Or by using [`Blob.prototype.text()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/text): ```auto const text = await blob.text(); ``` By using other methods of `FileReader`, it is possible to read the contents of a Blob as a string or a data URL. Continue reading: [https://developer.mozilla.org/en-US/docs/Web/API/Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) **Happy learning!** ---
**Author:** ![Younes\_BraVodka](https://onehack.st/user_avatar/onehack.st/younes_bravodka/32/47198_2.png) [@Younes\_BraVodka](https://onehack.st/u/Younes_BraVodka)\ **Post date:** [April 1, 2021, 7:39pm UTC](https://onehack.st/t/web-dl-blob-urls/177330/3 "2021-04-01T19:39:56Z")
**Thank you very much brother 🤜 🤛** ---
**Author:** ![Margaret](https://onehack.st/user_avatar/onehack.st/margaret/32/174872_2.png) [@Margaret](https://onehack.st/u/Margaret)\ **Post date:** [April 1, 2021, 11:50pm UTC](https://onehack.st/t/web-dl-blob-urls/177330/4 "2021-04-01T23:50:46Z")
> **[Chrome Web Store](https://chromewebstore.google.com/detail/empty-title/knpbbcbpainepebaalgbehcidbkednfb)** > > Add new features to your browser and personalize your browsing experience. * * * I found a way to download the video with `blob url` in `Vimeo` (reading [here](https://www.reddit.com/r/HowToHack/comments/41mvtc/how_to_join_vimeo_video_segments/) i understood how doing it). I write the simple steps here. I’m using Google Chrome: 1. Open the `More Tools` → `Developer Tools` 2. Check if in the video tag there is something like this: ```auto ``` 1. Copy the src of the iframe tag, if any, something like `http://player.vimeo.com/video/XYZ` if you found it you can go straight to the point 7, otherwise follow steps 4, 5, 6. 2. Now look for this string `https://skyfire.vimeocdn.com/.../master.json?base64_init=1` inside the page (using the Developer View), you should found it inside a javascript function, like this: ```auto (function(e,a){var t={"cdn_url":"https://f.vimeocdn.com","view":1,"request":{"files":{"dash":{"origin":"gcs","url":"https://48skyfiregce-a.akamaihd.net/.../master.json?base64_init=1","cdn":" ``` 1. Copy the link inside the url field on a new Chrome tab, for example `https://48skyfiregce-a.akamaihd.net/.../master.json?base64_init=1` end open it with a browser, it will open you a json file like this: ```auto { "clip_id": XYZ, "base_url": "../", "video": [ { ... ... ... ``` 1. Now compose a url with your id `XYZ` like this: `https://player.vimeo.com/video/XYZ` 2. Replace `blob:https://player.vimeo.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX` inside the video tag with that last url (the one created in the previous step #6). 3. Now you will notice that magically the src field inside of the video tag changed (if it does not, try step 7 multiple times)… ```auto ``` 1. Use that new link to dowload it directly, it’s something like this: [https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/XX/XXX/X/XXXXXXXX/XXXXXXXXX.mp4?token=abcdefg](https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/XX/XXX/X/XXXXXXXX/XXXXXXXXX.mp4?token=abcdefg) * * * ## More details > ---
**Author:** ![Younes\_BraVodka](https://onehack.st/user_avatar/onehack.st/younes_bravodka/32/47198_2.png) [@Younes\_BraVodka](https://onehack.st/u/Younes_BraVodka)\ **Post date:** [April 2, 2021, 1:50pm UTC](https://onehack.st/t/web-dl-blob-urls/177330/5 "2021-04-02T13:50:59Z")
**Margaret, you are the best, thank you vey much for your sharing with us that way ❤**