网站开发a — ajax,做网站推广哪些,wordpress 教程 插件,芯片联盟最新消息作者#xff1a;沫沫 政采云前端团队转发链接#xff1a;https://mp.weixin.qq.com/s/fRDpXixnLIy9c0Uh2tMezQ前言近些年来#xff0c;随着生物识别技术的逐渐成熟#xff0c;基于深度学习的人脸识别技术取得了突破性进展#xff0c;准确率显著提高。现阶段#xff0c;人…作者沫沫 政采云前端团队转发链接https://mp.weixin.qq.com/s/fRDpXixnLIy9c0Uh2tMezQ前言近些年来随着生物识别技术的逐渐成熟基于深度学习的人脸识别技术取得了突破性进展准确率显著提高。现阶段人脸识别身份验证作为非常重要的身份验证方式已被广泛的应用于诸多行业和领域例如支付宝付款、刷脸签到等方面。其优点在于以人脸为识别对象识别过程更加友好、便捷只需被识别者进入摄像范围内即可不会引起被识别者的反感和警惕。目前市面上的应用场景主要集中在移动端而基于 Web 浏览器端的人脸识别身份验证方案较少。本文将介绍基于 Web 浏览器端的人脸识别身份验证的整体方案以及重点讲解如何在 Web 浏览器中实现人脸自动采集。场景描述及分析适用场景人脸识别身份实名认证。用户使用人脸识别身份验证功能时只需要将人脸对准摄像头程序自动对人脸进行检测。如果检测到当前摄像头可视区域内仅存在唯一一个人脸则采集当前人脸图片进行人脸对比、活体检测、身份证识别等多项组合能力快速完成用户身份核验。从上述场景描述中分析出几个关键问题及解决方案考虑到 Web 端性能活体检测交由服务端处理比较合适。具体可参考百度 AI 活体检测 (https://ai.baidu.com/tech/face/faceliveness)个人身份证上的高清照片是无法直接获取到的。可以使用 百度 AI 的实名身份认证服务 (https://ai.baidu.com/tech/face/personverify)将待比对的人脸图片 身份证号码 姓名上传到百度 AI 服务会返回图片的匹配度(0~100)。其底层调用的也是公安的实名认证接口使用开源的人脸采集 JS 库。需要支持单个和多个人脸检测经横向对比目前常用的开源人脸采集 JS 库Face-api.js 在性能和准确度上更胜一筹face-api.js 基于 TensorFlow.js 内核实现了三种卷积神经网络架构用于完成人脸检测、识别和特征点检测任务可以在浏览器中进行人脸识别。其内部实现了一个非常轻巧快速准确的 68 点面部标志探测器。支持多种 tf 模型微小模型仅为 80kb。另外它还支持 GPU 加速相关操作可以使用 WebGL 运行tracking.js : 一个独立的 JavaScript 库主要实现了颜色和人(人脸、五官等)的跟踪检测。可以通过检测到某特定颜色或者检测一个人体/脸的出现与移动来触发 JavaScript 事件然后对人脸进行采集。Tracking.js 是使用 CPU 进行计算的在图像的矩阵运算效率上相对 GPU 要慢一些通过 navigator.mediaDevices.getUserMedia API(基于 WebRTC)可以获取到摄像头拍摄的实时视频流数据问题一如何获取到摄像头拍摄的实时视频流数据问题二如何检测到实时视频流中存在唯一人脸并进行采集问题三实名身份验证怎么实现如何获取到身份证上的高清照片进行比对问题四活体检测怎么实现整体方案主要分为以下几个关键步骤调用摄像头(需获得用户授权允许)获取摄像头的视频流数据使用 face-api.js 识别视频流中的人脸特征点定位出人脸的位置符合人脸特征时暂停视频流根据视频流当前帧绘制图像将图像转成 Base64 编码上传到服务端服务端调用百度 AI 的接口与身份证上的图片信息进行比对并进行活体检测实现细节在上述方案中想必大家对摄像头检测、实时视频流数据获取、Canvas 图片绘制这些都比较熟悉我这边就不详细讲解了。部分同学没接触过也没关系具体实现比较简单可以直接看 源码 (https://github.com/Angela-Chen/face-api-demo)源码里面关于这些都有详细的注解。下面我详细讲下如何使用 face-api.js 在实时视频流中进行人脸的检测1、引入 face-apiscript 标签方式获取 最新脚本 (https://github.com/justadudewhohacks/face-api.js/tree/master/dist)或者 使用 npm 方式npm install face-api.js2、加载模型数据“加载模型数据是异步操作。需要等模型数据加载完成后才能开始人脸检测。// 加载所有模型数据models 是存放模型数据文件的目录await faceapi.loadModels(/models); // 加载单个指定的模型数据await faceapi.loadTinyFaceDetectorModel(/models);await faceapi.loadSsdMobilenetv1Model(/models);await faceapi.loadMtcnnModel(/models);3、检测人脸“当人脸被检测到符合模型的配置参数后就会被认为检测到人脸了然后返回一个detection对象包括了人脸匹配度、人脸坐标等信息。可用于后续自定义绘制人脸边界框以及阈值的逻辑判断。faceapi.detectAllFaces 检测图像中的所有人脸faceapi.detectSingleFace 检测单个人脸返回图像中具有最高置信度得分的人脸// 数据源支持HTMLImageElement | HTMLVideoElement | HTMLCanvasElement 类型// 不同的模型有不同的配置参数下面会详细介绍const detections1 await faceapi.detectAllFaces(待检测的数据源, 模型的配置参数);const detections2 await faceapi.detectSingleFace(待检测的数据源, 模型的配置参数);4、常用人脸检测模型介绍(1) Tiny Face Detector 是一款性能非常高的实时人脸检测模型与 SSD Mobilenet V1 人脸检测模型相比它更快更小资源消耗更少量化模型的大小仅为 190 KB(tiny_face_detector_model)但它在检测小脸时的表现稍差。加载时长 8 ms左右// 模型的配置参数new faceapi.TinyFaceDetectorOptions({ // 输入的数据源大小这个值越小处理速度越快。常用值128, 160, 224, 320, 416, 512, 608 inputSize: number, // default: 416 // 用于过滤边界的分数阈值大于等于这个值才被认为检测到了人脸然后返回一个detection对象 scoreThreshold: number // default: 0.5});(2) SSD Mobilenet V1 对于面部检测该模型实现了基于 MobileNetV1 的 SSD(单次多核检测器)。神经网络将计算图像中每个面部的位置并将返回边界框以及每个面部的概率。该面部检测器旨在获得检测面部边界框而不是低推理时间的高精度。量化模型的大小约为 5.4 MB(ssd_mobilenetv1_model)。加载时长 2-3s 左右// 模型的配置参数new faceapi.SsdMobilenetv1Options({ // 最小置信值大于等于这个值才被认为检测到了人脸然后返回一个detection对象 minConfidence: number, // default: 0.5 // 最多返回人脸的个数 maxResults: number // default: 100});(3) MTCNN MTCNN(多任务级联卷积神经网络)代表了 SSD Mobilenet v1 和 Tiny Yolo v2 的替代面部检测模型它提供了更多的配置空间。通过调整输入参数MTCNN 应该能够检测各种面部边界框大小。MTCNN 是一个 3 级级联 CNN它同时返回 5 个面部标志点以及每个面的边界框和分数。此外型号尺寸仅为 2 MB。加载时长 1-2s 左右// 模型的配置参数new faceapi.MtcnnOptions({ // 人脸尺寸的最小值小于这个尺寸的人脸不会被检测到 minFaceSize: number, // default: 20 // 用于过滤边界的分数阈值分别可以设置3个阶段盒子的阈值。 scoreThresholds: number[], // default: [0.6, 0.7, 0.7] // 比例因子用于计算图像的比例步长 scaleFactor: number, // default: 0.709 // 经过CNN的输入图像缩放版本的最大数量。数字越小检测时间越短但相对准确度会差一些。 maxNumScales: number, // default: 10 // 手动设置缩放步长 scaleSteps scaleSteps?: number[],});特别说明:模型的配置参数设置非常重要需要慢慢的微调能优化识别性能和比对的正确性实测下来Tiny Face Detector 模型的性能非常好检测的准确度也不错只有人脸很小的时候会有较大偏差scoreThreshold 阈值为 0.6 时最佳注意事项由于 Web 端的人脸识别将依赖于本地摄像头的唤起因此对于本地摄像头的调用需要进行详细的错误捕获和处理以便明确的提示用户该如何操作。下面已枚举出所有可能出现的报错const errorMap { NotAllowedError: 摄像头已被禁用请在系统设置或者浏览器设置中开启后重试, AbortError: 硬件问题导致无法访问摄像头, NotFoundError: 未检测到可用摄像头, NotReadableError: 操作系统上某个硬件、浏览器或者网页层面发生错误导致无法访问摄像头, OverConstrainedError: 未检测到可用摄像头, SecurityError: 摄像头已被禁用请在系统设置或者浏览器设置中开启后重试, TypeError: 类型错误未检测到可用摄像头};await navigator.mediaDevices.getUserMedia({video: true}) .catch((error) { if (errorMap[error.name]) { alert(errorMap[error.name]); }});http 协议下Chrome 浏览器无法调用本地摄像头Chrome 浏览器出于安全性的考虑现只支持 HTTPS 协议 和 localhost 下调用摄像头。HTTP 协议下是无法调用摄像头的。如果一定要在 HTTP下调用到摄像头只能修改 Chrome 浏览器的配置项但不建议这么做源码获取查看源码 (https://github.com/Angela-Chen/face-api-demo)推荐JavaScript经典实例学习资料文章《「前端进阶」高性能渲染十万条数据(时间分片)》《「前端进阶」高性能渲染十万条数据(虚拟列表)》《图解 Promise 实现原理(一)基础实现》《图解 Promise 实现原理(二)Promise 链式调用》《图解 Promise 实现原理(三)Promise 原型方法实现》《图解 Promise 实现原理(四)Promise 静态方法实现》《实践教你从零构建前端 Lint 工作流「干货」》《高性能多级多选级联组件开发「JS篇」》《深入浅出讲解Node.js CLI 工具最佳实战》《延迟加载图像以提高Web网站性能的五种方法「实践」》《比较 JavaScript 对象的四种方式「实践」》《使用Service Worker让你的 Web 应用如虎添翼(上)「干货」》《使用Service Worker让你的 Web 应用如虎添翼(中)「干货」》《使用Service Worker让你的 Web 应用如虎添翼(下)「干货」》《前端如何一次性处理10万条数据「进阶篇」》《推荐三款正则可视化工具「JS篇」》《如何让用户选择是否离开当前页面「JS篇」》《JavaScript开发人员更喜欢Deno的五大原因》《仅用18行JavaScript实现一个倒数计时器》《图文细说JavaScript 的运行机制》《一个轻量级 JavaScript 全文搜索库轻松实现站内离线搜索》《推荐Web程序员常用的15个源代码编辑器》《10个实用的JS技巧「值得收藏」》《细品269个JavaScript小函数让你少加班熬夜(一)「值得收藏」》《细品269个JavaScript小函数让你少加班熬夜(二)「值得收藏」》《细品269个JavaScript小函数让你少加班熬夜(三)「值得收藏」》《细品269个JavaScript小函数让你少加班熬夜(四)「值得收藏」》《细品269个JavaScript小函数让你少加班熬夜(五)「值得收藏」》《细品269个JavaScript小函数让你少加班熬夜(六)「值得收藏」》《深入JavaScript教你内存泄漏如何防范》《手把手教你7个有趣的JavaScript 项目-上「附源码」》《手把手教你7个有趣的JavaScript 项目-下「附源码」》《JavaScript 使用 mediaDevices API 访问摄像头自拍》《手把手教你前端代码如何做错误上报「JS篇」》《一文让你彻底搞懂移动前端和Web 前端区别在哪里》《63个JavaScript 正则大礼包「值得收藏」》《提高你的 JavaScript 技能10 个问答题》《JavaScript图表库的5个首选》《一文彻底搞懂JavaScript 中Object.freeze与Object.seal的用法》《可视化的 JS动态图演示 - 事件循环 Event Loop的过程》《教你如何用动态规划和贪心算法实现前端瀑布流布局「实践」》《可视化的 js动态图演示 Promises Async/Await 的过程》《原生JS封装拖动验证滑块你会吗「实践」》《如何实现高性能的在线 PDF 预览》《细说使用字体库加密数据-仿58同城》《Node.js要完了吗》《Pug 3.0.0正式发布不再支持 Node.js 6/8》《纯JS手写轮播图(代码逻辑清晰通俗易懂)》《JavaScript 20 年 中文版之创立标准》《值得收藏的前端常用60余种工具方法「JS篇」》《箭头函数和常规函数之间的 5 个区别》《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》《「前端篇」不再为正则烦恼》《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》《深入细品浏览器原理「流程图」》《JavaScript 已进入第三个时代未来将何去何从》《前端上传前预览文件 image、text、json、video、audio「实践」》《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》《推荐13个有用的JavaScript数组技巧「值得收藏」》《前端必备基础知识window.location 详解》《不要再依赖CommonJS了》《犀牛书作者最该忘记的JavaScript特性》《36个工作中常用的JavaScript函数片段「值得收藏」》《Node H5 实现大文件分片上传、断点续传》《一文了解文件上传全过程(1.8w字深度解析)「前端进阶必备」》《【实践总结】关于小程序挣脱枷锁实现批量上传》《手把手教你前端的各种文件上传攻略和大文件断点续传》《字节跳动面试官请你实现一个大文件上传和断点续传》《谈谈前端关于文件上传下载那些事【实践】》《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》《最全的 JavaScript 模块化方案和工具》《「前端进阶」JS中的内存管理》《JavaScript正则深入以及10个非常有意思的正则实战》《前端面试者经常忽视的一道JavaScript 面试题》《一行JS代码实现一个简单的模板字符串替换「实践」》《JS代码是如何被压缩的「前端高级进阶」》《前端开发规范命名规范、html规范、css规范、js规范》《【规范篇】前端团队代码规范最佳实践》《100个原生JavaScript代码片段知识点详细汇总【实践】》《关于前端174道 JavaScript知识点汇总(一)》《关于前端174道 JavaScript知识点汇总(二)》《关于前端174道 JavaScript知识点汇总(三)》《几个非常有意思的javascript知识点总结【实践】》《都2020年了你还不会JavaScript 装饰器》《JavaScript实现图片合成下载》《70个JavaScript知识点详细总结(上)【实践】》《70个JavaScript知识点详细总结(下)【实践】》《开源了一个 JavaScript 版敏感词过滤库》《送你 43 道 JavaScript 面试题》《3个很棒的小众JavaScript库你值得拥有》《手把手教你深入巩固JavaScript知识体系【思维导图】》《推荐7个很棒的JavaScript产品步骤引导库》《Echa哥教你彻底弄懂 JavaScript 执行机制》《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》《深入解析高频项目中运用到的知识点汇总【JS篇】》《JavaScript 工具函数大全【新】》《从JavaScript中看设计模式(总结)》《身份证号码的正则表达式及验证详解(JavaScriptRegex)》《浏览器中实现JavaScript计时器的4种创新方式》《Three.js 动效方案》《手把手教你常用的59个JS类方法》《127个常用的JS代码片段每段代码花30秒就能看懂-【上】》《深入浅出讲解 js 深拷贝 vs 浅拷贝》《手把手教你JS开发H5游戏【消灭星星】》《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》《手把手教你全方位解读JS中this真正含义【实践】》《书到用时方恨少一大波JS开发工具函数来了》《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》《手把手教你JS 异步编程六种方案【实践】》《让你减少加班的15条高效JS技巧知识点汇总【实践】》《手把手教你JS开发H5游戏【黄金矿工】》《手把手教你JS实现监控浏览器上下左右滚动》《JS 经典实例知识点整理汇总【实践】》《2.6万字JS干货分享带你领略前端魅力【基础篇】》《2.6万字JS干货分享带你领略前端魅力【实践篇】》《简单几步让你的 JS 写得更漂亮》《恭喜你获得治疗JS this的详细药方》《谈谈前端关于文件上传下载那些事【实践】》《面试中教你绕过关于 JavaScript 作用域的 5 个坑》《Jquery插件(常用的插件库)》《【JS】如何防止重复发送ajax请求》《JavaScriptCanvas实现自定义画板》《Continuation 在 JS 中的应用「前端篇」》作者沫沫 政采云前端团队转发链接https://mp.weixin.qq.com/s/fRDpXixnLIy9c0Uh2tMezQ
