【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】