Twillioで発信通話をします
次のフロー図は、エージェントがFusionアプリケーションからアウトバウンド・コールを開始した後に実行される一連の操作を示しています:
- エージェントが電話番号をクリックしてFusionアプリケーションからアウトバウンド・コールを開始すると、
onOutgoingEvent
イベントが起動されます。 - メディア・ツールバー・アプリケーションの
onOutgoingEvent
イベント・リスナーは、このイベントを受信し、ダイヤルする電話番号を渡してTwiliodevice.connect
APIをコールしてアウトバウンド・コールを開始します。 - Twilioは、アウトバウンド・コールを開始し、
Call
オブジェクトを返します。 newCommEvent
アクションは、メディア・ツールバー・アプリケーションからコールされます。newCommEvent
アクションを受信すると、Fusionアプリケーションでダイヤル・パネルが表示されます
Twilioを使用してアウトバウンド・コールを行うには、Twilio Device
オブジェクトの接続メソッドをコールする必要があります。 このコードは、次のようになります。
const device = new Device(token);
let call = await device.connect({
params: {
To: '+15551234567'
}
});
この例では、Device
インスタンスのインスタンス化時に使用されたアクセス・トークンに関連付けたTwilioアプリケーションを使用して、新しい接続を作成する方法を示します。 このメソッドは、Call
オブジェクトを含むPromise
を返します。 このCall
オブジェクトを追跡して、アクティブなコールをモニターまたは変更できます。 ユーザー・アクションをリスニングするには、Call
オブジェクトのaccept
、disconnect
およびcancel
イベントをリスニングします。
次の例に示すように、VendorHandler
クラスのmakeOutboundCall
メソッドを更新できます:
public async makeOutboundCall(phoneNumber: string, eventId: string): Promise<void> {
const params = {
To: phoneNumber,
};
if (this.device) {
this.call = await this.device.connect({ params });
const callId = this.call.parameters.CallSid
this.call.on("accept", () => { this.integrationEventsHandler.outboundCallAcceptedHandler(callId) });
this.call.on("disconnect", () => { this.integrationEventsHandler.callHangupHandler(callId) });
this.call.on("cancel", () => { this.integrationEventsHandler.callRejectedHandler(callId) });
}
}
完全なコード
アウトバウンド・コールを開始するためのvendorHandler.ts
ファイルの完全なコードを次に示します:
import { Call, Device } from '@twilio/voice-sdk';
import { ICtiVendorHandler } from './ICtiVendorHandler';
import { IntegrationEventsHandler } from '../integrationEventsHandler';
export class VendorHandler implements ICtiVendorHandler {
private twilio: any;
private device: Device | null;
private integrationEventsHandler: IntegrationEventsHandler;
private call: Call | null;
public idAndToken: any;
constructor(integrationEventsHandler: IntegrationEventsHandler) {
this.twilio = (window as any).Twilio;
this.device = null;
this.idAndToken = null;
this.integrationEventsHandler = integrationEventsHandler;
this.call = null;
}
public async makeAgentAvailable(): Promise<void> {
this.idAndToken = await this.getIdAndToken();
this.device = new this.twilio.Device(this.idAndToken.token, {
logLevel: 1,
codecPreferences: ["opus", "pcmu"],
enableRingingState: true
});
let resolve: Function;
let reject: Function;
if (this.device) {
this.device.on("registered", () => {
console.log("Registration completed ...")
resolve();
});
this.device.on("error", (deviceError) => {
console.error("Registration Failed ...", deviceError);
reject();
});
this.device.on("incoming", this.incomingCallCallback);
this.device.register();
}
return new Promise((res: Function, rej: Function) => {
resolve = res;
reject = rej;
});
}
public incomingCallCallback = (call: Call) => {
this.integrationEventsHandler.incomingCallHandler(call.parameters.From, call.parameters.CallSid);
this.call = call;
}
public async makeAgentUnavailable(): Promise<void> {
let resolve: Function;
let reject: Function;
if (this.device) {
this.device.on("unregister", () => {
console.log("Successfully UnRegistered ...")
resolve();
});
this.device.on("error", (deviceError) => {
console.error("Failed to unregister ...", deviceError);
reject();
});
this.device.unregister();
}
return new Promise((res: Function, rej: Function) => {
resolve = res;
reject = rej;
});
}
public async makeOutboundCall(phoneNumber: string, eventId: string): Promise<void> {
const params = {
To: phoneNumber,
};
if (this.device) {
this.call = await this.device.connect({ params });
const callId = this.call.parameters.CallSid
this.call.on("accept", () => { this.integrationEventsHandler.outboundCallAcceptedHandler(callId) });
this.call.on("disconnect", () => { this.integrationEventsHandler.callHangupHandler(callId) });
this.call.on("cancel", () => { this.integrationEventsHandler.callRejectedHandler(callId) });
}
}
public async acceptCall(): Promise<void> {
if (this.call) {
this.call.accept();
}
}
public async rejectCall(): Promise<void> {
if (this.call) {
this.call.reject();
}
}
public async hangupCall(): Promise<void> {
if (this.call) {
this.call.disconnect();
}
}
private async getIdAndToken(): Promise<any> {
const headers: Headers = (new Headers()) as Headers;
headers.set('Accept', 'application/json');
const request: Request = new Request('https://twilio-voice-stream.com/token', {
method: 'GET',
headers: headers
}) as Request;
const idAndToken: Response = await fetch(request);
this.idAndToken = await idAndToken.json();
return this.idAndToken;
}
}
進捗の確認
これらのステップが終了したら、OJETサーバーを使用してアプリケーションを起動し、Fusionアプリケーションにサインインします。 メディア・ツールバーを開き、「エージェント可用性」ボタンをクリックしてエージェントをコールに使用できるようにします。 発信コールを開始するには、Fusionアプリケーションから担当者を開き、発信コールを開始する電話番号をクリックします。