前面我们已经能够利用WebRTC的功能，通过浏览器打开摄像头，并把预览的图像显示在video元素中。
接下来我们尝试从视频中截取某一帧，显示在界面上。
先准备一下界面，摆上控件。下面是关键部分的代码。
video 用来预览视频
3个button，分别拿来打开摄像头，截取图片和清除记录
canvas 用来显示截取的图片
下面的div是拿来存放多个截取图片记录的。给它指定了grid，显示多个图片时候比较好看一些
照例，需要引入<code>adapter-latest.js</code>
准备实现功能。
和之前的打开摄像头类似，还是要用到<code>getUserMedia</code>方法。拿到视频流后交给video去播放。
拿到界面中的canvas，先预定一个尺寸（不预定也行）。
发起截取后，使用<code>getContext</code>获取到CanvasRenderingContext2D对象。然后调用它的<code>drawImage</code>方法。
把video中的视频帧绘制进去。
除了绘制这一个canvas，我们可以在每次发起（点击按钮）的时候创建新的canvas，把它们像相册一样展示出来。
子项的存放方式是div包裹canvas。先用<code>document.createElement("div")</code>创建<code>divItem</code>。
按照视频的宽高，计算调整<code>divItem</code>的大小，并设置style。
<code>document.createElement("canvas")</code>创建<code>c1</code>，它的宽高设置为前面<code>divItem</code>的宽高。然后把图片绘制进去。
<code>drawImage</code>时，前面传入的是视频（源）的范围，后面的4个参数是自己的绘制范围。
这样一个子项就生成完毕了。添加到我们准备好的列表（div）中。
清除div（<code>list</code>）里的子项。用一个循环获取并移除子项。
打开摄像头，显示视频。把视频绘制到canvas上。创建多个canvas，做成历史记录的效果。
主要利用的还是canvas的绘制方法。绘制的时候注意传入的参数，能够指定绘制的边界。
也就是说只绘制视频大小中的一部分也是可行的。
示例中用到的关键方法
<code>getUserMedia</code>
<code>getContext</code>
<code>drawImage</code>
<code>createElement</code>
简易的预览链接
一个软件工程师的记录