メニュー

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?

Node.jsおよびVue.jsを使用したブラウザー通話

これは何をするのでしょうか?

このアプリケーションではTwilio Clientを使用してブラウザーから電話をかけることができます。

これにはブラウザーフォンに期待される他のいくつかの標準機能も含んでいます。

  1. マイク入力の消音と消音解除
  2. HTMLプッシュボタンを使用してDTMFトーンを送信する

このチュートリアルでは、本アプリケーションを動作させるにあたっての核となるコードに着目します。実際にコードを実行する方法については、GitHub上のプロジェクトのREADMEをご確認ください

はじめましょう!

右記のものを作成する - Twilioアプリケーション

このアプリケーションは通話の発信にTwilioアプリケーションが必要となり、本手順ではその作成方法についてご紹介します。

TwiML Appを作成するには、Consoleを開いて「新規TwiML Appを作成する」ボタンをクリックします。

すべてのTwiMLアプリケーションには、フレンドリーネーム(私たちは "Browser Dialer" と呼んでいます)と、VoicURLまたはMessaging URLが必要です。ユーザーに通話を発信してもらいたいので、アプリケーションに「/voice」ルートというURLを使用することにします。

メモ: アプリケーションをローカルで実行する場合、開発環境用に外部からアクセス可能なURLを取得できるngrokのようなツールを使用できます。

ケイパビリティートークンを生成する

ケイパビリティートークンを生成する

ユーザーがブラウザー内で通話を発信できるようになる前に、それらに対してケイパビリティートークンを作成することが必要です。

ケイパビリティトークンを使用して、Twilio Client上でエンドユーザーができること、できないことを正確に制御することができます。 今回は、全ユーザーに発信通話を可能にするトークンをサーバーから払い出すことにします。

Twilio Nodeヘルパーライブラリーを使用してケイパビリティートークンを生成、構成します。

        
        
        
        
        index.js

        Twilio.jsクライアントが通話の発信、メッセージの送信、その他の色々なイケてる機能を使い始められるようにするには、そのための資格情報が必要になるのです。 Twilio.jsクライアントは、クライアントが初期化され、Twilio APIの使用開始の準備ができた時点で/tokenルートからトークンをリクエストすることが必要です。 続いて、ブラウザー内でTwilio Deviceをセットアップしましょう。

        Twilio Deviceの作成方法を学ぶ

        Twilioデバイスをセットアップする

        今回のクライアント側コードでは、Twilio.jsライブラリーのインクルードから始めます。

        続いて、/tokenルートからjQueryを使用してPOSTリクエストでケイパビリティトークンを取得します。

        最後に、トークンをTwilio.Device.setup()に渡してセットアップを完了します。

        The Twilio.Device.ready() callback is used to notify us when the device is ready to make calls.

              
              
              
              
              public/dialer.js

              Setting up the Twilio Device was easy since the /token route simplifies authorization. Now that the Twilio Client is initialized, let's see how to start an outbound call.

              通話の発信方法を学ぶ

              通話を発信する

              これでTwilio Clientの準備は完了したので、ユーザーは通話の発信を始めることができます。 かけたい発信先の電話番号を入力して開始します。

              電話番号をTwilioに渡す前にその入力を管理し、「+」記号を付加し、それから国番号、そして電話番号本体を追加します。 これはE.164形式と呼ばれ、TwilioのAPIの大部分に必要です。

              続いて、Twilio.Device.connect()を使用して通話を発信します。 Twilioは開発者のTwilioアプリケーション構成で指定されたURLにリクエストを送信し、通話の処理方法についての指示を探します。

              今回はconnect()呼び出しに、ユーザーがダイヤルしたい電話番号を含め、続いてこちらのサーバー側コード内からそれにアクセスします。

                    
                    
                    
                    
                    public/dialer.js

                    通話トグル

                    public/dialer.js

                    ご覧いただいたように、通話の接続と切断はいたってシンプルです。 続いて、Clientがアクティブな通話をミュート、およびミュート解除できるようにしましょう。

                    アクティブな通話をミュートおよびミュート解除する

                    アクティブな通話の消音と消音解除

                    現在の通話を消音または消音解除したり、ユーザーのマイクからの入力を中断したりしたいことがあるでしょう。

                    We can use Twilio.Device.activeConnection() to get the active call, and then call its mute() method to mute or unmute the user's microphone.

                          
                          
                          
                          
                          public/dialer.js

                          ミュートトグル

                          public/dialer.js

                          Now you have an idea of how simple it is to use the Twilio Client in the browser. There are much more features to explore. Next, let's allow the user to send DTMF tones, in case they are calling an automated phone system.

                          DTMF信号のはたらきを知る

                          DTMFトーンの送信

                          ユーザーが自動応答システムに電話をかけたとき、電話きのプッシュボタンとDTMF信号を使用して、メニューシステムを辿っていくことが必要になる場合があります。

                          DTMFは「Dual-tone multi-frequency signaling」の略で、電話の発信時に聴かれるお馴染みのあの音のことです。 DTMFは標準化されており、機械によって理解、復号することができます。

                          Twilio.jsクライアントライブラリーを使用してDTMFトーンを再生するには、単一の引数としてユーザーの入力した数字を渡すsendDigitsメソッドを使用します。

                                
                                
                                
                                
                                public/dialer.js

                                番号入力ハンドラー

                                public/dialer.js

                                As you have seen, sending DTMF tones in response to button clicks is straightforward. Lastly our clients may want to hang up a call. Let's see how we can do that next.

                                通話の切断方法を学ぶ

                                通話を切断する

                                これで、ユーザーは通話を終了できるはずです。

                                これを行うには、現在の通話を終了するTwilio.Device.disconnectAll()を使用します。

                                      
                                      
                                      
                                      
                                      public/dialer.js

                                      通話を切断する

                                      public/dialer.js

                                      一丁あがり! Twilio.jsを使用してユーザーにブラウザーから電話への通話をかけられるようにするアプリケーションを制作しました。

                                      関連トピック

                                      次はどこでしょうか?

                                      あなたがもしTwilioを使用するNode.jsの開発者の場合は、下記のチュートリアルもご活用いただけるでしょう:

                                      IVR: Node.jsおよびExpressを使用したフォンツリー

                                      IVR(interactive voice response:自動音声応答)システムで、発信者を適切な担当者および情報に簡単にルーティングできます。 

                                      Node.jsおよびExpressを使用したワンクリック通話

                                      クリックトゥコールはウェブトラフィックをボタンのクリック1つで、電話のトラフィックに変換します。

                                      これは役に立ちましたか?

                                      このチュートリアルをお読みいただき、ありがとうございます。 弊社に知らせたいフィードバックがある場合は、Twitter経由で英語でご連絡ください。 喜んでお話を伺います。

                                      Kevin Whinnery Jose Oliveros Kat King David Prothero Hector Ortega Samuel Mendes Carlos Villavicencio
                                      Rate this page:

                                      ヘルプが必要ですか?

                                      We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.