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

 使用前提：

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

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

   身份证正反面：

<template>
  <view :style="{ height: windowHeight + 'px' }">
    <camera
      mode="normal"
      :device-position="devicePosition"
      flash="off"
      :style="{ height: cameraHeight + 'px' }"
    >
      <cover-view class="controls" style="width: 100%;height: 100%;">
        <!-- 国徽面 -->
        <cover-image
          v-show="!idcardFrontSide"
          class="w569-h828"
          src="/static/images/index/camera_module_side.png"
        />
      </cover-view>
			<!-- 国徽面 -->
			  <cover-image
			    v-show="!idcardFrontSide"
			    class="w569-h828"
			    src="/static/images/index/camera_module_side.png"
			  />
			</cover-view>
    </camera>
    <view class="bottom font-36-fff">
      <view class="wrap">
        <view class="back" @click="switchBtn">切换</view>
        <view @click="takePhoto">
          <image class="w131-h131" src="/static/images/index/take_camera_btn_icon.png">
          </image>
        </view>
        <view @click="chooseImage">
          相册
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        cameraContext: {},
        windowHeight: '',
				cameraHeight: '',
        idcardFrontSide: true,
        devicePosition: 'front',
      };
    },
    onLoad(options) {
      if(uni.createCameraContext) {
        this.cameraContext = uni.createCameraContext()
      }else {
        // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
        uni.showModal({
            title: '提示',
            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
      }
    },
    onShow() {
      const systemInfo = uni.getSystemInfoSync()
      this.windowHeight = systemInfo.windowHeight
      this.cameraHeight = systemInfo.windowHeight - 80
    },
    methods: {
      // 拍照
      takePhoto() {
        uni.showLoading({
          title:'拍摄中'
        })
        this.cameraContext.takePhoto({
          quality: 'high',
          success: (res) => {
            uni.showToast({
              title:'拍照成功',
              icon: 'none',
              duration: 1200
            })
          },
          fail: (err) => {
            uni.showToast({
              title:'拍照失败，请检查系统是否授权',
              icon: 'none',
              duration: 1200
            })
          }
        })
      },
      // 从相册选取
      chooseImage() {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album'],
          success: (res) =>  {},
          fail: (err) => {}
        });
      },
     },
		 // 切换摄像头
     switchBtn() {
				if(this.devicePosition === 'back') {
					this.devicePosition = 'front'
				} else {
					this.devicePosition = 'back'
				}
			},
  }
</script>

<style lang="less" scoped>
  .icon-w569-h828 {
    width: 569rpx;
    height: 828rpx;
  }

  .controls {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bottom {
    width: 100%;
    background-color: #000;

    .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
      padding: 0 73rpx;
    }
  }

  .w569-h828 {
    width: 569rpx;
    height: 828rpx;
  }
  
  .w131-h131 {
    width: 131rpx;
    height: 131rpx;
  }

  .font-36-fff {
    font-size: 36rpx;
    color: #fff;
  }
</style>

人脸视频：

