canvas - 是否可以将流作为源添加到 html Canvas 元素作为 html 视频元素？

Question

根据 MDN:

The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video.

HTMLMediaElement.captureStream() .它可以与 <video> 一起使用和 <canvas>元素来捕获它们的流。

相反，可以添加 视频流如srcObject到 <video>元素，然后它显示它。 <canvas> 有可能吗？元素也是？

有没有可能添加流 作为 来源 到 html <canvas>元素？

Answer 1

没有任何 Canvas API 能够使用 MediaStream。
Canvas API 仅适用于原始像素，不包含任何类型的解码器。您必须使用能够进行此解码的 javascript 对象(例如 ImageBitmap)或 HTMLElements。
因此，对于 MediaStream，目前唯一能够解码其视频内容的对象将是 HTMLVideoElement，您将能够 draw on your canvas easily .

2021 年更新
WebCodecs API最近取得了很大的进展，并且变得越来越成熟，现在值得一提的是它作为一种解决方案。
此 API 提供了一个名为 VideoFrame 的新接口(interface)这将soon成为 CanvasImageSources 的一部分类型，含义，我们可以直接用drawImage , texImage2D在任何地方都可以使用这样的 CanvasImageSource。
MediaCapture Transform W3C小组开发了MediaStreamTrackProcessor确实从视频 MediaStreamTrack 返回此类 VideoFrames。
所以我们现在有一种更直接的方法来将 MediaStream 渲染到 Canvas 上，目前它只适用于带有 #enable-experimental-web-platform-features 的 Chrome 浏览器。旗上...

if( window.MediaStreamTrackProcessor ) {
  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  const track = getCanvasTrack(); // MediaStream.getVideoTracks()[0]
  const processor = new MediaStreamTrackProcessor( track );
  const reader = processor.readable.getReader();
  readChunk();
  function readChunk() {
    reader.read().then( ({ done, value }) => {
      // the MediaStream video can have dynamic size
      if( canvas.width !== value.displayWidth || canvas.height !== value.displayHeight ) {
        canvas.width = value.displayWidth;
        canvas.height = value.displayHeight;
      }
      ctx.clearRect( 0, 0, canvas.width, canvas.height );
      // value is a VideoFrame
      ctx.drawImage( value, 0, 0 );
      value.close(); // close the VideoFrame when we're done with it
      if( !done ) {
        readChunk();
      }
    });
  }
}
else {
  console.error("Your browser doesn't support this API yet");
}

// We can't use getUserMedia in StackSnippets
// So here we use a simple canvas as source
// for our MediaStream.
function getCanvasTrack() {
  // just some noise...
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const img = new ImageData(300, 150);
  const data = new Uint32Array(img.data.buffer);
  const track = canvas.captureStream().getVideoTracks()[0];

  anim();
  
  return track;
  
  function anim() {
    for( let i=0; i<data.length;i++ ) {
      data[i] = Math.random() * 0xFFFFFF + 0xFF000000;
    }
    ctx.putImageData(img, 0, 0);
    if( track.readyState === "live" ) {
      requestAnimationFrame(anim);
    }
  }
  
}

<canvas></canvas>

作为 glitch project ( source ) 使用相机作为源。