在许多应用中,我们常常需要实现拍摄照片的功能。通常情况下,调用原生相机可以满足基本需求,但从用户体验的角度来看,并不是十分理想。这就引出了一个问题:能否在不使用原生相机的情况下,提升用户拍照的体验和效率?

针对上述问题,使用uni-app框架的live-pusher直播推流组件开发了一个名为"live-camera"的自定义相机功能。这个功能包含了应用内拍照以及拍照画面自定义元素等特性,适用于身份证采集、证件照拍摄、水印照片拍摄等场景。

功能预览

1. 水印相机

当需要在照片上显示拍摄时间、地点、用户等信息时,可以使用水印相机功能。通过修改示例项目中的方法,可以实现动态文字参数、图片图标等方式制作水印。

2. 证件照相机

在采集用户真实头像或者其他证件照片的场景下,可以使用证件照相机功能。如果需要对采集的照片进行抠图替换背景等操作,可以参考相关的人像抠图/分割接口。

3. 身份证相机

在进行实名认证或其他高敏感操作时,可以使用身份证相机功能进行身份证采集。

4. 自定义相机

通过live-camera,用户无需跳转出应用即可完成拍照,从而获得更好的用户体验。

制作的目的

当我们需要在应用中实现拍摄照片的功能时,通常的流程是这样的:用户点击添加照片按钮,应用调起原生相机应用,用户在相机应用上拍照并确认后返回原来的应用页面。同时,我们还需要对照片进行压缩操作。

尽管原生自定义相机可以满足需求,但开发复杂且门槛较高,并不适合每个人。那么,在不使用原生相机的情况下,是否能提升用户的拍照体验和效率呢?经过尝试使用直播推流组件的快照功能后,"live-camera"应运而生。

插件特点

"live-camera"具有以下特点:

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

有几点需要注意实现"live-camera"功能:

  1. nvue页面对canvas的支持并不完善,因此目前照片的剪切和水印处理是在index页面上进行的。虽然该功能可以在Android、iOS和小程序上使用,但还未针对性地进行优化。
  2. 对于Android平台,由于权限授权是异步的,首次打开相机可能会出现相机无法正常打开的情况。可以进一步优化相机权限的设置。
  3. 可通过beauty参数来设置美颜功能,进一步提升拍摄效果。
  4. 可通过aspect参数来设置画面比例,以适应不同的需求。

未来的发展方向包括:

  • 如果官方支持了live-pusher的录播能力,可以实现点击拍照和长按录制视频的功能。
  • 如果官方优化了live-pusher的对焦功能,就能解决部分机型设置自动对焦无效的问题。

总之,"live-camera"是一个强大且功能丰富的插件,为用户带来了更好的拍照体验。无论是水印相机、证件照相机还是身份证相机,都可以轻松实现,并且方便集成到业务页面中。而且,它不仅适用于Android和iOS端,还可以在微信小程序中使用。尽管只是使用了Android手机进行开发,但未来还有更多的优化和适配工作可以进行。"live-camera"的出现让拍照变得简单、快捷,并大大提升了用户体验。无论是普通用户还是开发者,都可以发现更多有趣的玩法。