html5 a download attribute doesn't work when the url is a blob url

Question

We're creating a chrome extension to download videos, currently I have this function :

function downloadvideo(video)
{
    const url = URL.createObjectURL(video.captureStream());
    const aelem = document.createElement('a');
    document.body.appendChild(aelem);
    aelem.setAttribute("href",url);
    aelem.setAttribute("download","video.mp4");
    aelem.click();
    //URL.revokeObjectURL(url);
}

Here video parameter is a html5 video element, I'm using caputreStream because some websites(notably youtube) uses blob url which are revoked apparently So I create a new Blob url from MediaStream.

The function above is executed as part of video's onloadeddata event.

The dialog is shown and the filename is correct but when I click "Save" chrome says "failed : could not find the file".

So how to make it actually work ?

By the way I tried to do ajax against url but chrome refuses with the message : "Cross-origin is only supported for schemes http,https,chrome,chrome-extension" :3 .

Answer 1

URL.createObjectURL()

Note: The use of a MediaStream object as an input to this method is in the process of being deprecated. Discussions are ongoing about whether or not it should be removed outright. As such, you should try to avoid using this method with MediaStreams, and should use HTMLMediaElement.srcObject() instead.

Ref : https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#Browser_compatibility

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject#Browser_compatibility

Code :

function downloadvideo(video) {

var mediaStream = video.captureStream();
//adding a dom element and fetching it in HTMLMediaElement.

HTMLMediaElement.srcObject = mediaStream;
var url = HTMLMediaElement.currentSrc;
const aelem = document.createElement('a');
document.body.appendChild(aelem);
aelem.setAttribute("href",url);
aelem.setAttribute("download","video.mp4");
aelem.click();
//URL.revokeObjectURL(url);

}

See if this works for you.