浅谈H5业务场景下的人脸识别

微信小程序人脸识别功能(wx.faceDetect)、带扫脸动画、人脸图片获取(upng.js)及位置展示 用到的第三方框架: upng.js及pako.js 2. 创建 camera 上下文 CameraContext 对象 3.获取 Camera 实时帧数据 4.人脸识别,使用前需要通过 wx.initFaceDetect 进行一次初始化,推荐使用相机接口返回的帧数据 5.完整代码 附带绝对定位的圆角图片真机展示问题 父元素添加:-webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); 2. H5人脸识别 阅读详情

吾生也有涯,而知也无涯~欢迎优化补充、指正!
本文主要介绍基于百度的H5业务场景下人脸识别的创建与实现!
首先百度开放平台进入人脸实名认证控制台新建项目:
在这里插入图片描述

在这里插入图片描述
接着在方案清单页面点击「新建方案」按钮,方案类型选择「H5实名认证」
授权声明可以跳过
在这里插入图片描述
接着根据业务需求选择身份证信息录入等功能,官方提供多种认证过程,根据自身需求选用!
本例采用照片活体认证,效果图如下:

在这里插入图片描述
在这里插入图片描述
样本核验指标如下,分为严格、正常、宽松三个等级,越严格,图片对角度、模糊度、遮挡等信息参数把控越高,推荐使用宽松。
在这里插入图片描述
认证结果对比分数值官方推荐阀值80,可根据自身需求进行调整
完成项目配置提交后可扫码体验认证流程:
在这里插入图片描述
接下来进入验证实现步骤
先上代码

public function bd(){
        global $_W,$_GPC;
        if(empty($_W['openid'])){
            header('location: ' . mobileUrl('account/login'));
        }
        $insertid = $_GPC['insertid']; //自定义参数,与实际认证业务处理无关

        $url = 'https://aip.baidubce.com/oauth/2.0/token';
        $post_data = [
            'grant_type' => 'cli********ls',
            'client_id' => 'L45W********n3MQ',
            'client_secret' => '1Tq9********jGb6',
        ];

        $res = $this->request_post($url, http_build_query($post_data));
        $res = json_decode($res, true);

        $accessToken = $res['access_token'];

        /**
         *  获取Verify Token
         */
        $url = sprintf("https://aip.baidubce.com/rpc/2.0/brain/solution/faceprint/verifyToken/generate?access_token=%s", $accessToken);
        $post_data = [
            'plan_id' => "10671" // H5认证方案ID
        ];
        $res = $this->request_post($url, json_encode($post_data));
        $res = json_decode($res, true);
        $verifyToken = $res['result']['verify_token'];
        // 验证成功返回链接
        $successUrl =  mobileUrl("member/index/submit",['insertid' => $insertid,'access_token'=>$accessToken,'verify_token'=>$verifyToken],true);
        // 验证失败返回链接
        $failedUrl = mobileUrl("member/index/submit",['insertid' => $insertid,'access_token'=>$accessToken,'verify_token'=>$verifyToken],true);
        // 生成H5验验跳转链接
        $h5Url = sprintf("https://brain.baidu.com/face/print/?token=%s&successUrl=%s&failedUrl=%s", $verifyToken, urlencode($successUrl), urlencode($failedUrl));
        header(sprintf("Location: %s", $h5Url));

        //include($this->template());
    }
    public function request_post($url = '', $param = '')
    {
        if (empty($url) || empty($param)) {
            return false;
        }

        $postUrl = $url;
        $curlPost = $param;
        $curl = curl_init();//初始化curl
        curl_setopt($curl, CURLOPT_URL, $postUrl);//抓取指定网页
        curl_setopt($curl, CURLOPT_HEADER, 0);//设置header
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);//要求结果为字符串且输出到屏幕上
        curl_setopt($curl, CURLOPT_POST, 1);//post提交方式
        curl_setopt($curl, CURLOPT_POSTFIELDS, $curlPost);
        $data = curl_exec($curl);//运行curl
        curl_close($curl);

        return $data;
    }

