https://d226lax1qjow5r.cloudfront.net/blog/blogposts/basic-video-chat/E_Vonage-Video-API_1200x600-1.png

Hui Jing Chenヴォネージの卒業生

ホイ・ジンはNexmoのデベロッパー・アドボケイト。CSSとタイポグラフィをこよなく愛する。

Vonage Video APIで基本的なビデオチャットを作成する

最終更新日 April 20, 2021

#nodejs

#video-api

所要時間：1 分

このチュートリアルシリーズでは Vonage Video API (旧TokBox OpenTok)を紹介します。Video API は非常に堅牢で、高度なカスタマイズが可能です。各記事では、最も基本的な音声ビデオチャットから始めて、API を使用して特定の機能を実装する方法を紹介します。

このアプリケーションにはサーバーサイドのコードが必要なので、ここでは Glitchを使います。また、このGlitchプロジェクトからコードをダウンロードし、お好みのサーバーやホスティング・プラットフォームにデプロイすることもできます（プラットフォームの要件に応じて、いくつかの設定を調整する必要があるかもしれません）。

このシリーズでは、Video API自体に焦点を当てるため、フロントエンドのフレームワークは使用せず、Vanilla Javascriptのみを使用します。このチュートリアルの最後には、リンクを共有することで友人とVideoチャットを開始できるようになっているはずです。

Screenshot of video chat

このアプリケーションのコードはすべて、この GitHub リポジトリまたは Glitchでリミックス.

前提条件

始める前に、Vonage Video APIアカウントが必要です。こちら.また Node.jsがインストールされている必要があります（Glitchを使用していない場合）。

APIプロジェクトの作成

アカウントにログインすると、ダッシュボードのインターフェイスが表示されます。新規プロジェクトを作成するには 新規プロジェクトの作成を選択します。

2つのオプションが表示されます、 埋め込むまたは API.をクリックしてAPIオプションを選択します。 カスタムプロジェクトの作成ボタンをクリックします。

次のステップでは、プロジェクト名と希望するコーデックを尋ねられます。プロジェクト名は好きなように付け、推奨コーデックオプションの VP8を選択します。VP8とH.264の違いについての詳細はこちら.

プロジェクトが作成されると、APIキーとシークレットにアクセスできるようになります。各プロジェクトは独自のAPIキーとシークレットを持ちます。

グリッチでのセットアップ

Glitchを使用しないことを選択した場合は、この部分をスキップして、次のセクションのコード・ウォークスルーと説明に直接進むことができる。

グリッチのホームページで 新規プロジェクトを選択します。 hello-expressオプションを選択すると、ExpressがインストールされたNodeアプリケーションが作成されます。

Glitch landing page

コンソールを立ち上げれば、コマンドラインから追加のライブラリをインストールできる。コンソールを立ち上げて ツールボタンをクリックし、次にログ.

Screenshot showing the location of the Tools button

以下のコマンドでVonage Video API Server SDKをインストールします：

pnpm install opentok --save

の代わりに pnpmの代わりに npmを使うことに注意してほしい。これは npm.

Screenshot of Glitch terminal after opentok is installed

それが終わったら、先に進んで server.jsファイルを一掃し、不要なプレースホルダー・コードを削除する。

Screenshot of the server.js file on Glitch

ファイルの .envファイルに移動し、Vonage Video API プロジェクトから API キーとシークレットを追加します。

Screenshot of the .env file on Glitch

プロジェクトの基本構造

新しいGlitchを起動すると、このようなフォルダ構成になります。 hello-expressプロジェクトを起動したときのフォルダ構成です：

Folder structure of the project

ユーザーがセッションを作成するためのランディングページ（これを "ルーム "と呼び、後続の参加者は同じ "ルーム "に参加することができます）と、実際のビデオチャットページです。

