某些场景下,需要 H5 脱离应用来使用手机系统的摄像头用于照相或者拍摄。
一、方案
目前而言,移动端使用 H5 调用摄像头有两种方案:
getUserMedia Api
这种方法的兼容很差,基本不考虑
input type=file capture
这种方法是目前的主流,兼容 IOS 和 Android,但是 Android 无法调用前置摄像头
其实真正费时间的就是方案的抉择,了解的方案的坑以及市面的流行方案后就可以开始写代码了(代码很简单,百度一大推)
二、案例
PS:非常重要的一点,如果是在 APP 的 webview 下使用该 API,需要APP端在代码层面开通相关的权限(相机、相册、录音,缺一不可),否则会出现闪退或者点击 input 无效的情况
三、代码实现
3.1 拍照
3.2 视频
3.3 其他处理
调用摄像头之后,一般会进行处理
(1)拍照
获取基本信息:file 属性基本满足
压缩:
import lrz from 'lrz';
/**
* 压缩 file
* @param {[type]} file [文件]
* @param {Number} setWidth [压缩大小]
* @return {[type]} [压缩后的文件]
*/
compressFile(file, setWidth = 750) {
return lr