How do you play a canvas in a video element?

Question

I've looked at a sample for Streaming from canvas to video element so I can see that the principle works but i can't get it to play/display a static image in the video.

Here is my code so far with an image borrowed from stackoverflow. How can I change my code to display the canvas as a video?

const canvas = document.getElementById('viewport');
const context = canvas.getContext('2d');
const video = document.getElementById('videoPlayBack');

make_base();

function make_base() {
    base_image = new Image();
    base_image.onload = function () {
        context.drawImage(base_image, 0, 0);
    }
    base_image.src = "https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9";
}

const stream = canvas.captureStream(25);
video.srcObject = stream;

<canvas id="viewport"></canvas>
<video id="videoPlayBack" playsinline autoplay muted></video>

Answer 1

You are drawing a cross-origin image, this will thus taint the canvas and mute the CanvasCaptureMediaStreamTrack, resulting in no data being passed.

Keep your canvas untainted if you wish to stream it:

const canvas = document.getElementById('viewport');
const context = canvas.getContext('2d');
const video = document.getElementById('videoPlayBack');

make_base();

function make_base() {
  base_image = new Image();
  base_image.onload = function () {
    context.drawImage(base_image, 0, 0, 400, 300);
  }
  base_image.crossOrigin = "anonymous";
  base_image.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
}

const stream = canvas.captureStream(25);
video.srcObject = stream;

<canvas id="viewport" width="400" height="300"></canvas>
<video id="videoPlayBack" controls playsinline autoplay muted ></video>