1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：程序媛刘刘 分类：Toy博客 阅读(68) 违法举报

这篇具有很好参考价值的文章主要介绍了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 小程序 身份证 和人脸视频拍摄,开发记录,uni-app,小程序,音视频,身份证,摄像头,前端

uniapp 小程序 身份证 和人脸视频拍摄,开发记录,uni-app,小程序,音视频,身份证,摄像头,前端文章来源地址https://www.toymoban.com/news/detail-759520.html

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

到了这里，关于uniapp 小程序 身份证 和人脸视频拍摄的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • uniapp 前端实现文字识别，身份证识别，营业执照识别 （兼容APP、H5、小程序 不需要任何SDK）

    本文将介绍如何使用uniapp和百度AI开放平台的OCR(光学字符识别)API实现身份证、营业执照等卡证的识别和文字识别功能。 APP 小程序 H5 √ √ √ 1. 注册百度账号 前往百度AI开放平台官网,点击“登录”。使用百度账号登录,如果没有可以先注册百度账号。 登录成功后,点击右上角

    2024年02月10日
    浏览(52)

  • 小程序OCR身份证识别

    使用两种OCR识别：小程序和腾讯云 1.基于微信小程序OCR插件实现身份证拍照、上传并OCR识别的示例： 首先，在小程序中添加身份证拍照的功能，可以使用wx.chooseImage()选择照片并使用wx.uploadFile()上传，代码如下： 将上传的照片传到服务器端后，使用小程序OCR插件进行身份证识

    2024年02月07日
    浏览(56)

  • uniapp表单uni-forms校验自定义校验规则，手机校验、身份证校验

    validateFunction 自定义校验规则 如果需要使用 validateFunction 自定义校验规则,则 不能采用 uni-forms 的 rules 属性来配置校验规则，这时候需要通过ref，在 onReady 生命周期调用组件的setRules方法绑定验证规则 无法通过props传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定

    2024年02月11日
    浏览(91)
  • 如何在小程序中绑定身份证

    如何在小程序中绑定身份证

    在小程序中绑定身份证信息是一项常见的需求，特别是在需要进行实名认证或者身份验证的场景下。通过绑定身份证信息，可以提高用户身份的真实性和安全性，同时也为小程序提供了更多的个性化服务和功能。下面就介绍一下怎么在小程序中绑定居民身份证的方法。 1. 进入

    2024年03月12日
    浏览(55)
  • 微信小程序实现身份证识别-ocr

    微信小程序实现身份证识别-ocr

        项目中有一个识别身份证的需求，经过调研，最后决定使用微信小程序ocr插件进行开发。 一:首先登录小程序公众平台。 1:进入设置 第三方设置。   2:添加ocr插件。 3:添加完后，需要领取免费额度，100次/天。  https://fuwu.weixin.qq.com/service/detail/000ce4cec24ca026d37900ed551415  注意

    2024年01月16日
    浏览(66)
  • Vue-Uni-App小程序实现身份证识别

    Vue-Uni-App小程序实现身份证识别

    需求：实现一个身份证的识别功能！看下方图片！ 思路：（把用户上传的身份证图片转成base64请求接口发送给后端，后端返回对应的信息渲染到页面上就行了！ ） 在export default 下面注册 data card{}里面是放的背景图片！ template 效果如下 可以看见背景图片已经出来了！用户点

    2024年02月10日
    浏览(45)
  • 身份证阅读器和社保卡读卡器Harmony鸿蒙系统ArkTS语言SDK开发包

    身份证阅读器和社保卡读卡器Harmony鸿蒙系统ArkTS语言SDK开发包

    项目需求，用ArkTS新一代开发语言实现了在Harmony鸿蒙系统上面兼容身份证阅读器和社保卡读卡器，调用了DonseeDeviceLib.har这个读卡库。 需要注意的是，鸿蒙系统的app扩展名为.hap，本项目编译输出的应用为：entry-default-signed.hap 下面是调用身份证阅读器读取身份证信息的接口，支

    2024年02月03日
    浏览(73)

  • 身份证识别ocr、身份证实名认证接口文档

    每一次验证背后，都是对用户数据安全的承诺，对平台信誉的坚守。翔云身份证实名认证API，通过身份证识别接口仅需一键上传身份证图片即可快速识别身份证信息，翔云实名认证接口实时联网查验证件信息的真伪。 ​PHP身份证实名认证接口文档代码如下：

    2024年04月17日
    浏览(59)

  • 身份证实名接口和身份证OCR接口的组合使用

    随着网络技术的快速发展以及对个人信息保护意识的提升，身份证实名认证已成为诸多在线业务中不可或缺的一环。身份证实名接口与身份证OCR接口的有机结合，为用户提供了一种快速、精准、安全的身份信息核验方式。 首先，用户在应用程序或网站界面上传其身份证正反两

    2024年04月26日
    浏览(50)
  • 微信小程序OCR插件，实现身份证、行驶证、银行卡、营业执照和驾驶证等识别

    微信小程序OCR插件，实现身份证、行驶证、银行卡、营业执照和驾驶证等识别

    随着科技的不断发展，图片识别技术已经成为了当下移动互联网中的热点话题。而基于微信小程序和 OCR 插件的图文识别方案，更是成为了越来越多小程序开发者关注和研究的问题。本文中，我将为大家介绍微信小程序 OCR 插件，帮助大家实现身份证、行驶证、银行卡、营业执

    2024年02月08日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包