如代码所示,先获取access_token(access_token的有效期为30天,建议每次请求重新获取),然后以此获取verify_token
业务H5网页通过获取token接口返回的verify_token信息请求认证H5页面,进行用户端流程操作
URL中的信息填写如下所示:
(1)token:填写verify_token
(2)successUrl:请求成功跳转的网址,网址需要加http/https前缀
(3)failedUrl:请求失败跳转的网址,网址需要加http/https前缀
用户端操作完成后回调上述业务地址,我们在此进行下一步处理

public function submit()
    {
        global $_W,$_GPC;
        $accessToken = $_GPC['access_token'];
        $verifyToken = $_GPC['verify_token'];
        $insertid = $_GPC['insertid']; //自定义参数,与实际认证业务处理无关
        /**
         * 获取认证结果
         */
        $apiUrl = sprintf('https://aip.baidubce.com/rpc/2.0/brain/solution/faceprint/result/detail?access_token=%s', $accessToken);
        $post_data = [
            'verify_token' => $verifyToken // H5认证方案ID
        ];
        $res = $this->request_post($apiUrl, json_encode($post_data));
        $res = json_decode($res, true);
        if(!$res['success'] || $res['result']['verify_result']['score'] < 0.7){
            $this->message("实名认证失败,请返回核对姓名和身份证号码",mobileUrl("member/dataform",[],true));
        }
        # other code
    }

如上所示,根据verify_token进行认证查询,verify_token的独立生成方法见上文!
返回示例如下:

{
    "success": true,
    "result": {
        "idcard_ocr_result": {
            "address": "江苏省淮安市淮阴区XXX",
            "birthday": "19691211",
            "name": "孙XX",
            "id_card_number": "320821XXXXXXX",
            "gender": "女",
            "nation": "汉",
            "expire_time": "XXX",
            "issue_authority": "XXX",
            "issue_time": "XXX"
        },
        "verify_result": {
            "liveness_score": 0.39,
            "score": 11.65885925
        },
        "idcard_confirm": {
            "name": "孙XX",
            "idcard_number": "320821XXXXXXX"
        }
    },
    "log_id": "1436111694"
}

在这里插入图片描述
示例根据score进行判断,数值越大则认证越严格!
以上就是人脸识别的全部流程,博文创建时间仓促,欢迎指正与讨论!
注:示例是在微擎下搭建的,其它框架请自行调整!

使用face-api实现html前端摄像头人脸检测 face-api的github链接:face-api.js 里面的readme写的有点难以理解,再附一个讲解的网址:讲解如何使用webcam实现人脸检测:Build Real Time Face Detection With JavaScript 本文代码基本就是这个视频里的代码扒过来的,看不了视频的直接看这篇文章就可以了。 1. 准备 下载face-api:https://github.com/justadudewhohacks/face-api.js.git 新建一个自己的文件夹,将刚才下好的fac 阅读详情

相关推荐

H5实现人脸抓拍

近期遇到个需求,要求是在H5网页上实现人脸抓拍。这可咋搞噢。无法,硬着头皮开干咯。 实现目标:检测到人脸并自动抓拍 <!DOCTYPE html> <html lang=en style="font-size: 37.5px"> <head> <meta charset=utf-8> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=

wangweiruning的博客 2912

VUE项目-H5端人脸识别功能实现

1.人脸捕捉技术使用的tracking.js,关键是要理解它的运作原理和一下参数配置。2.因为要调用手机媒体设备,兼容性问题是大问题,特别是苹果手机的问题,往往不知道如何下手,需要有丰富的开发经验和各种曲线救国的开发思想。

Jack, what else can you do besides holding your little darling? 9839

活体检测H5文档及示例代码--人脸识别

活体检测H5简介 人脸识别 微信官方Demo 微信公众平台(视频接口)开发编程文档

人脸识别H5页面(打开指定摄像头navigator,绘制人脸框tracking.js)

【代码】人脸识别H5页面(打开指定摄像头navigator,绘制人脸框tracking.js)

m0_56930676的博客 4755

