How I Built a Facial Recognition Application Using JavaScript and the Luxand.cloud API

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 Environment

Let'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 Database

Define 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 Recognition

If 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 Faces

Define 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 File

Here 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.

\

Conclusion

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.