Twilioブログ

【重要】Twilio Client JS 1.4 SDK と Chrome 66 の組み合わせで起こる音声不達について

masamitsu.saito

Twilio Client JS 1.4 SDK をご利用のアプリケーションが、直近の Chrome アップデートであるバージョン 66 で影響を受ける可能性があります。

以下のご案内に沿って、ご利用のアプリケーションがこの影響を受けるか否かのチェックと、この影響を回避する方法をご確認ください。

影響内容

2018/4/17 に Stable版としてリリースされた Chrome 66 では →Autoplayポリシー が強化されました。Chrome はメディアの参照履歴を保存し、各サイトを訪れるたびに Media Engagement Index(MEI) を計算します。Chrome は、この MEI が最低スコアに達しない場合、ユーザージェスチャーがページに登録されない限り、AudioContextを通じたオーディオ再生を許可しません。

Twilio Client JavaScript 1.4 SDK は、クライアント側のオーディオ(着信音・発信音・切断音・DTMF等) を再生する際 AudioContext を使います。

Chrome の →MEIスコア は過去の閲覧履歴をベースに算出にしているため、該当のTwilioアプリケーションを初めて使うユーザーがこの影響を受けやすくなります。一方、普段から該当のTwilioアプリケーションを使っているユーザーは既にサイトに訪れて音声通信を行っているため、Chrome は該当のTwilioアプリケーションに対する MEIスコアを高くしており、音声の再生を許可しやすくなります。該当のTwilioアプリケーションの既存ユーザー・開発者・テスターといった方は、この影響を受けにくいといえます。

Chrome 66 を使いつつこの問題に対処するには、Twilio Client SDK のイニシャライズ過程をユーザージェスチャーが登録された後に限定することです。そうしないと、一部のユーザーは着信音や聞こえなかったり、現在の音量を通知するAPIコールの値が意図せず 0 として戻ったりします。

より詳しい情報については →Chromeバグトラッカー を参照してください。

該当するプロダクト

Twilio Client JS 1.3 とそれ以前のものは AudioContext を使っていません。よって、1.3以下のバージョンではこの影響を受けません。

Twilio Client JS 1.4 は以下で AudioContext を使っています:

・着信音/発信音/切断音/DTMF
Connection.volume()Device.audio.on('inputVolume') における音量の計測とレポート
Device.audio.speakerDevices.set()Device.audio.ringtoneDevices.set() による複数デバイスへのオーディオ分配

ゆえに、新規のユーザー等の高いMEIスコアを持たない人は、以下のような挙動になる可能性があります:

・着信音/発信音/切断音/DTMF が聞こえないためにコールを逃す
Connection.volume()Device.audio.on('inputVolume') における音量レポートが 0 になることでマイクが働かなかったり誤ったInsightsデータを受け取ったりする
・出力デバイスの設定がデフォルト以外である場合に失敗する

該当する・しないの判断方法

ボタンを押させる等といったユーザージェスチャー無しに Device.setup() でコールをするような物が影響を受けます。 Device.setup() をページ読み込みと同時に行うような仕組みだとその可能性は高まります。この時、ユーザーの画面に以下のようなエラーが表示されるかもしれません。

The AudioContext was not allowed to start. It must be resume (or created) after a user gesture on the page. https://goo.gl/7K7WLu

テストとして、chrome://media-engagement/ にアクセスして自身のMEIスコアを確認できます。この時、オーディオが自動再生されていることを示している場合、アプリケーションとのやり取りが MEIスコア を高くして、結果自動再生されていると判断することができます。

既に高いMEIスコアを持っている場合には、起動パラメータに
--user-data-dir=/path/to/new/location を指定してChromeを起動すればMEIスコアをリセットすることができます。これにより、MEIスコアを持たない状態を再現可能です。

TODO

新しいChromeの要求を満たすためには、アプリケーションが Device.setup() を呼ぶのをユーザージェスチャーの後にします。例えば「準備OK」といったボタンを押させるという手法です。AudioContext は Device.setup() の中でセットアップされます。つまり、ユーザージェスチャーの後 もしくは ユーザージェスチャーに応答してから Device.setup() が呼び出されるようにすれば、全てがスムーズに実行されます。

例:

<button id="ready-button">I'm ready</button>
document.getElementById('ready-button').addEventListener('click', function()
{
var device = Twilio.Device.setup(token);
document.getElementById('ready-button').style.display = 'none';
// Proceed to set up listeners on device, etc...
});

また、暫定の応急対応として、

・Insightsを使わない
・音量インジケーターを使わない
・オーディオ出力選択を使わない

が挙げられます。Device.setupdisableAudioContextSounds: true を渡すことでクライアント側音声をすばやく復旧できます。

Twilio.Device.setup(myToken, {
disableAudioContextSounds: true
});

Safari の実装は、AudioContext に依存して音声が正常に再生されるため、もしアプリケーションを Safari で動かしているなら、ブラウザが Chrome だと検知したときだけ、このフラグを渡すようにしてください。

このブラウザ挙動を無効にできるか?

稀なケースですが、コンタクトセンターのシナリオや特定のエンタープライズ向けアプリケーションなどにおいて、全ユーザーのブラウザを制御できるような場合、Chromeでこの新しい挙動を無効にするために
autoplay-policy=no-user-gesture-required というフラグを設定します。 chrome://flags にアクセスし、自動再生を検索、自動再生ポリシーの設定をデフォルトから「ユーザージェスチャー無し」に変更してください。この設定を反映するにはブラウザの再起動が必要です。


9a1cc492d80598b936032ee928547fdc6aeb11355877403b1e73b1e3c2e20d691ef06a1f9b73a761707134b9e1192c2638cca96bdfba11133401fd0d7f9e761b.png ▲デフォルトの設定      ▼変更後

d229f9906ab4d00cf3d0aadb4daa00f779a9efca07f915654e5ea3239cda1e0708c10baa081a2eafdeaaf53f7ae824139c69cad7b8296aacfb595d9e8ba5af58.png

Facebook コメント