<template>
	<!-- 第三步上传视频 -->
	<view class="container background-color-474747" :style="{height: windowHeight + 'px'}">
		<view class="video-wrap wpercent-100 text-align" :style="{height: takeVideoHeight + 'px'}" v-if="tipShow">
			<view class="content-wrap">
				<view class="font-36-fff font-weight">请保持声音清晰，话术完整，露出五官</view>
				<view class="padding-top-20 font-36-fff font-weight">不符合以上要求，需重新拍摄</view>
				<view class="padding-top-35 padding-bottom-30 font-24-FF2323 font-weight">点击下方按钮开始拍摄</view>
				<image class="tips-icon" src="/static/images/index/take_video_tips.png"></image>
				<text class="know" @click="startCenterCountDown">知道了</text>
			</view>
		</view>
		<view class="video-wrap wpercent-100" v-if="cameraShow" >
			<view v-if="!centerCountDownShow" class="number">{{ second }}s</view>
			<camera 
				mode="normal"
				class="wpercent-100"
				:device-position="devicePosition" 
				:style="{height: takeVideoHeight + 'px'}">
				<!-- 中间3,2,1倒计时 -->
				<cover-view class="center-count-down-wrap" v-if="centerCountDownShow && centerCountDownValue != 4">
					<cover-view :class="centerCountDownValue === '开始' ? 'center-count-down-start' : 'center-count-down'">{{ centerCountDownValue }}</cover-view>
				</cover-view>
				<!-- 正式拍照人面框 -->
				<cover-image v-if="!centerCountDownShow" class="controls" src="/static/images/index/take_video_back.png"/>
				<cover-view class="font-36-fff font-weight absolute-one-font" v-if="!centerCountDownShow">
					正视镜头录制一段匀速朗读下方数字的视频
				</cover-view>
				<cover-view class="font-36-fff font-weight absolute-two-font" v-if="!centerCountDownShow">
					1234
				</cover-view>
			</camera>
		</view>
		<transition name="fade" :duration="{ enter: 500, leave: 800 }">
			<view class="bottom" v-if="showBottom">
				<view class="wrap">
					<view class="back" @click="backTwoStep">
						<image class="w55-h49" src="/static/images/index/back_before_icon.png"></image>
					</view>
					<!-- 开始倒计时 -->
					<view class="take" @click="startCenterCountDown" v-if="tipShow">		
						<image class="w100-h100" src="/static/images/index/take_btn_icon.png"></image>
					</view>
					<!-- 点击就暂停 -->
					<view class="take" @click="stopRecord" v-if="cameraShow && !centerCountDownShow">
						<image class="w100-h100" src="/static/images/index/take_btn_icon.png"></image>
					</view>
					<view class="switch" @click="switchCamera">
						<image class="w69-h56" src="/static/images/index/switch_camera_icon.png"></image>
					</view>
				</view>
			</view>
		</transition>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: '',
				takeVideoHeight: '',
				tipShow: true,
				showBottom: true,
				centerCountDownShow: false,
				cameraShow: false,
				centerCountDownValue: 4,
				cameraContext: {},
				devicePosition: 'front',
				second: 9,
				setTimer: '',
			};
		},
		onLoad() {
			if(uni.createCameraContext) {
				setTimeout(() => {
					this.cameraContext = uni.createCameraContext();
				},200)
			}else {
				// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
				uni.showModal({
					title: '提示',
					content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
				})
			}
		},
		created() {
			const systemInfo = uni.getSystemInfoSync()
      this.windowHeight = systemInfo.windowHeight
			this.computedHeight(80)
		},
		methods: {
			// 计算height
			computedHeight (number) {
        const systemInfo = uni.getSystemInfoSync()
				this.takeVideoHeight = systemInfo.windowHeight - number
			},
			// 开始倒计时 3,2,1,开始
			startCenterCountDown () {
				this.computedHeight(0)
				this.setBoolean(false)
				this.centerCountDown()
			},
			// 中间倒计时
			centerCountDown() {
				let promise = new Promise((resolve, reject) => {
					let setTimer = setInterval(() => {
						if(this.centerCountDownValue === 1) {
							this.centerCountDownValue = '开始'
							resolve(setTimer)
						} else {
							this.centerCountDownValue = this.centerCountDownValue - 1
						}
						if(this.centerCountDownValue === 2) {			// this.cameraContext.startRecord 有延迟执行的问题，所以需要提前半秒执行
							setTimeout(() => {
								this.startRecord()
							}, 1200)
						}
					}, 1000)
				})
				promise.then((setTimer) => {
					clearInterval(setTimer)
					this.computedHeight(80)
					this.showBottom = true
					this.centerCountDownShow = false
				})
			},
			// 开始录像
			startRecord() {
				this.cameraContext.startRecord({
					success: (res) => {
						this.rightTopCountDown()
					},
					fail: (err) => {
						uni.showToast({
							title: '录像失败，请重试',
							icon: 'none',
							duration: 1200
						})
					}
				})
			},
			// 右上角倒计时
			rightTopCountDown() {
				let promise = new Promise((resolve, reject) => {
					this.setTimer = setInterval(() => {
						this.second = this.second - 1
						if (this.second <= 0) {
							this.stopRecord()
							resolve(this.setTimer)
						}
					}, 1000)
				})
				promise.then((setTimer) => {
					clearInterval(setTimer)
					this.second = 9
				})
			},
			// 结束录像
			stopRecord() {
				uni.showToast({
					title: '结束录像，正在处理视频',
					icon: 'none',
					duration: 10000
				})
				clearInterval(this.setTimer)
				this.second = 9
				this.showBottom = false
				this.computedHeight(0)
			    this.cameraContext.stopRecord({
					compressed: true,
					success: (res) => {
						uni.setStorageSync('taxCollectVideoPath',res.tempVideoPath)
						setTimeout(() => {
							this.stopRecordInitData()
						}, 500)
					},
					fail: (err) => {
						this.showBottom = true
						this.computedHeight(80)
						uni.showToast({
							title: '操作失败，请重试',
							icon: 'none',
							duration: 1200
						})
					}
				})
			},
			// 切换摄像头
			switchCamera() {
				if(this.devicePosition === 'back') {
					this.devicePosition = 'front'
				} else {
					this.devicePosition = 'back'
				}
			},
			// 结束录像之后 初始数据
			stopRecordInitData () {
				this.computedHeight(80)
				this.setBoolean(true)
				this.centerCountDownValue = 4
				this.second = 9
			},
			// 设置 boolean
			setBoolean(boolean) {
				this.tipShow = boolean
				this.showBottom = boolean
				this.cameraShow = !boolean
				this.centerCountDownShow = !boolean
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		position: relative;

		.video-wrap {
			position: relative;

			.content-wrap {
				position: absolute;
				bottom: 150px;
				width: 100%;
			}

			.padding-bottom-40 {
				padding-bottom: 40rpx;
			}

			.tips-icon {
				position: absolute;
				left: 242rpx;
				width: 96rpx;
				height: 327rpx;
			}

			.know {
				position: relative;
				top: 210rpx;
				left: 155rpx;
				display: inline-block;
				width: 199rpx;
				height: 92rpx;
				line-height: 92rpx;
				text-align: center;
				border: 3rpx dashed #fff;
				border-radius: 5rpx;
				font-size: 48rpx;
				color: #fff;
			}

			.number {
				position: absolute;
				top: 15px;
				right: 20px;
				z-index: 11;
				color: #fff;
				width: 30px;
				height: 30px;
				background-color: #7a7a7a;
				border-radius: 50%;
				text-align: center;
				line-height: 30px;
			}

			.center-count-down-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
			}

			.center-count-down {
				font-size: 330rpx;
				color: #fff;
				font-weight: bold;
			}

			.center-count-down-start {
				font-size: 220rpx;
				color: #fff;
				font-weight: bold;
			}
		}

		.controls {
			position: absolute;
			bottom: 200rpx;
			width: 100%;
			height: 753rpx;
		}

		.absolute-one-font {
			position: absolute;
			left: 4.5%;
			bottom: 130rpx;
		}

		.absolute-two-font {
			position: absolute;
			bottom: 30rpx;
			left: 44%;
		}

		.bottom {
			// position: fixed;
			// bottom: 0;
			width: 100%;
			background-color: #000;

			.wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80px;
				padding: 0 73rpx;
			}
		}

		.fade-enter-active, .fade-leave-active {
			transition: opacity .5s;
		}

		.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
			opacity: 0;
		}

		.background-color-474747 {
			background-color: #474747;
		}

		.wpercent-100 {
			width: 100%;
		}

		.text-align {
			text-align: center;
		}

		.font-36-fff {
			font-size: 36rpx;
			color: #fff;
		}
		
		.font-weight {
			font-weight: bold;
		}

		.w55-h49 {
			width: 55rpx;
			height: 49rpx;
		}

		.w100-h100 {
			width: 100rpx;
			height: 100rpx;
		}

		.w69-h56 {
			width: 69rpx;
			height: 56rpx;
		}
	}
