Aufmerksamkeitserkennung mit Vonage Video API

Dieser Artikel wurde geschrieben in Zusammenarbeit mit Talha Ahsan

Einführung

In der heutigen Welt findet ein immer größerer Teil unserer Interaktionen online statt. In den letzten Jahren sind Online-Kurse und -Sitzungen zu einem normalen Teil des Lebens geworden. Diese Umstellung hat zahlreiche Vorteile mit sich gebracht, aber auch interessante Fragen aufgeworfen. Eines dieser Probleme ist die Sicherstellung der Aufmerksamkeit der Nutzer.

Der Einsatz von Technologien zur Erkennung von Aufmerksamkeit kann in Bereichen wie dem Bildungswesen oder Online-Meetings große Auswirkungen haben. Sie ermöglicht es den Moderatoren zu verstehen, wie das Interesse der Teilnehmer während bestimmter Abschnitte ihrer Sitzungen oder Vorträge schwankt. Sie kann auch Lehrern dabei helfen, sicherzustellen, dass die Schüler aufmerksam sind.

Heute werden wir eine Videokonferenzanwendung mit der Vonage Video API erstellen, die die Face Landmark-Erkennung nutzt, um den Aufmerksamkeitswert eines Teilnehmers zu berechnen.

Voraussetzungen

• Vonage API-Schlüssel und Geheimnis

• Knotenpunkt 8.6.2+

• Node-Paketmanager (npm)

Um die Anwendung auf Ihrem Rechner einzurichten, klonen Sie zunächst das Repo:

git clone https://github.com/hamzanasir/attention-detection.git

Großartig! Wechseln Sie nun in das Repository und installieren Sie die zugehörigen Pakete über:

npm install

Jetzt müssen wir unseren Vonage API-Schlüssel und das Geheimnis einrichten. Beginnen wir mit dem Kopieren der env-Vorlage:

cp .envcopy .env

Jetzt müssen Sie nur noch die TOKBOX_API_KEY und TOKBOX_SECRET in der .env-Datei durch Ihre Anmeldedaten zu ersetzen. Sie finden Ihren API-Schlüssel und Ihr Geheimnis auf der Projektseite Ihrer Vonage Video API Account.

Sie können die App mit starten:

npm start

Der gesamte Code, über den wir in diesem Blog sprechen, ist in der Datei `public/js/app.js` zu finden.

Wie die Aufmerksamkeitserkennung funktioniert

Um die Aufmerksamkeit des Benutzers zu berechnen, müssen wir zunächst die Gesichtspunkte des Benutzers im 3-dimensionalen Raum ermitteln. Sobald wir diese erhalten haben, können wir die Pose des Gesichts des Benutzers im dreidimensionalen Raum berechnen, d. h. wir können das Gieren, das Nicken und das Rollen (siehe Diagramm unten) des Gesichts des Benutzers mit Hilfe einiger trigonometrischer Verfahren berechnen. Der Einfachheit halber werden wir uns nur für das Gieren und das Neigen interessieren.

The yaw, pitch and roll angles in the human head motion

Ausgehend von diesen beiden Blickwinkeln können wir den Nutzern einen Gesamtwert für ihre Aufmerksamkeit geben.

Ermitteln der Gesichtslandmarken

Wir werden die MediaPipe von TensorFlow verwenden Gesichtserkennungsmodusl, um die Gesichtslandmarken zu erhalten. Der Grund für die Verwendung von MediaPipe ist, dass es sofort dreidimensionale Landmarken liefert und maschinelles Lernen verwendet, um die Tiefe der Gesichtsoberfläche ohne einen Tiefensensor zu ermitteln.

Face landmarks visualization from MediaPipe

Sie können mehr über MediaPipe erfahren hier

Berechnung von Pitch und Yaw

Um die Neigung zu berechnen, verwenden wir die 468 Gesichtsmerkmale (die von der Gesichtsnetzbibliothek), die der Ober- und Unterseite des Gesichts des Benutzers in der y- und z-Ebene entsprechen. In ähnlicher Weise verwenden wir für die Gier die Orientierungspunkte, die den äußeren Ecken der Augen des Benutzers in der x- und z-Ebene entsprechen.

