Skip to content

Commit 8e43cfb

Browse files
committed
Uploaded Full Project
1 parent dd87541 commit 8e43cfb

16 files changed

Lines changed: 1200 additions & 0 deletions

File tree

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
-- phpMyAdmin SQL Dump
2+
-- version 5.0.2
3+
-- https://www.phpmyadmin.net/
4+
--
5+
-- Host: 127.0.0.1
6+
-- Generation Time: Aug 10, 2020 at 09:34 AM
7+
-- Server version: 10.4.11-MariaDB
8+
-- PHP Version: 7.4.4
9+
10+
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
11+
START TRANSACTION;
12+
SET time_zone = "+00:00";
13+
14+
15+
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
16+
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
17+
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
18+
/*!40101 SET NAMES utf8mb4 */;
19+
20+
--
21+
-- Database: `face_detection_project`
22+
--
23+
24+
-- --------------------------------------------------------
25+
26+
--
27+
-- Table structure for table `detected_faces`
28+
--
29+
30+
CREATE TABLE `detected_faces` (
31+
`id` int(10) UNSIGNED NOT NULL,
32+
`image` varchar(255) NOT NULL,
33+
`created_time` datetime NOT NULL DEFAULT current_timestamp()
34+
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
35+
36+
--
37+
-- Indexes for dumped tables
38+
--
39+
40+
--
41+
-- Indexes for table `detected_faces`
42+
--
43+
ALTER TABLE `detected_faces`
44+
ADD PRIMARY KEY (`id`);
45+
46+
--
47+
-- AUTO_INCREMENT for dumped tables
48+
--
49+
50+
--
51+
-- AUTO_INCREMENT for table `detected_faces`
52+
--
53+
ALTER TABLE `detected_faces`
54+
MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT;
55+
COMMIT;
56+
57+
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
58+
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
59+
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

db_connect.php

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<?php
2+
$db_host = "localhost"; // Database Host
3+
$db_user = "root"; // Database User
4+
$db_pass = ""; // Database Password
5+
$db_name = "face_detection_project"; // Database Name
6+
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name); // Connect to Database
7+
if(!$conn) // Check connection
8+
{
9+
die("Connection failed: " . mysqli_connect_error()); // Display error if not connected
10+
}
11+
?>

