Azure Communication Servicesのショーケースアプリ(on HoloLens 2)がすごかった件

589 Views

April 17, 24

スライド概要

【大阪-オンライン開催】XRミーティング 2024/04/17【AR/CR/MR/SR/VR】(https://osaka-driven-dev.connpass.com/event/315183/)登壇資料。
数か月前に公開されたAzure Communication ServicesのHoloLens 2用アプリのサンプルがとてもよくできていたのでその紹介。環境構築などの詳細はQiita(https://qiita.com/miyaura/items/13b689a86eca5d7c70b3)で公開。

profile-image

ICT業界でソフトウェアエンジニア/アプリケーションアーキテクトを担当。 社内ではXR関連技術に関する啓もう活動や技術支援に従事。 業務の傍ら、XR(特にMixed Reality領域)についての開発技術の調査、開発などを行っています。 また、「大阪駆動開発」コミュニティ所属しており、日々の調査で得た知見はコミュニティを通して情報発信を行っています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Azure Communication Servicesの ショーケースアプリ(on HoloLens 2)がすごかった件 2024/04 XRミーティング @takabrz1 Takahiro Miyaura

2.

Microsoft MVP for Mixed Reality 2018-2024 XRは趣味です 宮浦 恭弘 (Miyaura Takahiro) ◼ 大阪駆動開発(とHolomagicians)コミュニティに生息 ◼ HoloLens日本販売してからxR系技術に取組む ◼最近は ✓ ✓ Mixed Reality Toolkit v3.0.0(GAされた!) Snapdragon Spacesとか戯れている。 ◼ 新しい技術や、MRに使えそうな技術を調べる 技術Tips : https://qiita.com/miyaura https://zenn.dev/miyaura @takabrz1 ※よかったらこれを機にお知り合いになってください

3.

以前もこの話したんですが覚えてますか? Azure Communication Services… @takabrz1 Takahiro Miyaura

4.

振り返り 去年の7月くらいにUnity用のSDKがでたので試した話 公開間もなかったのか… HoloLens 2で! ○ Teams会議に参加 ○ HoloLens 視点の共有 ※Mixed Reality Captureのライブ共有なイメージ × 参加者のWebカメラ映像 × 参加者の画面共有 まだβ版でしたし。 2024/4/17 Copyright © 2024 Takahiro Miyaura 4

5.

数か月前にパワーアップして帰ってきた! しかもショーケースアプリがかなりいい出来! @takabrz1 Takahiro Miyaura

6.

今日の目次 ACSの事とサンプルの構成や動かす際のポイントを紹介! 1. Azure Communication Servicesについて 2. Sample: Video Calling and Teams in a HoloLens 2 Application ✓ ✓ ✓ ✓ どういうものなの?(まずは動画で) 概要 利用コンポーネントやサービス 試してみるには? ✓ 開発環境 ✓ まとめ ✓ OMAKE 2024/4/17 Copyright © 2024 Takahiro Miyaura 6

7.

解説記事(全文)はこちら Azure Communication Servicesをサンプルから読み解く - 概要編 https://qiita.com/miyaura/items/13b689a86eca5d7c70b3 Azure Communication Servicesの事含めて説明書い ていたらかなりの文章量になってしまいました。。。 2024/4/17 Copyright © 2024 Takahiro Miyaura 7

8.

Azure Communication Serviceについて @takabrz1 Takahiro Miyaura

9.

Communicationに関するSaaS それがAzure Communication Services 独自のカスタムアプリに容易に導入できる ○コミュニケーション手段に関する機能 ✓音声及びビデオによる通話 ✓リッチテキストチャット ✓SMS ✓電子メール ○TeamsやMicrosoft 365との連携 ✓Teamsとの相互運用 ✓ Teams会議にカスタムアプリからミーティング ✓Microsoft Graph APIにより組織やoutlook予定表等を活用できる 2024/4/17 Copyright © 2024 Takahiro Miyaura 9

10.

Azure Communication Services 簡単な概念図 ACSはユーザ毎のアクセストークンを介して利用 User A ユーザアクセストークン の生成要求 ユーザアクセストークン の生成要求 アクセストークン アクセストークン ミーティングに参加 ミーティングに参加 アクセストークン ユーザ情報 Azure Communica tion Services User B アクセストークン ユーザ情報 音声とビデオの呼び出 2024/4/17 Copyright © 2024 Takahiro Miyaura 10

11.

Azure Communication Services Teams連携 Azure Entra ID(Azure AD)の情報からトークン生成が可能 ユーザアクセストークン の生成要求 ユーザアクセストークン の生成要求 Tenant ID User Object ID Tenant ID User Object ID User A アクセストークン Azure Communica tion Services User B アクセストークン アプリケーション側で事前に組織アカウントへの認証を実施 その認証情報をACSのトークン取得時に渡すことでTeams連携を実現(要様々なアクセス権) 2024/4/17 Copyright © 2024 Takahiro Miyaura 11

12.

Azure Communication Services サービスの構成 Rest APIとSDKで利用する仕組み ○ Calling SDK(※今回利用) ○ Call Automation SDK ○ Chat SDK ○ SMS SDK ○ e-Mail SDK ○ UI Library Node.jsで作られたUIライブラリ Web-RTCといったローレベルでのアプリ開発は不要で 様々なコミュニケーション手段を実現することが可能になる 2024/4/17 Copyright © 2024 Takahiro Miyaura 12

13.

Sample: Video Calling and Teams in a HoloLens 2 Application どういうものなの? 2024/4/17 Copyright © 2024 Takahiro Miyaura 13

14.

Sample: Video Calling and Teams in a HoloLens 2 Application どういうものなの? Teams視点 2024/4/17 Copyright © 2024 Takahiro Miyaura 14

15.

Sample: Video Calling and Teams in a HoloLens 2 Application どういうものなの? HoloLens視点 2024/4/17 Copyright © 2024 Takahiro Miyaura 15

16.

Sample: Video Calling and Teams in a HoloLens 2 Application 概要 2024/4/17 Copyright © 2024 Takahiro Miyaura 16

17.

Sample: Video Calling and Teams in a HoloLens 2 Application 概要 HoloLens 2でTeamsの相互運用性、特にTeamsミーティングへ の参加に焦点を当てているサンプルアプリ 1. 職場や学校の認証された Teams ユーザーとして ACS に接続 2. Microsoft Graphと連携した仲間やミーティング情報を取得 3. ビデオと音声でTeamsミーティングに参加 4. Teams ミーティング中にライブキャプションを表示 5. 1:1のTeamsビデオ通話と音声通話の着信 (この機能は実はまだ実装されていないようです) 6. MRTK3によるUI 2024/4/17 Copyright © 2024 Takahiro Miyaura 17

18.

Sample: Video Calling and Teams in a HoloLens 2 Application 利用コンポーネントやサービス 2024/4/17 Copyright © 2024 Takahiro Miyaura 18

19.

Sample: Video Calling and Teams in a HoloLens 2 Application 利用コンポーネントやサービス 認証系、Microsoft Graph APIを中心にACSを活用 ○ ACS Calling SDK ACSの機能(音声とビデオ通話)のために必要。 ○ ACS Identity SDK ACSのアクセストークンを生成するために利用 ○ Azure Identity SDK Microsoft Entra ID (旧称 Azure AD) トークン認証のサポートを提供 ○ Azure Functions SDK Azureの関数アプリとして利用します ○ Mixed Reality Toolkit 3 Unity上でのアプリ開発のプラットフォームとして利用します ○ Web Account Manager (WAM) for UWP HoloLens上でユーザ認証を実現するためのWindows認証ブローカー。 ○ Microsoft Authentication Library (MSAL) UnityのPlay Modeで認証をおこなうために利用 引用:Github Sample: Video Calling and Teams in a HoloLens 2 Application - App Components 2024/4/17 Copyright © 2024 Takahiro Miyaura 19

20.

Sample: Video Calling and Teams in a HoloLens 2 Application 利用コンポーネントやサービス 認証系、Microsoft Graph APIを中心にACSを活用 HoloLensアプリやUnityか らAzure Entra IDへの認証 を実施 記載はないがMicrosoft Graph APIでM365の情報も参照 引用:Github Sample: Video Calling and Teams in a HoloLens 2 Application - App Components 2024/4/17 Copyright © 2024 Takahiro Miyaura 20

21.

Sample: Video Calling and Teams in a HoloLens 2 Application 利用コンポーネントやサービス 認証系、Microsoft Graph APIを中心にACSを活用 関数アプリ(Azure) HoloLensアプリで認証した情報で ACSへのアクセストークンを管理 記載はないがMicrosoft Graph APIでM365の情報も参照 引用:Github Sample: Video Calling and Teams in a HoloLens 2 Application - App Components 2024/4/17 Copyright © 2024 Takahiro Miyaura 21

22.

Sample: Video Calling and Teams in a HoloLens 2 Application 利用コンポーネントやサービス 認証系、Microsoft Graph APIを中心にACSを活用 ACS Calling SDK ビデオと音声による会議を実現 記載はないがMicrosoft Graph APIでM365の情報も参照 引用:Github Sample: Video Calling and Teams in a HoloLens 2 Application - App Components 2024/4/17 Copyright © 2024 Takahiro Miyaura 22

23.

Sample: Video Calling and Teams in a HoloLens 2 Application 利用コンポーネントやサービス 認証系、Microsoft Graph APIを中心にACSを活用 Mixed Reality Toolkit 3 UIコンポーネント等を利用し Teams風のUX体験を実現 記載はないがMicrosoft Graph APIでM365の情報も参照 引用:Github Sample: Video Calling and Teams in a HoloLens 2 Application - App Components 2024/4/17 Copyright © 2024 Takahiro Miyaura 23

24.

Sample: Video Calling and Teams in a HoloLens 2 Application 利用コンポーネントやサービス UIはなんとMRTK3! 2024/4/17 Copyright © 2024 Takahiro Miyaura 24

25.

Sample: Video Calling and Teams in a HoloLens 2 Application 試してみるには? 2024/4/17 Copyright © 2024 Takahiro Miyaura 25

26.

Sample: Video Calling and Teams in a HoloLens 2 Application 試してみるには? Githubからクローンする https://github.com/microsoft/MixedReality-AzureCommunicationServices-Sample/tree/main 開発環境 ○Visual Studio 2022 ○Visual Studio Code ○Windows 10.0+ SDK ○Unity 2022 LTS ○Universal Windows Platform Build Support ○.Net 6 SDK ○git lfs 2024/4/17 Copyright © 2024 Takahiro Miyaura 実機がなくてもUnity Editorと Teamsで動作確認できます 26

27.

Sample: Video Calling and Teams in a HoloLens 2 Application 構築手順 2024/4/17 Copyright © 2024 Takahiro Miyaura 27

28.

Sample: Video Calling and Teams in a HoloLens 2 Application 構築手順 Githubにも手順がありますがQiitaもどうぞ https://github.com/microsoft/MixedReality-AzureCommunicationServices-Sample/tree/main 1. 2. 3. 4. Azure Communication Servicesのリソースを作成 関数アプリのリソースを作成 関数アプリのデプロイ( Visual Studio Code) 関数アプリの設定 1. 2. 3. 5. 6. 7. 8. 2024/4/17 Azure Entra IDの設定 IDプロバイダーのマルチテナント対応 関数アプリの環境設定を変更する 関数アプリにACSへのアクセス権を付与する ネイティブアプリの登録 Unityでの設定 & Unity Editor 上で確認 UWPパッケージの生成とアプリのアクセス許可設定 Copyright © 2024 Takahiro Miyaura 28

29.

Sample: Video Calling and Teams in a HoloLens 2 Application 構築手順 認証系の設定が複雑なのでAzureの環境設定には注意が必要 1. リソース間のアクセス権 1. ACS⇔関数アプリ →関数アプリからACSに対してトークン生成/取得 2. ネイティブアプリ⇔Azure →認証は許可されたURI以外の受け付けない 3. Microsoft Graph API →M365のリソース(ユーザ、会議予定等)を取得 2. 認証 1. 今回はMSALやWAMを使用 2. URIの設定ミスに注意(間違っていると認証に失敗) 2024/4/17 Copyright © 2024 Takahiro Miyaura 29

30.

まとめ 2024/4/17 Copyright © 2024 Takahiro Miyaura 30

31.

まとめ Azure Communication Servicesのショーケースアプリ(on HoloLens 2)がすごかった 1. Azure Communication Servicesについて →ビデオ&音声会議等のコミュニケーション機能を独自アプリに導入できるSaaS 2. Sample: Video Calling and Teams in a HoloLens 2 Application →HoloLens 2でTeamsの相互運用性、特にTeamsミーティングへの参加に焦点を当てて いるサンプルアプリ ✓ 以前調べたときよりも機能が強化されている。 ○Teams会議に参加 ○HoloLens 視点の共有 × 参加者のWebカメラ映像 → 〇 × 参加者の画面共有 → 〇 ✓ 他にもライブキャプションなどもできる HoloLens内でTeamsミーティングと同等の機能を実現 カスタムDynamics 365 Remote Assistなど様々な活用方法が見出せそう 2024/4/17 Copyright © 2024 Takahiro Miyaura 31

32.

大阪駆動開発 関西を中心に、IT系のおもしろそうなことを 楽しんでやるコミュニティ