Html5 атрибут загрузки не работает, когда URL-адрес blob-url

Мы создаем расширение chrome для загрузки видео, в настоящее время у меня есть эта функция:

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);
}

Здесь video параметр - это элемент html5 video, я использую caputreStream, потому что некоторые веб-сайты (особенно youtube) используют blob-url, которые явно отменены. Поэтому я создаю новый URL-адрес Blob из MediaStream.

Функция выше выполняется как часть видео onloadeddata.

Диалоговое окно отображается, и имя файла верное, но когда я нажимаю "Сохранить", хром говорит "не удалось: не удалось найти файл".

Итак, как это сделать на самом деле?

Кстати, я пытался сделать ajax против url, но хром отказывается от сообщения: "Cross-origin поддерживается только для схем http, https, chrome, chrome-extension": 3.

Ответ 1

URL.createObjectURL()

Примечание. Использование объекта MediaStream в качестве входа в этот метод находится в процессе устаревания. Продолжается дискуссия о том, следует ли его полностью удалить. Таким образом, вы должны попытаться избежать использования этого метода с помощью MediaStreams и вместо этого использовать HTMLMediaElement.srcObject().

Ссылка: 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

Код:

функция downloadvideo (видео) {

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);

}

Посмотрите, работает ли это для вас.

Ответ 2

Вот функция, которую я использовал для загрузки видео в bloburl, который я сохранил из захвата кадра холста

function createdVideo(){
        var output = 'your video or captured stream or canvas capture'  
        var url = webkitURL.createObjectURL(output);
        // output_video.src = url; //toString converts it to a URL via Object URLs, falling back to DataURL
        download.href = url;//download is id of download link which als ohave download atribute}

i Надежда будет работать в вашем случае