</style>


效果图：

借鉴的是uniapp-components，记录一下如何使用

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/142176.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ROS 通信机制

ROS 通信机制

ROS是一个分布式框架&#xff0c;为用户提供多节点&#xff08;进程&#xff09;之间的通信服务&#xff0c;所有软件和功能都建立在这种分布式通信机制上&#xff0c;ROS的通信机制是最底层也是最核心的技术。 一、话题通信机制 话题在 ROS 中使用最为频繁&#xff0c;其通信…
阅读更多...
计算机毕业设计选题推荐-公共浴池微信小程序/安卓APP-项目实战

计算机毕业设计选题推荐-公共浴池微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…
阅读更多...
本地跑项目解决跨域问题

本地跑项目解决跨域问题

跨域问题&#xff1a; 指的是浏览器不能执行其他网站的脚本&#xff0c;它是由浏览器的同源策略造成的&#xff0c;是浏览器对 javascript 施加的安全限制。 同源策略&#xff1a; 是指协议&#xff08;protocol&#xff09;、域名&#xff08;host&#xff09;、端口号&…
阅读更多...
使用validator实现枚举类型校验

使用validator实现枚举类型校验

使用validator实现枚举类型校验 前言&#xff1a; 在前端调用后端接口传递参数的过程中&#xff0c;我们往往需要对前端传递过来的参数进行校验&#xff0c;比如说我们此时需要对用户的状态进行更新&#xff0c;而用户的状态只有正常和已删除&#xff0c;并且是在代码中通过枚…
阅读更多...
云流量回溯的重要性和应用

