Vonage Video APIを使用してNext.jsアプリケーションでビデオ通話を可能にする

はじめに

ユーザーエクスペリエンスを向上させる最も効果的な方法の1つは、アプリにライブビデオ通話サポートを有効にして、ユーザーが遭遇している問題に対して常にビデオ通話サポートを受けられるようにすることです。しかし、アプリケーションにビデオ通話サポートを追加するには、ビデオ通話と対話するためのサーバーとクライアントの両方のサポートを処理する必要があるため、作業が必要です。さらに、何千人ものユーザーに対してビデオ・サポートを拡張するのは大変な作業です。Video サポートをアプリに追加する際の問題点と難しさを理解しましょう、 Vonage Video APIが誕生しました。

この記事では、Vonage Video APIを使用して数行のコードを追加するだけで、デモのNext.jsアプリケーションでビデオ通話を有効にする方法を学びます。

Next.jsフレームワークについて

Next.jsの上にフルスタックのWebアプリケーションを構築するためのオープンソースのフレームワークです。 Reactライブラリ.Next.jsは、Reactの利点とサーバーサイドレンダリングおよび静的サイト生成を組み合わせた堅牢なフレームワークです。さらに、Next.jsは、優れた開発者エクスペリエンスでアプリケーションを迅速に構築できる機能と規約を提供します。

デモアプリについて

デモアプリケーションを作成して、Next.jsアプリケーションにビデオ通話機能を追加する方法を理解し、実践してみましょう。

あなたは、ユーザーが好きなセラピストとビデオ通話を予約できるセラピーアプリケーションを構築します。ビデオ通話のサポートは、人付き合いや他人との交流に問題を抱えることの多いユーザーにとって優れた機能です。これで、好きな時間に自宅からセラピーセッションに参加することができます。

免責事項：このアプリケーションは、チュートリアルのみを目的としています。

前提条件

デモ・アプリケーションをビルドするには、以下の前提条件を準備する必要がある。

• Node.jsのバージョンは12.8以上です。 Next.jsの要件.

• A gitコマンドライン環境GitHubリポジトリからアプリケーションコードをクローンする環境

• アカウントを持っている ビデオプラットフォームのアカウントがあれば、新しい Video API プロジェクトを作成して、Next.js アプリに Video サポートをすばやく統合できます。

• アカウント Vonage開発者ダッシュボードでアカウントを取得し、SMS API を使用してデモアプリケーション内でメッセージを送信してください。

前提条件がすべて整ったので、Next.jsアプリケーションをビルドしてみましょう。

ステップ1：アプリケーションコードのクローン

このアプリケーションでは、アプリケーション・ロジックとユーザー・インターフェースを実装するために、いくつかのディレクトリとファイルを作成する必要があります。 GitHub リポジトリ.ターミナルを開き、Projectsディレクトリを新規作成し、その下にアプリケーションコードをクローンします。

カレント・ディレクトリを vonage-therapist-video-embedディレクトリに変更する。

以下のディレクトリとファイルが表示されるはずだ：

Code Project Structure

それが何なのかを検証してみよう。

ステップ2：ファイル構造を理解する

Next.jsアプリケーションのプロジェクトでは、Node.js環境用の通常のファイル以外に、次のファイルに注意する必要があります。 package.jsonまたは package-lock.json,などのNode.js環境用の通常のファイル以外に、次のファイルに注意する必要があります。

1. next.config.jsファイル：

このファイルは、Next.jsアプリの共通設定を定義します。たとえば、アプリケーションの画像パスを設定し、画像がこれらのパスに一致しない場合、Next.jsはエラーメッセージを表示します。

/** @type {import('next').NextConfig} */

const nextConfig = {
  …
  images: {
	domains: ['images.unsplash.com',],
  },
};

module.exports = nextConfig;

1. pagesディレクトリにある：

ディレクトリは pagesディレクトリに実装されている：

• アプリケーションAPIは apiサブディレクトリ内にある。これらのAPIには、/api/${api-name}というAPIパス形式でアクセスできます。Next.jsがフルスタックのWebアプリケーションフレームワークであると考える理由は、このAPI構築のサポートにあります。Next.jsのWeb APIサポートについては、こちらをご覧ください。 APIルートのドキュメント.