Für beide berechnen wir dann den Mittelpunkt zwischen diesen beiden Punkten und berechnen den Winkel relativ zur Kamera des Benutzers mit Hilfe der Funktion atan2 (inverser Tangens) den Winkel im Gegenuhrzeigersinn zwischen der x-Achse und dem interessierenden Punkt berechnet. Sie können den Beispielcode unten sehen:

const radians = (a1, a2, b1, b2) => Math.atan2(y: b2-a2, x: b1-a1);
const angle = {
  yaw: radians(mesh[33][0], mesh[33][2], mesh[263][0], mesh[263][2]),
  pitch: radians(mesh[10][1], mesh[10][2], mesh[152][1], mesh[152][2])
};

Erzielung von Benutzeraufmerksamkeit

Nun müssen wir die von uns berechneten Werte für Neigung und Gieren verwenden, um dem Benutzer eine Art Aufmerksamkeitswert zuzuweisen. Der Ansatz, den wir in unserem Fall verwenden werden, ist beeinflusst von "Attention Span Prediction Using Head-Pose Estimation With Deep Neural Networks", veröffentlicht in IEEE Access.

Im Wesentlichen vergeben wir eine Punktzahl von 0 bis 2 (0 steht für einen niedrigen und 2 für einen hohen Aufmerksamkeitswert) auf der Grundlage des berechneten Wertes für jeden der Winkel. Wir vergeben eine Punktzahl mit der folgenden getScore Funktion zu, die auf dem IEEE Access Paper basiert:

const getScore = (degree) => {
  degree = Math.abs(radiansToDegrees(degree));
  if (degree < 10) {
    return 2;
  }
  if (degree < 30) {
    const adjust = (degree - 10) * 0.05;
    return 2.0 - adjust;
  }
  return 0;
};

Dann nehmen wir das Produkt der beiden Werte, um die endgültige Aufmerksamkeitsbewertung des Nutzers zu erhalten. Sobald wir die Gesamtaufmerksamkeitsbewertung haben, kategorisieren wir die Aufmerksamkeit, damit die Nutzer ihren Aufmerksamkeitsgrad leicht erkennen können. Wir unterteilen diese Kategorisierung in 4 verschiedene Kategorien, die von keiner Konzentration bis zu hoher Konzentration reichen. Sie können das Verfahren zur Berechnung des Gesamtaufmerksamkeitsgrades sehen:

Pseudocode for our function to evaluate concentration level.

Und die Kategorien für Aufmerksamkeit sind unten aufgeführt:

Attention score categorization

Es ist wichtig zu beachten, dass diese Diagramme einen theoretischen Algorithmus zur Berechnung des Aufmerksamkeitswertes darstellen. In der Realität werden Sie vielleicht einige Dinge ändern wollen, z. B. die Kategorien für die Aufmerksamkeitsspanne. Eine solche Änderung, die wir in unserer Anwendung vorgenommen haben, besteht darin, dass wir statt der yaw_score und die pitch_score zu multiplizieren, um eine schöne lineare Progression der Aufmerksamkeitspunkte zu erhalten.

Integration mit der Vonage Video API

Um die CPU/GPU jedes Teilnehmers zu schonen, sollte nicht jeder Teilnehmer die Analyse des Gesichtsnetzes für jeden Teilnehmer auf seinem Rechner durchführen, sondern jeder Teilnehmer ist für seine eigene Metrik der Aufmerksamkeitsbewertung verantwortlich. Wir initialisieren also den Algorithmus im session.publish Endpunkt:

session.publish(publisher, async (err) => {
  if (err) {
    console.log('Error', err);
  } else {
    const publisherElement = document.getElementById('publisher');
    streamId = publisher.stream.id;
    const webcam = publisherElement.querySelector('video');
    await runFacemesh(webcam);
  }
});

