ボクココ

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

最近の Twilio Client はココがすごい

ども、@kimihom です。 本記事は Twilio Advent Calendar 10日目の記事です。

f:id:cevid_cpp:20171206203748p:plain

今回は Twilio プロダクトの中でも Twilio Client に焦点を当てる。一応説明しておくと、Twilio Client はブラウザやスマホアプリ上で一般的な電話の受発信ができる技術のことだ。

私は常に Twilio Client の最新情報を追い続けてる立場なので、この機会に最近の Twilio Client の目玉機能について一気にご紹介する。

通話中の警告表示が可能に

Twilio Client で最も課題となるのが、通話品質の安定だ。一口に "通話が安定しない"と言っても、原因は多種多様で特定が困難な場合が多い。当然 Twilio 側もこの課題については把握しているようで、最近の Twilio Clinet は原因を見つけやすくする仕組みを多く提供してくれている。

その中で最も手軽な方法の一つが通話中の警告の表示だ。これは、Twilio Client で通話した時に渡される Connectionオブジェクトの warning イベントを補足することで取得できる。

Twilio.Device.connect(function (connection) {

    connection.on('warning', function(name) {
      switch(name) {
        case 'high-jitter':
        case 'high-rtt':
        case 'low-mos':
        case 'high-packet-loss':
          console.warn("インターネット接続が不安定です。");
          break;
        case 'constant-audio-input-level':
          console.warn("マイクが検出できません。");
          break;
        case 'constant-audio-output-level':
          console.warn("スピーカーが検出できません。");
          break;
        case 'ice-connectivity-lost':
          console.warn("通信が切断されました。");
          break;
      }
    });

});

これで通話中に例えば "インターネット接続が不安定です" と表示されれば、ユーザーは通話が途切れたとしてもインターネット接続が弱いことが原因だとすぐに理解することができる。これがわからないと何が原因だかわからない(PC? ヘッドセット? ネットワーク?)ので、問題の特定に時間がかかることになる。

このネットワーク周りの警告は、以前はそれなりに通話できる環境でも簡単に警告が発せられてしまったのだけど、最新の Twilio Client はだいぶうまくチューニングされているので、積極的に活用していくべきだと思う。

ice-connectivity-lost はドキュメントには載っていないけど、着信に対して複数 Client が同時に出た場合に稀に発生する警告で、この警告を取得してしまうと通話や今後の着信が一切受けられなくなる。本件はおそらく現時点(Twilio Client 1.4.25)での Twilio Client の1つのバグに近い動作なので、強制的にページを更新させることで対応している。

その他の通話品質の対策として Voice Insights ってのがある。これは正直今までは使い物にならなかったけど、最近のアップデートで強化されているみたい。一応紹介だけしておく。

Voice Insights Connectivity ダッシュボードのご紹介 | Twilio for KDDI Web Communications

着信音や発信音のデバイス切り替え

本機能は前から Twilio Client を使っているユーザーなら誰もが欲しいと思っていた機能のはずだ。

普通にヘッドセットを繋いで Twilio Client を利用していると、着信音もヘッドセットから鳴ってしまうので着信に気付きにくいという問題が発生する。この問題のために、今までは PC(OS) 側のサウンド設定でデバイスを切り替えたりするしか方法がなかった。

最新の Twilio Client では、着信音は PC 出力、通話音はヘッドセットといった切り替えが可能になっている。

Twilio.Device.audio.availableOutputDevices.forEach(function(device, id) {
  console.info('Available device:', id, '(labeled', device.label, ')');
});

まず上記で切り替え可能な発信音デバイスを取得することができる。例えば"内蔵" や "Sennheiser ~" といった Label と、ランダムな文字列の id だ。この id を Twilio.Device.audio.speakerDevices.set('id'); って感じにすると通話音デバイスの設定、Twilio.Device.audio.ringtoneDevices.set('id') ってすると着信音デバイスの設定が可能になる。

すごい簡単に実現できそうに見えるけど、実際に実装してみてわかったのは、設定途中にデバイスを抜き差しされた場合の対応や、ページをリロードされた場合の再セット方法など、色々と考えてやらないといけない部分がそれなりにある。 一番簡単なのはページに入るたびにデバイス選択のセレクトボックスが出てきて、それを選択すると設定が適用されるような使い方になる。

ちなみに本機能は現時点では Google Chrome のみのサポートとなっている。他のブラウザサポートは Twilio Client の Browser Compatibility を参照していただきたい。

着信音のカスタマイズ

Twilio Client で着信を受ける場合、着信音のデフォルトは「ちゃんちゃんちゃん♪」 といった音が流れる。これを普通の Brrrr 音にしたいっていう要望は少なからず出てくるだろう。

てことで最近の Twilio Client は着信音を独自に指定できるようになった。その方法は簡単で、 setup 時にそれぞれの音の URL を指定すれば OK。この mp3 は CDN に置くなど、できる限り早くダウンロードできる環境にしておいたほうが良さそう。というのも最初の着信の時に音声の読み込みが数秒かかっても取得できない場合は、着信音が鳴らない問題を引き起こす可能性があるためだ。ここで今まで何回かトラブったことがある。

