webrtc简单捕获和添加图像覆盖

我的目标是使用webrtc创建一个简单的快照，并在

元素上添加一些简单的图像覆盖

然后将其保存到jpeg

我试过了

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

保存为jpeg格式

---

有什么线索吗？

我不确定是否在画布中使用

元素，但您可以使用

.drawImage

将视频内容放在画布上

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

---

Wheares

video

指的是视频元素。在此之后，您可以在画布上绘制覆盖图（记住将其放在te animationframe中，否则它会被视频覆盖），然后调用

.toDataURL（'image/jpg'）

获取图像。

您是否设置了视频播放？可能需要在视频源元素中将其设置为

autoplay

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