){kind=small}
Obtenha insights de IA a partir de chamadas de vídeo com o Vision AI e a Video API
Tempo de leitura: 13 minutos
Este tutorial vai mostrar como iniciar uma videochamada usando a Video API da Vonage, fazer uma captura de tela do vídeo e analisar a imagem.
Você já ouviu falar da API Vision do Google Cloud Platform? É legal experimentá-la e extrair dados das imagens. Se você quiser testá-la rapidamente, você pode adicionar uma foto e obter diferentes tipos de análise dela, tanto em um arquivo JSON quanto de forma legível para humanos.
Observação: Atualmente, a Video API da Vonage já está disponível no nosso Painel da Vonage e, neste momento (março de 2024), quando esta postagem do blog foi escrita pela primeira vez, você tem 2.000 minutos gratuitos para experimentá-la.
Um account do Google Cloud com acesso ao Vision AI.
Uma webcam e um microfone.
Google Chrome, Firefox ou outro navegador compatível.
Um editor de código/IDE.
Acesse o Google Cloud Console e crie um novo projeto, dê um nome a ele, adicione a localização e clique em “Criar”. A vantagem de criar um novo projeto é que, ao concluir este tutorial, você poderá excluir o projeto inteiro e garantir que não estará utilizando nenhum recurso relacionado a ele.
Google Cloud's Project Name and Location
Após criar o projeto, você será direcionado ao painel do Google Cloud. Certifique-se de que um account de cobrança esteja vinculado a este projeto.
Ativar a API do Vision para este projeto; você pode acessar o menu à esquerda, clicar no marketplace e procurar pela API Vision. Como alternativa, você pode pesquisar por “Vision AI” na barra de pesquisa superior e clicar para ativá-la no fluxo de trabalho.
Instale o CLI do gcloud.
Aqui está uma visão geral dos arquivos que você encontrará em nosso projeto.
[node_modules]
[public]
├── index.html
└── client.js
[screenshots]
server.js
private.key
package-lock.json
package.json
Crie uma nova pasta de projeto para este projeto do Node.js; por exemplo, ai-insights e instale o cliente Node.js da API do Google Cloud Vision:
Inicialize o gcloud digitando o comando abaixo e selecionando o projeto que criamos no console.
Em seguida, você será solicitado a fazer login. Após o login, será solicitado que você escolha um projeto na nuvem e selecione o ID do projeto que você criou.
Crie seu arquivo de credenciais. Estou usando o comando abaixo, mas você pode consultar a documentação para conhecer outras formas de criar arquivos de credenciais.
Certifique-se de que haja uma imagem a ser analisada na raiz do seu projeto (por exemplo, se você criou uma pasta de projeto para este projeto do Node chamada ai-insights ela estaria na raiz da pasta). Certifique-se de que a variável de arquivo fileName esteja preenchida com o endereço da imagem, por exemplo, path/to/image.png.
Crie um server.js arquivo JavaScript e adicione o código; vamos usar o exemplo de detecção de rostos.
Execute o arquivo do servidor principal com o node.
Vamos configurar um chat de áudio e vídeo baseado em navegador com a Video API da Vonage. Você precisará realizar uma chamada de vídeo para concluir este tutorial. Vou mostrar passo a passo como fazer isso nas etapas a seguir. Se você quiser ver outros exemplos de como configurar chamadas de Video e saber mais, confira a última seção deste artigo.
Acesse o painel de controle da Vonage e faça login ou cadastre-se.
Clique em “Applications” no menu à esquerda.
Clique em “Criar um novo aplicativo” na parte superior e dê um nome a ele.
Copie o ID do aplicativo para referência futura.
Clique em “Editar” e em “Gerar chaves pública e privada”. A chave privada será baixada.
Role a página para baixo e ative a opção “Video (novo)” para o aplicativo.
Clique em “Salvar alterações” na parte inferior da página.
Anote a chave de API e o segredo de API do seu projeto. Certifique-se de guardar essas credenciais em um local seguro, pois você as utilizará mais tarde, ao configurar seu aplicativo.
Crie um arquivo HTML chamado public/index.html para facilitar a integração da Video API da Vonage ao seu projeto. Esse arquivo inclui os scripts e elementos necessários para iniciar a sessão de vídeo. Veja a seguir um detalhamento da estrutura do 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>
Crie um public/client.js arquivo. Você estabelecerá a conexão com a sessão da Video API do Vonage e configurará um publisher. Siga estas etapas para gerar as credenciais necessárias e incorporá-las ao código na seção // credentials seção:
Substitua os espaços reservados (appId, sessionId, e token) pelos valores reais obtidos durante o processo de configuração. Criação de uma sessão e a geração de um token são etapas cruciais para permitir uma comunicação segura e autenticada na Video API da Vonage. Lembre-se de recuperar o appId no Painel de Controle da Vonage para garantir uma integração perfeita com o arquivo `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
Neste trecho de código, conectamo-nos à sessão da Video API da Vonage utilizando o appId e sessionId. A OT.initSession() função inicializa a sessão, permitindo a comunicação na plataforma da Video API do Vonage.
As variáveis publisher e subscriber são declaradas em um escopo mais amplo para gerenciar os fluxos de Video do publisher e do subscriber. Após o estabelecimento da conexão, a session.connect() função autentica a sessão usando o token fornecido. Quaisquer erros de conexão são registrados para fins de depuração.
Um stream de vídeo do editor é criado com OT.initPublisher() após o estabelecimento bem-sucedido da conexão. Esse Video é exibido no elemento HTML especificado (containerId). O session.publish() método transmite o Video do editor para todos os participantes.
O session.on("streamCreated") ouvinte de eventos detecta fluxos de vídeo de assinantes recém-criados. Quando um novo fluxo é identificado, ele é assinado e exibido no contêiner HTML designado.
Observação: Ao iniciar a transmissão de video do apresentador, o navegador pode solicitar acesso à câmera e ao microfone para garantir uma experiência segura de videoconferência.
// 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%",
});
});
Utilizei algumas APIs para capturar uma imagem da chamada, como, por exemplo, a html2canvas ou a API do Canvas. No entanto, a imagem capturada ficava esmaecida. O melhor método que funcionou para mim foi capturar e exibir imagens estáticas dos vídeos do Emissor e do Assinante em uma chamada da Video API. Essas imagens podem ser usadas como capturas de tela. O processo envolve utilizar a Video API para acessar os dados de imagem dos fluxos de vídeo e, em seguida, criar um elemento de imagem HTML para exibir a imagem capturada.
Depois de fazer essa configuração, você pode adicionar o código para capturar uma imagem da chamada e pode adicioná-la manualmente a um link do Vision AI que compartilhamos que compartilhamos anteriormente, ou podemos usar a API deles.
Aqui está o código que permite fazer capturas de tela de uma parte específica da página ao clicar em um botão. Os dados da imagem são enviados ao servidor, que os salva em um arquivo. O nome do arquivo é retornado para que o usuário saiba onde a captura de tela foi salva.
No public/client.js arquivo, adicione um ouvinte de evento ao botão “Tirar captura de tela” para capturar os fluxos de vídeo do editor e do assinante:
// 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);
}
});
Vamos dar uma olhada no script server.js atualizado. Essa melhoria recente introduz um novo endpoint, “/take-screenshot”, projetado para processar imagens codificadas em base64 provenientes tanto do feed de Video do emissor quanto do assinante. Essas imagens são convertidas em arquivos PNG por meio da saveImage função.
Ao receber uma solicitação de captura de tela, o servidor salva as imagens e aciona a API do Google Cloud Vision por meio da detectFaces função. Essa função desempenha um papel importante no reconhecimento e registro das expressões faciais presentes nas capturas de tela. O servidor processa as imagens, registra seus caminhos e fornece análises de expressões faciais para ambas as transmissões de Video.
Precisamos criar uma /screenshots pasta no diretório raiz do projeto, onde as capturas de tela serão salvas. Encontre o server.js código que acabei de explicar nesta seção abaixo:
// 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");
});
Agora você já tem todos os arquivos criados para testar isso. Execute o arquivo do servidor principal com o node.
Você verá uma mensagem que diz: Server listening on port 3002. Acesse seu navegador e abra http://localhost:3002/.
Clique no botão para fazer a captura de tela. Uma imagem da captura de tela codificada em base64 será baixada para sua pasta de capturas de tela. Você pode ver a análise da imagem no console, que se parece com isto:
Hoje, você viu como usar a Video API e a IA do Google Cloud Platform Vision. Para aprimorar ainda mais seu aplicativo, você pode explorar os recursos da API do Vision, como a detecção de texto, pontos de referência ou objetos. Você também pode considerar a implementação de funcionalidades adicionais, como salvar os resultados da análise em um banco de dados ou integrá-los a outros serviços.
Compartilhe sua opinião com nossa Comunidade no Slack da Comunidade Vonage ou envie-nos uma mensagem com @VonageDev no X.
SDK do servidor — Antes de entrar em produção, é necessário configurar um servidor para gerar credenciais.
Visão geral da Video API — Se ainda não o fez, reserve alguns minutos para entender exatamente como o Vonage Video funciona.