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

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

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

環境

• Windows10
• Unity Hub 2.4.5
• Unity 2020.3.25f1
• Android Studio 2020.3.1

WebCamTextureクラス

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

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

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

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

UI側の準備

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

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

RawImageの追加

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

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

pic.twitter.com/EAm8gdJH6I

— たく (@5HdM6WlLVaazBV7) January 16, 2022

ディスプレイいっぱいになるように調節

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

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

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

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

pic.twitter.com/e6QhiwjeR3

— たく (@5HdM6WlLVaazBV7) January 16, 2022

Scriptの作成

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

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

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

pic.twitter.com/dt4RiGEMFD

— たく (@5HdM6WlLVaazBV7) January 16, 2022

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

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 をアタッチします。

pic.twitter.com/jBHKhbn4ad

— たく (@5HdM6WlLVaazBV7) January 16, 2022

実機で動作確認

Androidでの環境構築とbuild方法については以下の記事をご参照下さい。

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

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

まとめ

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