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

编译作者: 布加迪 2019-07-02 08:00:00

【51CTO.com快译】上周我们使用annyang为地图界面增添了语音命令(https://www.infoworld.com/article/3400658/javascript-tutorial-add-speech-recognition-to-your-web-app.html)。本周我们将使用pico.js添加简单的头部跟踪功能,进一步增强我们的多模式界面。pico.js是一个精简的JavaScript库,与其说是生产级库不如说是概念证明,但它在我研究过的人脸检测库中似乎效果最好。

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

图1

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

  1. <ReactPico onFaceFound={(face) => {this.setState({face})}} /> 

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

  1. {face && <FaceIndicator x={face.totalX} y={face.totalY} />} 

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

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

  1. componentDidMount() { 
  2.     this.loadFaceFinder(); 
  3.   } 
  4.   loadFaceFinder() { 
  5.     const cascadeurl = 'https://raw.githubusercontent.com/nenadmarkus/pico/c2e81f9d23cc11d1a612fd21e4f9de0921a5d0d9/rnt/cascades/facefinder'
  6.     fetch(cascadeurl).then((response) => { 
  7.       response.arrayBuffer().then((buffer) => { 
  8.         var bytes = new Int8Array(buffer); 
  9.         this.setState({ 
  10.           faceFinder: pico.unpack_cascade(bytes) 
  11.         }); 
  12.         new camvas(this.canvasRef.current.getContext('2d'), this.processVideo); 
  13.       }); 
  14.     }); 
  15.   } 

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

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

  1. processVideo = (video, dt) => { 
  2.     if(this.state.faceFinder && this.props.onFaceFound) { 
  3.       /* all the code */ 
  4.     } 

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

  1. this.props.onFaceFound({ 
  2.           x: 640 - dets[i][1], 
  3.           y: dets[i][0], 
  4.           radius: dets[i][2], 
  5.           xRatio: (640 - dets[i][1]) / 640, 
  6.           yRatio: dets[i][0] / 480, 
  7.           totalX: (640 - dets[i][1]) / 640 * window.innerWidth, 
  8.           totalY: dets[i][0] / 480 * window.innerHeight, 
  9.           }); 

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

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

原文标题:JavaScript tutorial: Add face detection to your web app,作者:Jonathan Freeman

【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】

JavaScript Web 对象
上一篇:追一科技AI Lab:业务与技术双轮驱动,打造智能交互应用新高度 下一篇:什么?神经网络还能创造新知识?
评论
取消
暂无评论,快去成为第一个评论的人吧

更多资讯推荐

2019年度十大Web开发趋势

本文和您一起讨论那些本年度改变软件开发行业、特别是Web开发方面的十大趋势。

陈峻 ·  20h前
2019年用于JavaScript的6大机器学习库

通常,人们使用两种编程语言之一来应用机器学习(ML)方法和算法:Python或R.关于机器学习的书籍,课程和教程通常也使用这些语言中的一种(或两者)。

爱码农 ·  2019-07-17 09:59:46
2019年11个值得研究的Javascript机器学习库

虽然大部分机器学习都是用python这样的语言完成的,但在Javascript生态系统中,其前端和后端社区都很棒。这里分享有一些有趣的库,它们将Javascript,机器学习,DNN甚至NLP结合在一起。

EdgeAITech ·  2019-03-18 08:12:31
JavaScript也能玩机器学习 推荐5个开源 JavaScript 机器学习框架

作为一名Web的前端开发者,我很好奇机器学习是如何工作的。我并没计划要系统学习关于机器学习(ML)、神经网络、NLP自然语言处理之类的知识,不过光看到这些概念就觉得很有意思,简直是打开了一个新的世界。

极链科技Video++技术中心前端Team ·  2018-10-11 10:37:31
五个最热门的开源机器学习JavaScript框架

如果你是一位想要深入机器学习的 JavaScript 程序员或想成为一位使用 JavaScript 的机器学习专家,那么这些开源框架也许会吸引你。

Dr.michael J.garbade ·  2018-07-10 08:40:36
【探究】八种支持机器学习模型训练的JavaScript框架

在本文章中,您将了解到不同的机器学习JavaScript框架,包括:DeepLearn.js、PropelJS、ML-JS、ConvNetJS、KerasJS、STDLib、Limdu.js和Brain.js。

陈峻 ·  2018-03-09 09:00:00
10个机器学习的JavaScript示例

虽然许多JavaScript语言编写的机器学习库是刚刚诞生并且还在持续开发中,但还是值得去尝试使用它们。这篇文章会介绍几个JavaScript语言编写的机器学习库以及一些很酷的AI Web应用示例,它们可以很好的帮助你开始AI之旅。

雪飞鸿 ·  2017-12-05 11:25:09
颠覆传统安全方式,AI重新定义Web安全

从 2006 年 Amazon 发布 EC2 服务至今,已经过去了 11 年。在这 11 年里,AWS 收入从几十万美金上涨到 100 多亿美金,让云计算走进每一家企业。

丛磊 ·  2017-10-12 09:10:33
Copyright©2005-2019 51CTO.COM 版权所有 未经许可 请勿转载