Twilioの着信コールの切断または拒否

コール承認、拒否、切断、ミュートなどのコール関連のすべての操作は、コール・オブジェクトで実行する必要があります。 call.disconnect()関数を使用してコールを切断し、call.reject() 関数を使用してコールを拒否します。

コール切断は、次の3つの方法のいずれかで実行できます:

エージェントは着信コールを拒否します(コールが受け入れられる前)。
会話が完了すると、エージェントはコールを切断します。
顧客がコールを切断します。

シナリオ1: エージェントは着信コールを拒否します(コールが受け入れられる前に)

次のフロー図は、エージェントがFusionまたはメディア・ツールバー・アプリケーションからのコールを拒否した後に実行される操作の順序を示しています:

Twilioの拒否着信コール・シナリオ。

エージェントは、Fusionアプリケーションまたはメディア・ツールバー・アプリケーションからのコールを拒否できます。エージェントがFusionアプリケーションの「拒否」ボタンをクリックすると、onToolbarInteractionCommandイベントがrejectのコマンドで起動されます。
パートナ・アプリケーションは、このイベントを受信し、イベントがコールをrejectする場合、Twilio APIへの拒否コールが行われます。
CTIサプライヤがパートナ・アプリケーションにコールが拒否されたことを通知すると、パートナ・アプリケーションはcloseCommEventアクションをREJECTとして起動できます。
Fusionアプリケーションがこのアクションを識別すると、コール・ダイアログはUIから破棄されます。

着信イベント中に、Twilio.Callオブジェクトがイベント・ペイロードに含まれます。次の例に示すように、call.reject()関数を使用してコールを拒否できます:

public async rejectCall(): Promise<void> {
        if (this.call) {
            this.call.reject();
        }
    }

シナリオ2: 会話が完了すると、エージェントはコールを切断

次のフロー図は、エージェントがFusionまたはメディア・ツールバー・アプリケーションからコールを切断した後に実行される一連の操作を示しています:

エージェントは、Fusionアプリケーションまたはメディア・ツールバー・アプリケーションからのコールを拒否できます。エージェントがFusionアプリケーションの「拒否」ボタンをクリックすると、onToolbarInteractionCommandイベントがdisconnectのコマンドで起動されます。
パートナ・アプリケーションは、このイベントを受信し、イベントがコールをdisconnectする場合、Twilio APIへの拒否コールが行われます。
CTIサプライヤがパートナ・アプリケーションにコールが拒否されたことを通知すると、パートナ・アプリケーションは、理由がHANGUPのcloseCommEventアクションを起動できます。
Fusionアプリケーションは、このアクションを識別すると、UIにラップ・アップ・ウィンドウをレンダリングします。

次の例に示すように、incomingイベント・ハンドラで受信したコール・オブジェクトで、切断および拒否イベント・リスナーを追加できます:

public incomingCallCallback = (call: Call) => {
    this.integrationEventsHandler.incomingCallHandler(call.parameters.From, call.parameters.CallSid);
    this.call = call;
    this.call.on("cancel", () => { this.integrationEventsHandler.callRejectedHandler(call.parameters.CallSid) });
    this.call.on("disconnect", () => { this.integrationEventsHandler.callHangupHandler(call.parameters.CallSid) });
    this.call.on("reject", () => { this.integrationEventsHandler.callRejectedHandler(call.parameters.CallSid) });
}

シナリオ3: 顧客はコールを切断

次のフロー図は、顧客がコールを切断したときに実行される一連の操作を示しています:

顧客がコール・シナリオを切断します。

顧客がコールを切断すると、Twilioはdisconnectedイベントを起動します。
拒否イベントおよび切断イベントに対して、メディア・ツールバー・アプリケーションにイベント・リスナーを追加する必要があります
closeCommEventアクションは、メディア・ツールバー・アプリケーションから、理由がREJECTまたはWRAPUPとして起動されます。
Fusionアプリケーションは、このアクションを識別すると、UIにラップ・アップ・ウィンドウをレンダリングします。

次の例に示すように、incomingイベント・ハンドラで受信したコール・オブジェクトで、切断および拒否イベント・リスナーを追加できます:

public incomingCallCallback = (call: Call) => {
    this.integrationEventsHandler.incomingCallHandler(call.parameters.From, call.parameters.CallSid);
    this.call = call;
    this.call.on("cancel", () => { this.integrationEventsHandler.callRejectedHandler(call.parameters.CallSid) });
    this.call.on("disconnect", () => { this.integrationEventsHandler.callHangupHandler(call.parameters.CallSid) });
    this.call.on("reject", () => { this.integrationEventsHandler.callRejectedHandler(call.parameters.CallSid) });
}

完全なコード

呼出しを切断するための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;
        this.call.on("cancel", () => { this.integrationEventsHandler.callRejectedHandler(call.parameters.CallSid) });
        this.call.on("disconnect", () => { this.integrationEventsHandler.callHangupHandler(call.parameters.CallSid) });
        this.call.on("reject", () => { this.integrationEventsHandler.callRejectedHandler(call.parameters.CallSid) });
    }
    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> {
        throw new Error('Method not implemented.');
    }
    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アプリケーション・ウィンドウで受信します。メディア・ツールバー・アプリケーションから、またはFusionアプリケーションから、またはSoftphoneアプリケーションからコールを受け入れることができます。コールを受け入れると、メディア・ツールバーの状態がACCEPTED状態に変わり、エンゲージメントがFusionアプリケーションで開きます。通話は、メディア・ツールバー・アプリケーションから、またはFusionアプリケーションから、またはソフト・フォンから切断できます。コールを切断すると、メディア・ツールバーの状態がDISCONNECTED状態に変更されます。