Twilio.Device.setup(token, {
  sounds: {
    incoming: 'http://mysite.com/incoming.mp3',
    outgoing: 'http://mysite.com/outgoing.mp3',
    dtmf8: 'http://mysite.com/funny_noise.mp3'
  }
}

Safari 対応

つい先日、iOS の WebRTC 対応が WebRTC 業界を騒がせたことをご存知だろうか?この Apple の遅すぎる WebRTC 対応によって、ついに iPhone でも WebRTC が使えるようになった。しかし、その仕様がかなり独自めいたこともあり、最近の Twilio Client で Safari のための特別対応のリリースが施されている。

ただし、iPhone で Twilio Client(WebRTC) が使えるようになったからといって、完全に iPhone の電話アプリを Twilio Client にリプレースするにはまだ時間がかかる。とりわけ通話の着信を Twilio Client で受ける場合に、iPhone/Android はスリープが走ってしまうと意図も簡単に着信を受けることができなくなってしまうからだ。今後、Service Worker などの HTML5 の発展により解決されていくと思うが、Apple としては Web化ではなくネイティブアプリ化を断固として保持していく様子が見て取れるので時間がかかりそうだ。

In The Future...

最近の Twilio の動向を見ていると、エンタープライズ向けコールセンターで Twilio が使われるようになることを目指している傾向が強い。

  • TaskRouter によるオペレータースキルに応じた自動分配
  • Twilio Addons による WFM(ワークフォースマネジメント) や通話の統計分析
  • セキュリティの向上 (Twilio Interconnect)
  • Conference でのウィスパリング/モニタリング

個人的に特に注目しているのは Agent Conference だ。KWC さんがこの速報を記事として書いてくれたのでご紹介しておく。

Agent Conference 正式リリースのご案内 | Twilio for KDDI Web Communications

それなりにオペレーターを抱える規模になると、初心者オペレーターの通話をスーパーバイザーと呼ばれる管理人が通話に入り込み、適切なアドバイスや情報をリアルタイムで行いたいというケースが発生する。まさに Twilio は3者間通話を実現するための <Conference> 動詞があるのだが、これではスーパーバイザーの声も相手に丸聞こえってことで、課題があった。

AgentConference の "coach" オプションってのを使うと、カンファレンス内で特定のオペレーターのみささやく(ウィスパリング)ことができ、通話全体を聞く(モニタリング)ことができるようになる。

早速これを試してみたのだけど、 Twilio Client を利用することを想定した場合、まだ実用段階ではないと感じている。特に、1つの着信があった際に、最初からその着信の Dial 先を Client ではなく Conference にする必要があり(通話料の高騰)、しかも複数のオペレーターに対してその着信を鳴らした時に同時に接続してしまうと意図しない着信の出方(同時着信による意図しない3者間通話)が生まれてしまったりする。

色々調査したが、この対策は現状無いように見える。先ほどの Twilio Blog に今後の Conference の拡張について、モニタリング、指導、割り込み通話をTwiMLを使用することなくシームレスに切り替える, ブラウザーからカンファレンスを準備するためのSDK などが提供予定とある。なるほど、この問題は Twilio も同じように感じているようで、今後改善されていくようだ。

おまけ

実は Twilio Client 1.4.9 の デバイス選択の機能をリリース以降、通話を開始したのに着信音がなり続けるバグや、同時に複数県着信が来た時に着信音が二重でなったり他の Client が1つめの着信に出た後の残りの着信の着信音が聞こえなくなる といった問題を抱えていた。

そのため、上記の最新機能を利用することができていなかったのだけど、Twilio Client 1.4.22 でようやく解決され、現在は安定して利用することができる。この問題の再現やバグ修正の確認のために今まで何回 Twilio Client で着信を受けたのかわからなくなるほどだった。最新の Twilio Client を使い続けることはリスクであることも知っておくといいかもしれない。反対に積極的に Twilio Client のバグを踏んで Twilio へ報告しまくる気概のある方、ぜひ一緒に最新の Twilio Client を追い続けていきましょう。

ちなみに今回のような変更リリースは Change Log から見ることができる。Twilio Client をガチで使う場合には定期的にチェックして何が新しくなったのかを確認すると良さそうだ。

終わりに

Twilio の情報を共有するミートアップである Twilio Lounge が特別版として公開されている。LT 付きの年末豪華版なので、ぜひ参加して欲しい! 私からは "開発者から見た Twilio Signal 2017" として Twilio Client だけでない最新情報を共有したいと思う。

Twilio Lounge Vol.5 - TwilioForKWC(株式会社KDDIウェブコミュニケーションズ) | Doorkeeper


[宣伝] 本記事のように最新情報を追い続けている ブラウザ電話システム CallConnect があるので、こちらもよければチェックいただけると幸いだ。

www.callconnect.jp