やること
Twilioのライブラリを利用して、電話の着信機能を作成します。
Twilioへの登録と、電話番号の取得が必要です。
以下がTwilio側とブラウザ側の処理の流れです。
![:telephone_receiver:]( ":telephone_receiver:")
Twilio側の流れ
Twilio側の流れ- Twilioが通話を受け取る
- Twilioが自動応答のシナリオ(TwiML)を返すAPIを呼び出す
- TwilioがTwiMLを読み取って、クライアント(ブラウザの着信者)を呼び出す
![:desktop:]( ":desktop:")
ブラウザ側の流れ
ブラウザ側の流れ- twilio-clientライブラリを使って、着信時の挙動を設定する
- クライアントのトークンを作成するAPIを呼び出す
- トークンを使って、着信を受け取れるようにする
APIのコードをかく![:muscle:]( ":muscle:")
node.jsで書きます。前もってtwilioパッケージをインストールしときましょうnpm i twilio
TwiMLを返すAPIを用意する
expressを使っています。ざっくり書きます。
import{twiml}from"twilio";importexpress=require("express");// expressを利用constapp=express();app.route("/incoming").post((req,res)=>{constvoice=newtwiml.VoiceResponse();// ここに設定していくvoice.say("hello");// 音声を再生voice.say({voice:"Polly.Mizuki",language:"ja-JP"},"日本語でおk");// 日本語で再生(voiceなどは設定可能)voice.pause({length:1});// 1秒待つ// クライアント名を指定して電話をかけるvoice.dial({callerId:req.body.From||"",ringTone:"jp"})// オプション.client("[クライアント名]");constresponse=voice.toString();// TwiML(XML)を作成res.type("text/xml");res.send(response);// レスポンスを返す});クライアントのトークンを作って返すAPIを用意する
ざっくり書きます。
import{jwt}from"twilio";// capabilityに能力を足していくconstcapability=newjwt.ClientCapability({accountSid:"TwilioアカウントのSID",authToken:"Twilioアカウントのトークン",ttl:600,// トークンの有効期限。最大24H(86400)らしい});capability.addScope(newjwt.ClientCapability.IncomingClientScope("[クライアント名]"),);// 今は使わないが、外にかけるときに使う// capability.addScope(// new jwt.ClientCapability.OutgoingClientScope({// applicationSid: "TwilioAppのSID",// }));consttoken=capability.toJwt();// これを返すTwilioコンソールでAPIを登録する![:two_men_holding_hands:]( ":two_men_holding_hands:")
↓コンソールはこれです
https://jp.twilio.com/console/
電話番号 / 番号の管理 / アクティブな電話番号 /の「A CALL COMES IN」にTwiMLを返すAPIを指定します。
クライアント側のコードをかく![:muscle:]( ":muscle:")
js(typescript)で書きます。JSフレームワークは好きなの選択。
前もってtwilio-clientをインストールしときましょう
(間違ってnpm i twilioをしないように気をつけてください。こっちはサーバ向けです)
デバイスのセットアップ方法を、ざっくり書きます。
import{Device,Connection}from"twilio-client";constdevice=newDevice();// ここに処理をのっけるdevice.on("incoming",(connection:Connection)=>{constonAccept=()=>{connection.accept();// 受け取る};constonReject=()=>{connection.reject();// 拒否る};openIncomingCallModal(onAccept,onReject);// Viewの部分はお任せ});その後、前に作った「クライアントのトークンを作って返すAPI」を呼び出して、トークンを取得します(コード略)。
トークンを受け取ったら、それを使ってデバイスをセットアップ。
device.setup(jwt);これでOK
ちなみに、こちらから通話を切るときはdisconnectAll()を呼びます。
device.disconnectAll();まだ機能が少ないので、ドキュメントをみて、諸々の機能を足していくといいかもしれません。