国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

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

发布时间:2019/07/02标签:   代码    点击量:

原标题:JavaScript教程:为Web应用程序添加人脸检测功能
【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*/}}

上一篇:建立强大安全文化的四个建议

下一篇:没有了

返回
版权信息Copyright © IT技术教程 版权所有    ICP备案编号:鲁ICP备09013610号