Editado por: Tecnológico Superior
Corporativo Edwards Deming
Enero - Julio Vol. 5 - 1 - 2021
https://revista-edwardsdeming.com/index.php/es
e-ISSN: 2576-0971
Recibido: 19 Marzo 2020
Aprobado: 24 Diciembre, 2020
Pag 29-39
API para control de asistencia con reconocimiento
facial usando OpenCv.JS
API for attendance control with facial recognition using
OpenCv.JS
Ingrid Angélica García Torres
*
Ximena Trujillo Borja
*
Javier Domínguez De La Torre
*
William Navas Espín
*
RESUMEN
Mediante investigación la, el control de asistencia de
aquellos estudiantes de las instituciones educativas se toma
de forma periódica y a través de procesos manuales, para
superar esta situación se realizó la presente investigación
que incluye la revisión de tecnologías de reconocimiento
facial para diseñar una API que se encargue del registro y
control de asistencia de los estudiantes, que pueda ser
utilizado en múltiples sistemas, se utilizó una metodología
basada en el método bibliográfico y cuantitativamente,
empleando una encuesta a docentes de la Universidad
Estatal del Sur de Manabí evaluando el interés de esa
población en el diseño propuesto, se ejecutó la revisión de
tecnologías previamente utilizadas para diseño de API, se
investigó la evolución de software empleados en servicios
a fines, se empleó el uso librerías gratuitas como OpenCv
y NodeJs. Lográndose con ella la construcción del diseño
para el uso del control de asistencia acoplable a sistemas
actuales y con tecnología moderna.
Palabras clave: Opencv, API, Reconocimiento facial,
Estudiantes
*
Master, Universidad de Guayaquil, Guayaquil, Ecuador,
ingrid.garciat@ug.edu.ec, https://orcid.org/0000-0003-0333-7525
* Master,Universidad de Guayaquil, Guayaquil, Ecuador,
ximena.trujillob@ug.edu.ec, Guayaquil, Ecuador
https://orcid.org/0000-0003-1520-9096
* Master,Universidad de Guayaquil, Guayaquil, Ecuador,
luis.dominguezt@ug.edu.ec, Guayquil, Ecuador
https://orcid.org/0000-0002-4287-9071
* Master, Universidad de Guayaquil, Guayaquil, Ecuador,
william.navase@ug.edu.ec, https://orcid.org/0000-0002-8492-9997
30
30
Tecnológico Superior Corporativo Edwards Deming - Enero - Julio Vol. 5 - 1 - 2021 https://revista-edwardsdeming.com/index.php/es
e-ISSN: 2576-0971
ABSTRACT
Through research, the attendance control of those students of educational institutions
is taken periodically and through manual processes, to overcome this situation the
present investigation was carried out that includes the review of facial recognition
technologies to design an API that is In charge of the registration and control of student
attendance, which can be used in multiple systems, a methodology based on the
bibliographic method and quantitatively was used, using a survey of teachers from the
State University of the South of Manabí evaluating the interest of that population In the
proposed design, the review of technologies previously used for API design was carried
out, the evolution of software used in services was investigated, the use of free libraries
such as OpenCv and NodeJs was used. Achieving with it the construction of the design
for the use of assistance control that can be coupled to current systems and with
modern technology.
Keywords: Opencv, API, Face recognition, Students.
INTRODUCCIÓN
Computer Vision, que generalmente se abrevia como CV, se caracteriza por ser un
campo muy amplio de la inteligencia artificial que busca crear métodos para ayudar a las
computadoras a "ver" y obtener la sustancia de imágenes avanzadas como fotos y videos.
El objetivo de Computer Vision es extraer datos valiosos de las imágenes.
Esto ha demostrado lo sorprendentemente desafiante que es; ha poseído miles de
mentes brillantes e inventivas durante las últimas cuatro décadas, y a pesar de esto
todavía se está lejos de poder construir una "máquina de ver" de propósito general.
El reconocimiento facial es un método para identificar o verificar la identidad de un
individuo mediante la detección de patrones faciales. Los sistemas de reconocimiento
facial se pueden utilizar para identificar personas en fotos, videos o en tiempo real. La
policía también puede usar dispositivos móviles para identificar personas durante las
paradas policiales.
Pero los datos de reconocimiento facial pueden ser propensos a errores, lo que puede
implicar a las personas por delitos que no han cometido. El software de reconocimiento
facial presenta falencias para reconocer a los afroamericanos y otras minorías étnicas,
mujeres y jóvenes, a menudo identificándolos erróneamente o no identificándolos,
impactando de manera dispar a ciertos grupos (E3FF, 2014).
El reconocimiento facial abarca muchos ámbitos de tecnología incluso con los controles
de acceso como los biométricos, y son adaptables a cualquier sistema pudiendo ser web
en cualquier sistema operativo,
Los Biométricos se utiliza para la seguridad y / o autenticación de transacciones. Un
sistema biométrico es una forma efectiva de verificar la identidad de una persona. Se
utilizan en aeropuertos, investigaciones forenses, edificios seguros y gestión de la fuerza
laboral. Tomando que las unidades administrativas han obtenido beneficio de este tipo
de tecnología. En este trabajo se propone el diseño de un api usando inteligencia artificial
mediante aprendizaje por tareas como Deep Learning y derivados. Debido a esto se usa
31
31
Tecnológico Superior Corporativo Edwards Deming - Enero - Julio Vol. 5 - 1 - 2021 https://revista-edwardsdeming.com/index.php/es
e-ISSN: 2576-0971
un sistema biométrico sencillo y se diseñará un sistema de reconocimiento capaz de
aprender por sí mismo, con una auto eficiencia y a bajo coste.
Este diseño utilizará lenguajes de programación de alto nivel, con lado al cliente usando
datos y requerimientos de manera asíncrona como lo es nodejs y usando una librería de
computer visión como lo es OPENCV.JS que ayudara con la forma y reconocimiento del
rostro de una manera eficiente. El presente trabajo consta de 3 etapas:
Etapa 1: El diseño del backend como etapa 1.
Etapa 2: Uso de NodeJs y una base de datos robusta como lo es MySQL para un mejor
control y flujo de datos, como intermedio entre el backend y frontend.
Etapa 3: Uso de un framework express basado en NodeJs para un diseño de interfaces
más intuitiva a nivel de usuario.
MATERIALES Y MÉTODOS
Modalidad de la Investigación
Con la finalidad de tramitar la problemática planteada anteriormente se propone el
diseño del API para detectar los rostros de los estudiantes de la facultad de Tecnología
de Información de la cuidad de Jipijapa esta herramienta mostrará la eficiencia en
sistemas de reconocimiento facial al detectar rostros y tomar la asistencia en el cual se
hizo una herramienta en beneficio a los profesores cuyo sistema facilita el proceso
normal en la toma de asistencias.
Enfoque de la investigación
Para el diseño del API, se considera los siguientes aspectos importantes que son:
• Investigación Técnica
• Investigación Cuantitativa
• Investigación Cualitativa
Debido al estudio de esta investigación de los diferentes sistemas de control de
asistencia, existen distintos tipos de reconocimiento facial que ayudan a sistemas de
control de accesos y actualmente no existen sistemas que implementen en
comunicación con sistemas actuales educativos.
Investigación Técnica
En base a las pruebas de diseño se realizó una simulación durante la investigación en la
que se determinó lo viable del uso de herramientas open source (código abierto), estas
herramientas tecnológicas brindan una mejor viabilidad al momento de desarrollar dicho
API con las funcionalidades que requieren para el control de asistencia de estudiantes.
Los recursos para la funcionalidad tanto como en hardware o software se encuentran
en la mayor parte del mercado actual.
El uso de estas herramientas comprende de dos etapas una de ellas el backend que
básicamente compone el cuerpo del API, y el frontend como lo es NODEJS. Uno de los
componentes del backend es MySQL en la cual se almacena los datos de los estudiantes
32
32
Tecnológico Superior Corporativo Edwards Deming - Enero - Julio Vol. 5 - 1 - 2021 https://revista-edwardsdeming.com/index.php/es
e-ISSN: 2576-0971
para su detección. MySQL es un gestor que viene incluido con XAMP, mediante esto
facilita el manejo a nivel de servidor y gestión de datos de la base de datos del API.
En el frontend usa NODEJS que es un intermedio de comunicación entre la parte del
backend y el frontend, que usara los datos que guarda y los mostrara en una página
basada en HTML y JavaScript, y por último para la parte principal del articulo para el
reconocimiento de los rostros en donde se usa OpenCv con JavaScript.
Tabla 1 Recurso de Software
Herramientas
Característica
SO (Sistema Operativo)
Multisistema portable
Base de Datos
MySQL
Servidor de Aplicaciones
Apache/ NodeJs
Framework
Bootstrap, JQuery
Lenguaje de Programación
TypeScript/ JavaScript
Información tomada de la investigación directa. Elaborado por Investigadores
Una de las ventajas de usar este tipo de tecnologías de código abierto es lo escalable
que puede ser usar Nodejs y los beneficios de su escalabilidad a nivel estructural
facilitan como anteriormente en la tabla 2 sobre el recurso del software. El gestor de
base de datos amigable adaptable a múltiples IDE para el manejo de información.
Servidor web de Nodejs que da como ventaja ser asíncrono en comunicación con el
backend y el frontend. La experiencia UIX a nivel de usuario que brinda Bootstrap.
En la tabla 3 se detalla uno de los beneficios a nivel de hardware que brinda Nodejs
como servidor.
Tabla 2 Recurso Hardware – Servidor
Características
Especificaciones
Procesador
Core i3 6ma Generación
Memoria
4 Gb RAM
Disco Duro
1 TB
Monitor "15"
Portátil
33
33
Tecnológico Superior Corporativo Edwards Deming - Enero - Julio Vol. 5 - 1 - 2021 https://revista-edwardsdeming.com/index.php/es
e-ISSN: 2576-0971
Periféricos
Teclado, Mouse, Cámara Web
Información tomada de la investigación directa. Elaborado por Investigadores
Investigación Cuantitativa
El uso de esta información se obtiene la investigación directa, que con el uso de esta
metodología permitirá recopilar, analizar la información por medio de datos de un
estudio previamente hecho, las herramientas tecnológicas que se usan en este diseño
ayudaran a obtener resultado sobre el funcionamiento de la simulación del API.
Investigación Cualitativa
El docente usara la aplicación que disponen el conocimiento necesario para el
funcionamiento del sistema, se realizara una encuesta a los docentes con dichas
preguntas elaboradas de manera objetiva con la finalidad de enfocarse en el diseño del
API.
Población que colaboró para ser efectiva la investigación
La población es el conjunto de personas que se encuentran en un sitio determinado,
me permitirá realizar generalizaciones debido al tamaño de Docentes de la Carrera de
Tecnología de Información de la Universidad Estatal del Sur de Manabí de la ciudad de
Jipijapa mediante el uso del muestreo no probabilístico, se calculó de la siguiente
manera:
! "
#
$ %
&
!
'# ( $)
*
!
+,
Dónde:
n= tamaño de la muestra
N= tamaño conocido de la población
z= nivel de confianza 92%
e= error máximo permitido 6%
p= Probabilidad a favor
q= Probabilidad en contra
Datos:
! "
$-.
$ %
./.0
!
'$-. ( $)
$/12
!
'./0.)'./0.)
! "
$-.
$ %
./..30'$41)
5/-6$2'./30)
N=180
z= 1.96
e= 6
p= 0.50
q= 0.50
n=?
34
34
Tecnológico Superior Corporativo Edwards Deming - Enero - Julio Vol. 5 - 1 - 2021 https://revista-edwardsdeming.com/index.php/es
e-ISSN: 2576-0971
! "
$-.
$ %
./.640
./12.6
777! "
$-.
$/.616
77777777777! " 1-
Por lo tanto, será necesario encuestar no menos de 98 usuarios para tener una
fiabilidad en la información del 92%.
Durante el procesamiento de la información la cantidad de información que se obtuvo
en la encuesta propuesta, en todas las descripciones se hicieron con la herramienta de
formulario de Google que da beneficios como estadísticas de la encuesta en porcentaje
de respuestas, representaciones en tablas y graficas que se necesitan para el análisis de
interrogantes.
Ejecución de encuestas
Aplicando el método de investigación cuantitativa, se procedió a utilizar el instrumento
encuesta, mediante la cual la misma que fue enviada a los docentes explicando
previamente los conceptos de API y el objetivo del diseño.
El desarrollo de la encuesta como se mencionó con anterioridad se estableció como
población a docentes de una institución educativa en la cual se realizó el proceso de
recolección de información.
Análisis de las encuestas
Este modelo va dirigido a docentes en general que usan el control de asistencia de
manera manual o usando apartados de sistemas educativos en general. Este modelo
permitirá conocer una posible demanda en beneficio a la prueba y simulación de este
diseño dentro de la ciudad de Jipijapa.
Se realizo el proceso de encuesta a 20 Docentes que mostraron su punto de vista de
acuerdo al beneficio del diseño de este articulo con finalidad de obtener resultados
para llegar a las conclusiones debidas. Con el fin a este proceso se realizó 8 preguntas
en consecuencia, a esto las preguntas son las siguientes:
¿Qué método usa usted frecuentemente para la toma de asistencia a
estudiantes?
Tabla 3 Métodos de toma de asistencia
Opciones de Respuestas
Docentes
Porcentajes
Excel
63
63%
Sistemas Integrados en
plataforma educativa
36
36%
35
35
Tecnológico Superior Corporativo Edwards Deming - Enero - Julio Vol. 5 - 1 - 2021 https://revista-edwardsdeming.com/index.php/es
e-ISSN: 2576-0971
Bloc de Notas
0
0%
Otros
1
1%
Total
100
100%
Información tomada de la investigación directa, Elaborado por Investigadores.
Figura 1 Métodos de toma de asistencia a estudiantes, Información tomada de la
investigación directa. Elaborado por Investigadores
Según los datos que se obtuvieron en la figura, se dio como resultado que los docentes
usan en su mayoría (63%) como método de toma de asistencia la plataforma educativa
o Excel, solo el 36% emplea otros métodos de tipo manual o semi manual.
Esquema general de simulación
Para el desarrollo de una simulación en base al diseño de este API, es necesario ver
que se compone de dos partes la parte del backend y la parte del frontend.
El backend se compone de múltiples servicios como se ve en la figura 2.
Figura 2 Estructura Backend Información tomada de la investigación directa. Elaborado por
Investigadores.
36
36
Tecnológico Superior Corporativo Edwards Deming - Enero - Julio Vol. 5 - 1 - 2021 https://revista-edwardsdeming.com/index.php/es
e-ISSN: 2576-0971
El frontend que se compone de la parte visual del API como se observa ver en la figura
3.
Figura 3. Estructura Frontend. Información tomada de la investigación directa.
Elaborado por Investigadores
RESULTADOS
Descripción de funcionalidades
Al evaluar el todo sentido de la funcionalidad es necesario explicar explícitamente cada
botón y clases que se encuentran en el Sidebar, el que cual se menciona anteriormente
en el que se compone de numerosas funcionalidades.
Reconocimiento facial único por imagen
Una de las variantes en el sistema es el reconocimiento facial mediante una imagen
guardada previamente en la computadora, para un mejor funcionamiento de este.
Figura 4 Sección de reconocimiento de rostros por imagen. Información tomada directa de la
investigación. Elaborado por Investigadores.
37
37
Tecnológico Superior Corporativo Edwards Deming - Enero - Julio Vol. 5 - 1 - 2021 https://revista-edwardsdeming.com/index.php/es
e-ISSN: 2576-0971
Como se puede observar en la figura la vista tiene como vía principal reconocer el
rostro mediante varios detectores SSD Mobilenet V1 y TinyFaceDetector, se puede
usar mediante el url de una imagen o subir compatibles de imágenes como jpg, png,
etc.
El reconocimiento se da de manera asíncrona con el sistema sin necesidad de recargar
el navegador y muestra a la imagen subida el reconocimiento del rostro como se
puede observar en la figura 5.
Figura 5 Rostros reconocidos por funcionalidad de imagen. Información tomada directa de la
investigación. Elaborado por Investigadores.
DISCUSIÓN
El formulario hecho para el reconocimiento previo del rostro a través de esto la
funcionalidad de los demás módulos no podrían funcionar sin un registro de cada
persona. Los campos que contienen son: nombre, apellidos, y un input de imágenes en
donde subes el rostro para reconocer, a través de un botón se realiza el guardado de
la imagen y el resto de los datos mencionados anteriormente.
Este módulo es el principal para el reconocimiento y toma de asistencias a estudiantes,
su funcionalidad es por demás la más importante en el desarrollo del API, su uso es
exactamente como observa anteriormente, la subida de la imagen puede ser por
imagen url.
En el módulo de extracción de rostros, se reconocen los rostros que previamente
estén guardados en el sistema. El uso del botón de personas reconocidas muestra la
38
38
Tecnológico Superior Corporativo Edwards Deming - Enero - Julio Vol. 5 - 1 - 2021 https://revista-edwardsdeming.com/index.php/es
e-ISSN: 2576-0971
salida de comunicación con sistemas, el formato JSON de las personas reconocidas en
la extracción que cumplan con las características que definen a las personas
previamente, además de la posibilidad de usar los dos detectores TinyFace Detector y
MobilNet para un mejor funcionamiento en el reconocimiento.
REFERENCIAS
Tarazona Ospina, I., & MSc. Daniel, V. (2015). RECONOCIMIENTO FACIAL BASADO
EN EIGENFACES, LBHP Y FISHERFACES EN LA BEAGLEBOARD-xM. Revista
colombiana de tecnologias de avanzada, 148,149.
Alvarez, M. A. (19 de Noviembre de 2015). Desarrolloweb.com. Obtenido de ¿Que es
python?: https://desarrolloweb.com/articulos/1325.php
BBVAOPEN4U. (23 de Marzo de 2016). BBVAOPEN4U. Obtenido de
https://bbvaopen4u.com/es/actualidad/api-rest-que-es-y-cuales-son-sus-ventajas-
en-el-desarrollo-de-proyectos
COIP. (2014). Libro de los Artículos del Código Orgánico Penal. Obtenido de
https://tbinternet.ohchr.org/Treaties/CEDAW/Shared%20Documents/ECU/INT
_CEDAW_ARL_ECU_18950_S.pdf
E3FF. (2 de Enero de 2014). E3FF. Obtenido de https://www.eff.org/es/pages/face-
recognition
Emscripten. (2015). Emscripten. Obtenido de https://emscripten.org/
Enatec. (24 de Mayo de 2010). Enatec. Obtenido de https://einatec.com/control-acceso-
biometrico/
Gamboa, M., Barros, L., & Barros, C. (2019). Childhood Aggressiveness, Learning and
Self-Regulation in Primary Students. Luz. Revista Electrónica Trimestral de La
Universidad de Holguín, 53(9), 1689–1699.
https://luz.uho.edu.cu/index.php/luz/article/view/743/637
Gebhart, A. (27 de Marzo de 2019). Cnet. Obtenido de Cnet:
https://www.cnet.com/es/noticias/reconocimiento-facial-apple-amazon-google-
ai/
Gendra, M. (4 de Mayo de 2010). https://www.marianogendra.com.ar/Articulos/que-es-una-
api. Obtenido de https://www.marianogendra.com.ar/Articulos/que-es-una-api
39
39
Tecnológico Superior Corporativo Edwards Deming - Enero - Julio Vol. 5 - 1 - 2021 https://revista-edwardsdeming.com/index.php/es
e-ISSN: 2576-0971
Martinez, N. (4 de Junio de 2019). IEBS. Obtenido de
https://www.iebschool.com/blog/reconocimiento-facial-
tecnologia/#%C2%BFQue_es_el_reconocimiento_facial
Maza, E. A., & Goyes Mosquera, J. J. (2015). Repositorio Digital. Obtenido de Sistema de
información y control de asistencia del personal para Facultad de Ingeniería.:
http://www.dspace.uce.edu.ec/handle/25000/496
