H5前端调用摄像头拍照

需求：
最近有个移动端开发需求，用户打开相机点击拍照按钮，就会拍一张照片（照片不进手机系统相册），显示在页面下部小视窗。（界面大概如下）

image.png

就需求本身而言，若是交给Native同事去开发，就是一个自定义相机的功能。可能要看怎么阻止系统拍摄照片后不进手机系统相册。
对于此需求若是前端来实现的话，也可以实现。大概就是调起摄像头后，获取当前画面，然后截取当前帧的画面，转换成图片保存。基本步骤如下：

image.png

image.png

image.png

【思路问题不大，但是实际这样开发时，还会有以下几个问题：】
1. 交互体验不好
window.navigator.mediaDevices.getUserMedia浏览器BOM api时，需要用户手动点击确认，允许打开摄像头。交互体验不太好。
2. 画面画质问题
前端实现本质上和截图差不多，画面质量没有原生拍照效果好。
3. 浏览器API mediaDevices为undefined问题
window.navigator.mediaDevices在非以下三种情况下时，会为undefined，所以当为非https的域或者非本地localhost域，则都无法使用。
a. localhost 域
b. 开启了 HTTPS 的域
c. 使用 file:/// 协议打开的本地文件
【若想在http下也可使用，怎么办？？？】
通过设置chrome浏览器，开启相应flag可以实现。
a.. chrome浏览器输入chrome://flags/#unsafely-treat-insecure-origin-as-secure
b. 将该 flag 切换成 enable 状态
c. 输入框中填写需要开启的域名，譬如example.com，多个以逗号分隔

image.png