Werfen wir einen genaueren Blick auf die runFacemesh Methode:

const runFacemesh = async (webcamRef) => {
  const net = await faceLandmarksDetection.load(faceLandmarksDetection.SupportedPackages.mediapipeFacemesh, { maxFaces: 1 });

  setInterval(() => {
    detect(net, webcamRef);
  }, 500);
};

Wir verwenden die Funktion detect, die wir erstellen müssen, aber im Wesentlichen erhalten wir durch die Anzahl der Aufrufe dieser Funktion eine Aufmerksamkeitsmetrik für das Bild, das von Ihrer Kamera gerendert wird. Wie oft wir diese Funktion pro Sekunde ausführen, bestimmt also die Anzahl der Bilder pro Sekunde unserer Aufmerksamkeitsanalyse. Derzeit ist die Funktion so eingestellt, dass sie alle 500 Millisekunden ausgeführt wird, was bedeutet, dass wir effektiv ein Modell FPS (Frames Per Second) von 2 betrachten. Dies kann je nach Anwendungsfall angepasst werden.

Betrachten wir nun den wesentlichen Teil unseres Algorithmus, der für die Generierung eines Ergebnisses und die Übermittlung des Ergebnisses an alle anderen Teilnehmer verantwortlich ist:

// This runs face landmark model
const face = await net.estimateFaces({ input: video, predictIrises: true });

// Getting points from the model
const { mesh } = face[0];
const radians = (a1, a2, b1, b2) => Math.atan2(b2 - a2, b1 - a1);

// Generating angles between points and axis
const angle = {
  yaw: radians(mesh[33][0], mesh[33][2], mesh[263][0], mesh[263][2]),
  pitch: radians(mesh[10][1], mesh[10][2], mesh[152][1], mesh[152][2]),
};

// Calculating attention score
const score = getScore(angle.yaw) * getScore(angle.pitch);
const signalScore = { attention: score, streamId };


// Sending attention score to all other participants in call 
session.signal(
  {
    type: 'attentionScore',
    data: JSON.stringify(signalScore)
  },
  function(error) {
    if (error) {
      console.log("signal error ("+ error.name+ "): " + error.message);
    }
  }
);

Dieser Teil des Codes mag einschüchternd wirken, aber in Wirklichkeit führen wir nur die Gesichtsmarkierungsbibliothek auf dem aktuellen Bild des Herausgebers aus, lassen unseren getScore Algorithmus auf die Winkel zwischen bestimmten Punkten auf dem erkannten Gesicht anzuwenden und dann den Aufmerksamkeitswert an alle Teilnehmer zu übermitteln.

Sobald der Aufmerksamkeitswert signalisiert wird, müssen wir sicherstellen, dass wir ihn auf der Empfängerseite verarbeiten und ihn nach Belieben einsetzen können. Man könnte sie als Echtzeit-UI anzeigen (wie in diesem Projekt) oder sie in einem Datenspeicher speichern, der dazu verwendet werden kann, die Aufmerksamkeitsmetriken über die Dauer des Anrufs abzubilden. Die Möglichkeiten sind endlos!

Schlussfolgerung

Aufmerksamkeit ist ein Schlüsselfaktor für die Beurteilung von Gesprächen, Reden, Vorträgen und so gut wie jeder Interaktion zwischen Menschen. Wir haben jetzt gelernt, wie wir sie mithilfe der Analyse von Gesichtsmaschen schätzen und in unsere Videoanrufe integrieren können. Diese Schätzung kann durch weitere Datenquellen, wie z. B. die Erfassung der Irisbewegung, die Erkennung mehrerer Gesichter usw., weiter verbessert werden.

Eine voll funktionsfähige Version dieser Anwendung finden Sie auf GitHub

Lassen Sie uns wissen, ob Sie die Aufmerksamkeitserkennung zum Laufen bringen konnten! Machen Sie mit bei der Vonage Developer Slack-Gemeinschaft oder tweeten Sie uns unter VonageDev.