【.com快译】上周我们使用annyang给地图界面添加语音命令（https://www.infoworld.com/article/3400658/javascript-tutorial-add-speech-recognition-to-your-web-app.html）。本周我们将通过使用pico.js添加简单的头部跟踪功能来进一步增强我们的多模式界面。pico.js是一个精简的JavaScript库，与其说是生产级库，不如说是概念验证，但它似乎在我研究过的人脸检测库中效果最好。本文旨在从一个简单的红点开始，该红点显示用户头部覆盖在地图上的位置：图1让我们从创建一个简单的React类开始，该类包装了pico.js功能，我们可以使用该功能来获取关于用户头部位置的更新用户的脸：{this.setState({face})}}/>然后，如果检测到一张脸，我们可以渲染包含该脸位置细节的组件：{face&&}我们对pico.js的第一个挑战是它用JavaScript实现研究项目，不一定是遵循现代JavaScript标准的生产级库。除此之外，这意味着您无法执行yarnaddpicojs命令。虽然pico.js简介(https://tehnokv.com/posts/picojs-intro/)提供了对对象检测的深入介绍，但它更像是一篇研究论文，而不是API文档。但是，附带的示例足以实际使用代码。我花了几个小时将附加示例放入一个相对简单的React类中，我们可以使用它来充分利用我们的代码。pico.js做的第一件事是加载级联模型，这需要AJAX调用来获取面部预训练模型的二进制表示。（你可以使用相同的库来跟踪其他类型的对象，但你需要使用官方的pico实现来训练自定义模型。）我们可以将这个模型加载代码放在componentDidMount生命周期方法中。为了清楚起见，我进一步将示例代码抽象为另一个名为loadFaceFinder的方法：/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，它引用了