• などのサブディレクトリ内のアプリケーションページ。 meetingまたは therapies.エンドユーザーは/meetingや/therapiesのパスにあるアプリページにアクセスできます。Next.jsはネストされたルートとダイナミックルーティングをサポートします。つまり、次のような変数を使用してページファイル名を設定できます。 [id].jsディレクトリ内で therapies/[detail]ディレクトリ内のような変数を使用してページファイル名を設定でき、ユーザーは /therapies/{therapyCategory}/{therapyId}で利用可能なすべてのセラピストに関する詳細情報を取得できます。Next.jsのページについては このドキュメント.

1. src/componentsディレクトリにある：

このディレクトリには、アプリケーションページのヘッダー、フッター、カスタムボタンなど、アプリで使用するすべてのWebコンポーネントが定義されています。Next.js UIコンポーネントはReactコンポーネントと似ていますが、次のようなUIコンポーネントのカスタムサポートが追加されています。 リンクまたは 画像.

1. utilsディレクトリにある：

このディレクトリには、セラピー・アプリケーションが使用するユーティリティの機能が実装されています。現在 phone.jsこれは、ユーザーが特定の時間にミーティングイベントを作成したことを通知し、セラピストがユーザーと話すことができるようにミーティングビデオへのリンクを含むSMSメッセージをアプリケーションがセラピストに送信することを可能にします。

1. dataディレクトリにある：

このディレクトリには、アプリケーションが使用するすべてのデータが格納されます。現在 data.jsonファイルにはセラピストの名前や予約可能な時間などのセラピスト情報が保存されています。

最後に、アプリケーションのロゴ用の画像や、アプリケーションのGUI（グラフィカル・ユーザー・インターフェイス）を向上させるためのCSSファイルなど、その他のファイルがあります。

ステップ3：アプリのビデオ通話を有効にする

このアプリでVideo通話を有効にするには、以下の3つのオプションがあります：

• 使用方法 ビデオSDK

• を使用する ビデオチャットを埋め込む

  • Iframeオプションを使用する

  • Javascriptオプションを使用する

本番環境では、Vonage Video SDKオプションを使用する必要があります。このオプションを使用すると、サーバーSDKとクライアントSDKを別々に設定し、ビデオサポートの実行方法をより詳細に制御することができます。デモ・アプリケーションをシンプルに保つために、"Iframe "オプションを使用してビデオ通話機能を有効にしてみましょう。

ログイン Vonage Video Accountページにログインしてください。をクリックし、左側のパネルで "Projects "オプションを選択します。

Video Projects

Create New Project "を選択し、"Create Embed Project "ボタンをクリックする。

Create Embed Project

次に、プロジェクト名とウェブサイトのURLを設定します。本番環境では、アプリの登録ドメインと一致するウェブサイトURLを指定する必要があります。アプリケーションはローカル環境でのみビルドするので、ウェブサイトのURLを http://localhost:3000.

Configure Setting

次へ」ボタンをクリックし、Iframeが生成したコードを安全な場所にコピーする。

の中に embedCode.jsonディレクトリ内に dataディレクトリ内にその中に embedCode.jsonの中に、以下の内容を追加する：

{
"embedCode":""
}

空白の値の中に、iframe が生成したコンテンツを入れます。JSONファイルの規則に合わせて、iframeが生成したコンテンツの特殊文字をエスケープすることを忘れないでください。

ファイルの内容は以下のようになる。 embedCode.jsonファイルの内容は以下のようになる：

{
	"embedCode": "<iframe src='https://tokbox.com/embed/embed/ot-embed.js?embedId=YOUR_EMBED_ID&room=DEFAULT_ROOM&iframe=true' width='800px' height='640px' scrolling='auto' allow='microphone; camera'></iframe>"
}

ファイル内の index.jsディレクトリ内の pages/meetingsディレクトリ内のファイルを見てください。このファイルはユーザーとセラピストがコミュニケーションできるようにミーティングページを実装しています。

const meetingData = data.replace('DEFAULT_ROOM', `meeting${meetingId}`);

上記のコードは DEFAULT_ROOMの値を、ランダムに生成された meetingIdに置き換えます。これにより、各ミーティングは他のミーティングとは別個になり、同じミーティングに何人ものユーザーが参加することにならなくなります。

<div id="ot_embed_demo_container" dangerouslySetInnerHTML={{__html: meetingData}}>
</div>

