はじめに
この記事では、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 のアカウント及びプロジェクトを作成します。
API Key / Session ID / Token の取得
それぞれ以下の方法で取得できます。
-
API Key：プロジェクトページの冒頭に表示されています
-
Session ID：Project Tools で Create Session ID をクリックすると作成されます
-
Token：Project Tools で先ほど作成した Session ID 及びその他必要情報を入力し、 Create token をクリックすると作成されます
これでコーディングの準備ができました。
コーディング
コーディングで実施している主な処理は、以下の5点です。
- セッションの初期化
- 映像音声受信処理
- 映像音声送信を行うクライアント（publisher）の作成
- セッションへの接続
- 映像音声の送信
"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 と比較してみるのも面白そうです。