「持续兼容」微信H5选图（pictures&videos），拍照片&视频，真是头疼。由于手机浏览器或第三方浏览器过多，结合近期微信项目用户群P90，文中仅兼容微信浏览器进行实验分析。如果区别一般，使用调用手机文件浏览器，使用属性accept="image/*,video/*"区分调用相册，过滤相册中的文件类型，可以是图片的具体格式，也可以是视频的具体格式。capture="camera"属性用于调用camera，调用camera后由accept决定是否拍照或录像。那么，我们真的会按照上述标准来操作我们的手机吗？答案是不。在安卓和IOS上的表现是截然不同的。下面分别分析一下它们的区别。在Android和IOS上accept的表现增加accept属性。在IOS微信浏览器上，点击后会弹出弹窗选择原件，等待用户进行下一步操作。如果accept的属性值只有image/xxx->选项【图片库】【图片】，点击【图片】->唤醒相机，只能拍照，点击【图片库】->打开相册，只能选择图片，只能选择视频/xxx->选项【图片库】【视频】，点击【视频】->唤醒相机，只能录制视频，点击【图片库】->打开相册，只能选择video/xxx,video/xxx->选项【相册】【照片或视频】，点击【录像】->启动相机进行录像和拍照。点击【图片库】->打开相册，可以选择视频和图片。可以看出在IOS上的表现与属性值的预期是一致的。在安卓微信浏览器上，点击后会弹出原生选择弹框，确认用户下一步操作，然后点击【拍摄】和【从相册中选择】进行测试。accept="image/*"->唤起原来的【拍摄】和【从相册中选择】弹窗->点击【拍摄】激活相机-拍照功能，点击【从相册中选择】-只有图片可以选中，无视频，安卓手机accept="image/,video/"->唤起原生【拍摄】和【从相册中选择】弹窗->点击【拍摄】激活拍照功能，点击【从相册中选择】-只选择图片，不选择视频，android手机accept="video/,image/"->唤起原生【拍摄】和【从相册中选择】弹窗->点击【拍摄】即可开启拍照-拍照功能，点击【从相册中选择】-只能选择视频，不能选择图片，安卓手机accept="video/*"->唤起原生【拍摄】和【从相册中选择】弹窗->点击【拍摄】调出拍照录像功能，点击【从相册中选择】-只能选择视频，不能选择图片，安卓手机接受=“video/mp4,video/ogg,video/webm,video/mov"->唤起原生【拍摄】和【从相册中选择】弹窗->点击【拍摄】激活拍照功能，点击【从相册中选择】-只能选择视频和图片，安卓手机接受="image/jpg,image/jpeg,image/gif,image/png"->唤起原生【拍摄】和【从相册中选择】弹窗->点击【拍摄】激活拍照功能，点击【SelectfromAlbum]-只能选择视频和图片，安卓手机接受="image/jpg,image/jpeg,image/gif,image/png,video/mp4,video/ogg,video/webm,video/mov"->调出原生【拍摄】和【从相册中选择】弹窗->点击【拍摄】]唤醒相机-拍照功能，点击【从相册中选择】-可以选择视频和图片，安卓手机接受="image/*,video/mp4,video/ogg,video/webm,video/mov"->调出原生【拍摄】和【从相册中选择】弹窗->点击【拍摄】激活拍照功能，点击【从相册中选择】-可以选择视频和图片，安卓手机接受=“video/mp4,video/ogg,video/webm,video/mov,image/*"->唤起原生【拍摄】和【从相册中选择】弹窗->点击【拍摄】激活拍照功能，点击[fromalbum]Selectin]——可以选择视频和图片，安卓手机有点乱，好像没有严格遵守accept属性值规则为了方便查看对比，以表格形式整理出差异接受AndroidIOSNative[拍摄]Native[从照片中选择]Native[照片/视频]Native[图片库]"image/*"拍照，无视频拍照"image/,video/"拍照,拍照不带视频,录制图片,视频"video/,image/"拍照,拍照不带视频,录制图片,视频"video/*"录制视频,录制不带图片的视频"video/mp4,video/ogg,video/webm,video/mov"录制视频,图片录制video"image/jpg,image/jpeg,image/gif,image/png"拍照视频,拍照拍照图片"image/jpg,image/jpeg,image/gif,image/png,video/mp4,video/ogg,video/webm,video/mov"拍照视频,图片照片,视频picture,video"image/*,video/mp4,video/ogg,video/webm,video/mov"photographvideo,picturephoto,video图片,video"video/mp4,video/ogg,video/webm,video/mov,image/*"photovideo,picturephoto,videopicture,video我们可以从中尝试总结规则accept="video/xxx"，即只有video格式时，Android点击原生[shoot]调用摄像头的录像功能；accept="image/xxx[,video/xxx]",即只有图片格式或者图片加视频格式的情况下，Android点击原生的【Shoot】唤起相机功能；Android点击原生【Selectfromphoto】唤起相册，如果只想过滤视频，最好使用accept="video/*"，accept="image/*"onlyfor放映，而图片和视频并存。所有的视频和图片格式最好写成accept="image/*,video/xxx";Android和IOS上capture的表现在上面已有的accept属性中添加capture属性，点击后可以直接调用camera。相机分为拍照和录像两种模式。相似地，我们分别在Android和IOS的微信浏览器上测试结果如下：接受Android【拍摄】IOS【拍摄】"image/*"拍照拍照"image/,video/"拍照录像,拍照aphoto"video/,image/"拍照和录像,Takephoto"video/*"videovideo"video/mp4,video/ogg,video/webm,video/mov"videovideo,photo"image/jpg,image/jpeg,image/gif,image/png"photovideo,photo"image/jpg,image/jpeg,image/gif,image/png,video/mp4,video/ogg,video/webm,video/mov"拍摄picturesandvideo,takepictures"image/*,video/mp4,video/ogg,video/webm,video/mov"拍照录像,拍照"video/mp4,video/ogg,video/webm,video/mov,image/*”来拍摄图片和视频，拍照的时候可以找到，这里可以直接唤起拍摄，之前通过原生选项框【拍摄】（安卓）或者【视频】（IOS）都有同样的表现！实现选择照片（pictures&videos）和photos&videos根据上面的实验可以发现，在Android中并没有可以实现的accept和capture值的组合。需要在相册中选择图片和视频，直接拍照和录像的情况下，可以添加人为选择弹窗或者分割拍摄视频。像这样点击照片图标，安卓手机会弹出原来的选项框。可以【从相册中选择】图片和视频，也可以【拍摄】图片，点击拍摄图标只支持视频录制。最终思路是，在Android微信环境下，点击图片图标触发的input的accept值为video/mp4、video/ogg、video/webm、video/mov、image/*，这样后续【拍摄】会调动相机拍照，调出相册可以选择图片和视频；点击拍摄图标触发的input的accept值为video/mp4、video/ogg、video/webm、video/mov，以调用摄像头录像功能；伪代码实现constvideoAccept='video/mp4,video/ogg,video/webm,video/mov'//[图片]acceptconstaccept=`${videoAccept},image/*`//[拍摄]acceptconstUA=window.navigator.userAgentconstisAndroid=/Android/i.test(UA)constisWechat=/MicroMessenger/i.test(UA)const{isAndroid,isWechat}=TerminalconstcaptureAccept=isAndroid&&isWechat?videoAccept:${videoAccept},image/*`结束~
