Zenn
KWCPLUSPublicationへの投稿
🔰

Vonage Client SDK で実現するブラウザフォン

西嵜正
2024/07/24に公開
Vonage
cpaas
tech

はじめに

こんにちは。KDDI ウェブコミュニケーションズの西嵜(にしざき)です。

この記事では、Vonage でブラウザやスマホアプリからの通話やチャットを実現するための Vonage Client SDK を用いて、ブラウザで通常の電話(固定電話や携帯電話)との通話を実行可能なアプリケーション(いわゆるブラウザフォン)を構成します。

また今回は、Vonage 開発者向けチュートリアルで紹介されているアプリケーションを利用します。

本記事の対象となる読者

  • Vonage に興味のある方
  • Vonage を利用した、いわゆるブラウザフォンについて学びたい方

準備

この記事でご紹介する手順では、以下のものが必要となります。

  • Vonage アカウント
    • API キー(アカウントを開設すると、自動的に付与されます)
    • Vonage 電話番号
  • Node.js
    • 最新の LTS の利用を推奨します。
  • Vonage CLI
    • Vonage のさまざまな要素を操作するためのコマンドライン・インターフェースです。
  • インターネット接続環境
    • 手順の中で、Vonage システムから HTTP リクエストするためのサーバーアプリケーションを立ち上げるために必要となります。

手順

ソースコードの取得と設定

git clone git@github.com:Vonage-Community/tutorials-client_sdk-ios-android-js.git
cd tutorials-client_sdk-ios-android-js/app-to-phone-js
  • package.json を元に、Node.js の依存パッケージをインストールします。
npm install
  • ディレクトリ内の server.js をエディタで開き、以下の記述を変更します。
    • 電話番号については、MSISDN 形式で記述します。(先頭の「0」を除外し、代わりに先頭に国番号を付加します。日本の番号の場合は「81」です）
変更前)const subdomain = 'SUBDOMAIN';
変更後)const subdomain = 'vonage-app-to-phone';

変更前)const vonageNumber = 'NUMBER';
変更後)const vonageNumber = '(Vonage電話番号)';

サーバーアプリケーションの実行

  • server.js を実行します。これにより、サーバーアプリケーションの実行が開始され、外部からリクエスト可能な URL が設定されます。このサーバーアプリケーションは、通話の実行時に Vonage から HTTP リクエストさせるためのものです。
    • 実行した際に表示される URL は、後の手順で必要となるため、コピーしておいてください。
node server.js

Vonage CLI によるアプリケーションの構成

  • Vonage CLI をインストールします。
npm install -g @vonage/cli
  • Vonage CLI を用いて、Vonage アプリケーションを新たに作成します。
    • URL のドメイン部分は、先ほどコピーしておいたものを指定します。
    • 実行した際に表示される「Application ID」は、後の手順で必要となるため、コピーしておいてください。
vonage apps:create "Vonage Tutorial" \
--voice_answer_url="https://vonage-app-to-phone.loca.lt/voice/answer" \
--voice_event_url="https://vonage-app-to-phone.loca.lt/voice/event"
  • Vonage CLI を用いて、作成した Vonage アプリケーションに Vonage 電話番号を割り当てます。
vonage apps:link (上記でコピーしたApplication ID) --number="(Vonage電話番号)"
  • ユーザーを作成します。ユーザーとは、これから実行するブラウザフォンアプリケーションを一意に識別する名前のことです。
    • 作成したユーザー名は、後の手順で必要となるため、コピーしておいてください。
vonage apps:users:create "Alice"
  • JWT (JSON Web Token) を作成します。この JWT は、Vonage システムがブラウザフォンアプリケーションを認証、識別するために利用されます。
    • 実行した際に表示される JWT 文字列は、後の手順で必要となるため、コピーしておいてください。
vonage jwt \
--app_id=(上記でコピーしたApplication ID) \
--subject=Alice \
--key_file=vonage_tutorial.key \
--acl='{"/*/rtc/**":{},"paths":{"/*/users/**":{},"/*/conversations/**":{},"/*/sessions/**":{},"/*/devices/**":{},"/*/image/**":{},"/*/media/**":{},"/*/applications/**":{},"/*/push/**":{},"/*/knocking/**":{},"/*/legs/**":{}}}'

クライアントアプリケーションの起動と通話

  • ディレクトリ内のファイル client_js.html をエディタで開き、以下の記述を変更してから、保存します。
変更前)const token = 'ALICE_JWT';
変更後)const token = '(上記でコピーしたJWT文字列)';
  • client_js.html をブラウザで開きます。
  • テキストボックスに発信先となる電話番号を記入し、ボタンをクリックします。
    • ブラウザで、マイクの利用を許可するかどうかを確認するダイアログが表示された場合、「許可する」をクリックします。
  • 発信した電話番号に、取得した Vonage 電話番号から着信し、ブラウザフォンと電話との間で通話ができれば成功です。

まとめ

  • Vonage Client SDK を用いると、ブラウザやスマホアプリから Vonage での通話やチャットを実現できます。SDK は、JavaScript/iOS/Android 用が用意されています。
  • Vonage JavaScript Client SDK を用いると、ブラウザから Vonage での通話を実現できます。

参考記事

KWCPLUS
KWCPLUSPublication

株式会社KDDIウェブコミュニケーションズ Tech Blog

Discussion