※2021年12月現在のAPI仕様と個人的な好みの関係で、Client SDKのReceiving an in-app voice callをアレンジした内容になっています。最新情報は公式ドキュメントをご覧ください。
必要なもの
Vonage API Key（作成する）
client-sdk-tutorials
Node.js
Expressjs
localtunnel
rbenv や goenv に慣れてる方だと、Node.jsのバージョン管理はnodenvが使いやすいかもしれないです。
Webサーバーの準備
git clone https://github.com/nexmo-community/client-sdk-tutorials.git
cd client-sdk-tutorials/phone-to-app-js
package.json を生成して、必要な依存関係をインストール
npm init -y
npm install express localtunnel --save
npm install nexmo-client --save
server.js ドメインを置き換える
- const subdomain = 'SUBDOMAIN';
+ const subdomain = 'onakasuita4649';
サーバー起動
node server.js
# 表示されたURLはアプリ作成で使用するのでメモしとく
App available at: https://onakasuita4649.loca.lt
アプリケーションの作成
Nexmo CLIでも操作可能ですが、個人的にダッシュボードの方が見やすかったです。
1) ログイン後「Create a new application」を押す
2) ①〜③を入力したら「新しいアプリケーションの作成」を押す
①好きなアプリケーション名を入力
②秘密鍵はあとでJWTの生成で使用
③Webhook URLを指定。回答URLはGET/イベントURLはPOST
作成したアプリケーションにVonage番号をリンク
画面下半分の番号一覧から、右側の「Link」ボタンを押す。
クライアントの準備
Admin用JWTの生成
公式ドキュメントではServer SDKでの紹介が多いですが、ここではJWT Generatorを使用します。
①先ほどの秘密鍵
②作成したアプリケーションのID
③期限
④生成されたJWT（①~③を入力すると自動生成されます）
ユーザー作成
ポイント
Admin用JWTを使用
SNGのデータセンターをエンドポイントに指定
curl -X "POST" "https://api-sg-1.nexmo.com/beta/users" \
-H 'Authorization: Bearer '生成されたAdmin用JWT\
-H 'Content-Type: application/json' \
-d $'{
"name": "Alice",
"display_name": "Alice"
}'
ユーザーIDがレスポンスに含まれていれば成功です。
{"id":"USR-xxxxxxxxxxxxx","href":"https://api-sg-1.nexmo.com/beta/users/USR-xxxxxxxxxxxxx"}
以下のレスポンスが返ってきた場合はJWTを生成し直すか、期限を見直すと改善するかもしれません。
{"description":"You provided an expired token. Please provide a valid token.","code":"system:error:expired-token"}
クライアントユーザー用JWTの生成
ここでもJWT Generatorを使用します。
赤枠がAdmin用から増えてる項目です。
subには先ほど作成したユーザー名を、ACL(詳細を見る)には以下の例のように入力します。
適宜必要なパスを指定しましょう。
{
"paths": {
"/**": {}
}
}
client_js.htmlのNexmoClient初期化部分を書き換える
書き換え前
new NexmoClient({ debug: true })
.login("PASTE ALICE JWT HERE")
.then(app => {
// ・・・（中略）・・・
生成したユーザー用JWTを貼り、ここもエンドポイントをSNGに指定します。
new NexmoClient({
nexmo_api_url: "https://api-sg-1.nexmo.com",
url: "wss://ws-sg-1.nexmo.com",
ips_url: "https://api-sg-1.nexmo.com/v1/image",
debug: true
}).login("生成したユーザー用JWT")
.then(app => {
// ・・・（中略）・・・
client_js.htmlをブラウザで開く
デベロッパーツールにsession:succssが表示されていればクライアントのログインが成功です。
これで準備が整いました。
着信に応答
アプリケーションに紐付けたVonage番号に発信します。
電話をかけるとデベロッパーツールにはmember:invitedが表示され
Webページ上には "You are receiving a call"が表示されます。
マイクの使用許可を求められたら、必ず「許可」を押してください。
Answerボタンを押せば着信に応答できるはずです。
通話を切断する場合はHang Upボタンを、応答前に切断したい場合はRejectを押しましょう。
お疲れさまでした。
補足
会話の概念を確認しておくと開発が捗ります。
inbound leg と outbound_leg を制御して自分側か相手側のどちらをミュートにしたいかなど
REST APIを利用して柔軟な実装もできそうです。
会話の概念
https://developer.vonage.com/ja/conversation/concepts/conversation
Voice API
https://developer.vonage.com/api/voice?theme=dark#updateCall
↧