Obtenir l'URL des données du flux vidéo?

Question

J'ai un script de capture vidéo (webm) qui fonctionne bien. Il enregistre la vidéo puis l'offre en téléchargement. La partie pertinente du code est la suivante:

stopBtn.addEventListener('click', function() { 
    recorder.ondataavailable = e => { 
     ul.style.display = 'block'; 
     var a = document.createElement('a'), 
      li = document.createElement('li'); 
     a.download = ['video_', (new Date() + '').slice(4, 28), '.'+vid_format].join(''); 
     a.textContent = a.download; 
     a.href = URL.createObjectURL(stream); //<-- deprecated usage? 
     li.appendChild(a); 
     ul.appendChild(li); 
    }; 
    recorder.stop(); 
    startBtn.removeAttribute('disabled'); 
    stopBtn.disabled = true; 
}, false); 

Cela fonctionne, comme je le dis. Toutefois, la console indique que le passage de flux de média à URL.createObjectURL est obsolète et que je devrais plutôt utiliser HTMLMediaElement srcObject.

Alors je l'ai changé:

a.href = URL.createObjectURL(video.srcObject); 

... et bien que tout fonctionne toujours, je reçois le même avertissement.

Est-ce que quelqu'un sait comment je peux obtenir une URL ou des données BLOB sans cette façon obsolète?

J'ai également essayé de lire les propriétés src et currentSrc de l'élément vidéo, mais elles reviennent vides lorsqu'un flux est impliqué.

Answer 1

Je suis vraiment surpris que votre code ne fonctionne même ...

Si stream est vraiment un MediaStream, le navigateur doit même pas savoir quelle taille il aurait à télécharger, donc pas quand arrêter le téléchargement (c'est un ruisseau).

MediaRecorder#ondataavailable exposera un événement avec une propriété data remplie avec un morceau du MediaStream enregistré. Dans cet événement, vous devrez stocker ces blocs dans un tableau, puis vous téléchargerez la concaténation de ces blocs Blobs, généralement dans l'événement MediaRecorder # onstop.

const stream = getCanvasStream(); // we'll use a canvas stream so that it works in stacksnippet 
 
const chunks = []; // this will store our Blobs chunks 
 
const recorder = new MediaRecorder(stream); 
 
recorder.ondataavailable = e => chunks.push(e.data); // a new chunk Blob is given in this event 
 
recorder.onstop = exportVid; // only when the recorder stops, we do export the whole; 
 
setTimeout(() => recorder.stop(), 5000); // will stop in 5s 
 
recorder.start(1000); // all chunks will be 1s 
 

 
function exportVid() { 
 
    var blob = new Blob(chunks); // here we concatenate all our chunks in a single Blob 
 
    var url = URL.createObjectURL(blob); // we creat a blobURL from this Blob 
 
    var a = document.createElement('a'); 
 
    a.href = url; 
 
    a.innerHTML = 'download'; 
 
    a.download = 'myfile.webm'; 
 
    document.body.appendChild(a); 
 
    stream.getTracks().forEach(t => t.stop()); // never bad to close the stream when not needed anymore 
 
} 
 

 

 
function getCanvasStream() { 
 
    const canvas = document.createElement('canvas'); 
 
    const ctx = canvas.getContext('2d'); 
 
    ctx.fillStyle = 'red'; 
 
    // a simple animation to be recorded 
 
    let x = 0; 
 
    const anim = t => { 
 
    x = (x + 2) % 300; 
 
    ctx.clearRect(0, 0, 300, 150); 
 
    ctx.fillRect(x, 0, 10, 10); 
 
    requestAnimationFrame(anim); 
 
    } 
 
    anim(); 
 
    document.body.appendChild(canvas); 
 
    return canvas.captureStream(30); 
 
}

URL.createObjectURL(MediaStream) a été utilisé pour <video> éléments. Mais cela a également entraîné certaines difficultés pour les navigateurs de fermer l'accès aux périphériques physiques, car les BlobURL peuvent avoir une durée de vie plus longue que le document actuel.
Il est maintenant obsolète d'appeler createObjectURL avec un MediaStream, et il faut utiliser MediaElement.srcObject = MediaStream à la place.