关于前端:持续兼容微信H5选择照片图片视频及拍照录像

前言

做过H5调用手机相册或者拍照的同学可能深有体会，在不同型号手机和不同的浏览器上体现各有差别，实属头疼。因为手机自带浏览器或者第三方浏览器切实太多，联合最近正在做的我的项目用户群体P90在微信上，文本单从兼容微信浏览器方面进行试验剖析。

差别体现

个别的，应用<input type="file" />调用其手机的文件资源管理器，通过accept="image/*,video/*"属性辨别调用相册，相册中筛选文件类型，能够是图片具体的格局，或者是视频的具体格局。采纳capture="camera"属性唤起相机，而在唤起相机后，是进行拍照还是录像是由accept决定。
而后，真的会如上规范定义操作咱们的手机吗？答案是否定的，Android和IOS上的体现差别较大，上面别离剖析一下它们的差异性。

accept在Android和IOS的体现

增加accept属性，在IOS微信浏览器上，点击后，会弹窗原生抉择，待用户下一步操作，如果accept的属性值

• 仅有image/xxx -> 选项【照片图库】【拍照】，点击【拍照】-> 唤起相机，只能拍照，点击【照片图库】-> 关上相册，只能抉择图片
• 仅有video/xxx -> 选项【照片图库】【录像】，点击【录像】-> 唤起相机，只能录像，点击【照片图库】-> 关上相册，只能抉择视频
  
• 有video/xxx,video/xxx -> 选项【照片图库】【拍照或录像】，点击【录像】-> 唤起相机，能录像和拍照，点击【照片图库】-> 关上相册，能抉择视频和图片
  
  由此可知，IOS上的体现与属性值的预期统一。
  在Android微信浏览器上，点击后，会弹出原生的抉择弹框，确认用户下一步操作
  
  接下来别离点击【拍摄】和【从相册抉择】进行测试。
• accept="image/*" -> 唤起原生 【拍摄】 和 【从相册中抉择】弹窗 -> 点击【拍摄】唤起相机-拍照性能，点击【从相册中抉择】-只能抉择图片，没有视频，安卓手机
• accept="image/,video/" -> 唤起原生 【拍摄】 和 【从相册中抉择】弹窗 -> 点击【拍摄】唤起相机-拍照性能，点击【从相册中抉择】-只能抉择图片，没有视频，安卓手机
• accept="video/,image/" -> 唤起原生 【拍摄】 和 【从相册中抉择】弹窗 -> 点击【拍摄】唤起相机-拍照性能，点击【从相册中抉择】-只能抉择视频，没有图片，安卓手机
• accept="video/*" -> 唤起原生 【拍摄】 和 【从相册中抉择】弹窗 -> 点击【拍摄】唤起相机-摄像性能，点击【从相册中抉择】-只能抉择视频，没有图片，安卓手机
• accept="video/mp4,video/ogg,video/webm,video/mov" -> 唤起原生 【拍摄】 和 【从相册中抉择】弹窗 -> 点击【拍摄】唤起相机-摄像性能，点击【从相册中抉择】-只能抉择视频和图片，安卓手机
• accept="image/jpg,image/jpeg,image/gif,image/png" -> 唤起原生 【拍摄】 和 【从相册中抉择】弹窗 -> 点击【拍摄】唤起相机-拍照性能，点击【从相册中抉择】-只能抉择视频和图片，安卓手机
• accept="image/jpg,image/jpeg,image/gif,image/png,video/mp4,video/ogg,video/webm,video/mov" -> 唤起原生 【拍摄】 和 【从相册中抉择】弹窗 -> 点击【拍摄】唤起相机-拍照性能，点击【从相册中抉择】-能够抉择视频和图片，安卓手机
• accept="image/*,video/mp4,video/ogg,video/webm,video/mov" -> 唤起原生 【拍摄】 和 【从相册中抉择】弹窗 -> 点击【拍摄】唤起相机-拍照性能，点击【从相册中抉择】-能够抉择视频和图片，安卓手机
• accept="video/mp4,video/ogg,video/webm,video/mov,image/*" -> 唤起原生 【拍摄】 和 【从相册中抉择】弹窗 -> 点击【拍摄】唤起相机-拍照性能，点击【从相册中抉择】-能够抉择视频和图片，安卓手机

有点乱，而且貌似不是严格遵循accept属性值法则。为了不便查看和比对区别，梳理成表格的模式

从中咱们能够尝试总结法则

• accept="video/xxx"，即仅有视频格式状况下，Android点击原生【拍摄】唤起相机是录像性能；
• accept="image/xxx[,video/xxx]"，即仅有图片格式或者图片加视频格式状况下，Android点击原生【拍摄】唤起相机都是照相性能；

• Android点击原生【从照片抉择】唤起相册，若要想只筛选视频，最好应用accept="video/*"，只筛选最好应用accept="image/*"，而图片和视频同时共存，视频和图片格式最好写全或者accept="image/*,video/xxx"；

  capture在Android和IOS的体现

  <input type="file" />在以上已有accept属性下，加上capture属性，点击后可间接唤起相机，相机分为拍照和录像两种模式，同样的，咱们别离测试Android和IOS的微信浏览器上的后果如下

能够发现，这里间接唤起拍摄和之前通过原生选项框中【拍摄】（Android）或者【录像】（IOS）的体现统一！

实现抉择照片（图片&视频）及拍照&录像

综合上述试验能够发现，没有一种accept和capture的值的组合能够实现在Android中，既要在相册中能够抉择图片和视频，又能够间接拍照和录像的状况。
这样能够多一个人为抉择弹窗或者将拍摄视频拆离开，相似这样

点击照片图标，Android手机弹出原始选项框，能够【从相册抉择】图片和视频，也能够【拍摄】图片，点击拍摄图标，单纯反对录像。

最终的思路是
在Android微信环境下，点击照片图标触发的input的accept值为video/mp4,video/ogg,video/webm,video/mov,image/*使其后续【拍摄】唤起相机拍照，唤起相册能够抉择图片和视频；点击拍摄图标触发的input的accept值为video/mp4,video/ogg,video/webm,video/mov，使其唤起相机录像性能；
伪代码实现

<uploader :accept="accept" label="照片" icon="picture" /><uploader :accept="captureAccept" capture="camera" label="照片" icon="camera" />const videoAccept = 'video/mp4,video/ogg,video/webm,video/mov'// 【照片】acceptconst accept = `${videoAccept},image/*`// 【拍摄】acceptconst UA = window.navigator.userAgentconst isAndroid = /Android/i.test(UA)const isWechat = /MicroMessenger/i.test(UA)                                      const { isAndroid, isWechat } = Terminalconst captureAccept = isAndroid && isWechat ? videoAccept : ${videoAccept},image/*`

完~