){kind=small}
Recueillir des informations sur l'IA à partir des appels vidéo avec Vision AI et l'API Video
Temps de lecture : 14 minutes
Ce tutoriel vous montrera comment établir un appel vidéo à l'aide de l'API Video de Vonage, faire une capture d'écran de la vidéo et analyser l'image.
Avez-vous déjà entendu parler de l'API Vision de Google Cloud Platform ? C'est génial de l'essayer et d'obtenir des données à partir des images. Si vous souhaitez l'essayer rapidementSi vous voulez l'essayer rapidement, vous pouvez ajouter une photo et obtenir différents types d'analyses, à la fois dans un fichier JSON et dans un format lisible par l'homme.
Remarque : actuellement, l'API Video de Vonage est arrivée dans notre tableau de bord Vonage, et à partir de maintenant (mars 2024), date à laquelle ce billet de blog a été écrit pour la première fois, vous avez 2000 minutes gratuites pour l'essayer.
Un compte Google Cloud avec accès à Vision AI.
Une webcam et un microphone.
Google Chrome, Firefox, ou un autre navigateur navigateur pris en charge.
Un éditeur de code / IDE.
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
Allez dans la Google Cloud Console et créez un nouveau projet, nommez-le, ajoutez l'emplacement et cliquez sur Créer. L'avantage de créer un nouveau projet est qu'une fois que vous avez terminé ce tutoriel, vous pouvez supprimer l'ensemble du projet et vous assurer que vous n'utilisez pas de ressources liées au projet.
Google Cloud's Project Name and Location
Après avoir créé le projet, vous serez dirigé vers le tableau de bord de Google Cloud. Assurez-vous qu'un Account de facturation est lié à ce projet.
Activer Vision API pour ce projet ; vous pouvez accéder au menu de gauche, cliquer sur le marché et rechercher Vision API. Vous pouvez également rechercher Vision AI dans la barre de recherche supérieure et cliquer pour l'activer dans le flux de travail.
Installer le gcloud CLI.
Voici un aperçu des fichiers que vous trouverez dans notre projet.
[node_modules]
[public]
├── index.html
└── client.js
[screenshots]
server.js
private.key
package-lock.json
package.json
Créez un nouveau dossier de projet pour ce projet node, par exemple, ai-insights et installez le client Node.js de l'API Google Cloud Vision :
Initialisez gcloud en tapant la commande ci-dessous et en choisissant le projet que nous avons créé dans la console.
Ensuite, il vous sera demandé de vous connecter. Une fois connecté, vous serez invité à choisir un projet cloud et à choisir l'identifiant du projet que vous avez créé.
Créez votre fichier d'informations d'identification. J'utilise la commande ci-dessous, mais vous pouvez consulter la documentation pour connaître les différentes façons de créer un fichier d'identification. pour connaître les différentes manières de créer les fichiers d'identification.
Assurez-vous que l'image à analyser se trouve à la racine de votre projet (par exemple, si vous avez créé un dossier pour ce projet node appelé ai-insights l'image se trouverait à la racine du dossier). Assurez-vous que la variable fichier fileName soit renseignée avec l'adresse de l'image, par exemple path/to/image.png.
Créez un fichier server.js Créez un fichier JavaScript et ajoutez le code ; prenons l'exemple de la détection des visages. détecter les visages.
Exécutez le fichier du serveur principal avec node.
Mettons en place un chat audio-vidéo basé sur un navigateur avec l'API Video de Vonage. Vous devez mettre en place un appel vidéo pour réaliser ce tutoriel. Je vous montrerai pas à pas comment y parvenir dans les étapes suivantes. Si vous souhaitez voir d'autres exemples de mise en place de vidéos et en savoir plus, consultez la dernière section de cet article.
Accédez au tableau de bord Vonage et connectez-vous/inscrivez-vous.
Cliquez sur "Applications" dans le menu de gauche.
Cliquez sur "Créer une nouvelle application" en haut de la page et donnez-lui un nom.
Copiez l'identifiant de la demande pour référence ultérieure.
Cliquez sur "Editer" et "Générer les clés publiques et privées" La clé privée sera téléchargée.
Faites défiler vers le bas et activez "Video (new)" pour l'application.
Cliquez sur "Enregistrer les modifications" en bas de la page.
Notez la clé et le secret de l'API pour votre projet. Veillez à stocker ces identifiants en toute sécurité, car vous les utiliserez plus tard lors de la configuration de votre application.
Créez un fichier HTML nommé public/index.html pour faciliter l'intégration de l'API Video de Vonage dans votre projet. Ce fichier comprend les scripts et les éléments nécessaires pour lancer la session vidéo. Vous trouverez ci-dessous une ventilation de la structure HTML :
<!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>
Créer un public/client.js fichier. Vous allez établir la connexion à la session Video API de Vonage et configurer un éditeur. Suivez ces étapes pour générer les informations d'identification nécessaires et les incorporer dans le code sous la section // credentials section :
Remplacez les espaces réservés (appId, sessionIdet token) par les valeurs réelles obtenues au cours de la procédure d'installation. Création d'une session et générer un jeton sont des étapes cruciales pour permettre une communication sécurisée et authentifiée au sein de l'API Video de Vonage. N'oubliez pas de récupérer l'appId à partir du tableau de bord de Vonage pour assurer une intégration transparente avec le fichier `public/client.js.
// 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
Dans ce segment de code, nous nous connectons à la session Video API de Vonage à l'aide des codes fournis appId et sessionId. La fonction OT.initSession() initialise la session, permettant ainsi la communication sur la plateforme Video API de Vonage.
Les variables publisher et subscriber sont déclarées dans un cadre plus large pour gérer les flux vidéo de l'éditeur et de l'abonné. Après l'établissement de la connexion, la fonction session.connect() authentifie la session à l'aide du jeton fourni. Toute erreur de connexion est enregistrée à des fins de débogage.
Un flux vidéo de l'éditeur est créé avec OT.initPublisher() lorsque la connexion est réussie. Cette vidéo est affichée dans l'élément HTML spécifié (containerId). La méthode session.publish() diffuse la vidéo de l'éditeur à tous les participants.
L'auditeur d'événements session.on("streamCreated") détecte les flux vidéo d'abonnés nouvellement créés. Lorsqu'un nouveau flux est identifié, il fait l'objet d'un abonnement et s'affiche dans le conteneur HTML désigné.
Remarque : le lancement du flux vidéo de l'éditeur peut amener le navigateur à demander l'accès à la caméra et au microphone pour une expérience de vidéoconférence sécurisée.
// 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%",
});
});
J'ai utilisé quelques API pour prendre en charge la capture d'écran de l'appel, par exemple html2canvas ou Canvas API. Cependant, l'image de la capture d'écran était grisée. La meilleure méthode qui a fonctionné pour moi a été de capturer et d'afficher des images statiques des vidéos de l'éditeur et de l'abonné dans un appel Video API. Ces images peuvent être utilisées comme captures d'écran. Le processus consiste à utiliser l'API Video pour accéder aux données d'image des flux vidéo, puis à créer un élément d'image HTML pour afficher l'image capturée.
Une fois que vous avez configuré cela, vous pouvez ajouter le code pour obtenir une capture d'écran de l'appel, et vous pouvez soit l'ajouter manuellement à un appel antérieur, soit l'ajouter à un appel antérieur, soit l'ajouter à un appel antérieur. Vision AI à l'essai que nous avons partagé, soit utiliser leur API.
Voici le code qui permet de faire des captures d'écran d'une partie de page particulière en cliquant sur un bouton. Les données de l'image sont envoyées au serveur, qui les enregistre dans un fichier. Le nom du fichier est renvoyé afin que l'utilisateur puisse savoir où la capture d'écran a été enregistrée.
Dans le fichier public/client.js ajoutez un récepteur d'événements au bouton "Prendre une capture d'écran" pour capturer les flux vidéo de l'éditeur et de l'abonné :
// 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);
}
});
Plongeons dans le script server.js mis à jour. Cette récente amélioration introduit un nouveau point de terminaison, "/take-screenshot", conçu pour gérer les images encodées en base64 provenant des flux vidéo de l'éditeur et de l'abonné. Ces images deviennent des fichiers PNG grâce à la fonction saveImage fonction.
Lorsqu'il reçoit une demande de capture d'écran, le serveur enregistre les images et fait appel à l'API Google Cloud Vision par l'intermédiaire de la fonction detectFaces par l'intermédiaire de la fonction Cette fonction joue un rôle important dans la reconnaissance et l'enregistrement des expressions faciales présentes dans les captures d'écran. Le serveur traite les images, enregistre leur parcours et fournit des analyses d'expressions faciales pour les deux flux vidéo.
Nous devons créer un dossier /screenshots dans le répertoire racine du projet, où les captures d'écran seront sauvegardées. Trouvez le code que je viens d'expliquer dans cette section ci-dessous server.js que je viens d'expliquer dans cette section ci-dessous :
// 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");
});
Vous avez maintenant tous les fichiers créés pour essayer ce projet. Exécutez le fichier du serveur principal avec node.
Vous verrez apparaître un message disant , Server listening on port 3002. Allez dans votre navigateur et ouvrez http://localhost:3002/.
Cliquez sur le bouton pour effectuer la capture d'écran. Une image de capture d'écran encodée en base64 sera téléchargée dans votre dossier de capture d'écran. Vous pouvez voir l'analyse de l'image dans la console qui ressemble à ceci :
Aujourd'hui, vous avez vu comment utiliser l'API Video et l'IA Vision de Google Cloud Platform. Pour améliorer encore votre application, vous pouvez explorer les fonctionnalités de l'API Vision, telles que la détection de texte, de points de repère ou d'objets. Vous pouvez également envisager de mettre en œuvre des fonctionnalités supplémentaires, comme l'enregistrement des résultats d'analyse dans une base de données ou leur intégration à d'autres services.
Partagez votre opinion avec notre communauté sur Communauté Vonage Slack ou envoyez-nous un message avec @VonageDev sur X.
SDK serveur - Avant de passer à la production, vous devez mettre en place un serveur pour générer des informations d'identification.
Aperçu de l'API Video - Si vous ne l'avez pas encore fait, prenez quelques minutes pour apprendre précisément comment fonctionne Vonage Video.