1. Computer Telephony Integration (CTI)の使用方法
  2. Twilioでエージェント可用性の切替えを設定
機械翻訳について

Twilioでエージェント可用性の切替えを設定

エージェントを使用可能または使用不可にするには、Twilio SDKのDeviceオブジェクトを使用する必要があります。 Deviceオブジェクトは、インバウンドおよびアウトバウンドのオーディオ接続に役立つようにTwilioと通信するソフト・フォンを表します。

概要

メディア・ツールバー・アプリケーションの「エージェントの可用性の切替え」ボタンをクリックして、エージェントが自分が使用可能としてマークされると実行される一連の操作の概要を次に示します:

トグル・エージェントの可用性を示す図。

  1. エージェントは、メディア・ツールバーのエージェントの可用性の切り替えボタンをクリックします。
  2. メディア・ツールバー・アプリケーションは、REST APIコールを起動してIDをフェッチし、認証に必要なトークンをフェッチします。
  3. Twilioサービスは、リクエストを認証し、IDおよびトークンを返します。
  4. メディア・ツールバー・アプリケーションは、このトークンを使用して、Twilio SDKによって提供されるデバイス・オブジェクトを初期化します。
  5. デバイス・オブジェクトがTwilioに登録されると、registeredイベントが起動します。
  6. メディア・ツールバー・アプリケーションで登録済イベントを受信すると、エージェントの状態を使用可能にするためのinvoke agentStateEvent UEF操作。
  7. フュージョン・アプリケーションがこのアクションを識別すると、Fusionアプリケーションでもエージェントの状態が「使用可能」になります。

VendorHandlerのmakeAgentAvailableメソッドを更新してサプライヤAPIをコールし、エージェントを使用可能にします

  1. 次のコードを使用して、vendorHandlerクラス(src/ts/cti/vendor/vendorHandler.ts)にメソッドを作成します:
    private async getIdAndToken(): Promise<any> {
    const headers: Headers = (new Headers()) as Headers;
    const url: string =  'https://twilio-node-voice-stream.com/token'; // Replace this url with the url of the deployed node app
    headers.set('Accept', 'application/json');
    const request: Request = new Request(url, {
        method: 'GET',
        headers: headers
    }) as Request;
    const idAndToken: Response = await fetch(request);
    this.idAndToken = await idAndToken.json();
    return this.idAndToken;
}
  2. 次のimport文を追加します:
    import { Call, Device } from '@twilio/voice-sdk';
import { ICtiVendorHandler } from './ICtiVendorHandler';
import { IntegrationEventsHandler } from '../integrationEventsHandler';
  3. 次に示すように、Twilio、deviceおよび idAndTokenに2つのクラス・プロパティを作成します: 
    export class VendorHandler implements ICtiVendorHandler {
    private twilio: any;
    private device: Device | null;
    private integrationEventsHandler: IntegrationEventsHandler;
    public idAndToken: any;
 
    constructor(integrationEventsHandler: IntegrationEventsHandler) {
        this.twilio = (window as any).Twilio;
        this.device = null;
        this.idAndToken = null;
        this.integrationEventsHandler = integrationEventsHandler;
    }
// ...
}
  4. DeviceOptionsを使用してデバイスをインスタンス化します: 
    const idAndToken = await this.getIdAndToken(); // get the id token
this.device = new this.twilio.Device(idAndToken.token, {
    logLevel: 1,
    codecPreferences: ["opus", "pcmu"],
    enableRingingState: true
});
  5. エージェントを使用可能にするには、次のようにデバイス・インスタンスでレジスタをコールします:
    this.device.register();
  6. 次のように、registeredイベントおよびerrorイベントを使用して、登録イベントの結果を取得します: 
    this.device.on("registered", () => {
    // Do your logic when registration is completed.
});
this.device.on("error", (deviceError) => {
    // Do your logic when the registration fails
});
  7. 次に示すように、vendorHandlerのmakeAgentAvailableメソッドを更新します:
    public async makeAgentAvailable(): Promise<void> {
    await this.getIdAndToken();
    this.device = 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.register();
    }
    return new Promise((res: Function, rej: Function) => {
        resolve = res;
        reject = rej;
    });
}
  8. 次に示すように、VendorHandlerのmakeAgentUnavailableメソッドを更新します:
    public async makeAgentUnavailable(): Promise<void> {
    let resolve: Function;
    let reject: Function;
    if (this.device) {
        this.device.on("unregistered", () => {
            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;
    });
}
  9. 完全なコードを表示します: 
    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;
    public idAndToken: any;
 
    constructor() {
        this.twilio = (window as any).Twilio;
        this.device = null;
        this.idAndToken = null;
        this.integrationEventsHandler = integrationEventsHandler;
    }
 
    public async makeAgentAvailable(): Promise<void> {
        const idAndToken = await this.getIdAndToken();
        this.device = new Device(idAndToken.token, {
            logLevel: 1,
            codecPreferences: [Call.Codec.Opus, Call.Codec.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.register();
        }
        return new Promise((res: Function, rej: Function) => {
            resolve = res;
            reject = rej;
        });
    }
    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> {
        throw new Error('Method not implemented.');
    }
    public async rejectCall(): Promise<void> {
        throw new Error('Method not implemented.');
    }
    public async hangupCall(): Promise<void> {
        throw new Error('Method not implemented.');
    }
 
    private async getIdAndToken(): Promise<any> {
        const headers: Headers = (new Headers()) as Headers;
        headers.set('Accept', 'application/json');
        const request: Request = new Request('https://twilio-node-voice-stream.com/token', {
            method: 'GET',
            headers: headers
        }) as Request;
        const idAndToken: Response = await fetch(request);
        this.idAndToken = await idAndToken.json();
        return this.idAndToken;
    }
}

進捗の確認

Fusionアプリケーションにサインインし、メディア・ツールバーを開きます。 メディア・ツールバー・アプリケーションから「エージェント可用性」ボタンをクリックします。 Fusionアプリケーションのボタンの色が変わり、電話アイコンのステータスが「使用可能」に変更されることがわかります。