【Unity】実機のカメラ映像をUI上に表示させる(Android向け)

実機に掲載されているカメラの映像をUnityのUI上に表示させてみます。

この記事ではAndroidのみとなります。

# 環境
- Windows10
- Unity Hub 2.4.5
- Unity 2020.3.25f1
- Android Studio 2020.3.1

# WebCamTextureクラス
カメラの映像をUI上に表示させるために使うクラスは、**WebCamTextureクラス** です。

https://docs.unity3d.com/ja/2020.3/ScriptReference/WebCamTexture.html

この **WebCamTextureクラス** は、Web カメラで映し出した映像を、テクスチャとして扱うクラスです。

UnityEngine/継承:Texture となっており、以下のように使用できます。

```c#
// WebCamTextureのインスタンスを生成
webCam = new WebCamTexture();
// RawImageのテクスチャにWebCamTextureのインスタンスを設定
rawImage.texture = webCam;
```

# UI側の準備
では、カメラ映像を表示させるための準備を行います。

まずは、UnityでUIの準備からです。

## RawImageの追加
カメラの映像を投影するためのRawImageを追加します。

Hierarchy > 追加したい任意の場所を右クリック > UI > Raw Image

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/EAm8gdJH6I">pic.twitter.com/EAm8gdJH6I</a></p>&mdash; たく (@5HdM6WlLVaazBV7) <a href="https://twitter.com/5HdM6WlLVaazBV7/status/1482594958393679874?ref_src=twsrc%5Etfw">January 16, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## ディスプレイいっぱいになるように調節
今回ディスプレイいっぱいにカメラ映像を写したいので、設定をします。

RawImageの親要素をクリック > Inspector > Add Component から、
「Horizontal Layout Group」を追加します。

そして、以下のようにします。

```
Control Child Size: ✓Width　✓Height
Use Child Scale: Width　Height
Child Force Expand: ✓Width　✓Height
```

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/e6QhiwjeR3">pic.twitter.com/e6QhiwjeR3</a></p>&mdash; たく (@5HdM6WlLVaazBV7) <a href="https://twitter.com/5HdM6WlLVaazBV7/status/1482604268683026436?ref_src=twsrc%5Etfw">January 16, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# Scriptの作成
続いては、Scriptを作成します。

任意の場所で右クリック > Create > C# Script

今回のファイル名は「WebCam」とします。

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/dt4RiGEMFD">pic.twitter.com/dt4RiGEMFD</a></p>&mdash; たく (@5HdM6WlLVaazBV7) <a href="https://twitter.com/5HdM6WlLVaazBV7/status/1482597730195161089?ref_src=twsrc%5Etfw">January 16, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そして、WebCam.csファイルを以下のようにします。

```c#:WebCam.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class WebCam : MonoBehaviour
{
    public RawImage rawImage;
    WebCamTexture webCam;

    void Start()
    {
        // WebCamTextureのインスタンスを生成
        webCam = new WebCamTexture();
        // RawImageのテクスチャにWebCamTextureのインスタンスを設定
        rawImage.texture = webCam;
        // カメラ表示開始
        webCam.Play();
    }
}
```

# アタッチ
これで準備が整ったので、アタッチしていきます。

カメラ映像を表示させたい RawImage へ WebCam.cs をドラッグ&ドロップなどでアタッチします。

そして、`GameObject rawImage;` には同じ要領で RawImage をアタッチします。

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/jBHKhbn4ad">pic.twitter.com/jBHKhbn4ad</a></p>&mdash; たく (@5HdM6WlLVaazBV7) <a href="https://twitter.com/5HdM6WlLVaazBV7/status/1482606629086326784?ref_src=twsrc%5Etfw">January 16, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 実機で動作確認
Androidでの環境構築とbuild方法については以下の記事をご参照下さい。

https://qiita.com/tak001/items/045e6a0bd86628d59cfe

Build And Run をしてカメラの画像が表示されればOKです。

Androidの場合、カメラの向きが横向きになるケースが多いのですが、その場合は以下の記事が参考になりましたので貼っておきます。

https://qiita.com/cattaka/items/330321cb8c258c535e07

# まとめ
- 実機のカメラ映像をUIに表示させるには、`WebCamTextureクラス` を使う
- GameObjectのテクスチャにWebCamTextureのインスタンスを設定する
- WebCamTextureのインスタンス.Play() でカメラ表示が開始される