效果如下图，和浏览器自己获取的一模一样。
注意：上图的实例中，浏览器地址栏最右边的摄像头标识是需要使用 getUserMedia()函数时才会出现。
这时候可以通过浏览器给出的菜单下拉选择设备。
3.设置参数，预览
我们可以通过代码来指定使用哪个摄像头和麦克风设备。也可以通过代码设置视频的宽、高和帧率。
代码如下：
输出的视频流通过blob对象链接绑定到video标签输出。
这个deviceId就是从上文设备枚举 enumerateDevices() 获取到的。
两种设备，如果有一个deviceId填写不正确，就会报出一个DevicesNotFoundError的错误。而且一旦指定了设备后，浏览器自己的设备选择就会变成灰色不可选。
视频的宽高，并不会因为填写的数值比例不合法而失真。比如你设定了宽度30，高度100，那么他会从视频中心截取 30x100 的画面，而不是把原画面挤压到这个30x100的尺寸。
效果如下：
如果您的预览一片漆黑，或者只有一个小黑点，那么说明您的摄像头正在被占用...
吐槽：这个getUserMedia()函数的参数，w3的官方文档链接如下：
https://www.w3.org/TR/mediaca...
可是Chrome并没有遵循它，而且差距还挺大...
视频保存
1. 格式支持
Chrome浏览器是大力推广webm的视频格式的。可以用MediaRecorder.isTypeSupported("video/webm")来测试是否支持这种类型的编码。如果返回true，那么我们录制的视频就可以被保存为这种指定的格式。如果不指定，那么将会使用浏览器自动指定的文件格式。文档原话如下
If this paramater is not specified, the UA will use a platform-specific default format.
但是这个默认值却无法直接获取，全靠猜...
2. 视频录制 MediaRecorder
我们使用 MediaRecorder来录制视频，参数是通过getUserMedia()获取的媒体流。
通过绑定ondataavailable事件，来获取视频片段数据，并在内存中累积。
录制的开始和结束分别使用 start和stop 函数。
执行start之后会周期性触发ondataavailable事件。
执行stop之后会停止触发ondataavailable事件。
录制结束后，把累计的片段数据保存为blob对象，并从浏览器下载存为视频文件。
代码如下：
