Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now

メニュー

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?

C#およびASP.NET MVCを使用したブラウザー通話

This ASP.NET MVC web application shows how you can use the Twilio Client to make browser-to-phone and browser-to-browser calls.

このアプリケーションは、「王様のスポーツ」を楽しむ人達に用品を販売する Birchwood Bicycle Polo Co. のサポートサイトを動かします。3 つの主要な機能があります。

  • 悩みを抱えたお客様はサポートチケットを送信し、自分の電話番号と問題を知らせることができます。
  • サポート担当者は、サポートチケットに対応するために、ブラウザーからお客様の電話番号に電話をかけることができます。
  • また、お客様もブラウザーを使って、可能であれば、サポート担当者と直に話すことができます。

このチュートリアルでは、このアプリケーションを実行するための主要なコードをいくつか紹介します。コードを実行する方法については、GitHub のプロジェクトの README をお読みください。

ZendeskがTwilio Clientを使用して40を超える国々への電話サポートを実現する学びましょう。

はじめましょう!

サポートチケットを送信する

アプリのホームページには、お客様がサポートチケットを送信するためのフォームが表示されます。Razor Engine を使用してページを駆動します。

The Ticket repository itself has just a few fields, and the Create method is just a thin wrapper for:

private readonly BrowserCallsContext _context =
    new BrowserCallsContext();

