){kind=small}
Obtenga información sobre IA a partir de videollamadas con Vision AI y Video API
Tiempo de lectura: 13 minutos
Este tutorial te mostrará cómo establecer una videollamada usando la Video API de Vonage, tomar una captura de pantalla del video y analizar la imagen.
¿Has oído hablar alguna vez de la API Vision de Google Cloud Platform? Mola probarla y obtener datos de las imágenes. Si quieres probarlo rápidamentepuedes añadir una foto y obtener un tipo diferente de análisis de la misma tanto en un archivo JSON como de forma legible por humanos.
Nota: actualmente, la Video API de Vonage ha llegado a nuestro panel de control de Vonage, y a partir de ahora (marzo de 2024), cuando se escribió por primera vez esta publicación en el blog, tienes 2000 minutos gratis para probarla.
Una cuenta de Google Cloud con acceso a Vision AI.
Una cámara web y un micrófono.
Google Chrome, Firefox u otro navegador compatible.
Un editor de código/ 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.
Ve a Google Cloud Console y crea un nuevo proyecto, ponle un nombre, añade la ubicación y haz clic en Crear. La ventaja de crear un nuevo proyecto es que una vez que hayas terminado con este tutorial, puedes eliminar todo el proyecto y asegurarte de que no estás utilizando ningún recurso relacionado con el proyecto.
Google Cloud's Project Name and Location
Tras crear el proyecto, accederás al panel de control de Google Cloud. Asegúrese de que una cuenta de facturación está relacionada con este proyecto.
Active Vision API para este proyecto; puede acceder al menú de la izquierda, hacer clic en el mercado y buscar Vision API. Alternativamente, puede buscar Vision AI en la barra de búsqueda superior y hacer clic para habilitarla dentro del flujo de trabajo.
Instale la gcloud CLI.
Aquí tienes un resumen de los archivos que encontrarás en nuestro proyecto.
[node_modules]
[public]
├── index.html
└── client.js
[screenshots]
server.js
private.key
package-lock.json
package.json
Crea una nueva carpeta de proyecto para este proyecto node, por ejemplo, ai-insights e instala el cliente Node.js de la API de Google Cloud Vision:
Inicializa gcloud escribiendo el siguiente comando y eligiendo en la consola el proyecto que hemos creado.
Después, se te pedirá que inicies sesión. Después de iniciar sesión, se te pedirá que elijas un proyecto en la nube y que elijas el ID del proyecto que has creado.
Crea tu archivo de credenciales. Yo estoy usando el siguiente comando, pero usted puede comprobar la para conocer las diferentes formas de crear archivos de credenciales.
Asegúrese de que hay una imagen a analizar en la raíz de su proyecto (por ejemplo, si ha creado una carpeta para este proyecto de nodos llamada ai-insights estaría en la raíz de la carpeta). Asegúrese de que la variable de archivo fileName con la dirección de la imagen, por ejemplo path/to/image.png.
Cree un archivo server.js JavaScript y añada el código; utilicemos el ejemplo de detectar caras.
Ejecuta el archivo principal del servidor con node.
Configuremos un chat de audio y video basado en navegador con Video API de Vonage. Necesitas configurar una videollamada para completar este tutorial. Te mostraré paso a paso cómo lograrlo en los siguientes pasos. Si deseas ver otros ejemplos de cómo configurar videos y obtener más información, consulta la última sección de este artículo.
Ir al Panel de Vonage e inicia sesión/regístrate.
Haga clic en "Applications" en el menú de la izquierda.
Haz clic en "Crear una nueva aplicación" en la parte superior y dale un nombre.
Copie el identificador de la solicitud para futuras consultas.
Haz clic en "Editar" y "Generar claves pública y privada". Se descargará la clave privada.
Desplácese hacia abajo y active "Video (nuevo)" para la aplicación.
Haga clic en "Guardar cambios" en la parte inferior de la página.
Anote la clave y el secreto de la API de su proyecto. Asegúrese de almacenar estas credenciales de forma segura, ya que las utilizará más adelante cuando configure su aplicación.
Crea un archivo HTML llamado public/index.html para facilitar la integración de la Video API de Vonage en tu proyecto. Este archivo incluye los scripts y elementos necesarios para iniciar la sesión de video. A continuación se muestra un desglose de la estructura 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>
Cree un public/client.js archivo. Establecerás la conexión con la sesión de la Video API de Vonage y configurarás un editor. Sigue estos pasos para generar las credenciales necesarias e incorpóralas al código en la sección // credentials sección
Sustituya los marcadores de posición (appId, sessionIdy token) por los valores reales obtenidos durante el proceso de configuración. Creación de una sesión y generar un token son pasos cruciales para permitir una comunicación segura y autenticada dentro de la Video API de Vonage. Recuerda recuperar el appId del panel de control de Vonage para garantizar una integración perfecta con el archivo `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
En este segmento de código, nos conectamos a la sesión de la Video API de Vonage utilizando el código proporcionado appId y sessionId. La función OT.initSession() inicializa la sesión, permitiendo la comunicación en la plataforma de la Video API de Vonage.
Las variables publisher y subscriber se declaran en un ámbito más amplio para gestionar los flujos de vídeo del publisher y del subscriber. Tras el inicio de la conexión, la función session.connect() autentica la sesión utilizando el token proporcionado. Cualquier error de conexión se registra con fines de depuración.
Se crea un flujo de vídeo editor con OT.initPublisher() tras una conexión satisfactoria. Este Video se muestra en el elemento HTML especificado (containerId). El método session.publish() difunde el vídeo del editor a todos los participantes.
El receptor de eventos session.on("streamCreated") detecta los flujos de vídeo recién creados. Cuando se identifica un nuevo flujo, se suscribe a él y se muestra dentro del contenedor HTML designado.
Nota: Al iniciar el flujo de vídeo del editor, es posible que el navegador solicite acceso a la cámara y al micrófono para una videoconferencia segura.
// 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%",
});
});
He utilizado un par de APIs que permiten tomar una captura de pantalla de la llamada, por ejemplo, html2canvas o Canvas API. Aún así, tendrían la imagen de la captura de pantalla tomada en gris. El mejor método que me funcionó fue capturar y mostrar imágenes estáticas de los vídeos del Editor y del Suscriptor en una llamada a la Video API. Estas imágenes pueden utilizarse como capturas de pantalla. El proceso consiste en utilizar la Video API para acceder a los datos de imagen de las secuencias de vídeo y, a continuación, crear un elemento de imagen HTML para mostrar la imagen capturada.
Una vez configurado, puede añadir el código para obtener una captura de pantalla de la llamada, y puede añadirla manualmente a una llamada anterior. Vision AI probarlo que hemos compartido o podríamos usar su API.
Este es el código que permite realizar capturas de pantalla de una determinada parte de la página pulsando un botón. Los datos de la imagen se envían al servidor, que los guarda en un archivo. Se devuelve el nombre del archivo para que el usuario pueda saber dónde se guardó la captura de pantalla.
En el archivo public/client.js añada un receptor de eventos al botón "Capturar pantalla" para capturar las secuencias de vídeo del editor y del suscriptor:
// 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);
}
});
Analicemos el script server.js actualizado. Esta reciente mejora introduce un nuevo punto final, "/take-screenshot", diseñado para gestionar imágenes codificadas en base64 procedentes de fuentes de vídeo tanto del editor como del suscriptor. Estas imágenes se convierten en archivos PNG mediante la función saveImage función.
Al recibir una solicitud de captura de pantalla, el servidor guarda las imágenes y activa la API Google Cloud Vision mediante la función detectFaces . Esta función desempeña un papel importante en el reconocimiento y registro de las expresiones faciales presentes en las capturas de pantalla. El servidor procesa las imágenes, registra sus rutas y ofrece análisis de expresiones faciales para ambas secuencias de Video.
Debemos crear una carpeta /screenshots carpeta en el directorio raíz del proyecto, donde se guardarán las capturas de pantalla. Encuentra el server.js código que acabo de explicar en esta sección:
// 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");
});
Ahora tienes todos los archivos creados para probar esto. Ejecuta el archivo principal del servidor con node.
Verás un mensaje que dice, Server listening on port 3002. Vaya a su navegador y abra http://localhost:3002/.
Haga clic en el botón para realizar la captura de pantalla. Se descargará una imagen de la captura de pantalla codificada en base64 en su carpeta de capturas de pantalla. Puedes ver el análisis de la imagen en la consola que tiene este aspecto:
Hoy has visto cómo utilizar la Video API y la Vision AI de Google Cloud Platform. Para mejorar aún más tu aplicación, puedes explorar las funciones de la Vision API, como la detección de texto, puntos de referencia u objetos. También puedes plantearte implementar funciones adicionales, como guardar los resultados del análisis en una base de datos o integrarlos con otros servicios.
Comparte tu opinión con nuestra comunidad en Slack de la comunidad de Vonage o envíanos un mensaje con @VonageDev en X.
SDK de servidor - Antes de pasar a producción, debe configurar un servidor para generar credenciales.
Descripción general de Video API - Si aún no lo has hecho, tómate unos minutos para conocer con precisión cómo funciona Vonage Video.