专注国内外云服务器
分享建站技术教程

为Web应用程序添加人脸检测功能的JavaScript教程

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

吾上云WORDPRESS教程最新“为Web应用程序添加人脸检测功能的JavaScript教程”

今天小编将使用pico.js添加简单的头部跟踪功能,进一步增强我们的多模式界面。pico.js是一个精简的t库,与其说是生产级库不如说是概念证明,但它在我研究过的人脸检测库中似乎效果最好。今天为大家分享为Web应用程序添加人脸检测功能的JavaScript教程。

本文旨在用简单的红点开始显示覆盖在地图上的用户头部位置:

我们先创建一个包装pico.js功能的简单React类,我们可以使用该功能来获取用户人脸的位置更新:

this.setState(face)/>

然后,如果检测到人脸,我们可以使用该人脸位置的细节来渲染组件:

face&&

我们在pico.js方面遇到的第一个挑战是,它用t实现了研究项目,未必是遵循现代t标准的生产级库。除此之外,这意味着你无法执行yarnaddpicojs命令。虽然pico.js入门(https://tehnokv.com/posts/picojs-intro/)深入浅出地介绍了对象检测,但它更像是一篇研究论文,而不像API文档。不过,所附的例子足以实际使用代码。我花了几小时将所附的样本放入到一个比较简单的React类中,我们可以用这个类充分利用代码。

pico.js要做的第一件事是加载级联模型,这需要进行AJAX调用,获取对人脸预训练的模型的二进制表示。(你可以使用同一个库来跟踪其他类型的对象,但需要使用官方的pico实现来训练自定义模型。)我们可以将该模型加载代码放入到componentDidMount生命周期方法中。为了清楚起见,我进一步将示例代码抽象成另一个名为loadFaceFinder的方法:

除了获取和解析人脸检测模型的二进制表示并设置状态外,我们还创建了一个新的camvas,它引用上下文和回调处理程序。camvas库将视频从用户的网络摄像头加载到canvas上,并为渲染的每个帧调用处理程序。loadFaceFinder的内容几乎就是pico.js提供的参考项目的相同副本。我们更改了存储模型的位置,以便可以在状态下访问。我们通过reactRef来引用canvas上下文,而不是使用浏览器提供的DOMAPI。

我们的this.processVideo也几乎与参考项目中提供的代码相同。我们只需要做几处更改。我们只想在加载模型时执行代码,于是对代码的整个主体添加了检查机制。我还使用我们预计用户传入的回调处理程序创建了这个React类,那样我们只在定义该处理程序后运行处理代码:

我所做的唯一其他更改就是发现人脸后我们执行的操作。pico.js示例在canvas上画了几个圆圈,但我们希望改而将数据传回到那个回调处理程序。不妨稍微修改一下代码,以便回调处理程序更容易处理这些值:

此格式让我们可以传回捕获的canvas元素中人脸的绝对位置和半径、canvas元素中人脸的相对位置以及canvas元素中的人脸位置。我们的定制课程基本完成。我还需要对pico.js和pico版本的camvas.js进行几处小的更改才能使用现代语法,但这些更侧重关键字而不是逻辑。

现在我们可以将自定义ReactPico类导入到我们的App中,渲染它,如果检测到人脸就有条件地渲染FaceIndicator类。我使用另外一些人脸检测库后惊讶地发现,pico.js的准确性和易用性很强,尽管它不是功能完备的库。

文章来源于互联网WORDPRESS教程:为Web应用程序添加人脸检测功能的JavaScript教程,
阿里云服务器89元起,点击购买
腾讯云服务器95元/年起 点击购买

相关推荐: 任务栏图标固定后无法删除怎么办

吾上云WORDPRESS教程最新“任务栏图标固定后无法删除怎么办”任务栏图标固定后无法删除的解决方法是:1、右键点击Windows键,选择【Windows PowerShell(管理员)】选项;2、执行【net user User 密码 /add】命令新建账户…

赞(0)
未经允许不得转载:吾上云 » 为Web应用程序添加人脸检测功能的JavaScript教程
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们