なんかいろいろしてみます

Jun 12, 2021 - 1 minute read - Azure

Azure Communication Services でビデオチャットを試してみる

Azure Communication Services で簡単にビデオチャットまで試せたので手順とUWPサンプルプロジェクトの解説をします．

Communication Services 概要

Azure Communication Services - テレフォニー - CPaaS | Microsoft Azure

Azure Communication Services

  • 音声，ビデオ，チャットなどのコミュニケーションを構築できるAzureサービス
  • 電話番号を利用したSMSや通話も利用可能(現在はアメリカ限定)
  • Teamsとの連携で自作アプリから会議に参加もできる
  • 開発できるプラットフォームはWebブラウザ,Android,iOS,Windows
  • 対応開発言語はC#,Java,JavaScript,Python

利用するサービスによっては課金が発生するので利用リソースに注意してください

Azure Communication Services 設定

  • Azureのアカウント作成はできているものとしています．
  • リソースの作成より Communication Services を選択
  • データの場所 は場所によって利用可能な機能に制限があるため United States にしています．
  • リソース作成後 キー から主キーの キー と エンドポイント を開発で利用するので控えておきます．

Communication Services C# 開発

アクセストークン取得

  • Communication Services を利用するためにユーザーを作成した後，アクセス用のトークンを発行して通話，チャットを行います．
  • 基本的にユーザーの作成とアクセストークンの発行はサーバー側で行い，利用者側はアクセストークンを利用して通話やチャットを行います．
  • C#,JavaScript,Java,PythonでSDKが提供されています．
  • 今回はC#での開発を説明します．以下にユーザーIDとアクセストークンを発行するサンプルプロジェクトを用意しました．

akihiro0105/CommunicationServicesAccessToken

  • Azure 側で取得した エンドポイント と キー を endpoint と accessKey に設定することでユーザーIDとアクセストークンを発行できます．
  • 今後はここで取得できたユーザーIDとアクセストークンを利用してクライアントアプリを開発します．

クライアントUWPアプリ

  • クライアント側で動作させる通話用UWPアプリを作成してみます．

  • 音声，ビデオ，Teams参加のためにサンプルプロジェクトを用意しました．

    akihiro0105/CommunicationServicesUWPSample

音声通話UWPアプリ開発

  • 初めに音声通話UWPアプリを作成します．
  • 今回は既にアクセストークンが発行されて手元にある状態でアプリを作成してみます．
  • 上記のプロジェクトを Visual Studio 2019 で開く
  • UWPVoiceSample プロジェクトの MainPage.xaml.cs の user_token_ にアクセストークンを設定してビルドします．
  • サンプルアプリのUWPVoiceSampleを実行するとマイクを利用する許諾確認が表示されます．
  • テキスト入力欄に 8:echo123 を入力することで接続確認用音声通話アカウントに接続することができます．
  • あらかじめアクセストークンとユーザーIDの組み合わせを2組用意しておき、ユーザーID経由での音声通話も確認することができます．

Communication Services 環境構築例

  • Communication Services をUWPで利用するための環境構築例を紹介します．
  • メニューから Tools/NuGet Package Manager/Manage NuGet Packages for Solution… を開く
  • Communication.Calling で検索しプロジェクトにインストール
  • Package.appxmanifest の Capabilities から通信に必要な Internet(Client & Server) ， Microphone ， Webcam にチェックを入れておく

ビデオ通話UWPアプリ開発

  • 音声通話用アプリができたので次にWebカメラからのビデオ通話機能も確認してみます．
  • UWPVideoSample プロジェクトの MainPage.xaml.cs の user_token_ にアクセストークンを設定してビルドします．
  • 実行時にカメラとマイクの利用許諾が表示されます．
  • あらかじめアクセストークンとユーザーIDの組み合わせを2組用意しておき、ユーザーID経由でのビデオ通話を確認することができます．

Webカメラ利用プロジェクト環境構築例

  • カメラからの映像や通話相手から受信した映像を表示するためにプロジェクトに設定を追加する必要があります．

  • Package.appxmanifest ファイルをXML形式で開き以下を追記します．

    <Extensions>
    <Extension Category="windows.activatableClass.inProcessServer">
      <InProcessServer>
        <Path>RtmMvrUap.dll</Path>
        <ActivatableClass ActivatableClassId="VideoN.VideoSchemeHandler" ThreadingModel="both" />
      </InProcessServer>
    </Extension>
  </Extensions>

Teams 会議参加設定

  • ビデオ通話までできるようになったので，Teamsと連携して会議に参加してみます．
  • UWPTeamsSample プロジェクトの MainPage.xaml.cs の user_token_ にアクセストークンを設定してビルドします．
  • 組織用Teamsの会議にゲスト参加するとこができますが、個人用のTeamsの会議には参加できません

  • Communication Services には Teams 用の関数が準備されているのでそれを利用して会議に参加します．

HoloLens 2 動作

  • 開発したビデオ通話アプリは2DのUWPアプリなのでHoloLensでも動作させることができます．
  • 2Dアプリなので3Dアプリ(Unityアプリ)を起動した状態でもTeamsに参加してビデオ通話を行うことができます．

シェア