){kind=small}
Sammeln von KI-Informationen aus Videoanrufen mit Vision AI und der Video-API
Lesedauer: 13 Minuten
In diesem Tutorial erfahren Sie, wie Sie mit der Vonage Video API einen Videoanruf tätigen, einen Screenshot des Videos machen und das Bild analysieren.
Haben Sie schon einmal von der Google Cloud Platform Vision API gehört? Es ist cool, sie auszuprobieren und Daten aus den Bildern zu erhalten. Wenn Sie schnell ausprobierenkönnen Sie ein Foto hinzufügen und eine andere Art von Analyse sowohl in einer JSON-Datei als auch in einer für Menschen lesbaren Form erhalten.
Hinweis: Derzeit ist die Vonage Video API in unserem Vonage Dashboard angekommen, und ab sofort (März 2024), als dieser Blogbeitrag geschrieben wurde, haben Sie 2000 Minuten Zeit, um sie auszuprobieren.
Ein Google Cloud-Konto mit Zugang zu Vision AI.
Eine Webcam und ein Mikrofon.
Google Chrome, Firefox oder ein anderer unterstützten Browser.
Ein Code-Editor/ IDE.
Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.
Gehen Sie zur Google Cloud Console und erstellen Sie ein neues Projekt, benennen Sie es, fügen Sie den Standort hinzu und klicken Sie auf Erstellen. Der Vorteil der Erstellung eines neuen Projekts besteht darin, dass Sie, sobald Sie mit diesem Tutorial fertig sind, das gesamte Projekt löschen und sicherstellen können, dass Sie keine mit dem Projekt verbundenen Ressourcen verwenden.
Google Cloud's Project Name and Location
Nachdem Sie das Projekt erstellt haben, werden Sie zum Google Cloud-Dashboard weitergeleitet. Stellen Sie sicher, dass ein Abrechnungskonto mit diesem Projekt verbunden ist.
Aktivieren Sie Vision API für dieses Projekt; Sie können das Menü auf der linken Seite aufrufen, auf den Marktplatz klicken und nach Vision API suchen. Alternativ können Sie in der oberen Suchleiste nach Vision AI suchen und darauf klicken, um es innerhalb des Workflows zu aktivieren.
Installieren Sie die gcloud CLI.
Hier finden Sie eine Übersicht über die Dateien, die Sie in unserem Projekt finden werden.
[node_modules]
[public]
├── index.html
└── client.js
[screenshots]
server.js
private.key
package-lock.json
package.json
Erstellen Sie einen neuen Projektordner für dieses Node-Projekt, z. B., ai-insights und installieren Sie den Google Cloud Vision API Node.js Client:
Initialisieren Sie gcloud, indem Sie den unten stehenden Befehl eingeben und das von uns erstellte Projekt in der Konsole auswählen.
Danach werden Sie aufgefordert, sich anzumelden. Nach dem Einloggen werden Sie aufgefordert, ein Cloud-Projekt und die von Ihnen erstellte Projekt-ID auszuwählen.
Erstellen Sie Ihre Anmeldedatei. Ich verwende den folgenden Befehl, aber Sie können in der Dokumentation nachlesen, wie Sie Anmeldedateien erstellen können.
Vergewissern Sie sich, dass sich ein zu analysierendes Bild im Stammverzeichnis Ihres Projekts befindet (wenn Sie z. B. einen Projektordner für dieses Knotenprojekt namens ai-insights erstellt haben, befindet es sich im Stammverzeichnis des Ordners). Stellen Sie sicher, dass die Dateivariable fileName mit der Adresse des Bildes gefüllt ist, z.B. path/to/image.png.
Erstellen Sie eine server.js JavaScript-Datei und fügen Sie den Code hinzu; nehmen wir das Beispiel der Gesichter erkennen.
Führen Sie die Hauptserverdatei mit node aus.
Lassen Sie uns einen browserbasierten Audio-Video-Chat mit der Vonage Video API einrichten. Sie müssen einen Videoanruf einrichten, um dieses Lernprogramm abzuschließen. Ich zeige Ihnen im Folgenden Schritt für Schritt, wie Sie dies erreichen. Wenn Sie weitere Beispiele für die Einrichtung von Videos sehen und mehr erfahren möchten, lesen Sie den letzten Abschnitt dieses Artikels.
Rufen Sie das Dashboard von Vonage und melden Sie sich an/registrieren Sie sich.
Klicken Sie im linken Menü auf "Anwendungen".
Klicken Sie oben auf "Neue Anwendung erstellen" und geben Sie der Anwendung einen Namen.
Kopieren Sie die Anwendungs-ID zur späteren Verwendung.
Klicken Sie auf "Bearbeiten" und "Öffentliche und private Schlüssel generieren", und der private Schlüssel wird heruntergeladen.
Scrollen Sie nach unten und aktivieren Sie "Video (neu)" für die Anwendung.
Klicken Sie unten auf der Seite auf "Änderungen speichern".
Notieren Sie sich den API-Schlüssel und das API-Geheimnis für Ihr Projekt. Achten Sie darauf, diese Anmeldeinformationen sicher zu speichern, da Sie sie später bei der Konfiguration Ihrer Anwendung verwenden werden.
Erstellen Sie eine HTML-Datei namens public/index.html, um die Integration der Vonage Video API in Ihr Projekt zu erleichtern. Diese Datei enthält die notwendigen Skripte und Elemente, um die Videositzung zu initiieren. Nachfolgend finden Sie eine Aufschlüsselung der HTML-Struktur:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags for character set and viewport settings -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Title of the HTML document -->
<title>Video Screenshot</title>
<!-- Include the Vonage Video API library -->
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<!-- Styling for the video container -->
<style>
#containerId {
height: 400px; /* Adjust the height as needed */
}
</style>
</head>
<body>
<!-- Button to trigger the screenshot functionality -->
<button id="take-screenshot">Take Screenshot</button>
<!-- Container to hold the video stream -->
<div id="containerId"></div>
<!-- Include the client-side JavaScript file -->
<script src="client.js"></script>
</body>
</html>
Erstellen Sie eine public/client.js Datei. Sie stellen die Verbindung zur Vonage Video-API-Sitzung her und konfigurieren einen Publisher. Befolgen Sie diese Schritte, um die erforderlichen Anmeldeinformationen zu generieren und sie in den Code unter dem // credentials Abschnitt:
Ersetzen Sie die Platzhalter (appId, sessionId, und token) durch die tatsächlichen Werte, die Sie während des Einrichtungsvorgangs erhalten haben. Erstellen einer Sitzung und Erzeugen eines Tokens sind entscheidende Schritte, um eine sichere und authentifizierte Kommunikation innerhalb der Vonage Video API zu ermöglichen. Denken Sie daran, die appId aus dem Vonage Dashboard abzurufen, um eine nahtlose Integration mit der Datei "public/client.js" sicherzustellen.
// credentials
const appId = ""; // Replace with your Vonage Video API application ID
const sessionId = ""; // Replace with the session ID generated for your video session
const token = ""; // Replace with the token generated for authentication
In diesem Codesegment verbinden wir uns mit der Vonage Video-API-Sitzung, indem wir die bereitgestellten appId und sessionId. Die Funktion OT.initSession() Funktion initialisiert die Sitzung und ermöglicht die Kommunikation auf der Vonage Video API-Plattform.
Die Variablen publisher und subscriber werden in einem breiteren Bereich deklariert, um die Videoströme von publisher und subscriber zu verwalten. Nach dem Verbindungsaufbau authentifiziert die session.connect() Funktion die Sitzung anhand des bereitgestellten Tokens authentifiziert. Alle Verbindungsfehler werden zu Debugging-Zwecken protokolliert.
Ein Publisher-Videostream wird mit OT.initPublisher() nach erfolgreicher Verbindung erstellt. Dieses Video wird in dem angegebenen HTML-Element (containerId) angezeigt. Die Methode session.publish() Methode überträgt das Video des Herausgebers an alle Teilnehmer.
Der session.on("streamCreated") Ereignis-Listener erkennt neu erstellte Abonnenten-Videostreams. Wenn ein neuer Stream erkannt wird, wird er abonniert und im angegebenen HTML-Container angezeigt.
Hinweis: Wenn Sie den Videostream des Herausgebers starten, fordert der Browser möglicherweise den Zugriff auf Kamera und Mikrofon an, um eine sichere Videokonferenz zu ermöglichen.
// client.js
// Declare publisher and stream in the broader scope
let publisher;
let subscriber;
// Connect to the Video API session
const session = OT.initSession(appId, sessionId);
// Connect to the session
session.connect(token, function (err) {
if (err) {
console.error("Error connecting to session", err);
} else {
// Create publisher
publisher = OT.initPublisher("containerId", {
insertMode: "append",
width: "100%",
height: "100%",
});
// Publish the video stream
session.publish(publisher);
}
});
// Handle the streamCreated event
session.on("streamCreated", function (event) {
subscriber = session.subscribe(event.stream, "containerId", {
insertMode: "append",
width: "100%",
height: "100%",
});
});
Ich habe eine Reihe von APIs verwendet, um einen Screenshot des Aufrufs zu erstellen, z. B. html2canvas oder Canvas API. Allerdings war das Bild, das als Screenshot aufgenommen wurde, ausgegraut. Die beste Methode, die bei mir funktioniert hat, war die Erfassung und Anzeige statischer Bilder der Publisher- und Subscriber-Videos in einem Video-API-Aufruf. Diese Bilder können als Bildschirmfotos verwendet werden. Dazu wird die Video-API verwendet, um auf die Bilddaten der Videostreams zuzugreifen, und dann ein HTML-Bildelement erstellt, um das erfasste Bild anzuzeigen.
Nachdem Sie das eingerichtet haben, können Sie den Code hinzufügen, um einen Screenshot des Anrufs zu erhalten, und Sie können ihn entweder manuell zu einem früheren Vision AI ausprobieren Link hinzufügen, den wir geteilt haben, oder wir können ihre API verwenden.
Hier ist der Code, mit dem Screenshots eines bestimmten Seitenteils durch Anklicken einer Schaltfläche erstellt werden können. Die Bilddaten werden an den Server gesendet, der sie in einer Datei speichert. Der Dateiname wird zurückgegeben, damit der Benutzer weiß, wo der Screenshot gespeichert wurde.
In der Datei public/client.js fügen Sie der Schaltfläche "Screenshot aufnehmen" einen Ereignis-Listener hinzu, um die Videoströme des Herausgebers und des Abonnenten zu erfassen:
// Take screenshot on button click
document
.getElementById("take-screenshot")
.addEventListener("click", async function () {
try {
// publisher snapshot
const publisherImage = publisher.getImgData();
// subscriber snapshot
const subscriberImage = subscriber.getImgData();
// Send the screenshots to the server
const response = await fetch("/take-screenshot", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
publisherImage,
subscriberImage,
}),
});
const result = await response.json();
} catch (error) {
console.error("Fetch error:", error);
}
});
Werfen wir einen Blick auf das aktualisierte server.js-Skript. Diese jüngste Verbesserung führt einen neuen Endpunkt ein, "/take-screenshot", der für die Verarbeitung von base64-kodierten Bildern aus den Video-Feeds der Herausgeber und Abonnenten konzipiert ist. Diese Bilder werden durch die Funktion saveImage Funktion.
Nach Erhalt einer Screenshot-Anforderung speichert der Server die Bilder und ruft die Google Cloud Vision API über die detectFaces Funktion. Diese Funktion spielt eine wichtige Rolle bei der Erkennung und Protokollierung von Gesichtsausdrücken in den Screenshots. Der Server verarbeitet die Bilder, protokolliert ihre Pfade und liefert Gesichtsausdruckanalysen für beide Videostreams.
Wir müssen einen /screenshots Ordner im Stammverzeichnis des Projekts erstellen, in dem die Screenshots gespeichert werden sollen. Finden Sie den server.js Code, den ich gerade erklärt habe, in diesem Abschnitt unten:
// server.js
const express = require("express");
const app = express();
const fs = require("fs");
const path = require("path");
// Initialize Google Cloud Vision client
const vision = require("@google-cloud/vision");
const client = new vision.ImageAnnotatorClient();
app.use(express.json({ limit: "100mb" }));
// Serve the HTML file on the root path
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "public", "index.html"));
});
// Serve the JavaScript file
app.get("/client.js", (req, res) => {
res.sendFile(path.join(__dirname, "public", "client.js"));
});
app.post("/take-screenshot", async (req, res) => {
try {
const publisherImage = req.body.publisherImage;
const subscriberImage = req.body.subscriberImage;
const publisherImagePath = saveImage(publisherImage, "publisher");
const subscriberImagePath = saveImage(subscriberImage, "subscriber");
const publisherFaces = await detectFaces(publisherImagePath);
const subscriberFaces = await detectFaces(subscriberImagePath);
res.json({
status: "ok",
publisherFaces,
subscriberFaces,
publisherImagePath,
subscriberImagePath,
});
} catch (error) {
console.error("Error processing images:", error);
res.status(500).json({
status: "error",
error: "Internal Server Error",
details: error.message,
});
}
});
// Snippet of code from https://cloud.google.com/vision/docs/detecting-faces
async function detectFaces(imagePath) {
const [result] = await client.faceDetection(imagePath);
const faces = result.faceAnnotations;
console.log("Faces:");
faces.forEach((face, i) => {
console.log(` Face #${i + 1}:`);
console.log(` Joy: ${face.joyLikelihood}`);
console.log(` Anger: ${face.angerLikelihood}`);
console.log(` Sorrow: ${face.sorrowLikelihood}`);
console.log(` Surprise: ${face.surpriseLikelihood}`);
});
}
function saveImage(imageData, prefix) {
try {
const buffer = Buffer.from(imageData, "base64");
const fileName = `${prefix}-screenshot-${Date.now()}.png`;
const folderPath = path.join(__dirname, "screenshots");
// Create a folder if it doesn't exist
if (!fs.existsSync(folderPath)) {
fs.mkdirSync(folderPath);
}
const filePath = path.join(folderPath, fileName);
// Write image to disk
fs.writeFileSync(filePath, buffer);
console.log(`Image saved: ${filePath}`);
// Return the path to the saved image
return filePath;
} catch (error) {
console.error("Error in saveImage:", error);
return undefined; // Return undefined in case of an error
}
}
app.listen(3002, () => {
console.log("Server listening on port 3002");
});
Nun haben Sie alle Dateien erstellt, um dies auszuprobieren. Starten Sie die Hauptserverdatei mit node.
Sie werden eine Meldung sehen, die besagt, Server listening on port 3002. Gehen Sie zu Ihrem Browser und öffnen Sie http://localhost:3002/.
Klicken Sie auf die Schaltfläche, um den Screenshot zu erstellen. Ein mit base64 kodiertes Screenshot-Bild wird in Ihren Screenshot-Ordner heruntergeladen. Sie können die Analyse des Bildes in der Konsole sehen, die wie folgt aussieht:
Heute haben Sie gesehen, wie Sie die Video-API und die Google Cloud Platform Vision AI verwenden können. Um Ihre Anwendung weiter zu verbessern, können Sie die Funktionen der Vision-API erkunden, z. B. die Erkennung von Text, Landmarken oder Objekten. Sie können auch die Implementierung zusätzlicher Funktionen in Betracht ziehen, z. B. das Speichern der Analyseergebnisse in einer Datenbank oder die Integration mit anderen Diensten.
Teilen Sie Ihre Meinung mit unserer Community auf Vonage Gemeinschaft Slack oder senden Sie uns eine Nachricht mit @VonageDev auf X.
Server-SDK - Bevor Sie mit der Produktion beginnen, müssen Sie einen Server für die Erstellung von Anmeldeinformationen einrichten.
Video-API-Übersicht - Wenn Sie es noch nicht getan haben, nehmen Sie sich ein paar Minuten Zeit, um zu erfahren, wie Vonage Video genau funktioniert.
Video-API-Grundlagen - Lernen Sie schnell, wie die Vonage Video-API funktioniert (mit Bildern).