Можно ли добавить поток в качестве источника к элементу html-холста как к элементу html-видео?

Нет, ни в одном из Canvas API нет ничего, что могло бы потреблять MediaStream.

API-интерфейсы холста работают только с необработанными пикселями и не содержат никаких декодеров. Вы должны использовать либо объекты javascript, которые могут выполнять это декодирование (например, ImageBitmap), либо HTMLElements.

Таким образом, в случае MediaStream в настоящее время единственным объектом, способным декодировать его видеоконтент, будет HTMLVideoElement, который вы сможете легко рисовать на холсте.

обновление 2021 г.

WebCodecs API в последнее время значительно продвинулся вперед и становится все более и более зрелым, поэтому стоит упомянуть его. как решение.

Этот API предлагает новый интерфейс под названием VideoFrame, который будет скоро станет частью CanvasImageSource, что означает, что мы можем использовать его непосредственно с drawImage, texImage2D и везде, где может использоваться такой CanvasImageSource.
href="https://github.com/w3c/mediacapture-transform" rel="nofollow noreferrer">MediaCapture Transform группа W3C разработала MediaStreamTrackProcessor, который возвращает такие видеокадры из видео MediaStreamTrack.

Итак, теперь у нас есть более прямой способ рендеринга MediaStream на холст, который в настоящее время работает только в браузере Chrome с включенным флагом #enable-experimental-web-platform-features...

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>

Как глючный проект (источник), используя камеру в качестве источника.

@Kaiido прав в том, что нет никакого способа сделать это напрямую. Итак, вот что вы должны сделать:

function onFrame() {
  window.requestAnimationFrame(onFrame);
  canvasContext.drawImage(video, 0, 0);
}
onFrame();

Пара ошибок, с которыми вы столкнетесь:

• Ваше исходное видео может изменить разрешение в середине потока. Это очень распространено в вызовах WebRTC, когда источник может масштабировать фактическое разрешение в пикселях из-за ограничений пропускной способности или ЦП. Один из способов обойти это — проверять размер видео в каждом кадре, который вы рисуете, и соответствующим образом масштабировать его на холсте.
• Этот цикл кадров не работает со скоростью, когда вкладка не имеет фокуса. Если вы также полагаетесь на captureStream из этого холста, из-за политик регулирования он не будет работать, если вкладка не имеет фокуса.
• Буфер холста не обновляется, когда вкладка не имеет фокуса, поэтому, даже если вы обойдете проблему с таймером с помощью узла аудиоскрипта или чего-то еще, это не сработает, если вы также хотите использовать captureStream из холста.
• Помните, что здесь нет «генлока». Для каждого кадра, который вы копируете на холст, в видео может пройти произвольное количество кадров (возможно, ноль!) Это может не иметь значения для вашей ситуации.