このコードでは meetingDataフィールドの中に dangerouslySetInnerHTMLフィールドに値が含まれています。Next.jsが埋め込みスクリプトをどのように処理するかについては このページ.

ステップ 4: SMS送信機能の有効化

SMS送信機能を有効にするには、現在の端末セッションに以下の環境変数を与える必要があります：

• VONAGE_SMS_BRAND: Vonage SMS Brandは、SMSメッセージに送信者の名前を登録するためのものです。本番環境では、アプリのVONAGE_SMS_BRANDを登録する必要があります。チュートリアルでは、この変数を VONAGE_SMS_BRAND変数を "Vonage Sample App "に設定します。Vonage SMS API の使い方と登録方法については VONAGE_SMS_BRANDの登録については SMS API ガイドライン・ページ.

• THERAPIST_PHONE_NUMBERこれはSMSメッセージを送信する受信者の電話番号です。実際のシナリオでは、それぞれのセラピストが自分の電話番号を持っているはずです。チュートリアルを簡単にするために THERAPIST_PHONE_NUMBERを受信可能な電話番号に設定してください。

• VONAGE_API_KEY`` andVONAGE_API_SECRET: Vonage SMS API を使って SMS メッセージを送信するには、Vonage API Key を提供する必要があります。の値を取得することができます。 VONAGE_API_KEYと VONAGE_API_SECRETの値は Vonage SMS API getting started page から取得できます。.

Windowsの場合、PowerShellを使って以下のコマンドで値を設定できる：

$env:VONAGE_SMS_BRAND = "Vonage Sample App"
$env:THERAPIST_PHONE_NUMBER = "your_therapist_phone_number"
$env:VONAGE_API_KEY = "your_vonage_api_key"
$env:VONAGE_API_SECRET = "your_vonage_api_secret"

ステップ5：アプリケーションを立ち上げる

アプリケーションが必要とする依存関係をインストールする必要がある：

そして、ローカル・マシンでアプリケーションを立ち上げるには、以下のコマンドを実行する：

サーバーは以下のようにポート3000で起動する。

> therapist-mental-health-app@0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

ブラウザを開き、このURLに移動してください： http://localhost:3000.アプリケーションのホームページが表示されるはずです。

Therapist Home Page

メニューの "セラピー "ボタンをクリックすると、セラピーの全種類が表示されます。

Therapies Page

認知療法」をクリックすると、「認知療法」カテゴリーに含まれるすべてのセラピストが表示されます。

Therapy Cognitive Page

ここでは、"Anna Maria"、"Jennifer Great"、"Jessica Tart "という3人のセラピストが表示されています。Anna Maria "を選んでビデオ通話を予約してみましょう。

Book a Meeting Form

ここで、いくつかの時間帯のオプションが表示されます。時間を「02-05-2023 10:00」と選択し、Eメールと電話番号を入力してください。送信」ボタンをクリックしてください。

Book a Meeting Successfully

をクリックすると、ミーティングへの登録が完了したことが表示されます。 therapist-1.また、以下の内容のSMSメッセージが送信されます：

A user has booked a meeting with you. The meeting time is : ${therapyTime}. The meeting link is : http://localhost:3000/meetings?meetingId=${meetingId}

注意既に存在する同じ電話番号を使用して登録し、「この電話番号xxxは既に登録されています」というエラーメッセージが表示された場合は、以下の方法で電話番号を削除します：

• の中の data.jsonという名前の dataディレクトリ

• 電話番号検索

• phoneNumbers_registered」リストから削除する。

• ファイルを保存する

セラピストはミーティングリンクを保存し、予定されたミーティング時間にビデオミーティングに参加することができます。

会議の時間が今だとします。ミーティングに参加」ボタンをクリックすると、ミーティング・ビデオにアクセスできます。

Meeting Therapist

クリックしてビデオチャットを開始」をクリックすると、セラピストとのビデオミーティングに参加できるようになります。

結論

この記事では、Next.jsフレームワークとは何か、なぜNext.jsフレームワークを使ってアプリケーションを構築すべきなのかを学びました。また、Vonage Video APIサポートのおかげで数行のコードを追加することで、Next.jsアプリケーションでVideo Callを有効にする方法と、Vonage SMS APIを使用してSMS通知機能を適用する方法を学びました。Vonageプラットフォームの他のテクノロジーについてもっと知りたい方は Vonage開発者ホームページ.