webrtc简单捕获和添加图像叠加

Question

我的目标是使用webrtc创建一个简单的快照，并在<video>元素上添加一些简单的图像叠加

然后将其保存到jpeg

我试过

<canvas id="canvas">
<video  id="video"></video>
</canvas>

但是视频没有显示出来。

我想在一个简单的画布中拥有所有这些，所以我只需要使用

window.location=canvas.toDataURL('image/jpg');

保存到jpeg

有任何线索吗？

Answer 1

我不确定在画布中使用<video>元素，但您可以使用.drawImage将视频内容放在画布上。

function raf(){
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    requestAnimationFrame();
}

Wheareas video指的是视频元素。在此之后，您可以在画布上绘制叠加层（请记住将其放在动画帧中，否则会被视频覆盖），然后调用.toDataURL('image/jpg')来获取图像。