index.php

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
6+
<title>Webcam Face Detection Using JavaScript, PHP, and MySQL - Edopedia.com</title>
7+
8+
<!-- Add these JavaScript files from pico.js library -->
9+
<script src="picojs/examples/camvas.js"></script>
10+
<script src="picojs/pico.js"></script>
11+
<script src="picojs/lploc.js"></script>
12+
13+
<script>
14+
var initialized = false;
15+
function button_callback() {
16+
/*
17+
(0) check whether we're already running face detection
18+
*/
19+
if(initialized)
20+
return; // if yes, then do not initialize everything again
21+
/*
22+
(1) initialize the pico.js face detector
23+
*/
24+
var update_memory = pico.instantiate_detection_memory(1); // we will use the detecions of the last 1 frame
25+
var facefinder_classify_region = function(r, c, s, pixels, ldim) {return -1.0;};
26+
var cascadeurl = 'https://raw.githubusercontent.com/nenadmarkus/pico/c2e81f9d23cc11d1a612fd21e4f9de0921a5d0d9/rnt/cascades/facefinder';
27+
fetch(cascadeurl).then(function(response) {
28+
response.arrayBuffer().then(function(buffer) {
29+
var bytes = new Int8Array(buffer);
30+
facefinder_classify_region = pico.unpack_cascade(bytes);
31+
console.log('* facefinder loaded');
32+
})
33+
})
34+
/*
35+
(2) initialize the lploc.js library with a pupil localizer
36+
*/
37+
var do_puploc = function(r, c, s, nperturbs, pixels, nrows, ncols, ldim) {return [-1.0, -1.0];};
38+
//var puplocurl = '../puploc.bin';
39+
var puplocurl = 'https://f002.backblazeb2.com/file/tehnokv-www/posts/puploc-with-trees/demo/puploc.bin'
40+
fetch(puplocurl).then(function(response) {
41+
response.arrayBuffer().then(function(buffer) {
42+
var bytes = new Int8Array(buffer);
43+
do_puploc = lploc.unpack_localizer(bytes);
44+
console.log('* puploc loaded');
45+
})
46+
})
47+
/*
48+
(3) get the drawing context on the canvas and define a function to transform an RGBA image to grayscale
49+
*/
50+
var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
51+
function rgba_to_grayscale(rgba, nrows, ncols) {
52+
var gray = new Uint8Array(nrows*ncols);
53+
for(var r=0; r<nrows; ++r)
54+
for(var c=0; c<ncols; ++c)
55+
// gray = 0.2*red + 0.7*green + 0.1*blue
56+
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;
57+
return gray;
58+
}
59+
/*
60+
(4) this function is called each time a video frame becomes available
61+
*/
62+
var processfn = function(video, dt) {
63+
// render the video frame to the canvas element and extract RGBA pixel data
64+
ctx.drawImage(video, 0, 0);
65+
var rgba = ctx.getImageData(0, 0, 640, 480).data;
66+
// prepare input to `run_cascade`
67+
image = {
68+
"pixels": rgba_to_grayscale(rgba, 480, 640),
69+
"nrows": 480,
70+
"ncols": 640,
71+
"ldim": 640
72+
}
73+
params = {
74+
"shiftfactor": 0.1, // move the detection window by 10% of its size
75+
"minsize": 100, // minimum size of a face
76+
"maxsize": 1000, // maximum size of a face
77+
"scalefactor": 1.1 // for multiscale processing: resize the detection window by 10% when moving to the higher scale
78+
}
79+
// run the cascade over the frame and cluster the obtained detections
80+
// dets is an array that contains (r, c, s, q) quadruplets
81+
// (representing row, column, scale and detection score)
82+
dets = pico.run_cascade(image, facefinder_classify_region, params);
83+
dets = update_memory(dets);
84+
dets = pico.cluster_detections(dets, 0.2); // set IoU threshold to 0.2
85+
// draw detections
86+
for(i=0; i<dets.length; ++i)
87+
{
88+
// check the detection score
89+
// if it's above the threshold, draw it
90+
// (the constant 50.0 is empirical: other cascades might require a different one)
91+
if(dets[i][3]>50.0)
92+
{
93+
var r, c, s;
94+
//
95+
ctx.beginPath();
96+
ctx.arc(dets[i][1], dets[i][0], dets[i][2]/2, 0, 2*Math.PI, false);
97+
ctx.lineWidth = 3;
98+
ctx.strokeStyle = 'red';
99+
ctx.stroke();
100+
//
101+
// find the eye pupils for each detected face
102+
// starting regions for localization are initialized based on the face bounding box
103+
// (parameters are set empirically)
104+
// first eye
105+
r = dets[i][0] - 0.075*dets[i][2];
106+
c = dets[i][1] - 0.175*dets[i][2];
107+
s = 0.35*dets[i][2];
108+
[r, c] = do_puploc(r, c, s, 63, image)
109+
if(r>=0 && c>=0)
110+
{
111+
ctx.beginPath();
112+
ctx.arc(c, r, 1, 0, 2*Math.PI, false);
113+
ctx.lineWidth = 3;
114+
ctx.strokeStyle = 'red';
115+
ctx.stroke();
116+
}
117+
// second eye
118+
r = dets[i][0] - 0.075*dets[i][2];
119+
c = dets[i][1] + 0.175*dets[i][2];
120+
s = 0.35*dets[i][2];
121+
[r, c] = do_puploc(r, c, s, 63, image)
122+
if(r>=0 && c>=0)
123+
{
124+
ctx.beginPath();
125+
ctx.arc(c, r, 1, 0, 2*Math.PI, false);
126+
ctx.lineWidth = 3;
127+
ctx.strokeStyle = 'red';
128+
ctx.stroke();
129+
}
130+
131+
// At this point, we already know that the human face is detected in webcam. So, We'll simply create an image from canvas that is displaying the webcam result in real-time.
132+
var can = document.getElementsByTagName('canvas')[0]
133+
var img = new Image();
134+
img.src = can.toDataURL('image/jpeg', 1.0);
135+
136+
// Now, we will send the image to server and process it using PHP. Also, we have to save its path in MySQL database for later use.
137+
var data = JSON.stringify({ image: img.src });
138+
fetch("save.php",
139+
{
140+
method: "POST",
141+
body: data
142+
})
143+
.then(function(res){ return res.json(); })
144+
.then(function(data){ return alert( data.message ); })
145+
146+
// This alert statement is a little hack to temporarily stop the execution of script.
147+
alert('Face found!');
148+
}
149+
}
150+
}
151+
/*
152+
(5) instantiate camera handling (see https://github.com/cbrandolino/camvas)
153+
*/
154+
var mycamvas = new camvas(ctx, processfn);
155+
/*
156+
(6) it seems that everything went well
157+
*/
158+
initialized = true;
159+
}
160+
</script>
161+
</head>
162+
163+
<body>
164+
<div>
165+
<h3>Webcam Face Detection Using JavaScript, PHP, and MySQL by Edopedia.com</h3>
166+
<p>Click the "Start Webcam" button below and allow the page to access your webcam.</p>
167+
168+
<p>View Tutorial: <a href="https://www.edopedia.com/blog/webcam-face-detection-javascript-php-mysql/" target="_blank">https://www.edopedia.com/blog/webcam-face-detection-javascript-php-mysql/</a></p>
169+
</div>
170+
<hr />
171+
<p>
172+
<center>
173+
<input type="button" value="Start Webcam" onclick="button_callback()">
174+
&nbsp;
175+
<a href="view.php" target="_blank">View Saved Images</a>
176+
</center>
177+
</p>
178+
<hr />
179+
<p>
180+
<center>
181+
<canvas width="640" height="480"></canvas>
182+
</center>
183+
</p>
184+
</body>
185+
</html>

