WebRTC从摄像头获取图片传入canvas

前面我们已经能够利用WebRTC的功能，通过浏览器打开摄像头，并把预览的图像显示在video元素中。
接下来我们尝试从视频中截取某一帧，显示在界面上。

html

先准备一下界面，摆上控件。下面是关键部分的代码。

<video playsinline autoplay></video>
<button id="showVideo">打开摄像头</button>
<button id="takeSnapshot">截取</button>
<button id="clearList">清除记录</button>
<canvas id="mainCanvas"></canvas>
<div id="list" style="display: grid;