從視頻流中獲取數據網址？

我有一個工作正常的視頻（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屬性，但它們在涉及流的位置回到空白處。

來源

2017-08-15 Utkanos

你想下載流？這樣做的常見方法是通過MediaRecorder創建一個blob，然後下載blob（其中涉及URL.createObjectURL但是使用blob而不是流） –

基本上我只想將錄製的視頻保存到服務器。謝謝你的提示 - 你能給我一些關於如何做或讀什麼的指示嗎？代碼片段將是ace。 – Utkanos

這段代碼真的有效嗎？ Weiiird ... – Kaiido

我真的很驚訝，你的代碼甚至沒有工作......

如果stream真是MediaStream，然後在瀏覽器應該甚至不知道它會有什麼尺寸下載，因此沒有何時停止下載（這是一個流）。

MediaRecorder#ondataavailable將公開一個事件，其中data屬性充滿了大量記錄的MediaStream。在這種情況下，您必須將這些塊存儲在Array中，然後您將通常在MediaRecorder＃onstop事件中下載這些Blob塊的連接。

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代替。

來源

2017-08-15 13:31:18 Kaiido

謝謝。我意識到在最後一段中表達的觀念 - 我在問題中自己說過 - 我正在特別詢問如何通過這種首選（即不推薦）方法來獲取數據URL。塊和blob方法正是我所需要的。 – Utkanos

從視頻流中獲取數據網址？

回答

相關問題