Hola, Amazon AWS tiene diversas herramientas para el uso de desarrolladores, tales como:

  • Labels (reconocimiento de objetos)
  • Content (reconocimiento de contenido)
  • Text (Lectura de texto en imágenes)
  • Path (reconocimiento de personas en imágenes)
  • Face (reconocimiento facial)

En este articulo nos enfocaremos al uso de la herramienta Rekognition Face comparison, para javascript. Vamos a ello.

Para ello debemos de integrar una librería a nuestro proyecto:

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.16.0.min.js"></script>

a continuación debemos crear una variable general para que sea accesible desde cualquier función creada en javascript. El código que presento a continuación esta preparado para trabajar con Laravel

var rekognition = new AWS.Rekognition({region: '{{ Config('const.AWS_RECOGNITION')['region'] }}', accessKeyId: '{{ Config('const.AWS_RECOGNITION')['accessKeyId'] }}', secretAccessKey: '{{ Config('const.AWS_RECOGNITION')['secretAccessKey'] }}' });

los elementos {{ Config(‘const.AWS_RECOGNITION’)[‘region’] }}, {{ Config(‘const.AWS_RECOGNITION’)[‘accessKeyId’] }} y {{ Config(‘const.AWS_RECOGNITION’)[‘secretAccessKey’] }} deberán ser reemplazados por las key’s otorgadas por AWS; si no conoces como obtener estos datos, hablaré de ellos en el próximo articulo.

Para realizar una comparación de imágenes almacenadas localmente, debemos de realizar una conversión a base64, por lo que usaremos el siguiente código:

function toDataURL(url,callback,type) {
                var xhr = new XMLHttpRequest();
                xhr.onload = function() {
                    var reader = new FileReader();
                    reader.onloadend = function() {
                        callback({type: type, base64: getBinary(reader.result)});
                    }
                    reader.readAsDataURL(xhr.response);
                };
                xhr.open('GET', url);
                xhr.responseType = 'blob';
                xhr.send();
            }

la variable url, indica que se deberá obtener a travez de una descarga desde servidor. la variable callback, retorna el resultado a la ejecución de una función, la variable type, únicamente se maneja para generar un objeto json de 2 elementos, {type: type, base64: getBinary(reader.result)}, el resultado de la función reader.onloaded retorna una llamada a la función callback en la que se inserta el objeto json en cuestión.

reader.result por si solo, retorna un string en la que se presenta el código base64, pero AWS no reconoce este parámetro sin codificar a blob, por tal motivo debemos de solicitar a la función getBinary a que lo codifique. Este será la clave del éxito para poder realizar la comparación de rostros en 2 imágenes cargadas desde almacenamiento local, sin necesidad de usar el almacenamiento S3 de AWS.

A continuación la codificación del string en base64 ;

            function getBinary(encodedFile) {
                var base64Image = encodedFile.split("data:image/jpeg;base64,")[1];
                var binaryImg = atob(base64Image);
                var length = binaryImg.length;
                var ab = new ArrayBuffer(length);
                var ua = new Uint8Array(ab);
                for (var i = 0; i < length; i++) {
                ua[i] = binaryImg.charCodeAt(i);
                }

                var blob = new Blob([ab], {
                type: "image/jpeg"
                });

                return ab;
            }

Con esto, podremos realizar las peticiones enviadas con una función, en la cual nos retornara el nivel de «match» y reconocimiento de rostros.

A continuación se envia las 2 imágenes a comparación:

                var params = {
                    SourceImage: { /* required */
                        Bytes: imgBase64
                    }
                    TargetImage: { /* required */
                        Bytes: imgComparison64
                    },
                    SimilarityThreshold: 0
                };

                rekognition.compareFaces(params, function(err, data) {
                    if (err) $('#Matches').text(err.message); // an error occurred
                    else{
                        // successful response
                        console.log(data)
                        console.log(data.FaceMatches[0].Similarity)
                    } 
                });

En la variable params se envian los datos a AWS para realizar la comparación a travez de su API para javascript.

Espero que este articulo les sirva de referencia para crear su proyecto. si necesitas ayuda en relación a este articulo, deja tus comentarios para ayudarte en lo que pueda.

Éxito!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *