浏览器拍照

浏览器调用电脑摄像头进行拍照

效果图：

实现原理=>

开启摄像头获取流，video加载实时影像，利用canvas绘画video的影像，canvas生成图片，转文件流上传或下载

实现拍照功能的主要三个要素：

1： navigator.mediaDevices.getUserMedia()  获取浏览器摄像头权限（包括录音设备）；

2：成功获取权限后，createObjectURL生成本地url赋值给video，开始播放视频；

3：点击拍照时，触发canvas对video的画面进行绘画。

有几种无法拍照的情况：

1：IE浏览器不支持navigator属性

2：访问路径为IP地址时

        浏览器有机制，在访问路径不安全时是不可以使用navigator属性的

        只有访问地址为localhost，https，file才可以

 3：摄像头被占用

下面贴出完整代码：