人脸扫描Canvas动画

最近研究web端人脸识别,H5拉起摄像头截取单帧图片,提交到后台进行人脸1:N搜索,发现web端没有人脸扫码的动画,因此,抽空写了个人脸扫描的动画。

基于HTML5 的人脸识别活体认证的实现方法

下面小编就为大家带来一篇基于HTML5 的人脸识别活体认证的实现方法。小编觉得挺不错的, 现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

H5调用手机拍照显示并压缩

近期在做一个人脸识别相关的项目,其中有一个功能是人脸绑定,需要拍一张人脸就好。 测试发现Android机型上拍照没问题,ios调取拍照有问题,后来经过测试修改,以下程序可以解决; HTML: <!---拍照完成显示所拍图片---> <img id="imgTag" src="${ctxImg}/saomiao.jpg" width="350px" height="250px" alt="imgTag" > <!---使用input-type的file属性,设置acce

zfr_xuexiao66的博客 1166

OpenWebUI外部模型配置异常排查与修复指南

本文详细解析了OpenWebUI外部模型配置异常的常见问题及解决方案,包括隐藏字符、数据库锁死等典型现象。通过错误日志分析和数据库修复实战指南,帮助开发者快速定位并解决配置问题,确保OpenWebUI与第三方大模型的稳定连接。

weixin_29205061的博客 312

uniapp H5人脸识别带前后摄像头

人脸识别在H5页面进行采集

wuxinfuchen的博客 5920

STC8单片机低功耗延时优化实践:从循环等待到定时唤醒

本文深入探讨了STC8单片机低功耗延时优化的核心方法,即利用掉电唤醒定时器(WKT)替代传统的循环等待,实现从“空转耗电”到“定时唤醒”的转变。通过实战代码演示了如何编写低功耗延时函数,将待机电流从mA级降至μA级,并分析了精度、唤醒时间等关键权衡点,为电池供电的物联网设备提供了有效的续航优化方案。

pea55的博客 326

从零构建高精度电子秤:HX711与STM32的时序通信陷阱与实战避坑指南

本文详细解析了使用STM32F103C8T6与HX711模块构建高精度电子秤的通信时序陷阱与实战解决方案。重点探讨了微秒级延迟实现、数据读取算法、校准方法和滤波优化,帮助开发者避开常见通信问题,提升电子秤的测量精度和稳定性。

data3的博客 782

H5 调用人脸识别

其实这个东西就是调用户的摄像头,之后把录制的每一帧都加到 canvas 里面,再利用 标签回显出来,以下是简单实例。之后 当按钮点击时 开始录制 我这里设置了 3秒后自动停止录制 , 并监听录制结束之后的一系列操作,也就是 : video:{width:200,height:200} 这句代码。注意一下这个分辨率 如果你想控制最后录制完视频的大小 这个很关键。第二步 获取用户的摄像头 ( 需要用户手动确认权限 )JavaScript 首先,找下元素。保证你的 HTML 有以下结构。

m0_69576888的博客 1215

kaggle注册以及数据集下载全流程

kaggle注册,数据集下载及常见问题

Arriteey的博客 2万+

Html5调用手机摄像头并实现人脸识别

文章来自:https://www.shengli.me/h5/490.html 代码:     canvas获取摄像头图片   调用百度API   手机适配:   1、由于Android6之后,Android的权限管理出现变化,Android原生的壳子,需要做如下处理:      ...

hugejihu9的专栏 7407

如何在win11中用双硬盘或移动硬盘装Ubuntu 20.04 双系统

win11 安装双系统

qq_42817360的博客 5141

Linux系统故障排查思路实践教程(上)

本文主要介绍了Linux系统日志分析与常见故障排查的实用方法。首先从系统日志的分类及其涉及的日志文件进行说明;其次详细讲解了忘记用户密码的解决方案;接着对系统无法启动问题,提供了异常断电后修复文件系统、/etc/fstab文件丢失恢复等常见故障的处理方案。最后介绍了文件系统只读错误的排查思路和修复方法,包括磁盘空间检查、文件系统修复等实用技巧。全文提供了大量具体命令和操作流程,为Linux系统维护人员提供了实用的故障处理指南。

