So I know that blobs are only available in the tab they were created in, but somehow I get an error message that the blob couldn't been found. It doesn't matter where I try it.
For example YouTube videos are blobs, I can get the object URL of it with
document.getElementsByTagName('video')[0].currentSrc /// => 'blob:http://youtube.com/asddasd-asdasd-asdasd-asddsa'
now if I try to get the blob with
fetch(url)
I get an error that the blob couldn't been found.
Youtube videos blobURIs are not pointing to Blobs but to MediaSources.
Blobs are not the only objects we can point to using the URL.createObjectURL() method, we used to be able to pass MediaStreams too, and more importantly to our case, we can still pass MediaSource objects.
const source = new MediaSource();
const url = URL.createObjectURL( source ); // this doesn't throw
console.log( url ); // that's a valid blob URI
fetch( url ).catch( console.error ); // nothing to fetch thereYouTube does fetch the data as ArrayBuffers, and then populate a MediaSource with this data.
There is natively no way of retrieving the original MediaSource from the blobURI, and even though we can override URL.createObjectURL to get it back, we can't retrieve the actual data passed to the MediaSource anyway...
I think you should fetch with a standard URL first, and then indicate that it should be interpreted as a blob.
const url = "http://youtube.com/asddasd-asdasd-asdasd-asddsa"
fetch(url)
.then(response => response.blob())
.then(console.log)
But you might run into some CORS issues when fetching youtube!
blob: protocol isn't supported by all browsers and seems to be forbidden (?) when requesting cross origin resources.