从视频流中获取数据 URL？答案

【问题标题】：Get data URL from video stream?从视频流中获取数据 URL？
【发布时间】：2018-01-23 06:55:17
【问题描述】：

我有一个可以正常工作的视频 (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 属性，但在涉及流的地方它们返回为空。

【问题讨论】：

您正在尝试下载流？执行此操作的常用方法是通过 MediaRecorder 创建一个 blob，然后下载该 blob（这涉及 URL.createObjectURL 但使用 blob，而不是流）
基本上我只想将录制的视频保存到服务器。感谢您的提示-您能给我一些有关如何执行此操作或阅读什么的指示吗？代码 sn-p 就是 ace。
这段代码真的有效吗？奇怪...
webrtc.github.io/samples/src/content/getusermedia/record

标签： javascript video stream webrtc webm

【解决方案1】：

我真的很惊讶你的代码竟然可以工作......

如果stream 真的是MediaStream，那么浏览器甚至不应该知道它必须下载什么大小，因此不知道何时停止下载（它是一个流）。

MediaRecorder#ondataavailable 将公开一个带有data 属性的事件，该属性填充了一段录制的 MediaStream。在这种情况下，您必须将这些块存储在一个数组中，然后您将下载这些 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。

【讨论】：

谢谢。我意识到您在最后一段中表达的概念-我在问题中自己说过-我专门询问如何通过这种首选（即未弃用）方法派生数据 URL。 chunks 和 blob 方法正是我所需要的。

【解决方案2】：

让我们分步进行：

创建一个html视频元素并使用（在视频元素中显示流）：

video.srcObject=stream

然后您需要将带有帧的可变视频转换为画布元素，我们这样做：

var canvas = document.createElement("canvas");
var ctx    = canvas.getContext('2d');

ctx.drawImage(video, 0, 0)

通过这段代码从canvas中获取数据url：

var du = canvas.toDataURL()

【讨论】：