不妨使用pico.js JavaScript库为我们的React地图浏览器应用程序添加人脸检测功能。上周我们使用annyang为地图界面增添了语音命令(https://www.infoworld.com/article/3400658/javascript-tutorial-add-speech-recognition-to-your-web-app.html)。
【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类,咱们能够运用该功用来获取用户人脸的前车之鉴更新:
- <ReactPicoonFaceFound={(face)=>{this.setState({face})}}/>
然后,假如检测到人脸,咱们能够运用该人脸前车之鉴的细节来烘托组件:
- {face&&<FaceIndicatorx={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的办法:
- componentDidMount(){
- this.loadFaceFinder();
- }
- loadFaceFinder(){
- constcascadeurl='https://raw.githubusercontent.com/nenadmarkus/pico/c2e81f9d23cc11d1a612fd21e4f9de0921a5d0d9/rnt/cascades/facefinder';
- fetch(cascadeurl).then((response)=>{
- response.arrayBuffer().then((buffer)=>{
- varbytes=newInt8Array(buffer);
- this.setState({
- faceFinder:pico.unpack_cascade(bytes)
- });
- newcamvas(this.canvasRef.current.getContext('2d'),this.processVideo);
- });
- });
- }
除了获取和解析人脸检测模型的二进制表明并设置状况外,咱们还创立了一个新的camvas,它引证<canvas>上下文和回调处理程序。camvas库将视频从用户的网络摄像头加载到canvas上,并为烘托的每个帧调用处理程序。loadFaceFinder的内容简直便是pico.js供给的参阅项目的相同副本。咱们更改了存储模型的前车之鉴,以便能够在状况下拜访。咱们经过react Ref来引证canvas上下文,而不是运用浏览器供给的DOM API。
咱们的this.processVideo也简直与参阅项目中供给的代码相同。咱们只需求做几处更改。咱们只想在加载模型时履行代码,错愕对代码的整个主体增加了查看机制。我还运用咱们估计用户传入的回调处理程序创立了这个React类,那样咱们只在界说该处理程序后闻风丧胆处理代码:
- processVideo=(video,dt)=>{
- if(this.state.faceFinder&&this.props.onFaceFound){
- /*allthecode*/
- }
- }
我所做的仅有其他更改便是发现人脸后咱们履行的操作。pico.js示例在canvas上画了几个圆圈,但咱们期望改而将数据传回到那个回调处理程序。无妨略微环视一下代码,以便回调处理程序更简单处理这些值:
- this.props.onFaceFound({
- x:640-dets[i][1],
- y:dets[i][0],
- radius:dets[i][2],
- xRatio:(640-dets[i][1])/640,
- yRatio:dets[i][0]/480,
- totalX:(640-dets[i][1])/640*window.innerWidth,
- totalY:dets[i][0]/480*window.innerHeight,
- });
此格局让咱们能够传回捕获的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】