ウェブ通話のサンプルから始めましょう

Warning

Azure Communication Servicesは画期的な変更を導入しており、一部のサービスが廃止される予定です。 詳細については、廃止と変更に関するガイドを参照してください。

ウェブ通話のサンプルは、通信サービスのウェブ通話SDKが提供するさまざまな機能のステップバイステップの手順を解説するウェブアプリケーションです。

このサンプルは開発者向けに作成されており、コミュニケーションサービスを始めるのが非常に簡単です。 ユーザーインターフェースは複数のセクションに分かれており、それぞれに「コード表示」ボタンがあり、ブラウザから直接自分の通信サービスアプリケーションにコードをコピーできます。

ウェブ通話のサンプルから始めましょう

/Project/readme.md に従ってprojectを設定し、自分のマシンでローカルで実行してください。 ウェブ 呼び出しのサンプル があなたのマシンで実行されると、以下のランディングページが表示されます。

ウェブ通話チュートリアル1

ウェブ通話チュートリアル2

ユーザープロビジョニングとSDK初期化

「Provisioning user and initialize SDK」をクリックすると、バックエンドのトークンプロビジョニングサービスでプロビジョニングされたトークンを使ってSDKを初期化できます。 このバックエンドサービスは /project/webpack.config.js中です。

「コード表示」ボタンをクリックすると、ご自身の解答で使えるサンプルコードが表示されます。

SDKが初期化されると、以下の内容が見られるはずです:

ユーザープロビジョニング

これでコミュニケーションサービスリソースを使って電話をかけ始める準備ができました!

発信・着信

Communication Servicesのウェブ通話SDKは、 1:1、 1:N、 グループ 通話を可能にします。

1:1または1:Nの発信通話では、複数の通信サービスのユーザーIDをコンマ区切られた値を用いて指定できます。 また、コンマ区切られた値を使って電話をかける従来型(PSTN)電話番号を指定することもできます。

PSTNの電話番号にかける際は、代替発信者番号を指定してください。 「電話をかける」ボタンをクリックして、発信電話をかけてください:

電話をかけてください

グループ通話に参加するには、通話を識別するGUIDを入力し、「グループに参加」ボタンをクリックしてください:

グループ通話に参加する

「コード表示」ボタンをクリックすると、通話の着信、着信、グループ通話への参加のためのサンプルコードが表示されます。

アクティブコールは以下の通りです:

グループ通話

このサンプルは以下の機能のコードスニペットも提供しています:

  • ビデオアイコンをクリックしてビデオカメラのオン/オフを切り替えます
  • マイクのアイコンをクリックしてマイクのオン/オフを切り替えます
  • 再生アイコンをクリックして通話を保持・解除します
  • 画面アイコンをクリックして開始・停止し、画面を共有する
  • 参加者を通話に追加するには「人物」アイコンをクリックしてください
  • 参加者名簿で「参加者を削除」をクリックすると、特定の参加者を通話から削除できます

次のステップ

詳細については、以下の記事を参照してください。

追加の参考資料

  • サンプル - その他のサンプルと例については、「サンプルの概要」ページを参照してください。
  • Redux - クライアント側の状態管理
  • FluentUI - Microsoft が提供する UI ライブラリ
  • React - ユーザー インターフェイスを構築するためのライブラリ
  • ASP.NET Core - Web アプリケーションを構築するためのフレームワーク