{"id":1326,"date":"2020-08-10T08:41:58","date_gmt":"2020-08-10T03:41:58","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=1326"},"modified":"2025-09-16T04:03:34","modified_gmt":"2025-09-15T23:03:34","slug":"webcam-face-detection-javascript-php-mysql","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/","title":{"rendered":"Webcam Face Detection Using JavaScript, PHP, and MySQL 2026"},"content":{"rendered":"\n<p>In the past, I had published a very popular blog post regarding <a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/www.edopedia.com\/blog\/javascript-face-detection-and-recognition-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript Face Detection and Recognition Libraries<\/a>. So, in this tutorial, I&#8217;ll use a library from that list which is known as &#8220;<a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/github.com\/tehnokv\/picojs\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">pico.js<\/a>&#8220;.<\/p>\n\n\n\n<p>We&#8217;ll use this JavaScript library to detect a human face in webcam feed. An interesting thing is that this library is consists of just around 200 lines of code. Meaning that it is very lightweight and easy to use inside web projects.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Basic functionality of this project<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Real-time human face detection in Webcam video.<\/li><li>When face is detected then get its image from Webcam.<\/li><li>Upload the image to server.<\/li><li>Save image path in database so that we can display it later.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Create Database and Table<\/h2>\n\n\n\n<p>Create a database using phpMyAdmin or below SQL.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;sql&quot;,&quot;mime&quot;:&quot;text\/x-sql&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;SQL&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;sql&quot;}\">CREATE DATABASE face_detection_project;<\/pre><\/div>\n\n\n\n<p>Create a table to store images path.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;sql&quot;,&quot;mime&quot;:&quot;text\/x-sql&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;SQL&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;sql&quot;}\">CREATE TABLE `detected_faces` (\n  `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,\n  `image` varchar(255) NOT NULL,\n  `created_time` datetime NOT NULL DEFAULT current_timestamp(),\n  PRIMARY KEY (id)\n) ENGINE=InnoDB;<\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Files and folders used in this tutorial<\/h2>\n\n\n\n<p>First of all, create a folder on your local environment (e.g. inside XAMPP &#8220;htdocs&#8221; folder). Name it anything you like. But, for the sake of this tutorial, I&#8217;ll name it as <strong>face_detection_project<\/strong>.<\/p>\n\n\n\n<p>Basically, it will be used to hold our project files and folders.<\/p>\n\n\n\n<p>Now, below is a list of files and folders that we will create in this tutorial. It will help you get an overview of the project&#8217;s folder structure.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>images<\/strong><\/li><li><strong>picojs<\/strong><\/li><li>db_connect.php<\/li><li>save.php<\/li><li>view.php<\/li><li>index.php<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Install Pico.js Face Detection Library<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Download <a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/github.com\/tehnokv\/picojs\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">pico.js library<\/a> from GitHub.<\/li><li>Extract the .zip file inside your project folder.<\/li><li>Now, change the name of the extracted folder to <strong>picojs<\/strong>.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Important Note<\/h2>\n\n\n\n<p>I&#8217;ve explained important and complex code using comments. So, read them in the below code-snippets.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Detect Face in Webcam using JavaScript<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/Webcam-Face-Detection-Using-JavaScript-1024x518.jpg\" alt=\"Detect Face in Webcam using JavaScript\" class=\"wp-image-1381\" title=\"Detect Face in Webcam using JavaScript\" srcset=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/Webcam-Face-Detection-Using-JavaScript-1024x518.jpg 1024w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/Webcam-Face-Detection-Using-JavaScript-300x152.jpg 300w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/Webcam-Face-Detection-Using-JavaScript-768x388.jpg 768w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/Webcam-Face-Detection-Using-JavaScript.jpg 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here&#8217;s the content for <strong>index.php<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\t&lt;head&gt;\n\t\t&lt;meta charset=&quot;utf-8&quot;&gt;\n\t\t&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;chrome=1&quot;&gt;\n\t\t&lt;title&gt;Webcam Face Detection Using JavaScript, PHP, and MySQL - Edopedia.com&lt;\/title&gt;\n\t\t\n\t\t&lt;!-- Add these JavaScript files from pico.js library --&gt;\n\t\t&lt;script src=&quot;picojs\/examples\/camvas.js&quot;&gt;&lt;\/script&gt;\n\t\t&lt;script src=&quot;picojs\/pico.js&quot;&gt;&lt;\/script&gt;\n\t\t&lt;script src=&quot;picojs\/lploc.js&quot;&gt;&lt;\/script&gt;\n\t\t\n\t\t&lt;script&gt;\n\t\t\tvar initialized = false;\n\t\t\tfunction button_callback() {\n\t\t\t\t\/*\n\t\t\t\t\t(0) check whether we're already running face detection\n\t\t\t\t*\/\n\t\t\t\tif(initialized)\n\t\t\t\t\treturn; \/\/ if yes, then do not initialize everything again\n\t\t\t\t\/*\n\t\t\t\t\t(1) initialize the pico.js face detector\n\t\t\t\t*\/\n\t\t\t\tvar update_memory = pico.instantiate_detection_memory(1); \/\/ we will use the detecions of the last 1 frame\n\t\t\t\tvar facefinder_classify_region = function(r, c, s, pixels, ldim) {return -1.0;};\n\t\t\t\tvar cascadeurl = 'https:\/\/raw.githubusercontent.com\/nenadmarkus\/pico\/c2e81f9d23cc11d1a612fd21e4f9de0921a5d0d9\/rnt\/cascades\/facefinder';\n\t\t\t\tfetch(cascadeurl).then(function(response) {\n\t\t\t\t\tresponse.arrayBuffer().then(function(buffer) {\n\t\t\t\t\t\tvar bytes = new Int8Array(buffer);\n\t\t\t\t\t\tfacefinder_classify_region = pico.unpack_cascade(bytes);\n\t\t\t\t\t\tconsole.log('* facefinder loaded');\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t\t\/*\n\t\t\t\t\t(2) initialize the lploc.js library with a pupil localizer\n\t\t\t\t*\/\n\t\t\t\tvar do_puploc = function(r, c, s, nperturbs, pixels, nrows, ncols, ldim) {return [-1.0, -1.0];};\n\t\t\t\t\/\/var puplocurl = '..\/puploc.bin';\n\t\t\t\tvar puplocurl = 'https:\/\/f002.backblazeb2.com\/file\/tehnokv-www\/posts\/puploc-with-trees\/demo\/puploc.bin'\n\t\t\t\tfetch(puplocurl).then(function(response) {\n\t\t\t\t\tresponse.arrayBuffer().then(function(buffer) {\n\t\t\t\t\t\tvar bytes = new Int8Array(buffer);\n\t\t\t\t\t\tdo_puploc = lploc.unpack_localizer(bytes);\n\t\t\t\t\t\tconsole.log('* puploc loaded');\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t\t\/*\n\t\t\t\t\t(3) get the drawing context on the canvas and define a function to transform an RGBA image to grayscale\n\t\t\t\t*\/\n\t\t\t\tvar ctx = document.getElementsByTagName('canvas')[0].getContext('2d');\n\t\t\t\tfunction rgba_to_grayscale(rgba, nrows, ncols) {\n\t\t\t\t\tvar gray = new Uint8Array(nrows*ncols);\n\t\t\t\t\tfor(var r=0; r&lt;nrows; ++r)\n\t\t\t\t\t\tfor(var c=0; c&lt;ncols; ++c)\n\t\t\t\t\t\t\t\/\/ gray = 0.2*red + 0.7*green + 0.1*blue\n\t\t\t\t\t\t\tgray[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;\n\t\t\t\t\treturn gray;\n\t\t\t\t}\n\t\t\t\t\/*\n\t\t\t\t\t(4) this function is called each time a video frame becomes available\n\t\t\t\t*\/\n\t\t\t\tvar processfn = function(video, dt) {\n\t\t\t\t\t\/\/ render the video frame to the canvas element and extract RGBA pixel data\n\t\t\t\t\tctx.drawImage(video, 0, 0);\n\t\t\t\t\tvar rgba = ctx.getImageData(0, 0, 640, 480).data;\n\t\t\t\t\t\/\/ prepare input to `run_cascade`\n\t\t\t\t\timage = {\n\t\t\t\t\t\t&quot;pixels&quot;: rgba_to_grayscale(rgba, 480, 640),\n\t\t\t\t\t\t&quot;nrows&quot;: 480,\n\t\t\t\t\t\t&quot;ncols&quot;: 640,\n\t\t\t\t\t\t&quot;ldim&quot;: 640\n\t\t\t\t\t}\n\t\t\t\t\tparams = {\n\t\t\t\t\t\t&quot;shiftfactor&quot;: 0.1, \/\/ move the detection window by 10% of its size\n\t\t\t\t\t\t&quot;minsize&quot;: 100,     \/\/ minimum size of a face\n\t\t\t\t\t\t&quot;maxsize&quot;: 1000,    \/\/ maximum size of a face\n\t\t\t\t\t\t&quot;scalefactor&quot;: 1.1  \/\/ for multiscale processing: resize the detection window by 10% when moving to the higher scale\n\t\t\t\t\t}\n\t\t\t\t\t\/\/ run the cascade over the frame and cluster the obtained detections\n\t\t\t\t\t\/\/ dets is an array that contains (r, c, s, q) quadruplets\n\t\t\t\t\t\/\/ (representing row, column, scale and detection score)\n\t\t\t\t\tdets = pico.run_cascade(image, facefinder_classify_region, params);\n\t\t\t\t\tdets = update_memory(dets);\n\t\t\t\t\tdets = pico.cluster_detections(dets, 0.2); \/\/ set IoU threshold to 0.2\n\t\t\t\t\t\/\/ draw detections\n\t\t\t\t\tfor(i=0; i&lt;dets.length; ++i)\n\t\t\t\t\t{\n\t\t\t\t\t\t\/\/ check the detection score\n\t\t\t\t\t\t\/\/ if it's above the threshold, draw it\n\t\t\t\t\t\t\/\/ (the constant 50.0 is empirical: other cascades might require a different one)\n\t\t\t\t\t\tif(dets[i][3]&gt;50.0)\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvar r, c, s;\n\t\t\t\t\t\t\t\/\/\n\t\t\t\t\t\t\tctx.beginPath();\n\t\t\t\t\t\t\tctx.arc(dets[i][1], dets[i][0], dets[i][2]\/2, 0, 2*Math.PI, false);\n\t\t\t\t\t\t\tctx.lineWidth = 3;\n\t\t\t\t\t\t\tctx.strokeStyle = 'red';\n\t\t\t\t\t\t\tctx.stroke();\n\t\t\t\t\t\t\t\/\/\n\t\t\t\t\t\t\t\/\/ find the eye pupils for each detected face\n\t\t\t\t\t\t\t\/\/ starting regions for localization are initialized based on the face bounding box\n\t\t\t\t\t\t\t\/\/ (parameters are set empirically)\n\t\t\t\t\t\t\t\/\/ first eye\n\t\t\t\t\t\t\tr = dets[i][0] - 0.075*dets[i][2];\n\t\t\t\t\t\t\tc = dets[i][1] - 0.175*dets[i][2];\n\t\t\t\t\t\t\ts = 0.35*dets[i][2];\n\t\t\t\t\t\t\t[r, c] = do_puploc(r, c, s, 63, image)\n\t\t\t\t\t\t\tif(r&gt;=0 &amp;&amp; c&gt;=0)\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tctx.beginPath();\n\t\t\t\t\t\t\t\tctx.arc(c, r, 1, 0, 2*Math.PI, false);\n\t\t\t\t\t\t\t\tctx.lineWidth = 3;\n\t\t\t\t\t\t\t\tctx.strokeStyle = 'red';\n\t\t\t\t\t\t\t\tctx.stroke();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/\/ second eye\n\t\t\t\t\t\t\tr = dets[i][0] - 0.075*dets[i][2];\n\t\t\t\t\t\t\tc = dets[i][1] + 0.175*dets[i][2];\n\t\t\t\t\t\t\ts = 0.35*dets[i][2];\n\t\t\t\t\t\t\t[r, c] = do_puploc(r, c, s, 63, image)\n\t\t\t\t\t\t\tif(r&gt;=0 &amp;&amp; c&gt;=0)\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tctx.beginPath();\n\t\t\t\t\t\t\t\tctx.arc(c, r, 1, 0, 2*Math.PI, false);\n\t\t\t\t\t\t\t\tctx.lineWidth = 3;\n\t\t\t\t\t\t\t\tctx.strokeStyle = 'red';\n\t\t\t\t\t\t\t\tctx.stroke();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\/\/ 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.\n\t\t\t\t\t\t\tvar can = document.getElementsByTagName('canvas')[0]\n\t\t\t\t\t\t\tvar img = new Image();\n\t\t\t\t\t\t\timg.src = can.toDataURL('image\/jpeg', 1.0);\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\/\/ 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.\n\t\t\t\t\t\t\tvar data = JSON.stringify({ image: img.src });\n\t\t\t\t\t\t\tfetch(&quot;save.php&quot;,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tmethod: &quot;POST&quot;,\n\t\t\t\t\t\t\t\tbody: data\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t.then(function(res){ return res.json(); })\n\t\t\t\t\t\t\t.then(function(data){ return alert( data.message ); })\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\/\/ This alert statement is a little hack to temporarily stop the execution of script.\n\t\t\t\t\t\t\talert('Face found!');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t\/*\n\t\t\t\t\t(5) instantiate camera handling (see https:\/\/github.com\/cbrandolino\/camvas)\n\t\t\t\t*\/\n\t\t\t\tvar mycamvas = new camvas(ctx, processfn);\n\t\t\t\t\/*\n\t\t\t\t\t(6) it seems that everything went well\n\t\t\t\t*\/\n\t\t\t\tinitialized = true;\n\t\t\t}\n\t\t&lt;\/script&gt;\n\t&lt;\/head&gt;\n\t\n\t&lt;body&gt;\n\t\t&lt;div&gt;\n\t\t\t&lt;h3&gt;Webcam Face Detection Using JavaScript, PHP, and MySQL by Edopedia.com&lt;\/h3&gt;\n\t\t\t&lt;p&gt;Click the &quot;Start Webcam&quot; button below and allow the page to access your webcam.&lt;\/p&gt;\n\t\t\t\n\t\t\t&lt;p&gt;View Tutorial: &lt;a href=&quot;https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/&quot; target=&quot;_blank&quot;&gt;https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/&lt;\/a&gt;&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;hr \/&gt;\n\t\t&lt;p&gt;\n\t\t\t&lt;center&gt;\n\t\t\t\t&lt;input type=&quot;button&quot; value=&quot;Start Webcam&quot; onclick=&quot;button_callback()&quot;&gt;\n\t\t\t\t&amp;nbsp;\n\t\t\t\t&lt;a href=&quot;view.php&quot; target=&quot;_blank&quot;&gt;View Saved Images&lt;\/a&gt;\n\t\t\t&lt;\/center&gt;\n\t\t&lt;\/p&gt;\n\t\t&lt;hr \/&gt;\n\t\t&lt;p&gt;\n\t\t\t&lt;center&gt;\n\t\t\t\t&lt;canvas width=&quot;640&quot; height=&quot;480&quot;&gt;&lt;\/canvas&gt;\n\t\t\t&lt;\/center&gt;\n\t\t&lt;\/p&gt;\n\t&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Connect With Database<\/h2>\n\n\n\n<p>Here&#8217;s the content for <strong>db_connect.php<\/strong><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">&lt;?php\n$db_host = &quot;localhost&quot;;               \/\/ Database Host\n$db_user = &quot;root&quot;;                    \/\/ Database User\n$db_pass = &quot;&quot;;                        \/\/ Database Password\n$db_name = &quot;face_detection_project&quot;;  \/\/ Database Name\n$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name); \/\/ Connect to Database\nif(!$conn) \/\/ Check connection\n{\n  die(&quot;Connection failed: &quot; . mysqli_connect_error()); \/\/ Display error if not connected\n}\n?&gt;<\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Store Image on the Server and Database<\/h2>\n\n\n\n<p>Here&#8217;s the content for <strong>save.php<\/strong><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">&lt;?php\n\n\/\/ Database connection file\nrequire_once('db_connect.php');\n\n\/\/ Receive uploaded image file\n$data = file_get_contents('php:\/\/input');\n\nif(isset($data))\n{\n\t\/\/ convert json to array\n\t$data_arr = json_decode($data, true);\n\t\n\t\/\/ The image we receive will be encoded in base64.\n\t\/\/ So, convert it to actual image file.\n\t$img = $data_arr['image'];\n\t$img = str_replace('data:image\/jpeg;base64,', '', $img);\n\t$img = str_replace(' ', '+', $img);\n\t$file_data = base64_decode($img);\n\t$file_name = 'images\/'.time().'-'.mt_rand(100000,999999).'.jpg';\n\tfile_put_contents($file_name, $file_data);\n\t\n\t$created_time = date('Y-m-d H:i:s');\n\t\n\t\/\/ SQL query to insert image file path in database.\n\t$query = &quot;INSERT INTO detected_faces (image, created_time) VALUES ('$file_name', '$created_time')&quot;;\n\t\n\tif(mysqli_query($conn, $query))\n    {\n\t\t$response = array(\n\t\t\t'status' =&gt; true,\n\t\t\t'message' =&gt; &quot;Image Saved Successfully.&quot;\n\t\t);\n    }\n    else\n    {\n\t\t$response = array(\n\t\t\t'status' =&gt; true,\n\t\t\t'message' =&gt; &quot;Unable to save image.&quot;\n\t\t);\n    }\n}\nelse\n{\n\t$response = array(\n\t\t'status' =&gt; false,\n\t\t'message' =&gt; &quot;Failed&quot;\n\t);\n}\n\n\/\/ return the response\nheader('Content-type: application\/json');\necho json_encode($response);\n\n?&gt;<\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">View Saved Images<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"465\" height=\"147\" src=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/view-detected-face-images.png\" alt=\"view detected face images\" class=\"wp-image-1385\" title=\"view detected face images\" srcset=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/view-detected-face-images.png 465w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/view-detected-face-images-300x95.png 300w\" sizes=\"auto, (max-width: 465px) 100vw, 465px\" \/><\/figure>\n\n\n\n<p>Here&#8217;s the content for <strong>view.php<\/strong><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">&lt;?php\n\n\/\/ Database connection file\nrequire_once('db_connect.php');\n\n\/\/ Select all images from database and display them in HTML &lt;table&gt;.\n$query = &quot;SELECT * FROM detected_faces&quot;;\n$result = mysqli_query($conn, $query);\n\nif(mysqli_num_rows($result) &gt; 0)\n{\n?&gt;\n\n&lt;style&gt;\ntable, th, td {\n  border: 1px solid black;\n}\n&lt;\/style&gt;\n\n&lt;table&gt;\n\t&lt;tr&gt;\n\t\t&lt;th&gt;ID&lt;\/th&gt;\n\t\t&lt;th&gt;Image&lt;\/th&gt;\n\t\t&lt;th&gt;Open Image in New Tab&lt;\/th&gt;\n\t\t&lt;th&gt;Created Time&lt;\/th&gt;\n\t&lt;\/tr&gt;\n\t&lt;?php\n\twhile($row = $result-&gt;fetch_assoc())\n\t{\n\t?&gt;\n\t&lt;tr&gt;\n\t\t&lt;td&gt;&lt;?=$row['id']?&gt;&lt;\/td&gt;\n\t\t&lt;td&gt;\n\t\t\t&lt;img src=&quot;&lt;?=$row['image']?&gt;&quot; style=&quot;width: 100px;&quot; \/&gt;\n\t\t&lt;\/td&gt;\n\t\t&lt;td&gt;\n\t\t\t&lt;a href=&quot;&lt;?=$row['image']?&gt;&quot; target=&quot;_blank&quot;&gt;Click Here&lt;\/a&gt;\n\t\t&lt;\/td&gt;\n\t\t&lt;td&gt;&lt;?=$row['created_time']?&gt;&lt;\/td&gt;\n\t&lt;\/tr&gt;\n\t&lt;?php\n\t}\n\t?&gt;\n&lt;\/table&gt;\n&lt;?php\n}\nelse\n{\n  echo &quot;No records found!&quot;;\n}\n\n?&gt;<\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Run the Project<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Create a folder called <strong>images<\/strong> inside the project root. Our detected face images will be uploaded here.<\/li><li>Open XAMPP or any other PHP local development environment. Now, start Apache and MySQL.<\/li><li>Finally, open the project by typing this URL in your web browser&#8217;s address bar: localhost\/face_detection_project<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Download Full Project<\/h2>\n\n\n<p><a class=\"ep_link_major\" href=\"https:\/\/github.com\/edopedia\/Webcam-Face-Detection-Using-JavaScript-PHP-MySQL\" target=\"_blank\" rel=\"noopener noreferrer\">Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>In the past, I had published a very popular blog post regarding JavaScript Face Detection and Recognition Libraries. So, in this tutorial, I&#8217;ll use a library from that list which is known as &#8220;pico.js&#8220;. We&#8217;ll use this JavaScript library to detect a human face in webcam feed. An interesting thing is that this library is &#8230; <a title=\"Webcam Face Detection Using JavaScript, PHP, and MySQL 2026\" class=\"read-more\" href=\"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/\" aria-label=\"Read more about Webcam Face Detection Using JavaScript, PHP, and MySQL 2026\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-1326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Webcam Face Detection Using JavaScript, PHP, and MySQL 2026<\/title>\n<meta name=\"description\" content=\"In the past, I had published a very popular blog post regarding JavaScript Face Detection and Recognition Libraries. So, in this tutorial, I&#039;ll use a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Webcam Face Detection Using JavaScript, PHP, and MySQL [cy]\" \/>\n<meta property=\"og:description\" content=\"In the past, I had published a very popular blog post regarding JavaScript Face Detection and Recognition Libraries. So, in this tutorial, I&#039;ll use a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-10T03:41:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-15T23:03:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/Webcam-Face-Detection-Using-JavaScript-PHP-and-MySQL.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Webcam Face Detection Using JavaScript, PHP, and MySQL 2026","description":"In the past, I had published a very popular blog post regarding JavaScript Face Detection and Recognition Libraries. So, in this tutorial, I'll use a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/","og_locale":"en_US","og_type":"article","og_title":"Webcam Face Detection Using JavaScript, PHP, and MySQL [cy]","og_description":"In the past, I had published a very popular blog post regarding JavaScript Face Detection and Recognition Libraries. So, in this tutorial, I'll use a","og_url":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2020-08-10T03:41:58+00:00","article_modified_time":"2025-09-15T23:03:34+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/Webcam-Face-Detection-Using-JavaScript-PHP-and-MySQL.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Webcam Face Detection Using JavaScript, PHP, and MySQL 2026","datePublished":"2020-08-10T03:41:58+00:00","dateModified":"2025-09-15T23:03:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/"},"wordCount":383,"commentCount":6,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/Webcam-Face-Detection-Using-JavaScript-PHP-and-MySQL.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/","url":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/","name":"Webcam Face Detection Using JavaScript, PHP, and MySQL [cy]","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/Webcam-Face-Detection-Using-JavaScript-PHP-and-MySQL.jpg","datePublished":"2020-08-10T03:41:58+00:00","dateModified":"2025-09-15T23:03:34+00:00","description":"In the past, I had published a very popular blog post regarding JavaScript Face Detection and Recognition Libraries. So, in this tutorial, I'll use a","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/Webcam-Face-Detection-Using-JavaScript-PHP-and-MySQL.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2020\/08\/Webcam-Face-Detection-Using-JavaScript-PHP-and-MySQL.jpg","width":880,"height":495,"caption":"Webcam Face Detection Using JavaScript, PHP, and MySQL"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/webcam-face-detection-javascript-php-mysql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webcam Face Detection Using JavaScript, PHP, and MySQL 2025"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/1326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=1326"}],"version-history":[{"count":2,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/1326\/revisions"}],"predecessor-version":[{"id":4050,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/1326\/revisions\/4050"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/1384"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=1326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=1326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=1326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}