How to generate a blob url from a actual url

Question

How do I convert video source url like http://localhost:3000/videos/abc.mp4 to blob url

let dataUrl = "http://localhost:3000/videos/abc.mp4"
this.videoBlobUrl = URL.createObjectURL(dataUrl);

Answer 1

All you are looking for is fetch's blob function

fetch("URL")
   .then(response => response.blob())
   .then(blobData => /* you got the blob data */)
   .catch(reason => /* handling errors */)

You can also use URL.createObjectURL(blobData); to create temporary URL as said by

For Example

 fetch("https://i.picsum.photos/id/682/200/300.jpg").then(r => r.blob()).then(blobData => console.log(URL.createObjectURL(blobData))).catch(console.error)

Answer 2

what is a blob url?

in my opinion, it's not even a real standard on the internets.

i always use my own way of generating a 'blob url'.

for that, i'd use (in javascript):

var 
dataURL = 'http://localhost:3000/videos/abc.mp4',
generateRandomID = function() {
  var 
  r = '',
  returnLength = 10,
  cipher='abc0123';
  for (var i=0; i<returnLength; i++) {
    r += cipher.substr(Math.random() * cipher.length, 1)
  };
  return r;
},
generateBlobURL = function (url) {
  var 
  urlStripped = url.replace('http://localhost:3000/videos',''),
  r = urlStripped + generateRandomID();
  return r;

},
dataURL_blob = generateBlobURL (dataURL);

and do not forget to use the F12 button to test this code, and to see where the errors in it might be:)