提供C#相关开发 、云计算、运维测试、网络安全相关技术分享与服务,有意向可联系。 330

h5人脸识别/人脸检测

演示效果 实现效果步骤 获取摄像头权限 navigator.mediaDevices.getUserMedia //api 安装 tracking js 插件 这个主要是解决人脸跟踪检测 要求当前环境是https https 环境可以用小皮环境工具模拟开发环境 案例代码 html代码 <video id="video" style="width: 100%;height: 80vh;"></video> 下面的canvas 理论上不需要除非你需要别的功能例

BLUESKYHOST的博客 3199

6.8 点云相关软件——CoProcess

摘要 CoProcess是华测导航研发的三维点云全流程处理平台,支持海量数据浏览、编辑及多类型成果输出,适配地形测绘、道路建设等行业需求。软件采用模块化设计,包含基础功能(数据导入、分类、建模等)和行业定制模块(地形、道路、矿山等),支持多格式数据交互与自动化处理,显著提升作业效率。相比Lidar360,CoProcess操作更简便、性价比更高;相比开源工具CloudCompare,其行业适配性与专业功能更优。2025版本优化了数据处理性能与智能算法,需授权激活高级功能,适合商业项目应用。

qq625924821的博客 248

vue-h5项目调用微信的相机相册功能

vue-h5项目调用微信的相机相册功能 微信的官网网址为:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 微信公众号使用js-sdk的接口链接 以下是我本次调用微信相机获取本地图片的一个项目经验 1,在html文件中引入微信的接口 <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 2,在utils

肖帅的博客 3059

2025年数学建模国赛高教社杯A题、B题、C题、D题、E题详细思路和代码 模型||插值与拟合

核心思想:构造一个精确通过所有已知离散数据点(xi, yi)的函数y = f(x),并以此函数来估算或预测未知点的值。基本假设:我们认为已知的数据点是100%精确、无误差的(或者误差可忽略不计),比如理论计算值、高精度仪器测量值等。我们的目标是“还原”或“重建”出点与点之间的真实函数关系。关键特征精确性:曲线或曲面必须穿过每一个样本点。局部性:插值结果严重依赖于局部数据点的分布和数值。用途:用于“补全”数据、填充缺失值、进行函数近似等。常见方法多项式插值:拉格朗日插值、牛顿插值。

2201_76125261的博客 802

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

h5前端人脸识别

h5前端人脸识别

qq_41157351的博客 1948

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

h5调用手机摄像头获取图片用于人脸识别

h5调用手机摄像头获取图片用于人脸识别

linziping的博客 2846

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

H5人脸识别(tracking.js),并保存人脸为图片(也可保存人脸部分)

前端人脸识别框架:https://trackingjs.com 下载zip包获取里面的 face.min.js 及 tracking-min.js wx.faceDetect

thj13896076523的博客 6058

mui H5 人脸识别 基于百度AI

1、前端 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-sc...

wudiansheng的博客 1616

人脸核身 微信h5_微信小程序人脸核身---快速入门到实战(附开发工具类,复制即用)...

这里咱们使用腾讯云的人脸核身来给你们作一个基础的介绍和使用java1、基本介绍1.概述人脸核身:通常是对一组对用户身份信息真实性进行验证审核的服务套件提供各种认证功能模块,包含证件 OCR 识别、活体检测、人脸1 : 1对比等能力,以解决行业内大量对用户身份信息核实的需求。web2.功能特色OCR 识别支持识别身份证正反面,一次扫描便可返回身份证号、姓名、有效时间等全部字段,数字识别准确率达到 9...

weixin_39724362的博客 1423

vue-微信H5-拍照和视频,加人像框

【代码】vue-微信H5-拍照和视频,加人像框。

眾K的博客 2773
上一篇: 浅谈抓包工具之Fiddler篇
下一篇: PHP生成PDF文件
默先森-Jan
博客等级 码龄9年 1粉丝 19原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值