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

问题描述 投票:0回答:1

我看过Streaming from canvas to video element的样本,所以我可以看到原理是可行的,但是我无法在视频中播放/显示静态图像。

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

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>
html canvas html5-video
1个回答
0
投票

您正在绘制跨域图像,因此将弄脏画布并使CanvasCaptureMediaStreamTrack静音,从而导致不传递任何数据。

如果希望流式传输,请保持画布不受污染:

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>
© www.soinside.com 2019 - 2024. All rights reserved.