javascript - from - html5 un atributo de descarga no funciona cuando el url es un blob url

html download image

Question

Estamos creando una extensión de Chrome para descargar videos, actualmente tengo esta función:

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

Aquí, el parámetro de video es un elemento de video html5, estoy usando caputreStream porque algunos sitios web (en particular youtube) usan la URL de blob que aparentemente se revocan. Así que creo una nueva URL de Blob desde MediaStream .

La función anterior se ejecuta como parte del evento onloadeddata del video.

Se muestra el cuadro de diálogo y el nombre del archivo es correcto, pero cuando hago clic en "Guardar", Chrome dice "falló: no se pudo encontrar el archivo".

Entonces, ¿cómo hacer que realmente funcione?

Por cierto, traté de hacer ajax contra url pero chrome se niega con el mensaje: "El origen cruzado solo es compatible con los esquemas http, https, chrome, chrome-extension": 3.

Answer 1

Aquí está la función que utilicé para descargar el video en bloburl que almacené desde la captura del cuadro del lienzo

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}

Espero que funcione en tu caso.

Answer 2

URL.createObjectURL ()

Nota: El uso de un objeto MediaStream como una entrada a este método está en proceso de estar en desuso. Las discusiones están en curso sobre si debe o no eliminarse por completo. Como tal, debe intentar evitar el uso de este método con MediaStreams y, en su lugar, debe utilizar HTMLMediaElement.srcObject ().

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

Código:

función 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);

}

A ver si esto funciona para usted.