小程序人脸分析
公司的业务需求是用户在使用某个功能前,必须使用人脸识别,确保当前使用人是用户本人,防止某些功能乱用。后端用的是腾讯的人脸识别方案,这里只是前端的识别代码,保证人脸剧中,大小合适,有一个人脸以上
小程序代码,主要利用的是
wx.createVKSession这个API来实现,样式部分可自行修改
这部分代码只是小程序前端识别的代码,真正的人脸比对代码是在后端,需要前端识别到人脸后上传到后端进行比对。
部分位置可根据业务需求要样式来修改,这里只是我自己调整的位置
wxml
<view class="title">{{verifyText}}</view>
<view class="container">
<image src="{{faceImg}}" wx:if="{{faceImg}}" class="faceImg" mode="widthFix"/><camera class="camera" device-position="front" flash="off"></camera>
</view>
js部分
let listener = null;
let videoCtx = null;
let VKSession = null;
let faceVerifyTime = null; //面容验证倒计时Page({data: {faceImgHeight: 314,faceImgWidth: 314,face: {origin: {x: 0,y: 0},size: {width: 0,height: 0},points:[]},verifyText:"请移动面容到框内",isCentre:false, //是否面容在正中间startVerify:false, //是否正在验证faceImg:"", //面容图片地址},/*** 生命周期函数--监听页面加载*/onLoad() {this.getAuthSetting(); //获取权限this.initFaceVerify()},getAuthSetting(){wx.getSetting({success :(res)=> {if(!res.authSetting['scope.camera']){wx.showModal({title: '请允许获取摄像头权限',showCancel:false,complete: (modalRes) => {if (modalRes.confirm) {wx.openSetting({success:(settingRes)=>{if(!settingRes.authSetting['scope.camera']){this.getAuthSetting()}else{wx.navigateBack()}}})}}})}}})},initFaceVerify(){videoCtx = null;listener=null;VKSession=null;videoCtx = wx.createCameraContext();let count = 0;listener = videoCtx.onCameraFrame((frame) => {count++;if (count === 5) {this.detectFace(frame);count = 0;}});VKSession = wx.createVKSession({version: 'v1',track: {plane: {mode: 1},face: {mode: 2}}});VKSession.on('updateAnchors', (anchors) => {// 有面容console.log(anchors,'有面容')if(this.data.startVerify){return;}let anchor = anchors[0];this.setData({face: {points: anchor.points,origin: anchor.origin,size: anchor.size}},()=>{this.isFaceCentered()})})VKSession.on('removeAnchors', (anchors) => {// 面容消失if(this.data.startVerify){return;}this.setData({verifyText:'请移动面容到框内',isCentre:false,face:{}},()=>{clearTimeout(faceVerifyTime)faceVerifyTime = null;})})setTimeout(() => {// 直接开始this.handleStart()}, 500);},onUnload() {VKSession.destroy();},picture(){this.setData({startVerify:true},()=>{clearTimeout(faceVerifyTime)faceVerifyTime = null;videoCtx.takePhoto({quality:'original',success:(e)=>{//上传照片接口,图片换成远端url地址 自行替换uploadImage(e.tempImagePath).then((res)=>{this.setData({faceImg:res})wx.showLoading({title: '正在验证',})try {// 执行后端分析人脸api({img:res}).then((writeoffRes) => {//识别成功//自行处理识别成功结果}).catch(err => {wx.hideLoading();wx.showModal({title: err.msg,showCancel:false,confirmText:'重新核验',complete: (res) => {if (res.confirm) {this.setData({startVerify:false,faceImg:"",verifyText:'请移动面容到框内',isCentre:false,face:{}},()=>{this.handleStart()})}}})})} catch (error) {console.log(error)}}).catch(()=>{this.setData({startVerify:false,faceImg:"",verifyText:'请移动面容到框内',isCentre:false,face:{}},()=>{this.handleStart()wx.showToast({title: '网络连接失败,请重试',})})})}})})},handleStart() {VKSession.start((errno) => {console.warn('VKSession.start errno', errno);});listener.start();},handleStop() {listener.stop({complete: (res) => {console.warn('listener.stop', res);}});VKSession.stop();},async detectFace(frame) {// 获取面容VKSession.detectFace({frameBuffer: frame.data,width: frame.width,height: frame.height,scoreThreshold: 0.8,sourceType: 0,modelMode: 2});},isFaceCentered() {// 判断面容是否在中间if(!this.data.face.points){return;}let points = this.data.face.points[43]; //位置let size = this.data.face.size; //大小if(points.x>0.65||points.x<0.4||points.y>0.65||points.y<0.35){this.setData({verifyText:'请移动面容到框内',isCentre:false,face:{}},()=>{clearTimeout(faceVerifyTime)faceVerifyTime = null;})return}else if(size.width>0.95||size.width<0.32){this.setData({verifyText:'请移动面容显示完整面容',isCentre:false,face:{}},()=>{clearTimeout(faceVerifyTime)faceVerifyTime = null;})return}this.setData({verifyText:'请保持不动',isCentre:true},()=>{this.verifyCentre()})},verifyCentre(){// 开始验证面容if(faceVerifyTime||this.data.startVerify){return}else{faceVerifyTime = setTimeout(() => {if(this.data.isCentre){this.handleStop()this.picture()}else{clearTimeout(faceVerifyTime)faceVerifyTime = null;}}, 1500);}}
})
style
.container {position: relative;padding: 200rpx 0;
}
.title{position: absolute;width: 100%;text-align: center;padding-top: 100rpx;font-size: 36rpx;
}
.camera{width: 600rpx;height: 600rpx;border-radius: 50% 50%;margin: 0 auto;
}
.faceImg{width: 600rpx;height: 600rpx;border-radius: 50% 50%;margin: 0 auto;position: absolute;z-index: 999;
}
相关文章:
小程序人脸分析
公司的业务需求是用户在使用某个功能前,必须使用人脸识别,确保当前使用人是用户本人,防止某些功能乱用。后端用的是腾讯的人脸识别方案,这里只是前端的识别代码,保证人脸剧中,大小合适,有一个人…...
UML建模笔记
5个视图 设计。类,接口,对象如何协作。实现。组件,运行程序,文档关系。用例。用户功能期望。进程。并发与同步相关进程,线程。部署。部署到计算机。 建模目的 和客户共创追踪需求变更协同开发进度控制持续迭代测试生…...
初见SpringCloud ing
Consul 服务注册与发现 服务注册与发现 服务注册:微服务在启动时,会将自己的信息(如 IP 地址、端口、服务名称等)注册到 Consul。 服务发现:其他微服务可以通过 Consul 查询到已注册的服务,并通过这些信息…...
Python | Leetcode Python题解之第198题打家劫舍
题目: 题解: class Solution:def rob(self, nums: List[int]) -> int:if not nums:return 0size len(nums)if size 1:return nums[0]first, second nums[0], max(nums[0], nums[1])for i in range(2, size):first, second second, max(first nu…...
什么是中断?---STM32篇
目录 一,中断的概念 二,中断的意义 三,中断的优先级 四,中断的嵌套 如果一个高优先级的中断发生,它会立即打断当前正在处理的中断(如果其优先级较低),并首先处理这个高优…...
51单片机第1步_putchar()和_getkey()应用
没有开发板,没有烧录器,没有学习场所,如何学习写51单片机的程序?除了采用软件模拟仿真,没有更好的方法,因此,使用串口是学习的第一步。 1、_getkey ()函数 在C:\Keil\C51\LIB中有一个叫GETKEY…...
微信小程序中的地图的使用
微信小程序中的地图组件 是一个用于展示地图的组件,提供了丰富的功能和配置选项,可以实现定位、标记、路线规划等多种地图相关的交互。下面是对这个组件的详细介绍,包括属性、事件以及示例代码。 组件属性 基础属性 longitude: 地图中心的经…...
MySQL root密码丢失处理
没有记住MySQL数据库root用户默认密码(为初始化安装mysql时默认生成) 1)修改/etc/my.cnf文件,在[mysqld]的段中加上一句:skip-grant-tables 重启mysql服务 [root@localhost ~]# service mysqld restart 2)以无密码方式进入mysql: [root@localhost ~]# /usr/local/my…...
RabbitMQ中java实现队列和交换机的声明
java实现队列和交换机的声明 在之前我们都是基于RabbitMQ控制台来创建队列、交换机。但是在实际开发时,队列和交换机是程序员定义的,将来项目上线,又要交给运维去创建。那么程序员就需要把程序中运行的所有队列和交换机都写下来,…...
解决SPA(单页应用)首屏加载速度慢
SPA是目前流行的前端开发模式,相对于传统的多页面用户体验更好,操作更顺畅,开发效率也更高。但是SPA首屏加载速度慢一直是个致命的问题,由于SPA应用首次打开需要一次性加载大量的静态资源,这就导致了加载速度慢的问题&…...
ElementUI框架搭建及组件使用
前言: 当开始使用ElementUI框架来搭建网站或Web应用程序时,了解框架的基本结构和组件的使用是至关重要的。ElementUI是一个基于Vue.js的框架,提供了丰富的UI组件和工具,可以帮助开发人员快速构建现代化的用户界面。 在本文中,我…...
同三维T908转换器 SDI转DVI/HDMI/VGA/色差分量/AV转换器
同三维T908转换器 SDI转DVI/HDMI/VGA/色差分量/AV转换器 1路SDI进,1路DVI(可转HDMI/VGA/色差分量/AV)3.5音频1路SDI出,可以支持音频解嵌,也可把3.5音频加嵌转换输出,输出分辨率可调,支持图像翻转180度 一、产品简介 SDI转万能转…...
【设计模式】【创建型5-5】【原型模式】
文章目录 原型模式代码示例 原型模式 代码使用:spring框架里 bean的作用域 用途,以原型为模板,源源不断的创建(克隆 clone)对象。当直接创建对象的代价比较大时,则采用这种模式。 代码示例 public class…...
原子变量原理剖析
一、原子操作 原子操作保证指令以原子的方式执行,执行过程不被打断。先看一个实例,如下所示,如果thread_func_a和thread_func_b同时运行,执行完成后,i的值是多少? // test.c static int i 0;void thread…...
WebSocket走私实践(附赠LiveGBS监控系统未授权管理员密码重置)
WebSocket走私实践(附赠LiveGBS监控系统未授权管理员密码重置) 对此,我特别感谢TryHackMe和HackTheBox academy,永远相信和追随英国TryHackMe所教导的网络安全知识,并保持学习 WebSocket走私相关的知识在这里 前段时间学习过htt…...
CentOS 7 和 CentOS Stream 8 的主要区别
更新频率: CentOS 7:传统的稳定版本,主要用于生产环境,更新频率较低,主要包含安全补丁和重要修复。CentOS Stream 8:滚动发布版本,更新更频繁,包含最新的特性和改进。它处于 Fedora …...
基于go1.19的站点模板爬虫
一、go1.19 go1.19是Go语言的一个版本,于2021年8月发布。它带来了许多新的功能和改进,包括但不限于以下方面: 并发性能改进:go1.19引入了新的调度器算法,称为“网状调度器(netlink scheduler)”,它可以更好地处理大量并发任务,在某些情况下提高了系统的并发能力。 垃…...
(单机版)神魔大陆|v0.51.0|冰火荣耀
前言 今天给大家带来一款单机游戏的架设:神魔大陆v0.51.0:冰火荣耀。 如今市面上的资源参差不齐,大部分的都不能运行,本人亲自测试,运行视频如下: (单机版)神魔大陆 下面我将详细的教程交给大家,请耐心阅…...
k8s自动补全工具和UI管理界面
分享两个有利于K8S的工具 目录 分享两个有利于K8S的工具 一、部署Dashboard(主节点) 介绍 1.1、查看集群状态 1.2、下载yaml文件并运行Dashboard 1.3、部署服务 1.4、创建访问账户、获取token(令牌) 1.5、浏览器访问Dash…...
内网渗透:内网基础信息收集
Windows: whoami:查看当前当前主机名和登录用户名 whoami /user : 打印当前主机名和输出SID SID的最后一个数字: 1000:普通管理员 500:administrator 501:Guest 516:域控 544:域管理员 net…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
leetcodeSQL解题:3564. 季节性销售分析
leetcodeSQL解题:3564. 季节性销售分析 题目: 表:sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
(转)什么是DockerCompose?它有什么作用?
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器。 Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
