メニュー

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Clientベストプラクティス

概要

Twilio Clientを使用すると、高品質な通話体験をWebおよびモバイルAppにダイレクトに構築できます。 Twilio Clientは、使い慣れたWebおよびモバイルの開発ツールでコンタクトセンター、セールスダイヤラー、peer-to-peer通話、およびその他の用途の構築に使用できる、JavaScript SDKを提供しています。

Twilio Clientを最大限活用するために、気をつけておくべき点がいくつかあります。 下記のベストプラクティスで、エンドユーザーはシームレスな通話体験が約束されます。 またこれらは、接続や通話品質の問題のトラブルシュートを容易にします。

To get the most out of this guide, use it in conjunction with Twilio Client quickstarts and documentation.

デバイスの状態が変化したときに、ユーザーにフィードバックを提供する

The SDK relies on events following the EventEmitter interface to control the calling experience. Alerting the user to an incoming call requires listening for the Device.on('incoming') event for example. Similarly, the SDK also provides events for monitoring the Twilio Client Device state.

これらのイベントを使用するデバイス状態がUIに表出する変更は、スムーズな通話と、極端に劣悪な通話とでしばしば異なります。

Device is ready for calls: .on('ready', handler)

The Device.on('ready') event is fired once the Device has been successfully setup using a valid capability token. Use this event to change a UI element, like a status indicator for example. This ensures the user is aware that your application is online and ready to start making and receiving calls.

Device is not available for calls: .on('offline', handler)

Similarly, it’s important to notify the user if your application goes offline at any point of time. Use the Device.on('offline') event to change the status indicator to offline to alert the user. This event is triggered if the connection to Twilio drops for some reason or if the capability token expires. You should also use this event to attempt to reconnect using Device.setup().

Something’s wrong: .on('error', handler)

このイベントをハンドルして、デバイスのエラーをスムーズに処理します。 このハンドラーによって出力されるエラーの全一覧については、こちらを参照してください。 発生頻度の高いエラーとしては、以下のようなものがあります:

  • ケイパビリティートークンに関するエラー。 トークンが失効または無効となったとき
  • アプリケーションのマイクへのアクセスをユーザーが拒否しました。 これを使用し、ユーザーにマイクへのアクセスを許可するよう指示することができます

無応答(no-answer)のシチュエーションを上手に処理する

また、オンラインであるにもかかわらずClientへの通話が無応答となる状況を上手に処理することもまた重要です。 これは。Clientがどのように通話に接続されたかによります。

<Dial>の使用

着信通話は、<Dial>動詞の<Client>名詞を使用してClientに接続できます。 この場合、ユースケースに最適な値をtimeout属性に設定するようにしてください。 また、action属性を使用してaction URLも構成してください。 通話が完了すると、TwilioはこのURLに通話の結果を含むこのようなパラメーターを伴ってリクエストを発行します。

REST APIの使用

REST APIを使用して、Clientを通話に参加させることができます。 これには、まずClientに対する通話の発信が伴います。 Clientが通話を取ると、Urlパラメーターが通話のセットアップに使用されるTwiMLを取得します。 REST APIの使用については、こちらからさらに詳しく触れられています。 ご使用のユースケースに最適なTimeoutをAPIに設定することが重要です。 Clientへの通話に指定できる最大値は60秒である点に留意してください。 StatusCallbackパラメーターを使用してステータスコールバックURLを構成し、StatusCallbackUrlパラメーターを使用して通話信仰イベントのWebhookを指定します。 こうすることで、通話の結果を知ることができます。

両方の場合において通話の結果が no-answer の場合、これを発信者に知らせることが重要です。 これを行う方法として、発信者を留守番電話に接続することが挙げられます。 <Record>動詞を使用して、留守番電話をセットアップできます。 通話に対する応答がないと、発信者は<Record>動詞を使用して留守番電話を残すためのTwiMLに接続されます。

Voice Inshgtsで通話品質を監視する

Voice Insights for ClientはClient通話に対する通話品質分析を提供します。 これにより、ジッター、平均オピニオン評点(MoS)、およびパケットロスといったような通話品質の統計履歴を取得できるREST APIを提供します。 また、通話品質が許容できるしきい値を下回った時にイベントを発生させるJavaScript SDKのコンポーネントも提供されます。 これを使用して、通話品質の問題についてリアルタイムにユーザーに通知することができます。

Voice Insightsはフロントエンド上で2種類のイベントを発行します - ネットワーク警告と音量警告です。

  • ネットワーク警告は、4つの指標として表される通話品質の低下が起こった際に発行されます - ラウンドトリップタイム(RTT = Round Trip Time)、平均オピニオン評点(MOS)、ジッター、およびパケットロスです。
  • 音量イベントはInsightsが音量が不変になったことを検出したときに発行されます。 これは問題の可能性もありますが、大抵はオーディオがマイクや入力デバイスでミュートされたことを表しています。

これらのハンドラーを実装してUI上に露出させることで、通話品質の劣化やオーディオ入力の問題についてユーザーに知らせることができます。 これはユーザーに、インターネット接続や入力デバイスのオーディオの確認などの改善措置を促すために使用できます。

Voice Insights for Clientを実装することで、事象のトラブルシューティングを大幅に容易にできます。 Console内のClient Insightsダッシュボードは、全Client通話にわたる通話品質メトリックスの集積を提供します。 これは、通話品質の統計トレンドを確認するのにとても有用です。 たとえば、特定のブラウザーバージョンを使用しているClientで品質の問題がより多く発生していることを確認できます。 また、通話のセットアップイベントも記録するので、通話の接続に関する事象の診断も行えます。 同一のデータは個々の通話に対しても使用可能になりました。

Voice Inshgtsについての詳細は、ドキュメントをご確認ください。 

通話環境を管理する

VoIPの通話品質はファイアーウォールの構成、ネットワークの状態や使用可能な帯域幅、ブラウザーのバージョン(WebRTCの場合)、OS、マイクとスピーカーのハードウェアなど、環境要因によって大きく左右されます。 アプリケーションを本番環境に移行させる前に、弊社のデプロイのベストプラクティス、および接続要件ドキュメントを確認してください。

If possible, you should also take advantage of the DSCP support enabled in Twilio Client 1.3 onwards. DSCP, or Differentiated Services Code Point allows packets to be tagged to prioritize them on the network. Browsers that support DSCP are capable of tagging call media packets sent by the Client in this manner. Your router or network element can then use these tags to prioritize call media packets over other traffic on the network. Also, note that your router or network element needs to also be DSCP-compliant.

DSCP is currently supported only by Google Chrome currently. For help setting DSCP on a Windows machine, please see this Zendesk article.

最寄りのTwilioデータセンターを使用する

Twilioはデータセンターをグローバルに展開しており、これには米国、アイルランド、ブラジル、シンガポール、東京、およびシドニーが含まれます。 Twilio Client Deviceをご使用環境の最寄りに接続することで、遅延を最小限に抑えることができます。 ClientをTwilioに接続する方法は2つあります -

  • Use Twilio’s Global Low Latency routing to let Twilio use latency-based DNS lookups to pick the closest data center. You can do this by omitting the ‘region’ parameter while calling Twilio.Device.setup().
  • Twilio.Device.setup()の呼び出し時に「region」パラメーターを使用して、強制的に地域を選択させます。 地域とそのIPアドレスの一覧を、こちらから探すことができます。 このアプローチは、すべてのTwilio Clientを同じ地域に展開する場合は理にかなっています。

Rate this page:

ヘルプが必要ですか?

誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。