javascript - 从视频流获取数据URL？

我有一个运行正常的视频（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数据？

我也尝试过从video元素读取src和currentSrc属性，但是在涉及流的地方它们又变空了。

最佳答案

我真的很惊讶您的代码甚至能正常工作...

如果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。

关于javascript - 从视频流获取数据URL？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45691394/