ビデオストリームからデータURLを取得しますか？

Question

私はうまく動作するビデオ（webm）キャプチャスクリプトを持っています。それはビデオを記録し、それをダウンロードとして提供します。コードの関連部分は次のとおりです。

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

これは私の言うとおりです。しかし、コンソールは、メディアストリームをURL.createObjectURLに渡すことは推奨されていないと言い、代わりにHTMLMediaElement srcObjectを使用する必要があります。

だから私はそれを変更：

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

...とすべてがまだ動作しますが、私は同じ警告が表示されます。

この廃止予定のない方法でURLまたはBLOBデータを取得する方法を知っている人はいますか？

私はまた、ビデオ要素からsrcとcurrentSrcのプロパティを読み込もうとしましたが、ストリームが関係するところで空に戻ります。

Answer 1

私はあなたのコードでも動作しなかったことは本当に驚いて...

streamが本当にMediaStreamある場合はダウンロードを中止したときに、ブラウザでも（したがって、それはダウンロードしなければならないどのようなサイズではない知っているべきではありませんそれはストリームです）。

MediaRecorder#ondataavailableは、記録されたMediaStreamのチャンクで満たされたdataプロパティのイベントを公開します。このイベントでは、これらのチャンクを配列に格納してから、これらのBlobチャンクの連結を、通常は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)<video>要素のために使用しました。しかしこれはまた、BlobURLが現在の文書よりも長い存続期間を持つことができるため、ブラウザーが物理的な装置へのアクセスを閉じることを困難にしていました。
MediaStreamを使用してcreateObjectURLを呼び出すことは推奨されていません。代わりにMediaElement.srcObject = MediaStreamを使用する必要があります。