Convert blob URL to normal URL

Question

My page generates a URL like this: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f" How can I convert it to a normal address?

I'm using it as an <img>'s src attribute.

Bornholm

even after decoding the URL, it's still a localhost link. Find out its public link instead. (which CDN are you using?) – Crudden

I am wishing to use javascript. – Bornholm

Use the stackvoverflow link .. and W3C Your real problem will be how to make it independent of environment you deploy your code in – Airsickness

Is there a way to find the public URL from the blob adress. Thhis is the only value I have. – Bornholm

Also superuser.com/q/948738/78897 – Pancake

codepen.io/vidhill/pen/bNPEmX – Analyzer

just to example why we cannot directly open or XHR to video src blob:xxxx.com/xxxx .This blob is created by URL.createObjectURL(mediaSource). Here is the example – Iamb

Answer 1

A URL that was created from a JavaScript Blob can not be converted to a "normal" URL.

A blob: URL does not refer to data the exists on the server, it refers to data that your browser currently has in memory, for the current page. It will not be available on other pages, it will not be available in other browsers, and it will not be available from other computers.

Therefore it does not make sense, in general, to convert a Blob URL to a "normal" URL. If you wanted an ordinary URL, you would have to send the data from the browser to a server and have the server make it available like an ordinary file.

It is possible convert a blob: URL into a data: URL, at least in Chrome. You can use an AJAX request to "fetch" the data from the blob: URL (even though it's really just pulling it out of your browser's memory, not making an HTTP request).

Here's an example:

var blob = new Blob(["Hello, world!"], { type: 'text/plain' });
var blobUrl = URL.createObjectURL(blob);

var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';

xhr.onload = function() {
   var recoveredBlob = xhr.response;

   var reader = new FileReader;

   reader.onload = function() {
     var blobAsDataUrl = reader.result;
     window.location = blobAsDataUrl;
   };

   reader.readAsDataURL(recoveredBlob);
};

xhr.open('GET', blobUrl);
xhr.send();

data: URLs are probably not what you mean by "normal" and can be problematically large. However they do work like normal URLs in that they can be shared; they're not specific to the current browser or session.

Sludgy

If blob urls don't point to server data, then how come Youtube videos' src url look like: src="blob:https%3A//www.youtube.com/44f26667-03f1-4978-9eed-af0cbf11dd67" (in Chrome) – Iaverne

@Iaverne That's a very interesting find. I'm not sure what's going on there. If I try to retrieve their src blob URL using an XMLHttpRequest, as described in this post, no content is returned. My guess is that either (a) they generated any empty Blob URL to use as a placeholder while feeding in data from another source or (b) the Blob somehow acts as a proxy for encrypted data (via HTML5 Encrypted Media Extensions). However, I'm not sure how either of these could actually be done in practice. – Sludgy

@Iaverne It looks like the media source extensions spec allows blob URLs to be created for media streams being managed by JavaScript. These do not correspond to static data like the blob URLs discussed in this post, hence the difference in behavior, but they still refer to local information, not directly to data on a server. – Sludgy

Hmm, sounds right. It's confusing because the url looks real and intentful, but if it's just a placeholder it shouldn't matter what the value of src is. – Iaverne

I get a Not allowed to navigate top frame to data URL: data:text/plain;base64,... error. I get the data, but the window.location it is not allowed... – Lu

I know this question is old, but you can use puppeteer to capture the true media calls in-flight and then assemble it's chunks to a file. Takes a bit of byte and stream manipulation, but it's doable. – Higgs

I am using this in Electron.js environment. worked for me too. – Jewelfish

Each blob has to be created from something. So it should be possible to examine javascript that is launched on page load to see from what it generates. – Lachman

@Lu that has been disabled by browsers for security purposes. – Pronghorn

any solution? This solution not work to me – Elsie

Answer 2

another way to create a data url from blob url may be using canvas.

var canvas = document.createElement("canvas")
var context = canvas.getContext("2d")
context.drawImage(img, 0, 0) // i assume that img.src is your blob url
var dataurl = canvas.toDataURL("your prefer type", your prefer quality)

as what i saw in mdn, canvas.toDataURL is supported well by browsers. (except ie<9, always ie<9)

---

Demo:

let blobToImage=(binaryUrl) => {
  var canvas=document.createElement("canvas")
  var img=document.createElement('img');
  img.src=binaryUrl;
  var context=canvas.getContext("2d")
  context.drawImage(img, 0, 0);
  return canvas.toDataURL();
}

let blobUrl = "https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014__340.jpg";
let imgUrl = blobToImage(blobUrl);
console.log(blobUrl);
console.log(imgUrl);

Capriccioso

Note that this of course applies only for image data, and some metadata might be lost! – Hammons

Doing this creates a link but if you follow it you only get a black box. – Wendelina

@Antfish, That shouldn't happen isn't it? – Pancake

Answer 3

For those who came here looking for a way to download a blob url video / audio, this answer worked for me. In short, you would need to find an *.m3u8 file on the desired web page through Chrome -> Network tab and paste it into a VLC player.

Another guide shows you how to save a stream with the VLC Player.

---

UPDATE:

An alternative way of downloading the videos from a blob url is by using the mass downloader and joining the files together.

Download Videos Part

1. Open network tab in chrome dev tools

2. Reload the webpage
3. Filter .m3u8 files

