ボクココ

個人開発に関するテックブログ

Twilio Voice での音質改善トライ 2022

ども@kimihomです。

このブログ記事は Twilio Advent Calendar 2022 の記事となります。

毎年、Advent Calendar の記事は「まとめ」の内容が多かったですが、今回は最近見つけてやってみた系の記事を記します。

着信音が遅くなる問題

本件は、Twilio Voice JavaScript SDK を利用した際に発生しました。TwiML にて、<Dial><Client> を指定したとします。

<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Dial callerId="+8150++++++++">
        <Client>joey</Client>
    </Dial>
</Response>

Twilio Voice JavaScript SDK を使い、正しくWebブラウザ上で電話の発着信ができるような環境があったとします。そして、Twilio Voice Audio にて、以下の要望を実現したとします。

  • 着信音はPCから鳴らす
  • 通話音はヘッドセットから鳴らす

ドキュメントには、以下の記載があります。

const device = new Device(token);

device.audio.ringtoneDevices.set('default'); // Set active device
device.audio.ringtoneDevices.set(['default', 'ABC123']); // Set active devices

上記の2つのデバイス指定を試すと、着信音がPCとヘッドセットそれぞれから鳴ることになります。

しかし、これは本来のゴールではありません。着信の時は「パソコンだけを鳴らす」ということがしたくなります。

device.audio.ringtoneDevices.set('ABC123'); // Set active device

Voice SDK は2.1.2では、この記載だけでは問題が発生します。着信音の再生が、ずっと鈍い着信音となってしまいました。

Twilio Voice JavaScript SDK は、ソースコードが公開されております。ソースコードを読んで、何が原因かを探ることにしました。

zip ダウンロードして、dist/twilio.js が、最終的に全てのJavaScriptコードを詰め合わせた完成品です。困ったときは、このソースコードを読むことで原因を特定できます。

着信音の設定周りのソースコードをひたすら読みました。そして一つ怪しい設定情報を見つけました。

for (var _a = 0, _b = Object.keys(Device._defaultSounds); _a < _b.length; _a++)
    var name_1 = _b[_a];
    var soundDef = Device._defaultSounds[name_1];
    var defaultUrl = C.SOUNDS_BASE_URL + "/" + soundDef.filename + "." + Device.
        + ("?cache=" + C.RELEASE_VERSION);
    var soundUrl = this._options.sounds && this._options.sounds[name_1] || defau
    var sound = new (this._options.Sound || Sound)(name_1, soundUrl, {
        audioContext: this._options.disableAudioContextSounds ? null : Device.au
        maxDuration: soundDef.maxDuration,
        shouldLoop: soundDef.shouldLoop,
    });
}

disableAudioContextSounds の設定次第で、着信音の動作が変わるようです。試しに disableAudioContextSoundstrue にセットしました。この設定は、Twilio Voice JavaScript に確かに記載があります。

const device = new Device(token, {
  disableAudioContextSounds: true
});

ドキュメントの disableAudioContextSounds を読むだけでは、決してわからないことでした。これで無事に着信時はPCだけを鳴らすで、音の乱れがなくなりました !

QWAVEで音質改善のトライ

Windows 限定で、QWAVE という設定があることをご存知でしょうか。 QWAVEとは、「音声アプリケーションのネットワークを保証することで、パフォーマンスと信頼性を向上させるもの」であり、Webブラウザでの通話を安定させる上で必須の設定項目となります。

なお、QWAVEに関して、Twilio ドキュメントでは掲載されていません。

please see this Zendesk article.

なんということでしょう。Twilio 利用企業の Zendesk 社側の記事を、Twilio ドキュメントで紹介しております。最初にこれを見た時は、驚きました。上記のリンク先は英語ですが、さすがZendeskさん。日本語でしっかりと翻訳されております。

DSCP に関して詳しく記載されています。そして下へ進むと、Quality Windows Audio Visual Experience(QWAVE) が登場します。

Windows オペレーティング システムを搭載したコンピューターを使用している場合、Zendesk Talk で問題が発生する可能性があります。 Zendesk Talk のお客様は、サービス「Quality Windows Audio Visual Experience」を、デフォルト値の「手動」ではなく、スタートアップの種類を「自動」に設定する必要があります。

上記リンク先の手順は、コマンドから叩くエンジニア向けの方法です。本記事では、より一般ユーザーでもわかりやすい設定方法をご紹介します。

  1. Windows を起動後、左下メニュー > Windows 管理ツール > サービス > たくさんあるリストの中から "Quality Windows Audio Video Experience" を選択。
  2. 状態を 自動 に設定します。

私が5つくらいのWindowsで確認しましたが、基本的に通話が始まれば、自動で "自動" に変わっていました。ただ、最初の通話で音質に影響が出るかもしれないということで、基本的に自動に設定することには価値があると考えます。

Windows で通話品質が悪いという場合、試してみてはいかがでしょうか。

※ なお、Zendesk Talk のヘルプページは他にもいいことが書かれています。

  • レイテンシ, ジッター、パケットロス の詳しい説明
  • 有線インターネット環境の推奨
  • 通話音質に問題がある場合、まず アプリケーションを閉じること Netflix, Spotify, YouTube, etc.

長らく Twilio Voice JavaScript SDK と触れ合っている私からすると、「そうですよね、そうですよね」のオンパレードです。

終わりに

今年、音質周りの問題で対応してみた項目2つをご紹介しました。

Twilio Voice JavaScript と本気で付き合っていくと、音質は常々起こる問題となります。

まずは、インターネットのスピード、ちゃんとしたヘッドセット、軽いPC の 3 Topです。しかし、それらを満たさない環境でも、できる限り音質を良くさせる努力が、運営者側として必要となります。

本記事がその参考の一つになれば幸いです。