从视频流中获取数据网址？

我有一个工作正常的视频（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

从视频流中获取数据网址？

回答

相关问题