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

Posted 2023-03-04

【中文标题】如何在视频元素中播放画布？

【英文标题】：How do you play a canvas in a video element?

【发布时间】：2021-01-13 11:07:10

【问题描述】：

我查看了Streaming from canvas to video element 的示例，因此我可以看到该原理有效，但我无法让它在视频中播放/显示静态图像。

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

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>

【参考方案1】：

您正在绘制一个跨域图像，这将因此污染画布并使 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"  ></canvas>
<video id="videoPlayBack" controls playsinline autoplay muted ></video>

【参考方案2】：

如果您在画布上绘制“不是您的图像”，您将无法从画布中保存，因为画布安全模型（当您在画布上绘制任何不同来源的图像时，并且不明确地有一个可以使用的 CORS 标头，您不再可以访问像素 - 不能通过 ImageData，不能通过 toDataURL 等）。

为防止画布将自身标记为“受污染”，请参阅 https://developer.mozilla.org/en-US/docs/Web/html/CORS_enabled_image 了解您的选择。