How to set up face verification the easy way using HTML5 + JavaScript

Upload, capture, verify.

I’ve created a very simple way to face match two images using HTML5 and JavaScript. You upload the verification picture you’d like to use, take a snapshot from the video streaming from your camera/webcam, then use a face matching API to retrieve the results. Simple.

The GitHub Repo

What You’ll Need

A Webcam/Camera

Free Face Recognition API Key

Web Server

Before We Begin

Create a Directory For This Project

This directory will be where we put all the files.

Create a Local Web Server

In order to have full control of images, a web server is required. Otherwise we’d be getting a tainted canvas security error. There are several ways to do this, and I’ve listed below how to do it with Python.

Python

Install Python

Open Command Prompt

Enter

cd C:/DIRECTORY_LOCATION & py -m http.server 8000

You should be able to access the directory through http://localhost:8000.

Get Your Free API Key

We’re going to be using Facesoft’s face recognition API. Quickly sign up here to access your free API key so you can get unlimited API calls with up to two requests per minute.

Once you’ve logged in, your API key will be visible in the dashboard area.

1. Setup

Create these three files:

index.html

style.css

verify.js

Next, right click and save the files below into that directory. These image files will be the default images for uploaded and verification pics.

SAVE AS “defaultupload.png”

SAVE AS “defaultphoto.png”

2. The HTML

Layout

Copy and paste the layout code below into your “index.html” file. This gives us our framework and design with the help of bootstrap.

<!DOCTYPE html>

<html lang="en"> <head>

<!-- Required meta tags -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href=" https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css " integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Style CSS -->

<link rel="stylesheet" href="style.css"> <title>Face Verification</title>

</head> <body>

<!-- Page Content -->

<div class="container">

<div class="row">

<div class="col-lg-12 text-center">

<h1 class="mt-5">Face Verification</h1>

<p class="lead">Quick and simple face verification using HTML5 and JavaScript</p>

</div>

</div>

<!-- INSERT NEXT CODE HERE --> </div> <!-- Verify JS -->

<script src="verify.js"></script>

<script src="

<script src="

<script src="

</body> https://code.jquery.com/jquery-3.3.1.slim.min.js</a> " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js</a> " integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js</a> " integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> </html>

Images, Canvases, and Buttons

We’re now creating a row and having three columns for the verification photo, the video stream, and the photo taken from the video stream. Add the code below right after the row.

Check for “INSERT NEXT CODE HERE” tag in previous code.

<div class="row justify-content-md-center">

<div class="col-lg-4 text-center">

<p><strong>Verification Photo</strong></p> <!-- Canvas For Uploaded Image -->

<canvas id="uploadCanvas" width="300" height="300"></canvas> <!-- Default Canvas Image -->

<img src="defaultupload.png" id="uploadedPhoto" alt="upload"/> <!-- Upload Image Input & Upload Photo Button -->

<input type="file" name="image-upload" accept="image/png, image/jpeg"> <button id="upload" type="button" class="btn btn-outline-primary btn-lg">Upload Photo</button>

</div> <div class="col-lg-4 text-center">

<p><strong>Video</strong></p> <!-- Camera -->

<div class="camera-container">

<video id="video" width="100%" height="300" autoplay="true">

</video>

</div> <!-- Take Photo Button -->

<button id="capture" type="button" class="btn btn-outline-primary btn-lg">Take Photo</button>

</div> <div class="col-lg-4 text-center">

<p><strong>Photo Taken</strong></p>



<!-- Canvas For Capture Taken -->

<canvas id="captureCanvas" width="300" height="300"></canvas> <!-- Default Canvas Image -->

<img src="defaultphoto.png" id="capturedPhoto" alt="capture" /> <!-- Verify Photos Button -->

<button id="verify" type="button" class="btn btn-outline-success btn-lg">Verify Photo</button>

</div>

</div>

<!-- INSERT NEXT CODE HERE -->

API Response and Warnings

The code we’re going to add is to display the match result, score percentage, errors, and warnings. Right under the last code we added, add the code below.

<div class="row">

<div class="col-lg-12 text-center">

<!-- API Match Result & API Percentage Score -->

<h2 id="match" class="mt-5"></h2>

<p id="score" class="lead"></p>

</div>

<div class="col-lg-12 text-center">

<!-- Error & Warning Alerts -->

<div class="alert alert-danger" id="errorAlert"></div>

<div class="alert alert-warning" id="warningAlert"></div>

</div>

</div>

3. The CSS

Add the code below to your style.css file.

.camera-container {

max-width: 100%;

border: 1px solid black;

} .verification-image {

width: 300px;

height: auto;

max-width: 100%;

} .btn {

margin-top: 10px;

} #captureCanvas, #uploadCanvas {

display: none;

} input[name="image-upload"] {

display: none;

} #errorAlert, #warningAlert {

display: none;

}

We’ve set the image upload input to display none as we’ll be triggering it using the upload button. Also, the IDs for the canvases have been set to display none so the default images are initially displayed.

Here is what your screen should look like: