# live-camera

**Repository Path**: Yxiaohui/live-camera

## Basic Information

- **Project Name**: live-camera
- **Description**: 利用live-pusher组件制作的自定义相机
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 74
- **Forks**: 24
- **Created**: 2021-04-30
- **Last Updated**: 2025-11-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# live-camera

### 一、介绍
live-camera是使用[uni-app](https://uniapp.dcloud.io/) 框架的 [live-pusher 直播推流](https://uniapp.dcloud.io/component/live-pusher) 组件实现的自定义相机功能。  
可以实现应用内拍照以及拍照画面自定义元素等功能。

* 因为uni-app插件市场更新不大方便，最新代码请前往[Gitee](https://gitee.com/Yxiaohui/live-camera.git)下载。


### 二、功能预览

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

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

<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bf9bb89c-ff03-443b-804b-95facd220213/6249ccae-6290-4c0b-9537-c7b6c9dbb29d.jpg" width = "200" height = "400"  />

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

<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bf9bb89c-ff03-443b-804b-95facd220213/7a13c807-bc36-4487-b9a7-a162b8c8a0f8.jpg" width = "200" height = "400"  />

照片采集后如需要进行抠图替换背景等操作，请移步至[证件照制作相关的人像抠图/分割各家接口整理分析 - 点击跳转](https://blog.csdn.net/xiaohui_brook/article/details/116192669)。


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

<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bf9bb89c-ff03-443b-804b-95facd220213/861ad0ee-a377-4c96-a8b9-01dcedd2e382.jpg" width = "200" height = "400"  />


#### 4. 自定义相机
无需跳转出应用即可完成拍照，获得更好的用户体验。  

<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bf9bb89c-ff03-443b-804b-95facd220213/ec532c75-ce90-4ece-9e58-74fb78150e40.jpg" width = "200" height = "400"  />


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

通常调用原生相机当然可以满足这些功能的基础需求，但从整个体验上来讲，并不是很好。  
具体流程如下：
1. 用户点击添加照片按键
2. 应用调起原生相机应用
3. 用户在相机应用上拍照
4. 用户在相机应用上确认
5. 返回原来的应用页面

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

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

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

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

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

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


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

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

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