Microsoft TeamsとUDトーク、OBSを使った字幕付きTeams会議

## はじめに
　UDトークを使った音声認識を、Microsoft TeamsのTeams会議等で配信する仕組みのついて書きます。概要図は以下のとおりです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/5cc80832-8a45-51d4-0cec-e2d3bee9e190.png)

### 全体像
　macOS上で、OBS、QuickTime Player、Teamsを起動します。CPUパワーをかなり要するので不要なものは落としましょう。
![スクリーンショット 2020-05-31 時刻 13.45.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/04d0a77e-313e-9def-08c1-dd2be95dc070.png)

- iPhoneの画面は、QuickTime Player経由で出しています（参考：[MacのQuickTime Playerでムービーを収録する - Apple サポート](https://support.apple.com/ja-jp/guide/quicktime-player/qtp356b55534/10.5/mac/10.15#apd86177808b0da4)等）
- OBS関する基本的な説明は省略します（参考：[【要点は3つだけ！】OBS Studioの詳しい使い方･設定方法をご紹介┃ゲーム配信初心者でも今すぐ配信可能！ | esports PLUS](https://esports-plus.jp/game-streaming/how-to-use-obs/)等）

### OBS上の準備

(1)QuickTime Player、(2)内蔵カメラの2つのソースを指定します。

#### (1)QuickTime Playerの画面配置

ソースは、**ウィンドウキャプチャ** です。 
![スクリーンショット 2020-05-31 13.46.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/d705df32-04ba-c75f-8700-8bd1cdb23e50.png)

わかりやすい名前をつけて
![スクリーンショット 2020-05-31 13.47.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/b6204c46-7c1f-e657-766d-eb05d1d64b1b.png)

対象を指定します
![スクリーンショット 2020-05-31 13.48.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/d24a1cad-bf69-b8f9-c745-1205bee0c96c.png)



#### (2)自画像（内蔵カメラ）の画面配置

ソースは、**映像キャプチャデバイス** です。 
![スクリーンショット 2020-05-31 13.52.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/017375e3-f4d3-7557-5b18-936e0e3f1ea5.png)

対象を指定します（MacBook Proの場合、「FaceTime HDカメラ（内蔵）」）

画面サイズ、配置等整えます。
![スクリーンショット 2020-05-31 13.56.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/4fba1446-1c43-aeed-2039-d01aed0389c2.png)


画面上、不要なコントロール（シーン等）を非表示にシンプルなウィンドウにします。元に戻す場合は「UIをリセット」です。
![スクリーンショット 2020-05-31 17.28.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/961dd23d-c63c-4905-1a3d-fccf4cd80467.png)


### Teams会議の準備

Teamsで、今すぐまたは予約後会議を実施します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/b1148fc7-ae5d-99f1-82a0-99fc4ec4c836.png)

Teams会議を開始したら、**共有** からOBSの画面選択を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/b017f16a-bdf4-0d05-d6fa-ca378ba1230f.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/ab15099f-2183-e6c4-83dc-411cc202c223.png)


### UDトーク画面の背景を黒くして表示

下の赤い「タップして話す」をタップして音声認識をスタート、
![IMG_7371.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/f9b9b76f-1833-7b3c-7d21-70f7708747c2.png)

右上のメニューから「フルスクリーンを表示する」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/ffdff16e-c948-98c5-9eb3-879806b387aa.png)

### Teams会議配信中のイメージ画像

こんな感じです。
![スクリーンショット 2020-05-31 時刻 14.03.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/7a5606cd-f5cd-c195-b2c1-b589ce6cbc2d.png)


### UDトークに関する補足

#### 画面をクリア

メニューから「会話ログをクリアする」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/2bb10373-609f-48f1-f5ba-883d0036c58c.png)

#### 字幕を自動で大阪弁にする場合

こちらのマークから設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/136a8c40-6992-c048-2908-d3e6c601f935.png)