云流量回溯的重要性和应用

云流量回溯是指利用云计算和相关技术来分析网络流量、数据传输或应用程序操作的过程。这个过程包括了对数据包、通信模式和应用程序性能的审查和跟踪。本文将介绍云流量回溯重要性和应用! 1、网络安全: 云流量回溯是网络安全的重要组成部分。通过监测和回溯网络流量&#xff0c…
阅读更多...
ArcGIS实现矢量区域内所有要素的统计计算

ArcGIS实现矢量区域内所有要素的统计计算

1、任务需求&#xff1a;统计全球各国所有一级行政区相关属性的总和。 &#xff08;1&#xff09;有一个全球一级行政区的矢量图&#xff0c;包含以下属性&#xff08;洪灾相关属性 province.shp&#xff09; &#xff08;2&#xff09;需要按照国家来统计各个国家各属性的总值…
阅读更多...
探索STM32系列微控制器的特性和性能

探索STM32系列微控制器的特性和性能

STM32系列微控制器是意法半导体&#xff08;STMicroelectronics&#xff09;公司开发的一款强大的嵌入式微控制器系列。该系列微控制器以其丰富的特性和卓越的性能&#xff0c;成为了嵌入式系统开发领域的首选。本文将深入探索STM32系列微控制器的特性和性能&#xff0c;并结合…
阅读更多...
【OpenCV(3)】linux arm aarch 是 opencv 交叉编译与使用

【OpenCV(3)】linux arm aarch 是 opencv 交叉编译与使用

文章目录 1、直接找github 别人编译好的2、自主编译参考 3使用CMake检查 参考 1、直接找github 别人编译好的 测试很多&#xff0c;找到一个可用的。 https://github.com/dog-qiuqiu/libopencv 它用了超级模块&#xff01; OpenCV的world模块也称为超级模块&#xff08;supe…
阅读更多...
【c++】——类和对象(中)——实现完整的日期类

【c++】——类和对象(中)——实现完整的日期类

作者:chlorine 专栏:c专栏 我的花一定会开。 【学习目标】 拷贝复制——赋值运算符重载 目录 &#x1f393;运算符重载(-><...) &#x1f393;日期&天数 &#x1f393;前置和后置重载 我们完成了赋值运算符重载章节的学习&#xff0c;对operator关键字的使用有…
阅读更多...
Python爬虫从基础到入门：找数据接口

Python爬虫从基础到入门：找数据接口

Python爬虫从基础到入门：找数据接口 1. 怎样判断抓取的数据是动态生成的2. 用requests模块访问，然后用解析模块解析数据3. 总结1. 怎样判断抓取的数据是动态生成的 请参考文章：Python爬虫从基础到入门：认识爬虫 第3点所讲。 这里用我的CSDN个人主页举例。 可以说这部分下的…
阅读更多...
分类预测 | MATLAB实现基于Isomap降维算法与改进蜜獾算法IHBA的Adaboost-SVM集成多输入分类预测

分类预测 | MATLAB实现基于Isomap降维算法与改进蜜獾算法IHBA的Adaboost-SVM集成多输入分类预测

