ども@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 の設定次第で、着信音の動作が変わるようです。試しに disableAudioContextSounds
を true
にセットしました。この設定は、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」を、デフォルト値の「手動」ではなく、スタートアップの種類を「自動」に設定する必要があります。
上記リンク先の手順は、コマンドから叩くエンジニア向けの方法です。本記事では、より一般ユーザーでもわかりやすい設定方法をご紹介します。
- Windows を起動後、左下メニュー > Windows 管理ツール > サービス > たくさんあるリストの中から "Quality Windows Audio Video Experience" を選択。
- 状態を 自動 に設定します。
私が5つくらいのWindowsで確認しましたが、基本的に通話が始まれば、自動で "自動" に変わっていました。ただ、最初の通話で音質に影響が出るかもしれないということで、基本的に自動に設定することには価値があると考えます。
Windows で通話品質が悪いという場合、試してみてはいかがでしょうか。
※ なお、Zendesk Talk のヘルプページは他にもいいことが書かれています。
- レイテンシ, ジッター、パケットロス の詳しい説明
- 有線インターネット環境の推奨
- 通話音質に問題がある場合、まず アプリケーションを閉じること Netflix, Spotify, YouTube, etc.
長らく Twilio Voice JavaScript SDK と触れ合っている私からすると、「そうですよね、そうですよね」のオンパレードです。
終わりに
今年、音質周りの問題で対応してみた項目2つをご紹介しました。
Twilio Voice JavaScript と本気で付き合っていくと、音質は常々起こる問題となります。
まずは、インターネットのスピード、ちゃんとしたヘッドセット、軽いPC の 3 Topです。しかし、それらを満たさない環境でも、できる限り音質を良くさせる努力が、運営者側として必要となります。
本記事がその参考の一つになれば幸いです。