4. Look through all filtered files and find the playlist of the '.ts' files. It should look something like this:

5. You need to extract those links somehow. Either download and edit the file manually OR use any other method you like. As you can see, those links are very similar, the only thing that differs is the serial number of the video: 's-0-v1-a1.ts', 's-1-v1-a1.ts' etc.

   https://some-website.net/del/8cf.m3u8/s-0-v1-a1.ts

   https://some-website.net/del/8cf.m3u8/s-1-v1-a1.ts 


   https://some-website.net/del/8cf.m3u8/s-2-v1-a1.ts


and so on up to the last link in the .m3u8 playlist file. These .ts files are actually your video. You need to download all of them.

6. For bulk downloading I prefer using the Simple Mass Downloader extension for Chrome (https://chrome.google.com/webstore/detail/simple-mass-downloader/abdkkegmcbiomijcbdaodaflgehfffed)

7. If you opt in for the Simple Mass Downloader, you need to:

   a. Select a Pattern URL

b. Enter your link in the address field with only one modification: that part of the link that is changing for each next video needs to be replaced with the pattern in square brackets [0:400] where 0 is the first file name and 400 is the last one. So your link should look something like this https://some-website.net/del/8cf.m3u8/s-[0:400]-v1-a1.ts.

Afterwards hit the Import button to add these links into the Download List of Mass Downloader.

c. The next action may ask you for the destination folder for EACH video you download. So it is highly recommended to specify the default download folder in Chrome Settings and disable the Select Destination option in Chrome Settings as well. This will save you a lot of time! Additionally you may want you specify the folder where these files will go to:

c1. Click on Select All checkbox to select all files from the Download List.

c2. Click on the Download button in the bottom right corner of the SMD extension window. It will take you to next tab to start downloading

c3. Hit Start selected. This will download all vids automatically into the download folder.

That is it! Simply wait till all files are downloaded and you can watch them via the VLC Player or any other player that supports the .ts format. However, if you want to have one video instead of those you have downloaded, you need to join all these mini-videos together

Joining Videos Part

Since I am working on Mac, I am not aware of how you would do this on Windows. If you are the Windows user and you want to merge the videos, feel free to google for the windows solution. The next steps are applicable for Mac only.

1. Open Terminal in the folder you want the new video to be saved in
2. Type: cat and hit space
3. Open the folder where you downloaded your .ts video. Select all .ts videos that you want to join (use your mouse or cmd+A)
4. Drag and drop them into the terminal
5. Hit space
6. Hit >
7. Hit Space
8. Type the name of the new video, e.g. my_new_video.ts. Please note that the format has to be the same as in the original videos, otherwise it will take long time to convert and even may fail!
9. Hit Enter. Wait for the terminal to finish the joining process and enjoy watching your video!

Passacaglia

This worked ... until clever HTML/JS gurus started avoiding *.m3u8 altogether. Bummer! – Stress

Answer 4

Found this answer here and wanted to reference it as it appear much cleaner than the accepted answer:

function blobToDataURL(blob, callback) {
  var fileReader = new FileReader();
  fileReader.onload = function(e) {callback(e.target.result);}
  fileReader.readAsDataURL(blob);
}

Soper

what is blob? Does it equal to "blob:https:/...."??? – Elsie

Answer 5

I'm very late to the party.

If you want to download the content you can simply use fetch now

fetch(blobURL)
  .then(res => res.blob())
  .then(blob => /*do what you want with the blob here*/)

Brownstone

I've been trying to use your code (with some inspiration from https://mcmap.net/q/66099/-how-to-get-a-file-or-blob-from-an-object-url), but, apparently, fetch() cannot get a blob:https://example.com/123e4567-e89b-12d3-a456-426614174000 URL. I'm investigating further... – Stress

@GwynethLlewelyn Have you found any solution? – Peloria

did you test it's first before answer here? – Elsie

Answer 6

Here the solution:

        let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
        let videoURL = window.URL.createObjectURL(blob);
        const blobF = await fetch(videoURL).then(res => res.blob())

Chiron

about type mime is dont video/mp4 and correct is octet/stream. – Geoponic

did you test it's first before answer here? – Elsie

Answer 7

As the previous answer have said, there is no way to decode it back to url, even when you try to see it from the chrome devtools panel, the url may be still encoded as blob.

However, it's possible to get the data, another way to obtain the data is to put it into an anchor and directly download it.

<a href="blob:http://example.com/xxxx-xxxx-xxxx-xxxx" download>download</a>

Insert this to the page containing blob url and click the button, you get the content.

Another way is to intercept the ajax call via a proxy server, then you could view the true image url.

Practicable

<a href="blob:example.com/xxxx-xxxx-xxxx-xxxx" download="abc.txt">download</a>. It should work. When it will hit the href, it will rename the blob to abc.txt & download – Analyzer

Why the downvotes? have you actually tried what I said? – Practicable

I have not downvoted. I came here. And, I thought it will work. I am in support of this a littlebit – Analyzer

Not sure about the downvotes, but this certainly sounds a straightforward way. (With that said, I always get Failed - Network error in Chrome 83.0.4103.97 on Linux.) – Machinate

Quite interesting. I've opened DevTools and added a bit of HTML with that link. It certainly does 'something': it shows up on the page, sure, and you can click to download it — but, like @Machinate said, I also get a Failed - Network error. – Stress