• 🏡 Home
  • 🚨 GDPR Compliant
  • ⚡️ Data Science
  • 📌 Machine Learning
  • 🔒 Privacy Preserving
  • 🏡 Home
  • 🚨 GDPR Compliant
  • ⚡️ Data Science
  • 📌 Machine Learning
  • 🔒 Privacy Preserving
Portfolio

Real Time Face Detection WebSite using Javascript | Guida Italiano

Real Time Face Detection WebSite using Javascript | Guida Italiano

In questo post, io e te, realizziamo insieme una pagina con capacità di analisi video in tempo reale. In inglese? Real Time Face Detection WebSite!

Si tratta di un progetto d’intelligenza artificiale semplice e veloce da realizzare, anche se di grande effetto capace di stupire e sorprendere.

La parte di training dei modelli è stata eseguita per noi dalla community. Il codice, reso open-source, è pronto per essere modificato!

Andremo quindi a creare una pagine web con capacità di face detection, di analisi delle espressioni in tempo reale, e individuazione dei contorni facciali.

Real Time Face Detection

Per prima cosa creiamo una repository su gitlab, in questo modo terremo il codice ordinato e facilmente accessibile.

Cloniamo la repository appena creata, che sarà un directory vuota.

Per comodità e amore delle cose fatte bene, useremo un framework gratuito chiamato MDB Bootstrap che agevolerà il lavoro estetico.

Predisponiamo la pagina per la visualizzazione del video, e ci spostiamo subito ai file javascript.

Iniziamo con l’importare il file script.js (che ancora non esiste) e quello face-api.min.js che devi scaricare.

È arrivato il momento di rendere il sistema funzionante: creiamo il file script.js all’interno della cartella /js e scriviamo il seguente codice.

const video = document.getElementById('video')

function showVideo(){
  navigator.mediaDevices.getUserMedia({
    video: {}
  },
  stream => video.srcObject = stream,
  err => console.log(err)
  )
}

showVideo()

In questo modo inseriamo all’interno del body della pagina, all’altezza del tag video l’input della webcam catturato con getUserMedia, ovviamente concedendo prima i permessi.

Scarichiamo i modelli, fulcro dell’intero progetto, e li importiamo in modo asincrono, usando una comoda funzione di Javascript che basa il suo funzionamento sul concetto di promise.

Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
  faceapi.nets.faceExpressionNet.loadFromUri('/models')
]).then(showVideo)

Esploriamo rapidamente i modelli:

  • tinyFaceDetector, è il modello capace d’identificare i volti delle persone: il face detection nudo e crudo. Tiny, per poter essere eseguito dai browser senza troppe difficoltà;
  • faceLandmark68Net, è il modello che adempie al riconoscimento dei contorni facciali;
  • il faceRecognitionNet è il modello preposto all’individuazione della faccia all’interno del campo visivo della fotocamera;
  • faceExpressionNet, è il modello che si occupa di determinare le espressioni facciali di: sorpresa, disgusto, rabbia, felicità, tristezza, delusione e paura (spoiler, non ti aspettare granché)

Bene bene, stiamo procedendo spediti!

Ora, alcuni ultimi ritocchi.

Sempre nel file script.js:

video.addEventListener('play', () => {
  const canvas = faceapi.createCanvasFromMedia(video)
  document.body.append(canvas)
  const displaySize = { width: video.width, height: video.height }
  faceapi.matchDimensions(canvas, displaySize)
  setInterval(async () => {
    const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
    const resizedDetections = faceapi.resizeResults(detections, displaySize)
    canvas.getContext('2d').clearRect(10, 0, canvas.width, canvas.height)
    faceapi.draw.drawDetections(canvas, resizedDetections)
    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
    faceapi.draw.drawFaceExpressions(canvas, resizedDetections)
  }, 10)
})

Aggiungiamo un EventListener sul play del video, e avendolo settato in autoplay, la funzione sarà eseguita subito (in realtà non appena i modelli saranno caricati).

Sarà generato un canvas, fondamentale per il render dinamico dei poligoni, e sovrapposto al video.

Non ci resta che perfezionare la nostra index.html con un po’ di css:

  body{
    margin: 0;
     padding: 0;
     width: 100vw;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  video{
    border-radius: .6em;
  }
  canvas {
        position: absolute;
      }

Debugging

Ho testato il codice solo su chrome, riscontrando due problemucci che ti ho prontamente risolto:

Alcuni servizi devono essere forniti attraverso un server. Niente panico.

Possiamo creare un localserver in pochi secondi. Iniziamo scaricando node e installando npm globalmente (in tutto il sistema).

Quindi installiamo http-server digitando:

npm i http-server -g

e nella cartella del progetto:

http-server -p 3000

Ora possiamo recarci all’indirizzo sottostante per vedere live il nostro sito:

localhost:3000/index.html

È fondamentale inoltre abilitare l’accelerazione hardware del browser, e il supporto a WebGL per consentire il rendering grafico.

Quindi digitiamo chrome://settings e abilitiamo prima l’accelerazione, riavviando chrome.

In seguito passiamo all’abilitazione di WebGl, digitando chrome://flags

Et voila!

Un caldo abbraccio, Andrea.

P.S. Qui, il progetto completo

Written by Andrea Provino - Ottobre 9, 2019
Tags | portfolio project, tensorflow, web development

You Might Also Like

Calcolo somma Monete: sono impazzito e ho concluso niente | Log 3 | Log 4

Dicembre 17, 2018
tensorflow-js-example-models-javascript-data-science-machine-learning-natural-language-processing

Tensorflow JS: Web Machine Learning and beyond

Marzo 19, 2020

Stripe: Semplice Form Pagamento React (client) | Guida Italiano

Ottobre 12, 2019
Next Post
Previous Post

Una pubblicità che non vedi se usi AdBlock

EXPAND YOUR KNOWLEDGE

  • Blockchain Developer

    Circuito aritmetico

    Novembre 1, 2022
  • machine-learning

    Un nuovo inizio

    Settembre 4, 2021
  • Zero Knwoledge Proof Article Privacy Preserving

    Zero Knowledge Proof: zk-SNARK e zk-STARK | Prova a conoscenza zero

    Luglio 8, 2021
  • oblivious-transfer-spiegazione-italiano-ot-explanation Privacy Preserving

    Oblivious Transfer (OT)

    Luglio 6, 2021
  • Aleo Studio Website Preview machine-learning

    Aleo Studio: un IDE per Zero-Knowledge Proofs Applications

    Luglio 1, 2021
  • privacy-enhancing-technologies-data-machine-learning-data-science Privacy Preserving

    Perché il Privacy Tech è un vantaggio competitivo micidiale

    Giugno 17, 2021
  • bloom-filter-spiegazione-italian Privacy Preserving

    Bloom Filter

    Giugno 3, 2021
  • trusted-execution-environment-tee-data-science-come-fuziona Data Science, Privacy Preserving

    Trusted Execution Environment | Cos’è un TEE?

    Giugno 2, 2021
  • Crypto Custody services machine-learning

    Crypto Custody: Guida alla custodia delle criptomonete

    Maggio 26, 2021
  • deep-q-learning-q-learning-reinforcement-learning machine-learning

    Deep Q-Learning

    Aprile 27, 2021

Quello che Google pensa ti possa piacere

Prodotti che i Cookie dicono potresti trovare interessanti

AI Blog - © 2019-2021 Andrea Provino