はじめに

この記事では、Vonage Video API と Next.js でビデオ通話機能を実装する手順を記載します。

Vonage Video API とは

Vonage という会社が提供するコミュニケーション向け PaaS のひとつです。

Video API 以外に Messages API、SMS API などコミュニケーションに関する様々なサービスが提供されています。サービスがたくさんあって便利そうと思う反面、知りたい情報がビデオ通話機能に関するものに限定されているケースでは、ドキュメントの情報量が多く、慣れるまでは必要な情報にたどり着くのが大変だとなと思いました。

また、Vonage Video API の中にも Clien SDK、Server SDK があり、今回は Client SDK の中の Web Client SDK を利用します。
ドキュメントはこちらのページが一番わかりやすかったです。

開発環境

開発環境は以下の通りです。

Windows11
VSCode
TypeScript 4.9.5
Next.js 14.0.4
React 18.2.0
Node.js 20.10.0
npm 10.2.5
OpenTok.js 2.26.4

プロジェクトファイル

以下のコマンドで Next.js のプロジェクトファイルを作成します。
オプションは全てデフォルトの設定にしています。

npx create-next-app@latest

Web Client SDK のインストール

以下のコマンドで Web Client SDK (OpenTok.js) をインストールします。

npm install --save @opentok/client

必要情報の取得

Web Client SDK を利用するためには、以下3つの情報を取得する必要があります。

API Key
Session ID
Token

これらの情報は、プロジェクトページから取得できます。

Vonage Video API のアカウント及びプロジェクト作成

そのためにまずは、Vonage Video API のアカウント及びプロジェクトを作成します。

Vonage Video API 以外のアカウントは、こちらの Vonage のサイトからアカウントを発行するようです。

https://www.vonage.com/

API Key / Session ID / Token の取得

それぞれ以下の方法で取得できます。

API Key：プロジェクトページの冒頭に表示されています
Session ID：Project Tools で Create Session ID をクリックすると作成されます
Token：Project Tools で先ほど作成した Session ID 及びその他必要情報を入力し、 Create token をクリックすると作成されます

これでコーディングの準備ができました。

コーディング

コーディングで実施している主な処理は、以下の5点です。

セッションの初期化
映像音声受信処理
映像音声送信を行うクライアント（publisher）の作成
セッションへの接続
映像音声の送信

page.tsx

"use client";

import OT from "@opentok/client";
import { useEffect } from "react";

const API_KEY = "***";
const SESSION_ID = "***";
const TOKEN = "***";

// Handling all of our errors here by alerting them
function handleError(error: any) {
  if (!error) return;
  alert(error.message);
}

function initializeSession() {
  // 1. Initialize session
  const session = OT.initSession(API_KEY, SESSION_ID);

  // 2. Subscribe to a newly created stream
  session.on("streamCreated", function (event) {
    session.subscribe(
      event.stream,
      "subscriber",
      {
        insertMode: "append",
        width: "100%",
        height: "100%",
      },
      handleError
    );
  });

  // 3. Create a publisher
  const publisher = OT.initPublisher(
    "publisher",
    {
      insertMode: "append",
      width: "100%",
      height: "100%",
    },
    handleError
  );

  // 4. Connect to the session
  session.connect(TOKEN, function (error) {
    // 5. If the connection is successful, publish to the session
    if (error) {
      return handleError(error);
    }
    session.publish(publisher, handleError);
  });
}

export default function Home() {
  useEffect(() => {
    initializeSession();
  }, []);

  return <></>;
}

感想

実運用のためには、もっと考慮しなければならない点があると思いますが、単純なビデオ通話機能（映像音声送受信機能）だけであれば、すぐに実装できました。
他のコミュニケーション向け PaaS と比較してみるのも面白そうです。

Vonage Video API + Next.js でビデオ通話機能を実装