ファイルを landing.htmlファイルを viewsフォルダに追加してみましょう。 新規ファイルボタンをクリックする。ファイル名を views/landing.htmlと名付け、次のマークアップをページに貼り付けます。このページには、ユーザーが部屋名を入力するためのシンプルなフォーム要素があります。一から自分で書きたくない場合は、以下のマークアップを使用することができます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Basic Video Chat</title>
    <meta name="description" content="A basic audio-video chat application" />
    <link
      id="favicon"
      rel="icon"
      href="https://tokbox.com/developer/favicon.ico"
      type="image/x-icon"
    />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="/style.css" />
  </head>

  <body>
    <header>
      <h1>The most basic video chat</h1>
    </header>

    <main>
      <form id="registration" class="registration">
        <label>
          <span>Room</span>
          <input
            type="text"
            name="room-name"
            placeholder="Enter room name"
            required
          />
        </label>
        <button>Enter</button>
      </form>
    </main>
  </body>
</html>

Creating a new file in your Glitch project

この index.htmlページも、今のところ比較的まばらで、2つの要素 div要素を持つページです。これらの用語の意味については、このチュートリアルの Video API のセクションで説明します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Basic Video Chat</title>
    <meta name="description" content="A basic audio-video chat application" />
    <link
      id="favicon"
      rel="icon"
      href="https://tokbox.com/developer/favicon.ico"
      type="image/x-icon"
    />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="/style.css" />
  </head>

  <body>
    <header>
      <h1>The most basic video chat</h1>
    </header>

    <main>
      <div id="subscriber" class="subscriber"></div>
      <div id="publisher" class="publisher"></div>
    </main>
    
    <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
    <script src="/client.js"></script>
  </body>
</html>

ファイルについては server.jsファイルでは、不要なプレースホルダーのコードを削除しよう。以下のようなものが残るはずだ：

const express = require("express");
const app = express();

app.use(express.static("public"));

app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});

const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});

最後に、ファイル内の既存のスタイルも消去しておきましょう。 style.cssファイル内の既存のスタイルも消去しておこう。

Vonage Video APIがどのように人々を接続し、ビデオチャットを可能にするのか、一般的な概要は以下の通りです：

ステップ1：アプリサーバーによってセッションが作成される
ステップ2：クライアントがアプリをロードし、サーバーがトークンを作成する。
ステップ3：クライアントが接続し、セッションへのストリーミングを開始する。
ステップ4：新しいクライアントがセッションに接続する
ステップ5：クライアントがお互いのストリームを購読する

全体の流れを示すアニメーションGIFを含む完全な紹介は、以下のサイトでご覧いただけます。 Vonage Video API ドキュメンテーションサイト.

セッションの初期化

冒頭で述べたように、TokBox OpenTokはVonage Video APIになりました。パッケージ名に変更はないので、コード内で OpenTok を参照することに変わりはありません。まず、API キーとシークレットを使って OpenTok オブジェクトをインスタンス化します。 server.jsファイルで、API キーとシークレットを使って OpenTok オブジェクトをインスタンス化します。

const OpenTok = require("opentok");
const OT = new OpenTok(process.env.API_KEY, process.env.API_SECRET);

2つのページのルートを変更し、ユーザーが最初のロードでランディングページを見るようにしましょう。それが成功すると、Video がレンダリングされるメインのアプリケーションページにリダイレクトされます。

app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/landing.html");
});

app.get("/session/:room", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});

ファイル上に landing.htmlファイルに、フォーム送信のイベントハンドラを追加しましょう。 POSTをサーバーに送信します。これは4行のコードなので、ページの一番下にscriptタグとして追加しましょう。

const form = document.getElementById("registration");
form.addEventListener("submit", event => {
  event.preventDefault();
  location.pathname = `/session/${form.elements["room-name"].value}`;
});

つまり POSTルートを server.jsファイルで処理しなければならない。以下のコードの塊はかなり長いので、説明はコードにコメントとして含まれています。その要点は、ランディングページから入力された部屋名に基づいて、既存のセッションをチェックするか、必要であれば新しいセッションを作成します。各セッションにはユニークなセッションIDがあり、他の人がセッションに参加することができます。

このコードは、クライアントがセッションに接続するために必要なクレデンシャルを生成する。これらはセッションID、トークン、APIキーで構成される。これらのクレデンシャルはレスポンスとしてクライアントに返される。

let sessions = {};

