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

674 Views

April 17, 24

#mixed reality #xrmtg #mrtk3 #unity #hololens #azure #azure communication services #Azure Communication Services #HoloLens 2 #Microsoft Teams #Mixed Reality #Unity

スライド概要

【大阪-オンライン開催】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）で公開。

Miyaura

@m-taka596

スライド一覧

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

またはPlayer版

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

ダウンロード

ダウンロード(pdf - 1.18MB)

関連スライド

OpenVRやOpenXRの基本的なことを調べてみた

xrmtg openxr openvr hololens

Miyaura 22K

冬休みの宿題 - Lenovo Think Reality A3で検証(MRTK3含)

xrmtg mrtk3 mixed reality snapdragon spaces thinki reality a3

Miyaura 11.9K

MRTK3をLenovoのThink Reality A3上で動かす - Snapdragon Spaces SDKの紹介

hololens ホロマジ snapdragonspaces mrtk3 xr unity

Miyaura 9.9K

今更ですがちょっとMetaQuest3でMRTK3触ってみました

mixed reality xrmtg mrtk3 unity

Miyaura 9.2K

Mixed Reality Toolkit 3で始めるクロスプラットフォーム開発

xr mrtk3 metaquest3 snapdragonspaces xrkaigi

Miyaura 7.6K

Snapdragon Spaces v0.12.0 for Unityの調査(あれも試してみてる)

xrmtg mrtk3 mixed reality snapdragon spaces think reality a3

Miyaura 7.2K

各ページのテキスト

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

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 ※よかったらこれを機にお知り合いになってください

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

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

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

今日の目次 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

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

https://qiita.com/miyaura/items/13b689a86eca5d7c70b3

Azure Communication Serviceについて @takabrz1 Takahiro Miyaura

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.

14.

15.

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.

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

https://github.com/microsoft/MixedReality-AzureCommunicationServices-Sample/#app-components

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

https://github.com/microsoft/MixedReality-AzureCommunicationServices-Sample/#app-components

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

https://github.com/microsoft/MixedReality-AzureCommunicationServices-Sample/#app-components

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

https://github.com/microsoft/MixedReality-AzureCommunicationServices-Sample/#app-components

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

https://github.com/microsoft/MixedReality-AzureCommunicationServices-Sample/#app-components

24.

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

https://github.com/microsoft/MixedReality-AzureCommunicationServices-Sample/tree/main

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

https://github.com/microsoft/MixedReality-AzureCommunicationServices-Sample/tree/main

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.

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系のおもしろそうなことを楽しんでやるコミュニティ