picojs/examples/camvas.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/*
2+
This code was taken from https://github.com/cbrandolino/camvas and modified to suit our needs
3+
*/
4+
/*
5+
Copyright (c) 2012 Claudio Brandolino
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
8+
9+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
10+
11+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
12+
*/
13+
// The function takes a canvas context and a `drawFunc` function.
14+
// `drawFunc` receives two parameters, the video and the time since
15+
// the last time it was called.
16+
function camvas(ctx, callback) {
17+
var self = this
18+
this.ctx = ctx
19+
this.callback = callback
20+
21+
// We can't `new Video()` yet, so we'll resort to the vintage
22+
// "hidden div" hack for dynamic loading.
23+
var streamContainer = document.createElement('div')
24+
this.video = document.createElement('video')
25+
26+
// If we don't do this, the stream will not be played.
27+
// By the way, the play and pause controls work as usual
28+
// for streamed videos.
29+
this.video.setAttribute('autoplay', '1')
30+
this.video.setAttribute('playsinline', '1') // important for iPhones
31+
32+
// The video should fill out all of the canvas
33+
this.video.setAttribute('width', 1)
34+
this.video.setAttribute('height', 1)
35+
36+
streamContainer.appendChild(this.video)
37+
document.body.appendChild(streamContainer)
38+
39+
// The callback happens when we are starting to stream the video.
40+
navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(function(stream) {
41+
// Yay, now our webcam input is treated as a normal video and
42+
// we can start having fun
43+
self.video.srcObject = stream
44+
// Let's start drawing the canvas!
45+
self.update()
46+
}, function(err) {
47+
throw err
48+
})
49+
50+
// As soon as we can draw a new frame on the canvas, we call the `draw` function
51+
// we passed as a parameter.
52+
this.update = function() {
53+
var self = this
54+
var last = Date.now()
55+
var loop = function() {
56+
// For some effects, you might want to know how much time is passed
57+
// since the last frame; that's why we pass along a Delta time `dt`
58+
// variable (expressed in milliseconds)
59+
var dt = Date.now() - last
60+
self.callback(self.video, dt)
61+
last = Date.now()
62+
requestAnimationFrame(loop)
63+
}
64+
requestAnimationFrame(loop)
65+
}
66+
}

0 commit comments

Comments
 (0)