Javascript 如何在html画布中播放流式视频？我可以在上面画线吗？

如何在html画布中播放流式视频？ 现在我有一个图像。 我制作了画布，在上面画了一些图表，得到了我画的所有线条的坐标。 但这里我只有一张照片。我想要一个实时流媒体视频作为我的背景，而不是图像

守则：

Html部分：

<canvas id=canvas width="1000" height="470"></canvas>

你希望1）有一块画布作为背景，2）在画布上播放视频，3）你希望能够在画布上画画。。。。。您已经向我们展示了如何画一条线并加载图像的示例代码。。。那与请求几乎没有关系。。你试过什么，哪一部分有问题？你可以看一下：或者一般来说，从“在画布上渲染视频”开始看

var ctx = canvas.getContext('2d'),
img = new Image;                
ctx.lineWidth = 7;
ctx.strokeStyle = '#c00';
ctx.fillStyle="#F9E5E5";
ctx.lineCap = 'round';




img.onload = start;
img.src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Solid_black.svg/2000px-Solid_black.svg.png';