Twilio を触ってみることになったので、理解のためにブラウザベースの電話アプリケーションのサンプルを作ってみました。
事前準備
事前準備として、以下のことを行う必要があります。
- Twilio アカウント作成
- Twilio 電話番号の購入
- Twilio プロジェクトの Account SID, Auth Token を確認
- Twilio API キーを生成し、API キーのSIDとSecretを確認する
- TwiML アプリケーション(TwilioにTwiML命令を返すエンドポイントの集合を管理するリソース)を作成する
- 購入した Twilio 電話番号に TwiML アプリケーションを設定する
用語等
Twilio の用語や、サンプルコードの中で使われている主な用語は以下のようなものです
TwiML
Twilio Markup Languageの略。 Twilio に処理を指示するためのXML構文。
TwiML アプリケーション
Twilio へ TwiML を返すエンドポイントの集合を管理するリソース。 Twilio の電話番号に設定することができる。
Twilio Client
Twilio に電話をかけたり、Twilio からの電話を受けたりするするためのライブラリ(SDK)。
環境構築
以下を元に環境構築を行います。
バックエンドエンド
まずバックエンドを起動します。
フロントエンド
フロントエンドを起動します。
確認
フロントエンドアプリケーションを起動すると以下のような画面が表示されます。
フロントエンド起動時に、まず初めにバックエンドからTwilioのJWTトークンを取得するAPIを呼び出してトークンを取得します。
発信着信
最初は何となく直感的に、通話は相手との1対1になるのかと思っていましたが、そうではなく着信・発信共に Twilio を経由することになります。 発信元、発信先の電話番号は Twilio のものとなり、着信・発信の場合にいずれも Twilio がそれぞれの電話番号にリクエストを送ります。
着信の流れ
ユーザーが Twilio 番号へ発信した場合、Twilio が着信を受け付けます。
Twilio は TwiML アプリケーションに設定されているエンドポイントにリクエストを送ります。
エンドポイントは TwiML をレスポンスとして返し、TwiML の内容に従って Twilio が処理を行います。
例えば、TwiML の
発信の流れ
発信する場合、まず、Twilio クライアントを初期化し、Twilioからのアクセストークンを取得して、それを元に Twilio とのコネクションを確立します。
たとえばブラウザ(Twilio クライアント)から相手の電話番号へ発信した場合、Twilio が発信リクエストを受け付けます。
続いて、 TwiML アプリケーションに設定されているエンドポイントにリクエストを送ります。 この時、アクセストークン生成時に、発信用 TwiML アプリケーションの SID を ApplicationSid としてセットしておくことで、その TwiML アプリケーションが用いられます。
jwtToken := jwt.CreateAccessToken(params)
voiceGrant := &jwt.VoiceGrant{
Incoming: jwt.Incoming{Allow: true},
Outgoing: jwt.Outgoing{
ApplicationSid: applicationSid,
},
}
