How to run face recognition project in XAMPP server with Webcam?

July 11, 2021

We are creating a face recognition project in the XAMPP server with Webcam.

The usage of this library is javaScript detects a person's face in cam feed. A thing this is certainly interesting that this library is is made of just around 200 lines of the signal. This means that it is very easy and lightweight to utilize inside web tasks.

Real-time face this is certain people in Webcam video clip.
Whenever a face is recognized bring its image then from Webcam.
Upload the image to the server.
Save image path in the database so it later that people can display.

Let's Start the project Step to Step

Step -1. Create a database with a table using phpMyAdmin or below SQL.

CREATE DATABASE face_detection_project;

Step-2. First of all, develop a folder on your environment this is certainly local.g. inside XAMPP “htdocs” folder).

Name it whatever you fancy. But, with regard to this guide, I’ll name it face_detection_project.
Fundamentally, it shall be utilized to put on our task files and files.

Install Pico.js Face Detection Library

Install pico.js library from GitHub.
Plant the .zip file inside your project folder.
Now, replace the name associated with the folder this is certainly extracted picojs.

Step-3 Create an index.php file and inside write a PHP code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <title>How to run face recognition project in XAMPP server with Webcam? - softwarequery.com</title>
        <script src="picojs/examples/camvas.js"></script>
        <script src="picojs/pico.js"></script>
        <script src="picojs/lploc.js"></script>
        
        <script>
            var initialized = false;
            function button_callback() {
               
                if(initialized)
                    return;
               
                var update_memory = pico.instantiate_detection_memory(1); 
                var facefinder_classify_region = function(r, c, s, pixels, ldim) {return -1.0;};
                var cascadeurl = 'https://raw.githubusercontent.com/nenadmarkus/pico/c2e81f9d23cc11d1a612fd21e4f9de0921a5d0d9/rnt/cascades/facefinder';
                fetch(cascadeurl).then(function(response) {
                    response.arrayBuffer().then(function(buffer) {
                        var bytes = new Int8Array(buffer);
                        facefinder_classify_region = pico.unpack_cascade(bytes);
                        console.log('* facefinder loaded');
                    })
                })
                /*
                    (2) initialize the lploc.js library with a pupil localizer
                */
                var do_puploc = function(r, c, s, nperturbs, pixels, nrows, ncols, ldim) {return [-1.0, -1.0];};
                //var puplocurl = '../puploc.bin';
                var puplocurl = 'https://f002.backblazeb2.com/file/tehnokv-www/posts/puploc-with-trees/demo/puploc.bin'
                fetch(puplocurl).then(function(response) {
                    response.arrayBuffer().then(function(buffer) {
                        var bytes = new Int8Array(buffer);
                        do_puploc = lploc.unpack_localizer(bytes);
                        console.log('* puploc loaded');
                    })
                })
                /*
                    (3) get the drawing context on the canvas and define a function to transform an RGBA image to grayscale
                */
                var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
                function rgba_to_grayscale(rgba, nrows, ncols) {
                    var gray = new Uint8Array(nrows*ncols);
                    for(var r=0; r<nrows; ++r)
                        for(var c=0; c<ncols; ++c)
                            // gray = 0.2*red + 0.7*green + 0.1*blue
                            gray[r*ncols + c] = (2*rgba[r*4*ncols+4*c+0]+7*rgba[r*4*ncols+4*c+1]+1*rgba[r*4*ncols+4*c+2])/10;
                    return gray;
                }
                /*
                    (4) this function is called each time a video frame becomes available
                */
                var processfn = function(video, dt) {
                    // render the video frame to the canvas element and extract RGBA pixel data
                    ctx.drawImage(video, 0, 0);
                    var rgba = ctx.getImageData(0, 0, 640, 480).data;
                    // prepare input to `run_cascade`
                    image = {
                        "pixels": rgba_to_grayscale(rgba, 480, 640),
                        "nrows": 480,
                        "ncols": 640,
                        "ldim": 640
                    }
                    params = {
                        "shiftfactor": 0.1,
                        "minsize": 100,     
                        "maxsize": 1000,   
                        "scalefactor": 1.1  
                    }
                   
                  
                    dets = pico.run_cascade(image, facefinder_classify_region, params);
                    dets = update_memory(dets);
                    dets = pico.cluster_detections(dets, 0.2); // set IoU threshold to 0.2
                    // draw detections
                    for(i=0; i<dets.length; ++i)
                    {
                        
                        if(dets[i][3]>50.0)
                        {
                            var r, c, s;
                            //
                            ctx.beginPath();
                            ctx.arc(dets[i][1], dets[i][0], dets[i][2]/2, 0, 2*Math.PI, false);
                            ctx.lineWidth = 3;
                            ctx.strokeStyle = 'red';
                            ctx.stroke();
                          
                            r = dets[i][0] - 0.075*dets[i][2];
                            c = dets[i][1] - 0.175*dets[i][2];
                            s = 0.35*dets[i][2];
                            [r, c] = do_puploc(r, c, s, 63, image)
                            if(r>=0 && c>=0)
                            {
                                ctx.beginPath();
                                ctx.arc(c, r, 1, 0, 2*Math.PI, false);
                                ctx.lineWidth = 3;
                                ctx.strokeStyle = 'red';
                                ctx.stroke();
                            }
                            // second eye
                            r = dets[i][0] - 0.075*dets[i][2];
                            c = dets[i][1] + 0.175*dets[i][2];
                            s = 0.35*dets[i][2];
                            [r, c] = do_puploc(r, c, s, 63, image)
                            if(r>=0 && c>=0)
                            {
                                ctx.beginPath();
                                ctx.arc(c, r, 1, 0, 2*Math.PI, false);
                                ctx.lineWidth = 3;
                                ctx.strokeStyle = 'red';
                                ctx.stroke();
                            }
                            
                           
                            var can = document.getElementsByTagName('canvas')[0]
                            var img = new Image();
                            img.src = can.toDataURL('image/jpeg', 1.0);
                            
                            
                            var data = JSON.stringify({ image: img.src });
                            fetch("save.php",
                            {
                                method: "POST",
                                body: data
                            })
                            .then(function(res){ return res.json(); })
                            .then(function(data){ return alert( data.message ); })
                            
                           
                            alert('Face found!');
                        }
                    }
                }
               
                var mycamvas = new camvas(ctx, processfn);
               
                initialized = true;
            }
        </script>
    </head>
    
    <body>
        <div>
            <h3>How to run face recognition project in XAMPP server with Webcam?-softwarequery.com</h3>
        </div>
        <hr />
        <p>
            <center>
                <input type="button" value="Start Webcam" onclick="button_callback()">
                 
                <a href="view.php" target="_blank">View Saved Images</a>
            </center>
        </p>
        <hr />
        <p>
            <center>
                <canvas width="640" height="480"></canvas>
            </center>
        </p>
        </body>
