--- title: How to Build Your Own Facial Recognition Web App description: Build your own facial recognition web application with Rest API in Node.js using Express and face-api.js. image: https://blog.avenuecode.com/hubfs/flat-gda64fc2c5_1280.png --- [AvenueCode.com](https://avenuecode.com) [News](https://avenuecode.com/news) [Contact](https://avenuecode.com/contact) [![Avenue Code Snippets Logo](https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/AC-Snippets---Black.png)](https://blog.avenuecode.com/?hsLang=en-us) *menu* - Technology [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us) [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) - [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) - [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) - [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) - [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) - [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) - [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) - [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) - [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) - [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) # [How to Build Your Own Facial Recognition Web App](https://blog.avenuecode.com/how-to-build-your-own-facial-recognition-web-app) - [Tweet](https://twitter.com/share) *perm\_identity* [Tiago Queiroz](https://blog.avenuecode.com/how-to-build-your-own-facial-recognition-web-app/author/tiago-queiroz?hsLang=en-us) *schedule* 2/9/22 2:00 PM When we hear about facial recognition, we often think of complex algorithms, powerful machines, and high-level processing. But did you know that you can easily build your own web application that generates fast and accurate results?   ##### About Facial Recognition Facial recognition has been discussed and studied for years within the AI (Artificial Intelligence) community. The first book on the subject was published in 1977 by Japanese scientist Takeo Kanade. Since then, this technology has been improved and new recognition methods have emerged. Large companies across industries utilize facial recognition technologies in their environments. Examples include airlines validating travelers and government institutions identifying felons, among others. The term "facial recognition" suggests complex algorithms, powerful machines, high-level processing, etc., so I decided to carry out some research on the topic in order to discover new, “easier” ways to implement this technology in a manner that anyone can access. This led me to discover a JavaScript library that would be perfect for my project: face-api.js. ![](https://lh6.googleusercontent.com/liH7aak8gXy7CGX4HOPmouz0QDL6K5s72MYG5oA45b8n1NaKD3FXgX36JRRuGvRTVD7sPmSRfrYflPLq_nUWuKSnZSDywCunY9Dq7kE0YNmc-XdscMYPtQhXf7Ga4CuVSe9HqJA) ##### Facial Recognition in a Browser face-api.js is a JavaScript library developed by German developer Vincent Muhler; it implements the famous TensorFlow.js and is able to run facial recognition in the browser. [Muhler explains](https://itnext.io/face-api-js-javascript-api-for-face-recognition-in-the-browser-with-tensorflow-js-bcc2a6c4cf07) that face-api.js is a JavaScript module "built on top of tensorflow.js core, which implements several CNNs (Convolutional Neural Networks) to solve face detection, face recognition and face landmark detection, optimized for the web and for mobile devices.”  After I discovered this library, I implemented a Rest API in Node.js using Express and the face api, as well as an SPA (single page application) using React. It's a simple application that only aims to test the lib. In the web interface, the user can register several people. To register someone, a minimum of four photos of that person must be uploaded in order to train the algorithm on the backend. After registering people, the user can select two options: 1. Upload any photo to try to find out if any of the registered people are present in that photo. For this, I started by uploading a photo to the backend. Then, using the photos of registered individuals, the algorithm tracks the people in the image and returns a new image to the front with all of the frames and people found. Afterward, the user receives a result with all of the recognition information. 2. Upload any video and then find the people registered in this video. To do this, I used the same method as above; however, I needed to capture the video frame by frame before running the analysis on top of each frame and then assembling the video again with the new generated images. From the tests I ran, results populated very quickly with an accuracy of 95%. ##### Conclusion Facial recognition is a very effective technology that brings solutions for many different industries. The possibility of running a facial recognition platform in a browser opens incredible possibilities for easy access and implementation. However, there are still many factors to be studied. For example, what would the performance be like if we had a base with millions of users? If each user had at least 5 photos registered, we would have to have a gigantic CDN (Content Delivery Network), among other computing resources. Additionally, how would program performance be impacted with the use of videos as well as photos? For example, what would it be like to upload a one-hour long video recorded in 4k? What would this process of capturing frames be in order to do frame-by-frame recognition? All of these questions still need to be studied. That said, Vincent Muhler's library still introduces many other benefits and opens a wide range of potential solutions, some of which we haven't even touched on. These include age recognition, emotion recognition, etc. Imagine the immense possibilities of utilizing this library on a local machine or at an industry level! There's a lot to be explored and tested, and we're just in the beginning stages of understanding the potential of this technology. --- ### Author # Tiago Queiroz Tiago Queiroz is a Front-End Software Engineer at Avenue Code. He has a degree in Information Systems and has worked as a web software developer since 2017. He has always been passionate about technology and is always looking for innovation and a healthy life. --- ### Related Posts ### What are CSS Custom Properties [READ MORE](https://blog.avenuecode.com/what-are-css-custom-properties?hsLang=en-us) ### 4 Ways to Make Your Angular App Sustainable and Scalable [READ MORE](https://blog.avenuecode.com/8-design-tips-to-make-your-angular-app-sustainable-and-scalable?hsLang=en-us) ### How to Build a Custom Component in VueJS [READ MORE](https://blog.avenuecode.com/how-to-build-a-custom-component-in-vuejs?hsLang=en-us) ### Leave a Comment! ### Avenue Code Social [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Blog/facebook.png?t=1486470796564)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Blog/twitter.png?t=1486470796842)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Blog/linkedin.png?t=1486470796556)](https://www.linkedin.com/company/avenuecode/) ### Newsletter Want to stay on top of all tips and news from Avenue Code? ### Popular Snippets ![Avenue Code-primary versions_logo white avenue code endorsement 2](https://blog.avenuecode.com/hs-fs/hubfs/Avenue%20Code%20New%20Logos%20-%202023/Avenue%20Code-primary%20versions_logo%20white%20avenue%20code%20endorsement%202.png?width=1180&name=Avenue%20Code-primary%20versions_logo%20white%20avenue%20code%20endorsement%202.png "Avenue Code-primary versions_logo white avenue code endorsement 2") ### About Us - [Who We Are](https://www.avenuecode.com/who-we-are) - [What We Do](https://www.avenuecode.com/what-we-do) - [Portfolio](https://www.avenuecode.com/portfolio) - [Partners](https://www.avenuecode.com/partners) - [News](https://www.avenuecode.com/news) - [Events](https://www.avenuecode.com/events) - [Blog](https://blog.avenuecode.com/) - [Contact](https://www.avenuecode.com/contact) ### Our Offices San Francisco [+1 415 766 4178](tel:+553125161448) [ac.inquiries@avenuecode.com](mailto:brazil.info@avenuecode.com) Belo Horizonte [+55 31 2516 1448](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) São Paulo [+55 11 3205 3232](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) ### We're Hiring! - [Belo Horizonte](https://www.avenuecode.com/who-we-are) - [New York](https://www.avenuecode.com/what-we-do) - [San Francisco](https://www.avenuecode.com/portfolio) - [São Paulo](https://www.avenuecode.com/partners) --- ©2015 - 2017 Avenue Code [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Icons/facebook-2.png)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Icons/twitter-2.png)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Icons/linkedin-2.png)](https://www.linkedin.com/company/avenue-code) [![Glassdoor Icon](https://blog.avenuecode.com/hubfs/Images/Icons/glassdoor-icon-1.png)](https://www.glassdoor.com/Overview/Working-at-Avenue-Code-EI_IE456173.11,22.htm) [![YouTube Icon](https://blog.avenuecode.com/hubfs/Images/Icons/youtube-2.png)](https://www.youtube.com/user/AvenueCodePlay) Please enable JavaScript to view the [comments powered by Disqus.](http://disqus.com/?ref_noscript) © 2026 Avenue Code ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Tiago Queiroz", "url" : "https://blog.avenuecode.com/author/tiago-queiroz" }, "dateModified" : "2022-02-09T17:00:00.724Z", "datePublished" : "2022-02-09T17:00:00.000Z", "headline" : "How to Build Your Own Facial Recognition Web App", "image" : [ "https://blog.avenuecode.com/hubfs/flat-gda64fc2c5_1280.png" ], "mainEntityOfPage" : { "@id" : "https://blog.avenuecode.com/how-to-build-your-own-facial-recognition-web-app", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/Avenue%20Code-primary%20versions_LOGO%20HORIZONTAL%20group%201-7.png" }, "name" : "Avenue Code" } } ```