https://d226lax1qjow5r.cloudfront.net/blog/blogposts/gather-ai-insights-from-video-calls-with-vision-ai-and-the-video-api/video-api-google-cloudai.png

Amanda Cavallaroデベロッパー・アドボケイト

Vision AIとVideo APIでビデオ通話からAIインサイトを収集する

最終更新日 April 17, 2024

#video-api

#javascript

#vision-ai

所要時間：7 分

はじめに

このチュートリアルでは、Vonage Video APIを使用してビデオ通話を設定し、ビデオのスクリーンショットを撮り、画像を分析する方法を紹介します。

Google Cloud Platform Vision APIをご存知ですか？写真からデータを取得することができる。もしすぐに試したいなら写真を追加して、JSONファイルと人間が読める方法の両方で、その写真の異なるタイプの分析を得ることができます。

注：現在、Vonage Video APIは私たちのVonage Dashboardに到着しており、このブログ記事が最初に書かれた現時点（2024年3月）では、2000分間無料で試すことができます。

前提条件

Google CloudアカウントビジョンAIにアクセスできる
Node.js 16 以上と npm.
ウェブカメラとマイク。
Google Chrome、Firefox、またはその他の対応ブラウザ対応ブラウザ.
コードエディター/ IDE。
Vonage APIアカウント

Vonage API Account

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.

Vision APIをプロジェクトに追加する

Google Cloud Consoleにアクセスし、新しいプロジェクトを作成し、名前を付け、場所を追加し、Createをクリックします。新しいプロジェクトを作成する利点は、このチュートリアルが終わったら、プロジェクト全体を削除し、プロジェクトに関連するリソースを使用していないことを確認できることです。

Google Cloud's Project Name and Location

プロジェクトを作成すると、Google Cloudのダッシュボードに移動します。課金アカウントがこのプロジェクトに関連していることを確認します。.
Vision APIを有効にする左側のメニューからマーケットプレイスをクリックし、Vision APIを探す。または、上部の検索バーでVision AIを検索し、ワークフロー内で有効化をクリックすることもできます。
インストール gcloud CLI.

プロジェクトの構成

私たちのプロジェクトにあるファイルの概要です。

[node_modules]
[public]
 ├── index.html
 └── client.js
[screenshots]
server.js
private.key
package-lock.json
package.json

ビジョンAI機能の追加

依存関係のインストールとコードの実行

このnodeプロジェクト用に新しいプロジェクトフォルダを作成します、 ai-insightsを作成し、Google Cloud Vision API Node.js Client をインストールします：

npm install @google-cloud/vision

以下のコマンドを入力してgcloudを初期化し、コンソールから作成したプロジェクトを選択する。

gcloud init

その後、ログインを求められます。ログイン後、クラウドプロジェクトを選択するプロンプトが表示され、作成したプロジェクトIDを選択します。

クレデンシャルファイルを作成します。私は以下のコマンドを使っていますが、クレデンシャルファイルを作成するさまざまな方法についてはドキュメントを参照してください。.

gcloud auth application-default login

プロジェクトのルートに解析する画像があることを確認してください（例えば、このノードプロジェクトのプロジェクトフォルダとして ai-insightsというプロジェクト・フォルダーを作成した場合、そのフォルダーのルートになります）。ファイル変数 fileNameに画像のアドレスが入力されていることを確認してください。 path/to/image.png.

JavaScriptファイルを作成し server.jsJavaScriptファイルを作成し、コードを追加する。顔の検出.

メインサーバーのファイルをnodeで実行する。

node server.js

Vonageを使ったビデオ通話のセットアップ

Vonage Video APIを使ってブラウザベースの音声ビデオチャットをセットアップしてみましょう。このチュートリアルを完了するには、ビデオ通話をセットアップする必要があります。次のステップでその方法を順を追って説明します。ビデオをセットアップする他の例を見たり、もっと詳しく知りたい場合は、この記事の最後のセクションをチェックしてください。

Vonageビデオアプリケーションの作成

Vonageのダッシュボード Vonageダッシュボードにアクセスし、ログイン/サインアップしてください。
左メニューの「アプリケーション」をクリックします。
一番上の "Create a new application "をクリックし、名前をつける。
今後の参考のため、アプリケーションIDをコピーしてください。
Edit（編集）」から「Generate public and private keys（公開鍵と秘密鍵を生成）」をクリックすると、秘密鍵がダウンロードされる。
下にスクロールし、アプリケーションの「Video（新規）」を有効にします。
ページ下部の「変更を保存」をクリックします。

プロジェクトのAPI KeyとAPI Secretをメモしてください。これらの認証情報は、後でアプリケーションを設定する際に使用するので、必ず安全に保管してください。

ビデオセッションの認証と接続

Public/index.html という名前の HTML ファイルを作成し、Vonage Video API をプロジェクトに簡単に統合できるようにします。このファイルには、Video セッションを開始するために必要なスクリプトと要素が含まれています。以下に 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>

認証情報を追加する