app.post("/session/:room", (request, response) => {
  const roomName = request.params.room;
  // Check if the session already exists
  if (sessions[roomName]) {
    // Generate the token
    generateToken(roomName, response);
  } else {
    // If the session does not exist, create one
    OT.createSession((error, session) => {
      if (error) {
        console.log("Error creating session:", error);
      } else {
        // Store the session in the sessions object
        sessions[roomName] = session.sessionId;
        // Generate the token
        generateToken(roomName, response);
      }
    });
  }
});

function generateToken(roomName, response) {
  // Configure token options
  const tokenOptions = {
    role: "publisher",
    data: `roomname=${roomName}`
  };
  // Generate token with the OpenTok SDK
  let token = OT.generateToken(
    sessions[roomName],
    tokenOptions
  );
  // Send the required credentials back to to the client
  // as a response from the fetch request
  response.status(200);
  response.send({
    sessionId: sessions[roomName],
    token: token,
    apiKey: process.env.API_KEY
  });
}

セッションへの接続、サブスクライブ、パブリッシング

クライアント側では、まず API キーとセッション ID を使ってセッションオブジェクトを作成します。また、publisher オブジェクトも作成する必要があります。 id=publisherのある div 要素をあなたの Video フィードに置き換えます。

メソッドでセッションに接続し session.connect()メソッドでセッションに接続します。 session.publish()メソッドでビデオストリームを公開します。

また streamCreatedイベントも listen するので、セッションに接続した後にセッションに参加したユーザーを購読することができます。

// Create a session object with the session ID
const session = OT.initSession(apiKey, sessionId);

// Create a publisher
const publisher = OT.initPublisher(
  "publisher", // should match the ID of an element in your HTML
  {
    insertMode: "append",
    width: "100%",
    height: "100%"
  },
  handleCallback
);

// Connect to the session
session.connect(token, error => {
  // If the connection is successful, initialize the publisher and publish to the session
  if (error) {
    handleCallback(error);
  } else {
    session.publish(publisher, handleCallback);
  }
});

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

// Callback handler
function handleCallback(error) {
  if (error) {
    console.log("error: " + error.message);
  } else {
    console.log("callback success");
  }
}

部屋名フォームが送信された時点で POSTリクエストを /session/:roomルーティングにリクエストし、レスポンスのデータを使って上記の機能を実行します。そのために、すべてを initializeSession()という関数にまとめます：

fetch(location.pathname, { method: "POST" })
  .then(res => {
    return res.json();
  })
  .then(res => {
    const apiKey = res.apiKey;
    const sessionId = res.sessionId;
    const token = res.token;
    initializeSession(apiKey, sessionId, token);
  })
  .catch(handleCallback);

function initializeSession(apiKey, sessionId, token) {
  // Create a session object with the sessionId
  const session = OT.initSession(apiKey, sessionId);

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

  // Connect to the session
  session.connect(token, error => {
    // If the connection is successful, initialize the publisher and publish to the session
    if (error) {
      handleCallback(error);
    } else {
      session.publish(publisher, handleCallback);
    }
  });

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

物事を整理するためのいくつかのスタイリング

ビデオチャットの大まかな機能は完成したので、あとはレイアウトを調整するためのスタイルを追加するだけです。元の2つの div要素（subscriber と publisher）は、それぞれのコンテンツがそれぞれのビデオフィードに置き換えられます。

Markup when publisher is publishing to the session

これは、パブリッシャーのビデオストリームをページの左下隅に表示させ、ストリーム上の他の人々がページの背景全体を占めるようにするための、最も素朴なレイアウトスタイルです。

html {
  box-sizing: border-box;
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  text-align: center;
  padding: 0.5em;
}

main {
  flex: 1;
  display: flex;
  position: relative;
}

input,
button {
  font-size: inherit;
  padding: 0.5em;
}

.registration {
  display: flex;
  flex-direction: column;
  margin: auto;
}

.registration input[type="text"] {
  display: block;
  margin-bottom: 1em;
}

.subscriber {
  width: 100%;
  height: 100%;
  display: flex;
}

.publisher {
  position: absolute;
  width: 25vmin;
  height: 25vmin;
  min-width: 8em;
  min-height: 8em;
  align-self: flex-end;
}

これらのスタイルは、このチュートリアルの冒頭ですでにご覧になった、最も基本的なレイアウトで最も基本的なVideoチャットを提供します。

Screenshot of landing page