</html>

Step -3 create a database file for db_connect.php

Step-4 Create a save.php file and write a code about save images on the server and database.

<?php

require_once('db_connect.php');

$data = file_get_contents('php://input');

if(isset($data))
{
    // convert json to array
    $data_arr = json_decode($data, true);
    
    // The image we receive will be encoded in base64.
    // So, convert it to actual image file.
    $img = $data_arr['image'];
    $img = str_replace('data:image/jpeg;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $file_data = base64_decode($img);
    $file_name = 'images/'.time().'-'.mt_rand(100000,999999).'.jpg';
    file_put_contents($file_name, $file_data);
    
    $created_time = date('Y-m-d H:i:s');
    
    // SQL query to insert image file path in database.
    $query = "INSERT INTO detected_faces (image, created_time) VALUES ('$file_name', '$created_time')";
    
    if(mysqli_query($conn, $query))
    {
        $response = array(
            'status' => true,
            'message' => "Image Saved Successfully."
        );
    }
    else
    {
        $response = array(
            'status' => true,
            'message' => "Unable to save image."
        );
    }
}
else
{
    $response = array(
        'status' => false,
        'message' => "Failed"
    );
}

// return the response
header('Content-type: application/json');
echo json_encode($response);

Step-5 Create a view.php file

Create a folder known as photos inside the task root. Our detected face photos will here be published.

Open up XAMPP or other PHP development environment that is local. Now, start Apache and MySQL.

Finally, open the project by typing this URL in your online browser’s target club: localhost/face_detection_project

We are creating a face recognition project in the XAMPP server with Webcam.

Let's Start the project Step to Step

Comments