ファイルを作成する public/client.jsファイルを作成します。Vonage Video API セッションへの接続を確立し、パブリッシャーを設定します。以下の手順で必要な認証情報を生成し、コードに組み込みます。 // credentialsセクションのコードに組み込みます：

プレースホルダ (appId, sessionIdおよび token) を、セットアップ中に取得した実際の値に置き換える。セッションの作成とトークンの生成セッションの作成とトークンの生成は、Vonage Video API 内での安全で認証された通信を可能にするための重要なステップです。public/client.jsファイルとシームレスに統合するために、Vonage DashboardからappIdを取得することを忘れないでください。

// 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

セッションへの接続とパブリッシャーの作成

このコードでは、Vonage Video API セッションに接続します。 appIdそして sessionId.この OT.initSession()関数はセッションを初期化し、Vonage Video API プラットフォームでの通信を可能にします。

変数publisherとsubscriberは、パブリッシャーとサブスクライバーの Videoストリームを管理するために、より広いスコープで宣言される。接続の開始に続いて session.connect()関数は、提供されたトークンを使用してセッションを認証します。接続エラーが発生した場合は、デバッグのためにログに記録されます。

でパブリッシャービデオストリームが作成される。 OT.initPublisher()で作成されます。この Video は、指定した HTML 要素 (containerId) に表示されます。この session.publish()メソッドは、パブリッシャーの Video をすべての参加者にブロードキャストします。

イベント・リスナーは session.on("streamCreated")イベント・リスナーは、新しく作成されたサブスクライバ・ビデオ・ストリームを検出する。新しいストリームが識別されると、そのストリームがサブスクライブされ、指定された HTML コンテナ内に表示されます。

注：パブリッシャーのビデオストリームを開始すると、安全なビデオ会議体験のために、ブラウザがカメラとマイクへのアクセスを要求する場合があります。

// 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%",
  });
});

ビデオ通話のスクリーンショットを撮る

例えば、html2canvasやCanvas APIなどだ。それでも、撮影したスクリーンショットの画像はグレーアウトしてしまう。私にとって最も効果的な方法は、Video API 呼び出しでパブリッシャーとサブスクライバーのビデオの静止画像をキャプチャして表示することでした。これらの画像は、スクリーンショットとして使用できます。このプロセスでは、Video API を使用してビデオストリームの画像データにアクセスし、HTML image 要素を作成してキャプチャした画像を表示します。

このセットアップが完了したら、通話中のスクリーンショットを取得するコードを追加して、手動でそれを以前の Vision AIを試すリンクに手動で追加するか、彼らのAPIを使うことができる。

ボタンをクリックすると、特定のページ部分のスクリーンショットが撮れるようにするコードです。画像データはサーバーに送られ、サーバーはそれをファイルに保存します。ファイル名が返されるので、ユーザーはスクリーンショットがどこに保存されたかを知ることができます。

ファイルの中で public/client.jsファイルに、パブリッシャーとサブスクライバーのビデオストリームをキャプチャするために、"Take Screenshot" ボタンにイベントリスナーを追加します：

// 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);
    }
  });

スクリーンショット・キャプチャとビジョンAI分析の統合

アップグレードされたserver.jsスクリプトを見てみましょう。最近の機能強化では、新しいエンドポイント "/take-screenshot" が導入され、パブリッシャーと購読者のビデオフィードの両方から base64 エンコードされた画像を処理できるようになりました。これらの画像は saveImage関数によって PNG ファイルになります。

スクリーンショットのリクエストを受け取ると、サーバーは画像を保存し detectFaces関数を介してGoogle Cloud Vision APIに接続します。この関数は、スクリーンショットに存在する表情を認識し、記録する上で重要な役割を果たします。サーバーは画像を処理し、そのパスをログに記録し、両方のVideoストリームの表情分析を配信します。

プロジェクトのルート・ディレクトリに /screenshotsフォルダを作成する必要があります。このセクションで説明した server.jsのコードを見つけてください：

// 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");
});

試してみる

これで、これを試すためのファイルがすべてできた。メイン・サーバー・ファイルをnodeで実行する。

node server.js

というメッセージが表示されます、 Server listening on port 3002.ブラウザで http://localhost:3002/.

ボタンをクリックしてスクリーンショットを撮ります。Base64エンコードされたスクリーンショット画像がスクリーンショットフォルダにダウンロードされます。コンソールで画像の解析結果を見ることができます：

Faces: Face #1: Joy: LIKELY Anger: VERY_UNLIKELY Sorrow: VERY_UNLIKELY Surprise: UNLIKELY

結論

今日は Video API と Google Cloud Platform Vision AI の使い方を説明しました。アプリケーションをさらに強化するために、テキスト、ランドマーク、オブジェクトの検出など、Vision API の機能を調べることができます。また、解析結果をデータベースに保存したり、他のサービスと統合したりといった追加機能の実装も検討できます。

以下のコミュニティでご意見をお聞かせください。 VonageコミュニティSlackまたは Xの@VonageDev.