更新记录

1.0.3(2021-07-07)

新增水印相机基础示例。

1.0.2(2021-05-24)

添加身份证照片采集相机和证件照采集相机。

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

live-camera

一、介绍

live-camera是使用uni-app 框架的 live-pusher 直播推流 组件实现的自定义相机功能。
可以实现应用内拍照以及拍照画面自定义元素等功能。

  • 因为uni-app插件市场更新不大方便,最新代码请前往Gitee下载。

二、功能预览

1. 水印相机

在某些情况下,要求照片显示拍摄时间、地点、用户等信息时,需要使用水印相机。

可以根据实际需求对示例项目中的方法进行修改,进行动态文字参数、图片图标等方式制作水印。

2. 证件照相机

在采集用户真实头像、采集证件照片等情况下,需要使用证件照采集相机。

照片采集后如需要进行抠图替换背景等操作,请移步至证件照制作相关的人像抠图/分割各家接口整理分析 - 点击跳转

3. 身份证相机

在做实名认证或其他高敏感操作时,需要用到身份证采集相机。

4. 自定义相机

无需跳转出应用即可完成拍照,获得更好的用户体验。

三、制作的目的

在绝大多数应用中,我们会遇到拍摄照片的功能需求。

通常调用原生相机当然可以满足这些功能的基础需求,但从整个体验上来讲,并不是很好。
具体流程如下:

  1. 用户点击添加照片按键
  2. 应用调起原生相机应用
  3. 用户在相机应用上拍照
  4. 用户在相机应用上确认
  5. 返回原来的应用页面

背地里我们还需要对照片进行压缩操作。

原生自定义相机虽好,但是开发复杂,门槛稍高,不是每个人都适合。

那能不能在不使用原生的情况下,让用户的拍照体验和快捷程度有提升呢?
在尝试使用直播推流组件的快照功能后,live-camera就应运而生。

四、插件特点

  • 适合普通的照片采集,及拍及用,不会在应用之间来回跳转,可以提高用户使用体验。
  • 它使用直播推流的快照事件,图片大小合适手机端观看,原图无需单独压缩体积都不会很大,几百KB左右(受屏幕分辨率影响)。
  • 可以和业务页面集成使用,如在个人信息页面直接拍摄头像,甚至可以做到都不需要重新打开一个页面,真正做到化繁为简。
  • 它的拍照画面上你可以直接调整nvue页面内容,随意指定提示内容或者拍摄指示线等,无需接触原生代码,常用场景如拍摄证件照、身份证等。
  • 它不仅可以在Android和iOS端上使用,还可以适配到微信小程序上,达到三端共用的效果(微信小程序快照方法无响应解决办法)。

但是,此方法图片分辨率受限于用户手机屏幕分辨率,度图片分辨率有强制要求的慎用。

还有更多玩法等着你去发现。

  • 你还可以优化一下相机权限的设置,因为Android上是异步授权,第一次会出现相机没正常打开的情况。
  • 你还可以通过beauty参数设置美颜功能。
  • 你还可以通过aspect参数设置画面比例。

五、注意实现

  • 因为nvue页面对canvas的支持不是很好,弄起来毕竟麻烦,所以暂时照片的剪切和水印都是在index页面上处理的。
  • 目前仅仅使用了安卓手机进行开发,虽然苹果和小程序都能支持,但暂未针对性的做优化,空了再来。

六、后续

  • 如果以后官方支持了live-pusher的录播能力,那说不定还能实现点击拍照长按录视频的功能。
  • 如果以后官方优化了live-pusher的对焦功能,就可以处理部分机型设置自动对接无效的问题。

七、更多

如你需要更多拍摄模板又不想自己搞,可以邮箱联系xiaohui.brook@foxmail.com付费定制。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

相机、麦克风

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问