页面利用getUserMedia来调用摄像头拍照并且显示

参考资料：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
之前没有接触过需要调用摄像头的需求，所以只能通过网上搜索寻找做法了；开始做之前的问题：

• 怎么调用摄像头？
• 怎么把摄像头拍摄到的画面显示到页面上？
• 怎么从画面截图完成拍照功能？

在网上搜索以后就发现特别简单：

-navigator.mediaDevices.getUserMedia()就可以请求开启摄像头；
-如果用户给了权限，那么返回的异步函数里面的值就是摄像的内容，可以把值赋值给video.srcObject,利用video标签来展示摄像的内容；
-拍照的话也是非常简单，每次拍照就把video的内容直接利用canvas展示出来就行了，然后canvas可以通过toDataURL转换为图片；

需求完成过程中一些个人理解：

• navigator.mediaDevices.getUserMedia()的参数根据资料来看必须有video、audio至少一个为true开启，video可以直接设置video:{ width: 800, height: 768 }，里面的width和height是分辨率，就是摄像头优先采取这个分辨率摄像，然后video自身还有style的宽高，这里设置的分辨率其实也可以看成比例，比如设置成video:{ width: 5, height: 1 }，那么摄像内容的宽高比就为5：1；
• 如何关闭摄像头：调用回调函数下的.getTracks()方法，就可以得到开启了的摄像头和音频的数组，每个值使用下面的.stop()