Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8924

Twilioを使って、ブラウザで電話を受け取れるようにする

$
0
0

やること

Twilioのライブラリを利用して、電話の着信機能を作成します。
Twilioへの登録と、電話番号の取得が必要です。
以下がTwilio側とブラウザ側の処理の流れです。

:telephone_receiver:Twilio側の流れ

  1. Twilioが通話を受け取る
  2. Twilioが自動応答のシナリオ(TwiML)を返すAPIを呼び出す
  3. TwilioがTwiMLを読み取って、クライアント(ブラウザの着信者)を呼び出す

:desktop:ブラウザ側の流れ

  1. twilio-clientライブラリを使って、着信時の挙動を設定する
  2. クライアントのトークンを作成するAPIを呼び出す
  3. トークンを使って、着信を受け取れるようにする

APIのコードをかく: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:

↓コンソールはこれです
https://jp.twilio.com/console/

電話番号 / 番号の管理 / アクティブな電話番号 /の「A CALL COMES IN」にTwiMLを返すAPIを指定します。

クライアント側のコードをかく: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:ok_hand:

ちなみに、こちらから通話を切るときはdisconnectAll()を呼びます。

device.disconnectAll();

まだ機能が少ないので、ドキュメントをみて、諸々の機能を足していくといいかもしれません。


Viewing all articles
Browse latest Browse all 8924

Trending Articles