您如何在视频元素中播放画布?

问题描述

我看过一个从画布流向视频元素，所以我可以看到原理是可行的，但是我无法让它在视频中播放/显示静态图像.

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.

到目前为止，这是我的代码，其中包含从stackoverflow借用的图像.如何更改代码以将画布显示为视频?

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>

推荐答案

您正在绘制一个跨源图像，这样将弄脏画布并使CanvasCaptureMediaStreamTrack静音，从而导致不传递任何数据.

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>

这篇关于您如何在视频元素中播放画布?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！