• uniapp 小程序 身份证 和人脸视频拍摄

     使用前提：

        已经在微信公众平台的用户隐私协议，已经选择配置“摄像头，录像”等权限

    开发背景：客户需要使用带有拍摄边框的摄像头 ，微信小程序的方法无法支持，使用camera修改

       身份证正反面：

    1. <template>
    2.   <view :style="{ height: windowHeight + 'px' }">
    3.     <camera
    4.       mode="normal"
    5.       :device-position="devicePosition"
    6.       flash="off"
    7.       :style="{ height: cameraHeight + 'px' }"
    8.     >
    9.       <cover-view class="controls" style="width: 100%;height: 100%;">
    10.         
    11.         <cover-image
    12.           v-show="!idcardFrontSide"
    13.           class="w569-h828"
    14.           src="/static/images/index/camera_module_side.png"
    15.         />
    16.       cover-view>
    17. 			
    18. 			  <cover-image
    19. 			    v-show="!idcardFrontSide"
    20. 			    class="w569-h828"
    21. 			    src="/static/images/index/camera_module_side.png"
    22. 			  />
    23. 			cover-view>
    24.     camera>
    25.     <view class="bottom font-36-fff">
    26.       <view class="wrap">
    27.         <view class="back" @click="switchBtn">切换view>
    28.         <view @click="takePhoto">
    29.           <image class="w131-h131" src="/static/images/index/take_camera_btn_icon.png">
    30.           image>
    31.         view>
    32.         <view @click="chooseImage">
    33.           相册
    34.         view>
    35.       view>
    36.     view>
    37.   view>
    38. template>
    39.  
    40. <script>
    41.   export default {
    42.     data() {
    43.       return {
    44.         cameraContext: {},
    45.         windowHeight: '',
    46. 				cameraHeight: '',
    47.         idcardFrontSide: true,
    48.         devicePosition: 'front',
    49.       };
    50.     },
    51.     onLoad(options) {
    52.       if(uni.createCameraContext) {
    53.         this.cameraContext = uni.createCameraContext()
    54.       }else {
    55.         // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
    56.         uni.showModal({
    57.             title: '提示',
    58.             content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
    59.         })
    60.       }
    61.     },
    62.     onShow() {
    63.       const systemInfo = uni.getSystemInfoSync()
    64.       this.windowHeight = systemInfo.windowHeight
    65.       this.cameraHeight = systemInfo.windowHeight - 80
    66.     },
    67.     methods: {
    68.       // 拍照
    69.       takePhoto() {
    70.         uni.showLoading({
    71.           title:'拍摄中'
    72.         })
    73.         this.cameraContext.takePhoto({
    74.           quality: 'high',
    75.           success: (res) => {
    76.             uni.showToast({
    77.               title:'拍照成功',
    78.               icon: 'none',
    79.               duration: 1200
    80.             })
    81.           },
    82.           fail: (err) => {
    83.             uni.showToast({
    84.               title:'拍照失败，请检查系统是否授权',
    85.               icon: 'none',
    86.               duration: 1200
    87.             })
    88.           }
    89.         })
    90.       },
    91.       // 从相册选取
    92.       chooseImage() {
    93.         uni.chooseImage({
    94.           count: 1,
    95.           sizeType: ['original', 'compressed'],
    96.           sourceType: ['album'],
    97.           success: (res) =>  {},
    98.           fail: (err) => {}
    99.         });
    100.       },
    101.      },
    102. 		 // 切换摄像头
    103.      switchBtn() {
    104. 				if(this.devicePosition === 'back') {
    105. 					this.devicePosition = 'front'
    106. 				} else {
    107. 					this.devicePosition = 'back'
    108. 				}
    109. 			},
    110.   }
    111. script>
    112.  
    113. <style lang="less" scoped>
    114.   .icon-w569-h828 {
    115.     width: 569rpx;
    116.     height: 828rpx;
    117.   }
    118.  
    119.   .controls {
    120.     position: relative;
    121.     display: flex;
    122.     align-items: center;
    123.     justify-content: center;
    124.   }
    125.  
    126.   .bottom {
    127.     width: 100%;
    128.     background-color: #000;
    129.  
    130.     .wrap {
    131.       display: flex;
    132.       align-items: center;
    133.       justify-content: space-between;
    134.       height: 80px;
    135.       padding: 0 73rpx;
    136.     }
    137.   }
    138.  
    139.   .w569-h828 {
    140.     width: 569rpx;
    141.     height: 828rpx;
    142.   }
    143.   
    144.   .w131-h131 {
    145.     width: 131rpx;
    146.     height: 131rpx;
    147.   }
    148.  
    149.   .font-36-fff {
    150.     font-size: 36rpx;
    151.     color: #fff;
    152.   }
    153. style>

    人脸视频：

    1. <template>
    2. 	
    3. 	<view class="container background-color-474747" :style="{height: windowHeight + 'px'}">
    4. 		<view class="video-wrap wpercent-100 text-align" :style="{height: takeVideoHeight + 'px'}" v-if="tipShow">
    5. 			<view class="content-wrap">
    6. 				<view class="font-36-fff font-weight">请保持声音清晰，话术完整，露出五官view>
    7. 				<view class="padding-top-20 font-36-fff font-weight">不符合以上要求，需重新拍摄view>
    8. 				<view class="padding-top-35 padding-bottom-30 font-24-FF2323 font-weight">点击下方按钮开始拍摄view>
    9. 				<image class="tips-icon" src="/static/images/index/take_video_tips.png">image>
    10. 				<text class="know" @click="startCenterCountDown">知道了text>
    11. 			view>
    12. 		view>
    13. 		<view class="video-wrap wpercent-100" v-if="cameraShow" >
    14. 			<view v-if="!centerCountDownShow" class="number">{{ second }}sview>
    15. 			<camera 
    16. 				mode="normal"
    17. 				class="wpercent-100"
    18. 				:device-position="devicePosition" 
    19. 				:style="{height: takeVideoHeight + 'px'}">
    20. 				
    21. 				<cover-view class="center-count-down-wrap" v-if="centerCountDownShow && centerCountDownValue != 4">
    22. 					<cover-view :class="centerCountDownValue === '开始' ? 'center-count-down-start' : 'center-count-down'">{{ centerCountDownValue }}cover-view>
    23. 				cover-view>
    24. 				
    25. 				<cover-image v-if="!centerCountDownShow" class="controls" src="/static/images/index/take_video_back.png"/>
    26. 				<cover-view class="font-36-fff font-weight absolute-one-font" v-if="!centerCountDownShow">
    27. 					正视镜头录制一段匀速朗读下方数字的视频
    28. 				cover-view>
    29. 				<cover-view class="font-36-fff font-weight absolute-two-font" v-if="!centerCountDownShow">
    30. 					1234
    31. 				cover-view>
    32. 			camera>
    33. 		view>
    34. 		<transition name="fade" :duration="{ enter: 500, leave: 800 }">
    35. 			<view class="bottom" v-if="showBottom">
    36. 				<view class="wrap">
    37. 					<view class="back" @click="backTwoStep">
    38. 						<image class="w55-h49" src="/static/images/index/back_before_icon.png">image>
    39. 					view>
    40. 					
    41. 					<view class="take" @click="startCenterCountDown" v-if="tipShow">		
    42. 						<image class="w100-h100" src="/static/images/index/take_btn_icon.png">image>
    43. 					view>
    44. 					
    45. 					<view class="take" @click="stopRecord" v-if="cameraShow && !centerCountDownShow">
    46. 						<image class="w100-h100" src="/static/images/index/take_btn_icon.png">image>
    47. 					view>
    48. 					<view class="switch" @click="switchCamera">
    49. 						<image class="w69-h56" src="/static/images/index/switch_camera_icon.png">image>
    50. 					view>
    51. 				view>
    52. 			view>
    53. 		transition>
    54. 	view>
    55. template>
    56.  
    57. <script>
    58. 	export default {
    59. 		data() {
    60. 			return {
    61. 				windowHeight: '',
    62. 				takeVideoHeight: '',
    63. 				tipShow: true,
    64. 				showBottom: true,
    65. 				centerCountDownShow: false,
    66. 				cameraShow: false,
    67. 				centerCountDownValue: 4,
    68. 				cameraContext: {},
    69. 				devicePosition: 'front',
    70. 				second: 9,
    71. 				setTimer: '',
    72. 			};
    73. 		},
    74. 		onLoad() {
    75. 			if(uni.createCameraContext) {
    76. 				setTimeout(() => {
    77. 					this.cameraContext = uni.createCameraContext();
    78. 				},200)
    79. 			}else {
    80. 				// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
    81. 				uni.showModal({
    82. 					title: '提示',
    83. 					content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
    84. 				})
    85. 			}
    86. 		},
    87. 		created() {
    88. 			const systemInfo = uni.getSystemInfoSync()
    89.       this.windowHeight = systemInfo.windowHeight
    90. 			this.computedHeight(80)
    91. 		},
    92. 		methods: {
    93. 			// 计算height
    94. 			computedHeight (number) {
    95.         const systemInfo = uni.getSystemInfoSync()
    96. 				this.takeVideoHeight = systemInfo.windowHeight - number
    97. 			},
    98. 			// 开始倒计时 3,2,1,开始
    99. 			startCenterCountDown () {
    100. 				this.computedHeight(0)
    101. 				this.setBoolean(false)
    102. 				this.centerCountDown()
    103. 			},
    104. 			// 中间倒计时
    105. 			centerCountDown() {
    106. 				let promise = new Promise((resolve, reject) => {
    107. 					let setTimer = setInterval(() => {
    108. 						if(this.centerCountDownValue === 1) {
    109. 							this.centerCountDownValue = '开始'
    110. 							resolve(setTimer)
    111. 						} else {
    112. 							this.centerCountDownValue = this.centerCountDownValue - 1
    113. 						}
    114. 						if(this.centerCountDownValue === 2) {			// this.cameraContext.startRecord 有延迟执行的问题，所以需要提前半秒执行
    115. 							setTimeout(() => {
    116. 								this.startRecord()
    117. 							}, 1200)
    118. 						}
    119. 					}, 1000)
    120. 				})
    121. 				promise.then((setTimer) => {
    122. 					clearInterval(setTimer)
    123. 					this.computedHeight(80)
    124. 					this.showBottom = true
    125. 					this.centerCountDownShow = false
    126. 				})
    127. 			},
    128. 			// 开始录像
    129. 			startRecord() {
    130. 				this.cameraContext.startRecord({
    131. 					success: (res) => {
    132. 						this.rightTopCountDown()
    133. 					},
    134. 					fail: (err) => {
    135. 						uni.showToast({
    136. 							title: '录像失败，请重试',
    137. 							icon: 'none',
    138. 							duration: 1200
    139. 						})
    140. 					}
    141. 				})
    142. 			},
    143. 			// 右上角倒计时
    144. 			rightTopCountDown() {
    145. 				let promise = new Promise((resolve, reject) => {
    146. 					this.setTimer = setInterval(() => {
    147. 						this.second = this.second - 1
    148. 						if (this.second <= 0) {
    149. 							this.stopRecord()
    150. 							resolve(this.setTimer)
    151. 						}
    152. 					}, 1000)
    153. 				})
    154. 				promise.then((setTimer) => {
    155. 					clearInterval(setTimer)
    156. 					this.second = 9
    157. 				})
    158. 			},
    159. 			// 结束录像
    160. 			stopRecord() {
    161. 				uni.showToast({
    162. 					title: '结束录像，正在处理视频',
    163. 					icon: 'none',
    164. 					duration: 10000
    165. 				})
    166. 				clearInterval(this.setTimer)
    167. 				this.second = 9
    168. 				this.showBottom = false
    169. 				this.computedHeight(0)
    170. 			    this.cameraContext.stopRecord({
    171. 					compressed: true,
    172. 					success: (res) => {
    173. 						uni.setStorageSync('taxCollectVideoPath',res.tempVideoPath)
    174. 						setTimeout(() => {
    175. 							this.stopRecordInitData()
    176. 						}, 500)
    177. 					},
    178. 					fail: (err) => {
    179. 						this.showBottom = true
    180. 						this.computedHeight(80)
    181. 						uni.showToast({
    182. 							title: '操作失败，请重试',
    183. 							icon: 'none',
    184. 							duration: 1200
    185. 						})
    186. 					}
    187. 				})
    188. 			},
    189. 			// 切换摄像头
    190. 			switchCamera() {
    191. 				if(this.devicePosition === 'back') {
    192. 					this.devicePosition = 'front'
    193. 				} else {
    194. 					this.devicePosition = 'back'
    195. 				}
    196. 			},
    197. 			// 结束录像之后 初始数据
    198. 			stopRecordInitData () {
    199. 				this.computedHeight(80)
    200. 				this.setBoolean(true)
    201. 				this.centerCountDownValue = 4
    202. 				this.second = 9
    203. 			},
    204. 			// 设置 boolean
    205. 			setBoolean(boolean) {
    206. 				this.tipShow = boolean
    207. 				this.showBottom = boolean
    208. 				this.cameraShow = !boolean
    209. 				this.centerCountDownShow = !boolean
    210. 			},
    211. 		}
    212. 	}
    213. script>
    214.  
    215. <style lang="less" scoped>
    216. 	.container {
    217. 		position: relative;
    218.  
    219. 		.video-wrap {
    220. 			position: relative;
    221.  
    222. 			.content-wrap {
    223. 				position: absolute;
    224. 				bottom: 150px;
    225. 				width: 100%;
    226. 			}
    227.  
    228. 			.padding-bottom-40 {
    229. 				padding-bottom: 40rpx;
    230. 			}
    231.  
    232. 			.tips-icon {
    233. 				position: absolute;
    234. 				left: 242rpx;
    235. 				width: 96rpx;
    236. 				height: 327rpx;
    237. 			}
    238.  
    239. 			.know {
    240. 				position: relative;
    241. 				top: 210rpx;
    242. 				left: 155rpx;
    243. 				display: inline-block;
    244. 				width: 199rpx;
    245. 				height: 92rpx;
    246. 				line-height: 92rpx;
    247. 				text-align: center;
    248. 				border: 3rpx dashed #fff;
    249. 				border-radius: 5rpx;
    250. 				font-size: 48rpx;
    251. 				color: #fff;
    252. 			}
    253.  
    254. 			.number {
    255. 				position: absolute;
    256. 				top: 15px;
    257. 				right: 20px;
    258. 				z-index: 11;
    259. 				color: #fff;
    260. 				width: 30px;
    261. 				height: 30px;
    262. 				background-color: #7a7a7a;
    263. 				border-radius: 50%;
    264. 				text-align: center;
    265. 				line-height: 30px;
    266. 			}
    267.  
    268. 			.center-count-down-wrap {
    269. 				display: flex;
    270. 				justify-content: center;
    271. 				align-items: center;
    272. 				width: 100%;
    273. 				height: 100%;
    274. 			}
    275.  
    276. 			.center-count-down {
    277. 				font-size: 330rpx;
    278. 				color: #fff;
    279. 				font-weight: bold;
    280. 			}
    281.  
    282. 			.center-count-down-start {
    283. 				font-size: 220rpx;
    284. 				color: #fff;
    285. 				font-weight: bold;
    286. 			}
    287. 		}
    288.  
    289. 		.controls {
    290. 			position: absolute;
    291. 			bottom: 200rpx;
    292. 			width: 100%;
    293. 			height: 753rpx;
    294. 		}
    295.  
    296. 		.absolute-one-font {
    297. 			position: absolute;
    298. 			left: 4.5%;
    299. 			bottom: 130rpx;
    300. 		}
    301.  
    302. 		.absolute-two-font {
    303. 			position: absolute;
    304. 			bottom: 30rpx;
    305. 			left: 44%;
    306. 		}
    307.  
    308. 		.bottom {
    309. 			// position: fixed;
    310. 			// bottom: 0;
    311. 			width: 100%;
    312. 			background-color: #000;
    313.  
    314. 			.wrap {
    315. 				display: flex;
    316. 				align-items: center;
    317. 				justify-content: space-between;
    318. 				height: 80px;
    319. 				padding: 0 73rpx;
    320. 			}
    321. 		}
    322.  
    323. 		.fade-enter-active, .fade-leave-active {
    324. 			transition: opacity .5s;
    325. 		}
    326.  
    327. 		.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    328. 			opacity: 0;
    329. 		}
    330.  
    331. 		.background-color-474747 {
    332. 			background-color: #474747;
    333. 		}
    334.  
    335. 		.wpercent-100 {
    336. 			width: 100%;
    337. 		}
    338.  
    339. 		.text-align {
    340. 			text-align: center;
    341. 		}
    342.  
    343. 		.font-36-fff {
    344. 			font-size: 36rpx;
    345. 			color: #fff;
    346. 		}
    347. 		
    348. 		.font-weight {
    349. 			font-weight: bold;
    350. 		}
    351.  
    352. 		.w55-h49 {
    353. 			width: 55rpx;
    354. 			height: 49rpx;
    355. 		}
    356.  
    357. 		.w100-h100 {
    358. 			width: 100rpx;
    359. 			height: 100rpx;
    360. 		}
    361.  
    362. 		.w69-h56 {
    363. 			width: 69rpx;
    364. 			height: 56rpx;
    365. 		}
    366. 	}
    367. style>


    效果图：

    借鉴的是uniapp-components，记录一下如何使用
  • 相关阅读:
    【计算机网络】图解应用层协议
    C语言大佬的必杀技---宏的高级用法
    基于GIS的生态安全网络格局构建（附练习数据下载）
    Java Web大作业——编程导航系统
    双十一快递业务量暴增，快递驿站视频智能监控方案保障快递业务顺利开展
    外观专利申请流程是怎样的？
    Docker和K8s的发展历程
    （附源码）springboot毕业生弃置物品交易系统 毕业设计 231151
    Android AMS——创建Application（七）
    【紫光同创国产FPGA教程】【PGC1/2KG第七章】7.数字钟实验例程
  • 原文地址：https://blog.csdn.net/weixin_53105591/article/details/134370229