背景
hello,大家好,我是小王,最近有这么个需求,需要让嵌入企业微信小程序webview中的H5实现上传图片视频,并且支持拍照和录像,先说结论,结果并不是最完美的,只实现了上传视频和图片,IOS支持拍照和录像,安卓只支持拍照。
解决过程
1.使用企业微信提供的JS-SDK,首先引入<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
,查找文档发现只有wx.chooseImage()
拍照或从手机相册中选图这个接口,并没有上传视频的相关接口。
2.使用input type="file"
理想情况下应该按照如下开发webview:
-
当accept="image/*"时,capture="user"调用前置照相机,capture="其他值",调用后置照相机
-
当accept="video/*"时,capture="user"调用前置录像机,capture="其他值",调用后置录像机
-
当accept="image/ ,video/ ",capture="user"调用前置摄像头,capture="其他值",调用后置摄像头,默认照相,可切换录像
-
当input没有capture时,根据accppt类型给出文件夹选项以及摄像头或者录音机选项
-
input含有multiple时访问文件夹可勾选多文件,调用系统摄像头或者录音机都只是单文件
-
无multiple时都只能单文件
<input type="file" accept="image/*" capture="camera"> <input type="file" accept="video/*" capture="camcorder">
IOS最遵守遵守HTML5规范,其次是X5内核,安卓的webview基本忽略了capture。所以在这个企业微信中,上述代码IOS全部都是直接调用相机,安卓则是打开对应文件,不能调用摄像头。
3.input
只写type="file"
在安卓中直接调起文件管理,IOS则是弹出一个包含照片图库、拍照或录像、选取文件的弹窗
4.采用小程序开发
由上图可得虽然小程序有提供可以拍照录像的API,但是有一点,在企业微信小程序中又不支持上传文件,这个方案直接PASS
最终方案
安卓: 拍照使用企业微信jssdk中的wx.chooseImage()
,选择图片和视频使用input type="file"
,设置不同的accept
调起不同的文件夹
IOS: 使用input type="file"
最后
大家有什么更好的解决方案也可以讨论讨论