分类预测 | MATLAB实现基于Isomap降维算法与改进蜜獾算法IHBA的Adaboost-SVM集成多输入分类预测 目录 分类预测 | MATLAB实现基于Isomap降维算法与改进蜜獾算法IHBA的Adaboost-SVM集成多输入分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 Isomap-Adaboost-IHBA-…
阅读更多...
拆位线段树 E. XOR on Segment

拆位线段树 E. XOR on Segment

Problem - E - Codeforces 区间求和&#xff0c;区间异或的操作跟线段树的区间求和、区间相见相似&#xff0c;考虑用线段树。 发现数组初始值最多是1e6&#xff0c;有不到25位&#xff0c;可以知道异或最大值是这些位数全是1的情况。 发现可以对每一位进行运算就和。 我们开…
阅读更多...
详解IP安全：IPSec协议簇 | AH协议 | ESP协议 | IKE协议

详解IP安全：IPSec协议簇 | AH协议 | ESP协议 | IKE协议

目录 IP安全概述 IPSec协议簇 IPSec的实现方式 AH&#xff08;Authentication Header&#xff0c;认证头&#xff09; ESP&#xff08;Encapsulating Security Payload&#xff0c;封装安全载荷&#xff09; IKE&#xff08;Internet Key Exchange&#xff0c;因特网密钥…
阅读更多...
【JUC】三、集合的线程安全

【JUC】三、集合的线程安全

文章目录 1、ArrayList集合线程安全问题分析2、解决方式一&#xff1a;Vector或synchronizedList( )3、解决方式二&#xff1a;CopyOnWriteArrayList 写时复制4、HashSet集合线程不安全的分析与解决5、HashMap集合线程不安全的分析与解决 1、ArrayList集合线程安全问题分析 对…
阅读更多...
Vue学习笔记

Vue学习笔记

Vue学习笔记 数据绑定脚手架Vue CLI 组件组件化开发需要安装的插件自定义组件定义自己的组件使用自定义的组件 普通组件--局部注册普通组件--全局注册普通组件的局部注册和全局注册的区别第三方组件Element-uicomputed 计算属性修改计算属性 watch 侦听器延时器防抖watch 的完整…
阅读更多...
sass 生成辅助色

sass 生成辅助色

背景 一个按钮往往有 4 个状态。 默认状态hover鼠标按下禁用状态 为了表示这 4 个状态&#xff0c;需要设置 4 个颜色来提示用户。 按钮类型一般有 5 个&#xff1a; 以 primary 类型按钮为例&#xff0c;设置它不同状态下的颜色&#xff1a; <button class"btn…
阅读更多...
lc307.区域和检索 - 数组可修改

lc307.区域和检索 - 数组可修改

暴力解法 创建方法&#xff0c;通过switch-case判断所需要调用的方法。 public class RegionsAndSertches {public static void main(String[] args) {String[] str new String[]{"NumArray", "sumRange", "update", "sumRange"};i…
阅读更多...
互联网Java工程师面试题·微服务篇·第二弹

互联网Java工程师面试题·微服务篇·第二弹

目录 18、什么是 Spring 引导的执行器&#xff1f; 19、什么是 Spring Cloud&#xff1f; 20、Spring Cloud 解决了哪些问题&#xff1f; 21、在 Spring MVC 应用程序中使用 WebMvcTest 注释有什么用处&#xff1f; 22、你能否给出关于休息和微服务的要点&#xff1f; 23、…
阅读更多...
c语言-assert(断言)的笔记

c语言-assert(断言)的笔记

一、assert(断言)简介 assert的功能&#xff0c;条件为真&#xff0c;程序继续执行&#xff1b;如果断言为假&#xff08;false&#xff09;&#xff0c;则程序终止。 assert是个宏定义&#xff01; 头文件&#xff1a; #include <assert.h> 原型&#xff1a; void asser…
阅读更多...
nacos适配达梦数据库

nacos适配达梦数据库

一、下载源码 源码我直接下载gitee上nacos2.2.3的&#xff0c;具体链接&#xff1a;https://gitee.com/mirrors/Nacos/tree/2.2.3&#xff0c;具体如下图&#xff1a; 二、集成达梦数据库驱动 解压源码包&#xff0c;用idea打开源码&#xff0c;等idea和maven编译完成&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023