public void Create(Ticket ticket)
{
    _context.Tickets.Add(ticket);
    _context.SaveChanges();
}
        
        
        
        
        BrowserCalls.Web/Controllers/TicketsController.cs

        チケットを作成する

        BrowserCalls.Web/Controllers/TicketsController.cs

        Now we can create a ticket. Next up, let's work on the dashboard for the support agent.

        サポートエージェント用のダッシュボードを作成する

        サポートエージェント用のダッシュボードを作成する

        サポートエージェントが /Dashboard を開くと、送信されたすべてのサポートチケットが表示されます。

        Each ticket has also a Call Customer button which invokes a JavaScript function we wrote named callCustomer(). That function kicks off a Twilio Client call to the phone number passed, using that phone number as its sole parameter.

              
              
              
              
              BrowserCalls.Web/Views/Dashboard/Index.cshtml

              サポートエージェントのダッシュボード

              BrowserCalls.Web/Views/Dashboard/Index.cshtml

              Great, now we have an interface good enough for our support agents. Next up, in order to let our agents make calls to their customers through the browser, we need to provide them a capability token.

              Let's learn how to generate a Capability Token

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

              ケイパビリティ・トークンの生成と構成に、twilio-C#ヘルパーライブラリーを使用します。 サポート担当者にチケットの電話番号にできるようにするには、OutgoingClientScope.を使用します。

              そのメソッドでは、TwiML アプリケーションの識別子が必要です。ユーザーが Twilio クライアントを呼び出すと、Twilio はバックエンドに POST リクエストを送信します。TwiML アプリケーションは、そのリクエストの送信先の URL を Twilio に伝えます。

                    
                    
                    
                    
                    BrowserCalls.Web/Domain/Twilio/Capability.cs

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

                    BrowserCalls.Web/Domain/Twilio/Capability.cs

                    ケイパビリティートークンが取得できたら、次のステップはブラウザー内でTwilio Device Clientをセットアップすることです。

                    JavaScriptに取り組み時がやってきました。

                    Set up a Twilio Device Client

                    ブラウザー内でTwilio Device Clientを使用するには、Twilio.jsライブラリーを使用します。

                    We start by retrieving a capability token from the view we defined in the previous step with a POST request through AJAX. Then we enable the Twilio Device Client for this page by passing our token to Twilio.Device.setup().

                    After that the Twilio.Device.ready() callback will let us know when the browser is ready to make and receive calls.

                          
                          
                          
                          
                          BrowserCalls.Web/Scripts/browser-calls.js

                          Twilio Deviceをセットアップする

                          BrowserCalls.Web/Scripts/browser-calls.js

                          これで必要なものはほぼ全て揃いました。 いよいよチュートリアルの核心部分を見てみましょう。 ブラウザーからエージェントが通話を開始できるようにする方法を見ていきましょう。

                          Call a customer's phone from your browser

                          顧客への通話発信(ブラウザーから電話へ)

                          When our support agents click on the Call Customer button on a support ticket, the function highlighted on the code snippet will initiate the call.

                          Twilio.Device.connect() を使って、新しい発信通話を開始します。バックエンドはTwilioにこの通話の処理方法を指示するので、Connectルートで使用するphoneNumberパラメーターを含めます。

                                
                                
                                
                                
                                BrowserCalls.Web/Scripts/browser-calls.js

                                顧客に架電する

                                BrowserCalls.Web/Scripts/browser-calls.js

                                お見事! これでエージェントが顧客に電話をかけられるようになりました。 続いて、通話を電話番号に接続する方法を確認しましょう。

                                通話を電話番号に接続する

                                通話を電話番号に接続する

                                Whenever one of our agents starts a call, Twilio will send a POST request to the URL we set on our TwiML Application - in this case /Call/Connect.

                                TwiML を使い、リクエストに応答し、その通話をどのように処理するか Twilio に指示します。Twilio は前のステップの phoneNumber パラメーターをリクエストに受け渡し、TwiML にダイヤルします。

                                      
                                      
                                      
                                      
                                      BrowserCalls.Web/Controllers/CallController.cs

                                      通話を電話番号に接続する

                                      BrowserCalls.Web/Controllers/CallController.cs

                                      After our Connect action method responds, Twilio completes the connection between our support agent's browser and the customer's phone.

                                      進行中の通話を示す方法を学ぶ

                                      発信中です

                                      We use the Twilio.Device.connect() callback to update some UI elements to notify our users that they are in a call. This function receives a Connection object, which offers some additional details about the call.

                                            
                                            
                                            
                                            
                                            BrowserCalls.Web/Scripts/browser-calls.js

                                            通話中であることを知らせる

                                            BrowserCalls.Web/Scripts/browser-calls.js

                                            これで、ブラウザーから電話への通話サンプルはおしまいです。 続いてさらにその先に進み、ブラウザー間のサンプルをお見せしましょう。

                                            顧客がブラウザーから通話を開始できるようにする

                                            サポート担当者に電話をかける(ブラウザーからブラウザー)

                                            サポートチケットは便利ですが、顧客がすぐにサポートを望む場合もあります。 ほんの少しの作業で、ブラウザー間通話でサポートエージェントと顧客がが直に通話できるようにします。

                                            When a customer clicks the Call support button on the home page we again use Twilio.Device.connect() to initiate the call. This time we don't pass any additional parameters — our backend will route this call to our support agent.

                                                  
                                                  
                                                  
                                                  
                                                  BrowserCalls.Web/Scripts/browser-calls.js

                                                  サポートエージェントに発信する

                                                  BrowserCalls.Web/Scripts/browser-calls.js

                                                  Setting up the browser-to-browser call was rather simple right? Now let's look at how our backend will route this call to our support agent.

                                                  顧客からの着信通話を接続する

                                                  顧客からの着信通話に接続する

                                                  サポートエージェントが着信通話を取れるようにするには、ケイパビリティートークンの生成時にIncomingClientScopeメソッドを使用して、support_agentをClientの名前として渡します。

                                                  new IncomingClientScope(role); 
                                                  

                                                  TwilioがPOSTリクエストを/Call/ConnectURLに送信したら、Client TwiML名詞とsupport_agentの名前でレスポンスを返すことで通話をサポートエージェントに接続できます。

                                                        
                                                        
                                                        
                                                        
                                                        BrowserCalls.Web/Controllers/CallController.cs

                                                        着信通話に接続する

                                                        BrowserCalls.Web/Controllers/CallController.cs

                                                        これで、着信通話を取るための準備は以上です。 ここでブラウザーに戻って今回の接続の処理方法を見てみましょう。

                                                        電話に応答する

                                                        電話に応答する

                                                        サポート担当者のクライアントは着信を受け取ると、Twilio.Device.incoming() コールバックで定義した関数をトリガーします。

                                                        応答」ボタンに紐づけられた関数内で.accept()メソッドが呼び出されるまで、着信接続 (connection) は保留状態になります。

                                                        また、通話中になると UI を更新するように、.accept() コールバックを設定します。

                                                              
                                                              
                                                              
                                                              
                                                              BrowserCalls.Web/Scripts/browser-calls.js

                                                              電話に応答する

                                                              BrowserCalls.Web/Scripts/browser-calls.js

                                                              お見事! これで両方のケース、すなわちブラウザーから電話への通話、そしてブラウザー間の通話における仕組みが理解できました! 続いて、電話を切ることにした場合はどうなるか見ていきましょう。

                                                              通話を切断する

                                                              通話を切断する

                                                              In order to finish a call we invoke Twilio.Device.disconnectAll(), which we wired to the Hang up button in our UI.

                                                              We also pass a callback function to Twilio.Device.disconnect() above, to reset some UI elements.

                                                                    
                                                                    
                                                                    
                                                                    
                                                                    BrowserCalls.Web/Scripts/browser-calls.js

                                                                    通話を切断する

                                                                    BrowserCalls.Web/Scripts/browser-calls.js

                                                                    That's it! Our ASP.NET MVC application now powers browser-to-phone and browser-to-browser calls using Twilio Client.

                                                                    次はどこでしょうか?

                                                                    次はどこでしょうか?

                                                                    Twilio を使う .NET 開発者であれば、以下のチュートリアルもお楽しみください。

                                                                    IVR: フォンツリー

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

                                                                    自動アンケート

                                                                    音声通話または SMS テキストメッセージを介して調査を実施し、ユーザーから構造化データを迅速に収集します。

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

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

                                                                    Agustin Camino Jose Oliveros Andrew Baker David Prothero Kat King Hector Ortega
                                                                    Rate this page:

                                                                    ヘルプが必要ですか?

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