H5前端调用摄像头拍照
发布网友
发布时间：2022-10-13 19:55
共1个回答
热心网友
时间：2023-11-10 15:10
就需求本身而言，若是交给Native同事去开发，就是一个自定义相机的功能。可能要看怎么阻止系统拍摄照片后不进手机系统相册。
对于此需求若是前端来实现的话，也可以实现。大概就是调起摄像头后，获取当前画面，然后截取当前帧的画面，转换成图片保存。基本步骤如下：
【思路问题不大，但是实际这样开发时，还会有以下几个问题：】
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，多个以逗号分隔
