Building a facial recognition application with JavaScript might seem like a daunting task, but it's more accessible than you might think. In this blog post, I'll walk you through the journey of developing a facial recognition app from scratch using JavaScript. We'll explore the key libraries and tools that made this project possible, delve into the core concepts behind facial recognition technology, and share practical insights that can help you implement similar solutions in your own projects. Whether you're a seasoned developer or just starting out, this guide will show you how to turn a complex idea into a functioning application.
Setting up the EnvironmentLet's start from creating JS file "recognition.js" with all functions that we will use during the process. First of all, we are adding API_TOKEN as a global variable. You can find your token in your Luxand.cloud dashboard and then just copy the code and paste into your file:
\
API_TOKEN = "your_token" Adding People to the DatabaseDefine a function to the person to the database:
function add_person(name, image, collections, callback){ var myHeaders = new Headers(); myHeaders.append("token", API_TOKEN); var formdata = new FormData(); formdata.append("name", name); if ((typeof image == "string") && (image.indexOf("https://") == 0)) formdata.append("photos", image); else formdata.append("photos", image, "file"); formdata.append("store", "1"); formdata.append("collections", collections); var requestOptions = { method: 'POST', headers: myHeaders, body: formdata, redirect: 'follow' }; fetch("https://api.luxand.cloud/v2/person", requestOptions) .then(response => response.json()) .then(result => callback(result)) .catch(error => console.log('error', error)); } Improving Accuracy of RecognitionIf you upload more than one image of a person, the face recognition engine will be able to recognize people with better accuracy. To do that, create a function that can add faces to a person.
\
function add_face(person_uuid, image, callback){ var myHeaders = new Headers(); myHeaders.append("token", API_TOKEN); var formdata = new FormData(); if ((typeof image == "string") && (image.indexOf("https://") == 0)) formdata.append("photos", image); else formdata.append("photos", image, "file"); formdata.append("store", "1"); var requestOptions = { method: 'POST', headers: myHeaders, body: formdata, redirect: 'follow' }; fetch("https://api.luxand.cloud/v2/person/" + person_uuid, requestOptions) .then(response => response.json()) .then(result => callback(result)) .catch(error => console.log('error', error)); } Recognizing FacesDefine a function to recognize faces:
function recognize(image, callback){ var myHeaders = new Headers(); myHeaders.append("token", API_TOKEN); var formdata = new FormData(); if ((typeof image == "string") && (image.indexOf("https://") == 0)) formdata.append("photo", image); else formdata.append("photo", image, "file"); var requestOptions = { method: 'POST', headers: myHeaders, body: formdata, redirect: 'follow' }; fetch("https://api.luxand.cloud/photo/search/v2", requestOptions) .then(response => response.json()) .then(result => callback(result)) .catch(error => console.log('error', error)); }\ Replace the pathtoimageforrecognition with the actual image file path for recognition.
Complete HTML FileHere you can find the HTML file that is using our "recognition.js" library. You can just copy and paste it into your file, replace parameters, and it will work.
\
As you can see, to integrate the face recognition API and use it is really easy. If you have questions or I didn’t cover some topics, please, share your thoughts below in the comments section.
All Rights Reserved. Copyright , Central Coast Communications, Inc.