利用イメージはこちら

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今回は、Mac上でMicrosoft Teamsで、<a href="https://twitter.com/hashtag/UD%E3%83%88%E3%83%BC%E3%82%AF?src=hash&amp;ref_src=twsrc%5Etfw">#UDトーク</a> を含んだ#OBS の画面を出して1人会議を録画してみました、大阪弁モードでw。発音悪いな〜、発生練習しないとw <a href="https://twitter.com/hashtag/MicrosoftTeams?src=hash&amp;ref_src=twsrc%5Etfw">#MicrosoftTeams</a> <a href="https://twitter.com/hashtag/Teams?src=hash&amp;ref_src=twsrc%5Etfw">#Teams</a> <a href="https://t.co/ZDfU3l91x4">pic.twitter.com/ZDfU3l91x4</a></p>&mdash; 石川陽一 Yoichi Ishikawa (@ishiayaya) <a href="https://twitter.com/ishiayaya/status/1264163957796831233?ref_src=twsrc%5Etfw">May 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#### UDトークの翻訳機能を使う

UDトークには、ポケトーク（[POCKETALK (ポケトーク) - 翻訳機を超えた、夢のAI通訳機｜POCKETALK（ポケトーク）](https://pocketalk.jp/)）に負けない翻訳機能もあります。その機能をオンにして、日英同時表示も可能です。

![IMG_7372.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/a6d0a652-8128-1ab9-e422-5748332df89e.png)

設定はこちらから

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/e5205e30-52a6-a616-e3c9-9a0b2b91397b.png)

いろんな言語に対応しています。メニューの「翻訳/音声認識/読み上げの言語設定」から。

![IMG_7374.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/9b713f95-2aaf-cddb-9cf6-88e3cf3eb7ca.png)


### Teams会議の録画
　Teams会議をレコーディングはこちらから。
![スクリーンショット 2020-05-31 14.01.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/1621d648-d2f7-aaad-bba9-6a42d164b48d.png)


録画するとStream（[Microsoft Stream – ビデオ ストリーミング サービス](https://www.microsoft.com/ja-jp/microsoft-365/microsoft-stream)）に保管されます。動画をダウンロードして、必要に応じてYouTube等に再利用できます。配信に際しては、会議参加者の了解をもらうことをお忘れなく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/fec85d17-7d27-78b4-3cf1-14bbff622d59.png)

**Twitter配信例**
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Microsoft TeamsとUDトーク、OBSを使った字幕付きTeams会議 やり方はこれから大急ぎで書きます。 <a href="https://twitter.com/hashtag/UD%E3%83%88%E3%83%BC%E3%82%AF?src=hash&amp;ref_src=twsrc%5Etfw">#UDトーク</a> <a href="https://twitter.com/hashtag/Teams?src=hash&amp;ref_src=twsrc%5Etfw">#Teams</a> <a href="https://twitter.com/hashtag/MicrosoftTeams?src=hash&amp;ref_src=twsrc%5Etfw">#MicrosoftTeams</a> <a href="https://t.co/z8xQFzZ5Bx">pic.twitter.com/z8xQFzZ5Bx</a></p>&mdash; 石川陽一 Yoichi Ishikawa (@ishiayaya) <a href="https://twitter.com/ishiayaya/status/1266974685700317184?ref_src=twsrc%5Etfw">May 31, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**YouTube配信例**
[Microsoft TeamsとUDトーク、OBSを使った字幕付きTeams会議 - YouTube](https://www.youtube.com/watch?v=zKzwTBgWqy8)

## おわりに
　UDトークは音声認識精度が高く、使い勝手もよいのでとにかく連携したいという思いのもとやってみました。Zoomでも同様のことができますが、UDトークにはZoomとAPIでつながる仕組みがあるので、そちらがおすすめです。詳しくはこちら（[【重要】ZOOMとの連携の正しい設定方法 | UDトーク](https://udtalk.jp/post-3901/)）を参照してください。