[{"data":1,"prerenderedAt":1129},["ShallowReactive",2],{"news-item-\u002Fnews\u002Fface-api-js":3},{"id":4,"title":5,"body":6,"category":1117,"created by":1118,"date":1119,"description":1120,"extension":1121,"meta":1122,"navigation":294,"path":1123,"sections":1124,"seo":1125,"stem":1126,"thumbnail":1127,"__hash__":1128},"content_en\u002Fnews\u002Fface-api-js.md","Face Detection with face-api.js",{"type":7,"value":8,"toc":1111},"minimark",[9,18,21,27,33,41,47,50,57,66,74,78,83,87,90,93,96,99,102,228,231,240,243,640,643,663,670,707,714,717,810,816,826,833,918,921,1054,1057,1066,1070,1073,1076,1079,1083,1089,1095,1101,1108],[10,11,12,13,17],"p",{},"A ",[14,15,16],"strong",{},"facial recognition system"," is a technology capable of matching a human face from a digital image or a video frame against a database of faces. Researchers are currently developing multiple methods in which facial recognition systems work. The most advanced face recognition method, which is also employed to authenticate users through ID verification services, works by pinpointing and measuring facial features from a given image.",[10,19,20],{},"While initially a form of computer application, facial recognition systems have seen wider uses in recent times on smartphones and in other forms of technology, such as robotics. Because computerized facial recognition involves the measurement of a human's physiological characteristics facial recognition systems are categorized as biometrics. Although the accuracy of facial recognition systems as a biometric technology is lower than iris recognition and fingerprint recognition, it is widely adopted. Facial recognition systems have been deployed in advanced human-computer interaction, video surveillance and automatic indexing of images.",[10,22,23],{},[24,25,26],"em",{},"(Follow Wikipedia).",[10,28,29,30],{},"There are many libraries that support algorithms for this, in this article I will use the library ",[14,31,32],{},"face-api.js.",[34,35,37,40],"h2",{"id":36},"about-face-apijs",[14,38,39],{},"ABOUT"," FACE-API.JS",[10,42,43,46],{},[14,44,45],{},"Face-api.js"," is a JavaScript API used to recognize faces in Browser as well as NodeJS using Tensorflow.js.",[10,48,49],{},"Some main features:",[51,52,53],"ul",{},[54,55,56],"li",{},"Face Recognition",[58,59],"img",{"className":60,"alt":63,"src":64,"style":65},[61,62],"block","mx-auto","","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F11\u002F18092618\u002FMinAn.png","width: 50%;",[51,67,68,71],{},[54,69,70],{},"Face Landmark Detection",[54,72,73],{},"Face Expression Recognition",[58,75],{"className":76,"alt":63,"src":77,"style":65},[61,62],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F11\u002F18092717\u002FMinAn_3.png",[51,79,80],{},[54,81,82],{},"Age Estimation & Gender Recognition",[58,84],{"className":85,"alt":63,"src":86,"style":65},[61,62],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F11\u002F18092647\u002FMinAn_2.png",[10,88,89],{},"In this article I will present the face recognition feature.",[10,91,92],{},"Face detection consists of 2 steps: face detection and face recognition.",[10,94,95],{},"In short, the goal we want to achieve is to identify a person as they provide a picture of their face. We do this by collecting one (or more) pictures tagged with the name of each person we want to recognize. Then compare the input image with the reference data and find the most similar reference image. If both images are identical enough, we output the name of the person and vice versa, it is considered indeterminate.",[10,97,98],{},"You can start looking at the example below:",[10,100,101],{},"The first create a directory structure to manage.",[103,104,108],"pre",{"className":105,"code":106,"language":107,"meta":63,"style":63},"language-bash shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","mkdir face\ntouch index.html\ntouch script.js\nmkdir data \u002F\u002F Used to drop input image data\nmkdir images \u002F\u002F Image used for testing\nmkdir models \u002F\u002F Contains pre-trained model\nface-api-js.min.js \u002F\u002F Download from github.\n","bash",[109,110,111,124,133,141,170,192,211],"code",{"__ignoreMap":63},[112,113,116,120],"span",{"class":114,"line":115},"line",1,[112,117,119],{"class":118},"s52Pk","mkdir",[112,121,123],{"class":122},"sGFVr"," face\n",[112,125,127,130],{"class":114,"line":126},2,[112,128,129],{"class":118},"touch",[112,131,132],{"class":122}," index.html\n",[112,134,136,138],{"class":114,"line":135},3,[112,137,129],{"class":118},[112,139,140],{"class":122}," script.js\n",[112,142,144,146,149,152,155,158,161,164,167],{"class":114,"line":143},4,[112,145,119],{"class":118},[112,147,148],{"class":122}," data",[112,150,151],{"class":122}," \u002F\u002F",[112,153,154],{"class":122}," Used",[112,156,157],{"class":122}," to",[112,159,160],{"class":122}," drop",[112,162,163],{"class":122}," input",[112,165,166],{"class":122}," image",[112,168,169],{"class":122}," data\n",[112,171,173,175,178,180,183,186,189],{"class":114,"line":172},5,[112,174,119],{"class":118},[112,176,177],{"class":122}," images",[112,179,151],{"class":122},[112,181,182],{"class":122}," Image",[112,184,185],{"class":122}," used",[112,187,188],{"class":122}," for",[112,190,191],{"class":122}," testing\n",[112,193,195,197,200,202,205,208],{"class":114,"line":194},6,[112,196,119],{"class":118},[112,198,199],{"class":122}," models",[112,201,151],{"class":122},[112,203,204],{"class":122}," Contains",[112,206,207],{"class":122}," pre-trained",[112,209,210],{"class":122}," model\n",[112,212,214,217,219,222,225],{"class":114,"line":213},7,[112,215,216],{"class":118},"face-api-js.min.js",[112,218,151],{"class":122},[112,220,221],{"class":122}," Download",[112,223,224],{"class":122}," from",[112,226,227],{"class":122}," github.\n",[10,229,230],{},"Next I will download the models that the face-api.js provides.",[10,232,233,234],{},"Data of models downloaded in: ",[235,236,237],"a",{"href":237,"rel":238},"https:\u002F\u002Fgithub.com\u002Fjustadudewhohacks\u002Fface-api.js\u002Ftree\u002Fmaster\u002Fweights",[239],"nofollow",[10,241,242],{},"In the html file, I simply put the image in it. And a canvas tag to show the box of the face.",[103,244,248],{"className":245,"code":246,"language":247,"meta":63,"style":63},"language-html shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    \u003Cscript src=\".\u002Fface-api.min.js\">\u003C\u002Fscript>\n    \u003Cscript src=\".\u002Fscript.js\">\u003C\u002Fscript>\n    \u003Ctitle>Face Recognition\u003C\u002Ftitle>\n    \u003Cstyle>\n        canvas {\n            position: absolute;\n            top: 0;\n            left: 0;\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\n\u003Cbody>\n    \u003Cimg id=\"myImg\" src=\"images\u002Fhuu.jpg\" \u002F>\n    \u003Ccanvas id=\"myCanvas\">\n\u003C\u002Fbody>\n\n\u003C\u002Fhtml>\n","html",[109,249,250,267,290,296,305,327,359,390,417,441,462,472,481,497,511,523,529,539,548,553,563,596,617,626,631],{"__ignoreMap":63},[112,251,252,256,260,264],{"class":114,"line":115},[112,253,255],{"class":254},"sDfIl","\u003C!",[112,257,259],{"class":258},"sRlkE","DOCTYPE",[112,261,263],{"class":262},"smZ93"," html",[112,265,266],{"class":254},">\n",[112,268,269,272,274,277,280,283,286,288],{"class":114,"line":126},[112,270,271],{"class":254},"\u003C",[112,273,247],{"class":258},[112,275,276],{"class":262}," lang",[112,278,279],{"class":254},"=",[112,281,282],{"class":254},"\"",[112,284,285],{"class":122},"en",[112,287,282],{"class":254},[112,289,266],{"class":254},[112,291,292],{"class":114,"line":135},[112,293,295],{"emptyLinePlaceholder":294},true,"\n",[112,297,298,300,303],{"class":114,"line":143},[112,299,271],{"class":254},[112,301,302],{"class":258},"head",[112,304,266],{"class":254},[112,306,307,310,313,316,318,320,323,325],{"class":114,"line":172},[112,308,309],{"class":254},"    \u003C",[112,311,312],{"class":258},"meta",[112,314,315],{"class":262}," charset",[112,317,279],{"class":254},[112,319,282],{"class":254},[112,321,322],{"class":122},"UTF-8",[112,324,282],{"class":254},[112,326,266],{"class":254},[112,328,329,331,333,336,338,340,343,345,348,350,352,355,357],{"class":114,"line":194},[112,330,309],{"class":254},[112,332,312],{"class":258},[112,334,335],{"class":262}," name",[112,337,279],{"class":254},[112,339,282],{"class":254},[112,341,342],{"class":122},"viewport",[112,344,282],{"class":254},[112,346,347],{"class":262}," content",[112,349,279],{"class":254},[112,351,282],{"class":254},[112,353,354],{"class":122},"width=device-width, initial-scale=1.0",[112,356,282],{"class":254},[112,358,266],{"class":254},[112,360,361,363,365,368,370,372,375,377,379,381,383,386,388],{"class":114,"line":213},[112,362,309],{"class":254},[112,364,312],{"class":258},[112,366,367],{"class":262}," http-equiv",[112,369,279],{"class":254},[112,371,282],{"class":254},[112,373,374],{"class":122},"X-UA-Compatible",[112,376,282],{"class":254},[112,378,347],{"class":262},[112,380,279],{"class":254},[112,382,282],{"class":254},[112,384,385],{"class":122},"ie=edge",[112,387,282],{"class":254},[112,389,266],{"class":254},[112,391,393,395,398,401,403,405,408,410,413,415],{"class":114,"line":392},8,[112,394,309],{"class":254},[112,396,397],{"class":258},"script",[112,399,400],{"class":262}," src",[112,402,279],{"class":254},[112,404,282],{"class":254},[112,406,407],{"class":122},".\u002Fface-api.min.js",[112,409,282],{"class":254},[112,411,412],{"class":254},">\u003C\u002F",[112,414,397],{"class":258},[112,416,266],{"class":254},[112,418,420,422,424,426,428,430,433,435,437,439],{"class":114,"line":419},9,[112,421,309],{"class":254},[112,423,397],{"class":258},[112,425,400],{"class":262},[112,427,279],{"class":254},[112,429,282],{"class":254},[112,431,432],{"class":122},".\u002Fscript.js",[112,434,282],{"class":254},[112,436,412],{"class":254},[112,438,397],{"class":258},[112,440,266],{"class":254},[112,442,444,446,449,452,455,458,460],{"class":114,"line":443},10,[112,445,309],{"class":254},[112,447,448],{"class":258},"title",[112,450,451],{"class":254},">",[112,453,56],{"class":454},"sZSNi",[112,456,457],{"class":254},"\u003C\u002F",[112,459,448],{"class":258},[112,461,266],{"class":254},[112,463,465,467,470],{"class":114,"line":464},11,[112,466,309],{"class":254},[112,468,469],{"class":258},"style",[112,471,266],{"class":254},[112,473,475,478],{"class":114,"line":474},12,[112,476,477],{"class":118},"        canvas",[112,479,480],{"class":254}," {\n",[112,482,484,488,491,494],{"class":114,"line":483},13,[112,485,487],{"class":486},"spFsF","            position",[112,489,490],{"class":254},":",[112,492,493],{"class":454}," absolute",[112,495,496],{"class":254},";\n",[112,498,500,503,505,509],{"class":114,"line":499},14,[112,501,502],{"class":486},"            top",[112,504,490],{"class":254},[112,506,508],{"class":507},"sYRBq"," 0",[112,510,496],{"class":254},[112,512,514,517,519,521],{"class":114,"line":513},15,[112,515,516],{"class":486},"            left",[112,518,490],{"class":254},[112,520,508],{"class":507},[112,522,496],{"class":254},[112,524,526],{"class":114,"line":525},16,[112,527,528],{"class":254},"        }\n",[112,530,532,535,537],{"class":114,"line":531},17,[112,533,534],{"class":254},"    \u003C\u002F",[112,536,469],{"class":258},[112,538,266],{"class":254},[112,540,542,544,546],{"class":114,"line":541},18,[112,543,457],{"class":254},[112,545,302],{"class":258},[112,547,266],{"class":254},[112,549,551],{"class":114,"line":550},19,[112,552,295],{"emptyLinePlaceholder":294},[112,554,556,558,561],{"class":114,"line":555},20,[112,557,271],{"class":254},[112,559,560],{"class":258},"body",[112,562,266],{"class":254},[112,564,566,568,570,573,575,577,580,582,584,586,588,591,593],{"class":114,"line":565},21,[112,567,309],{"class":254},[112,569,58],{"class":258},[112,571,572],{"class":262}," id",[112,574,279],{"class":254},[112,576,282],{"class":254},[112,578,579],{"class":122},"myImg",[112,581,282],{"class":254},[112,583,400],{"class":262},[112,585,279],{"class":254},[112,587,282],{"class":254},[112,589,590],{"class":122},"images\u002Fhuu.jpg",[112,592,282],{"class":254},[112,594,595],{"class":254}," \u002F>\n",[112,597,599,601,604,606,608,610,613,615],{"class":114,"line":598},22,[112,600,309],{"class":254},[112,602,603],{"class":258},"canvas",[112,605,572],{"class":262},[112,607,279],{"class":254},[112,609,282],{"class":254},[112,611,612],{"class":122},"myCanvas",[112,614,282],{"class":254},[112,616,266],{"class":254},[112,618,620,622,624],{"class":114,"line":619},23,[112,621,457],{"class":254},[112,623,560],{"class":258},[112,625,266],{"class":254},[112,627,629],{"class":114,"line":628},24,[112,630,295],{"emptyLinePlaceholder":294},[112,632,634,636,638],{"class":114,"line":633},25,[112,635,457],{"class":254},[112,637,247],{"class":258},[112,639,266],{"class":254},[10,641,642],{},"Load Model into the project, here use 3 main models:",[51,644,645,651,657],{},[54,646,647,650],{},[14,648,649],{},"ssdMobilenetV1 Model",": This is the pre-trained model used to detect faces.",[54,652,653,656],{},[14,654,655],{},"faceLandmark68Net Model",": This is a pre-trained model used to display points around his face.",[54,658,659,662],{},[14,660,661],{},"FaceRecognitionNet Model",": This is the pre-trained model for facial recognition.",[10,664,665,666,669],{},"In the file ",[109,667,668],{},"script.js"," will load these 3 models first.",[103,671,675],{"className":672,"code":673,"language":674,"meta":63,"style":63},"language-javascript shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","(async () => {\n  \u002F\u002F Load model\n  await faceapi.nets.ssdMobilenetv1.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceRecognitionNet.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceLandmark68Net.loadFromUri(\"\u002Fmodels\");\n})();\n","javascript",[109,676,677,682,687,692,697,702],{"__ignoreMap":63},[112,678,679],{"class":114,"line":115},[112,680,681],{},"(async () => {\n",[112,683,684],{"class":114,"line":126},[112,685,686],{},"  \u002F\u002F Load model\n",[112,688,689],{"class":114,"line":135},[112,690,691],{},"  await faceapi.nets.ssdMobilenetv1.loadFromUri(\"\u002Fmodels\");\n",[112,693,694],{"class":114,"line":143},[112,695,696],{},"  await faceapi.nets.faceRecognitionNet.loadFromUri(\"\u002Fmodels\");\n",[112,698,699],{"class":114,"line":172},[112,700,701],{},"  await faceapi.nets.faceLandmark68Net.loadFromUri(\"\u002Fmodels\");\n",[112,703,704],{"class":114,"line":194},[112,705,706],{},"})();\n",[10,708,709,710,713],{},"Use the ",[109,711,712],{},"detectSingleFace()"," function to detect faces in images.",[10,715,716],{},"After finished loading the model, continue to write face detection.",[103,718,720],{"className":672,"code":719,"language":674,"meta":63,"style":63},"(async () => {\n  \u002F\u002F Load model\n  await faceapi.nets.ssdMobilenetv1.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceRecognitionNet.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceLandmark68Net.loadFromUri(\"\u002Fmodels\");\n\n  \u002F\u002F Detect Face\n  const input = document.getElementById(\"myImg\");\n  const result = await faceapi\n    .detectSingleFace(input, new faceapi.SsdMobilenetv1Options())\n    .withFaceLandmarks()\n    .withFaceDescriptor();\n  const displaySize = { width: input.width, height: input.height };\n  \u002F\u002F resize the overlay canvas to the input dimensions\n  const canvas = document.getElementById(\"myCanvas\");\n  faceapi.matchDimensions(canvas, displaySize);\n  const resizedDetections = faceapi.resizeResults(result, displaySize);\n  console.log(resizedDetections);\n})();\n",[109,721,722,726,730,734,738,742,746,751,756,761,766,771,776,781,786,791,796,801,806],{"__ignoreMap":63},[112,723,724],{"class":114,"line":115},[112,725,681],{},[112,727,728],{"class":114,"line":126},[112,729,686],{},[112,731,732],{"class":114,"line":135},[112,733,691],{},[112,735,736],{"class":114,"line":143},[112,737,696],{},[112,739,740],{"class":114,"line":172},[112,741,701],{},[112,743,744],{"class":114,"line":194},[112,745,295],{"emptyLinePlaceholder":294},[112,747,748],{"class":114,"line":213},[112,749,750],{},"  \u002F\u002F Detect Face\n",[112,752,753],{"class":114,"line":392},[112,754,755],{},"  const input = document.getElementById(\"myImg\");\n",[112,757,758],{"class":114,"line":419},[112,759,760],{},"  const result = await faceapi\n",[112,762,763],{"class":114,"line":443},[112,764,765],{},"    .detectSingleFace(input, new faceapi.SsdMobilenetv1Options())\n",[112,767,768],{"class":114,"line":464},[112,769,770],{},"    .withFaceLandmarks()\n",[112,772,773],{"class":114,"line":474},[112,774,775],{},"    .withFaceDescriptor();\n",[112,777,778],{"class":114,"line":483},[112,779,780],{},"  const displaySize = { width: input.width, height: input.height };\n",[112,782,783],{"class":114,"line":499},[112,784,785],{},"  \u002F\u002F resize the overlay canvas to the input dimensions\n",[112,787,788],{"class":114,"line":513},[112,789,790],{},"  const canvas = document.getElementById(\"myCanvas\");\n",[112,792,793],{"class":114,"line":525},[112,794,795],{},"  faceapi.matchDimensions(canvas, displaySize);\n",[112,797,798],{"class":114,"line":531},[112,799,800],{},"  const resizedDetections = faceapi.resizeResults(result, displaySize);\n",[112,802,803],{"class":114,"line":541},[112,804,805],{},"  console.log(resizedDetections);\n",[112,807,808],{"class":114,"line":550},[112,809,706],{},[10,811,812,813,815],{},"The ",[109,814,712],{}," function will return the result of detecting a face and return the coordinates of the face.",[10,817,709,818,821,822,825],{},[109,819,820],{},"FaceMatcher()"," and ",[109,823,824],{},"findBestMatch()"," functions to recognize faces.",[10,827,828,829,832],{},"After detecting a face, now we will write the ",[109,830,831],{},"detectFace()"," function used to detect a face.",[103,834,836],{"className":672,"code":835,"language":674,"meta":63,"style":63},"async function detectFace() {\n  const label = \"Huu\";\n  const numberImage = 5;\n  const descriptions = [];\n  for (let i = 1; i \u003C= numberImage; i++) {\n    const img = await faceapi.fetchImage(\n      `\u002Fdata\u002FHuu\u002F${i}.jpg`\n    );\n    const detection = await faceapi\n      .detectSingleFace(img)\n      .withFaceLandmarks()\n      .withFaceDescriptor();\n    descriptions.push(detection.descriptor);\n  }\n  return new faceapi.LabeledFaceDescriptors(label, descriptions);\n}\n",[109,837,838,843,848,853,858,863,868,873,878,883,888,893,898,903,908,913],{"__ignoreMap":63},[112,839,840],{"class":114,"line":115},[112,841,842],{},"async function detectFace() {\n",[112,844,845],{"class":114,"line":126},[112,846,847],{},"  const label = \"Huu\";\n",[112,849,850],{"class":114,"line":135},[112,851,852],{},"  const numberImage = 5;\n",[112,854,855],{"class":114,"line":143},[112,856,857],{},"  const descriptions = [];\n",[112,859,860],{"class":114,"line":172},[112,861,862],{},"  for (let i = 1; i \u003C= numberImage; i++) {\n",[112,864,865],{"class":114,"line":194},[112,866,867],{},"    const img = await faceapi.fetchImage(\n",[112,869,870],{"class":114,"line":213},[112,871,872],{},"      `\u002Fdata\u002FHuu\u002F${i}.jpg`\n",[112,874,875],{"class":114,"line":392},[112,876,877],{},"    );\n",[112,879,880],{"class":114,"line":419},[112,881,882],{},"    const detection = await faceapi\n",[112,884,885],{"class":114,"line":443},[112,886,887],{},"      .detectSingleFace(img)\n",[112,889,890],{"class":114,"line":464},[112,891,892],{},"      .withFaceLandmarks()\n",[112,894,895],{"class":114,"line":474},[112,896,897],{},"      .withFaceDescriptor();\n",[112,899,900],{"class":114,"line":483},[112,901,902],{},"    descriptions.push(detection.descriptor);\n",[112,904,905],{"class":114,"line":499},[112,906,907],{},"  }\n",[112,909,910],{"class":114,"line":513},[112,911,912],{},"  return new faceapi.LabeledFaceDescriptors(label, descriptions);\n",[112,914,915],{"class":114,"line":525},[112,916,917],{},"}\n",[10,919,920],{},"Then, we are use the detectFace () function to detect faces and draw a box around the face.",[103,922,924],{"className":672,"code":923,"language":674,"meta":63,"style":63},"(async () => {\n  \u002F\u002F Load model\n  await faceapi.nets.ssdMobilenetv1.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceRecognitionNet.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceLandmark68Net.loadFromUri(\"\u002Fmodels\");\n\n  \u002F\u002F Detect Face\n  const input = document.getElementById(\"myImg\");\n  const result = await faceapi\n    .detectSingleFace(input, new faceapi.SsdMobilenetv1Options())\n    .withFaceLandmarks()\n    .withFaceDescriptor();\n  const displaySize = { width: input.width, height: input.height };\n  \u002F\u002F resize the overlay canvas to the input dimensions\n  const canvas = document.getElementById(\"myCanvas\");\n  faceapi.matchDimensions(canvas, displaySize);\n  const resizedDetections = faceapi.resizeResults(result, displaySize);\n  console.log(resizedDetections);\n\n  \u002F\u002F Recognize Face\n  const labeledFaceDescriptors = await detectFace();\n  const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.7);\n  if (result) {\n    const bestMatch = faceMatcher.findBestMatch(result.descriptor);\n    const box = resizedDetections.detection.box;\n    const drawBox = new faceapi.draw.DrawBox(box, { label: bestMatch.label });\n    drawBox.draw(canvas);\n  }\n})();\n",[109,925,926,930,934,938,942,946,950,954,958,962,966,970,974,978,982,986,990,994,998,1002,1007,1012,1017,1022,1027,1032,1038,1044,1049],{"__ignoreMap":63},[112,927,928],{"class":114,"line":115},[112,929,681],{},[112,931,932],{"class":114,"line":126},[112,933,686],{},[112,935,936],{"class":114,"line":135},[112,937,691],{},[112,939,940],{"class":114,"line":143},[112,941,696],{},[112,943,944],{"class":114,"line":172},[112,945,701],{},[112,947,948],{"class":114,"line":194},[112,949,295],{"emptyLinePlaceholder":294},[112,951,952],{"class":114,"line":213},[112,953,750],{},[112,955,956],{"class":114,"line":392},[112,957,755],{},[112,959,960],{"class":114,"line":419},[112,961,760],{},[112,963,964],{"class":114,"line":443},[112,965,765],{},[112,967,968],{"class":114,"line":464},[112,969,770],{},[112,971,972],{"class":114,"line":474},[112,973,775],{},[112,975,976],{"class":114,"line":483},[112,977,780],{},[112,979,980],{"class":114,"line":499},[112,981,785],{},[112,983,984],{"class":114,"line":513},[112,985,790],{},[112,987,988],{"class":114,"line":525},[112,989,795],{},[112,991,992],{"class":114,"line":531},[112,993,800],{},[112,995,996],{"class":114,"line":541},[112,997,805],{},[112,999,1000],{"class":114,"line":550},[112,1001,295],{"emptyLinePlaceholder":294},[112,1003,1004],{"class":114,"line":555},[112,1005,1006],{},"  \u002F\u002F Recognize Face\n",[112,1008,1009],{"class":114,"line":565},[112,1010,1011],{},"  const labeledFaceDescriptors = await detectFace();\n",[112,1013,1014],{"class":114,"line":598},[112,1015,1016],{},"  const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.7);\n",[112,1018,1019],{"class":114,"line":619},[112,1020,1021],{},"  if (result) {\n",[112,1023,1024],{"class":114,"line":628},[112,1025,1026],{},"    const bestMatch = faceMatcher.findBestMatch(result.descriptor);\n",[112,1028,1029],{"class":114,"line":633},[112,1030,1031],{},"    const box = resizedDetections.detection.box;\n",[112,1033,1035],{"class":114,"line":1034},26,[112,1036,1037],{},"    const drawBox = new faceapi.draw.DrawBox(box, { label: bestMatch.label });\n",[112,1039,1041],{"class":114,"line":1040},27,[112,1042,1043],{},"    drawBox.draw(canvas);\n",[112,1045,1047],{"class":114,"line":1046},28,[112,1048,907],{},[112,1050,1052],{"class":114,"line":1051},29,[112,1053,706],{},[10,1055,1056],{},"In the end, we are completed a simple recognition system in JavaScript .",[10,1058,1059,1060,1065],{},"You can see the source code at the link ",[235,1061,1064],{"href":1062,"rel":1063},"https:\u002F\u002Fgitlab.com\u002Fbwv-hp\u002Fface-api-js.git",[239],"Gitlab"," .",[34,1067,1069],{"id":1068},"conclude","CONCLUDE",[10,1071,1072],{},"Above is the article introducing face-api.js and its simple usage. ",[10,1074,1075],{},"We can expand the research to add some functions not introduced above such as: determining age, gender, feelings.",[10,1077,1078],{},"Note that this identity system is used by pre-trained the model without going through any complicated steps to train the data from the pre-trained model so its accuracy is relative.",[34,1080,1082],{"id":1081},"references","REFERENCES",[10,1084,1085],{},[235,1086,1087],{"href":1087,"rel":1088},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FFacial_recognition_system",[239],[10,1090,1091],{},[235,1092,1093],{"href":1093,"rel":1094},"https:\u002F\u002Fgithub.com\u002Fjustadudewhohacks\u002Fface-api.js#getting-started",[239],[10,1096,1097],{},[235,1098,1099],{"href":1099,"rel":1100},"https:\u002F\u002Fitnext.io\u002Fface-api-js-javascript-api-for-face-recognition-in-the-browser-with-tensorflow-js-bcc2a6c4cf07",[239],[10,1102,1103,1104],{},"Image source: ",[235,1105,1106],{"href":1106,"rel":1107},"https:\u002F\u002Fwww.pexels.com\u002Flicense\u002F",[239],[469,1109,1110],{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .spFsF, html code.shiki .spFsF{--shiki-light:#8796B0;--shiki-default:#8796B0;--shiki-dark:#B2CCD6}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}",{"title":63,"searchDepth":126,"depth":126,"links":1112},[1113,1115,1116],{"id":36,"depth":126,"text":1114},"ABOUT FACE-API.JS",{"id":1068,"depth":126,"text":1069},{"id":1081,"depth":126,"text":1082},"tech talk","Briswell Vietnam Co Ltd","2020-12-23","A facial recognition system is a technology capable of matching a human face from a digital image or a video frame against a database of faces. Researchers are currently developing multiple methods in which facial recognition systems work.","md",{},"\u002Fnews\u002Fface-api-js",null,{"title":5,"description":1120},"news\u002Fface-api-js","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F11\u002F16133339\u002Fxacthuc.jpg","OYtkDxOftF-gFK7F8GGgl-CDHyHlQFy-DWIOayMhf_Y",1785320519086]