更新记录

1.0.3（2021-07-07）下载此版本

新增水印相机基础示例。

1.0.2（2021-05-24）下载此版本

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

1.0.1（2021-04-30）下载此版本

新增人像采集相机模板。

平台兼容性

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. 自定义相机

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

三、制作的目的

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

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

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

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

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

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

四、插件特点

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

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

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

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

五、注意实现

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

六、后续

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

七、更多