uniapp中webview嵌套的H5如何拍照录像和上传视频和图片,且处理安卓和苹果IOS的差异的方案

1,379 阅读2分钟

背景

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.采用小程序开发

image.png 由上图可得虽然小程序有提供可以拍照录像的API,但是有一点,在企业微信小程序中又不支持上传文件,这个方案直接PASS

最终方案

安卓: 拍照使用企业微信jssdk中的wx.chooseImage(),选择图片和视频使用input type="file",设置不同的accept调起不同的文件夹

IOS: 使用input type="file"

最后

大家有什么更好的解决方案也可以讨论讨论