画像解析をUnityでやってみよう。3回目です。
前回はWebCamTextureを使って、カメラ画像の表示を行い、実機で確認しました。
その際、カメラの映像が反転していたので、その修正を行います。

カメラ画像の回転と反転を修正する

回転の修正

Unity上で起動するとちゃんとカメラ映像は回転していないのに、iPhoneでは回転してしまいます。
いろいろ調べてみると、どうやらみなさん回転しちゃっているみたいです。
で、解決策が、コンポーネントを回転しちゃう分だけ回転するという方法。
まじかよ。。
RectTransformをZ軸方向に-90度回転させちゃえっていうものです。

どうも嫌なので、他調べてみると、公式にちゃんと書いてありました。

WebCamTexture-videoRotationAngle

videoRotationAngleを使用すれば、カメラの回転が取得できそうです。
videoRotationAngleについては、以下参考になります。

videoRotationAngleについて

例にならって、Update()に、以下処理を記述します。


private void Update()
    {
        if (webCamTexture?.isPlaying ?? false)
        {
            transform.localEulerAngles = new Vector3(0, 0, -1 * (float) webCamTexture.videoRotationAngle);    
        }        
    }

公式のコードをそのままでやると、どうも回転がおかしかったので、ちょっと試行錯誤してコードを修正しています。
これでうまくいくはず。。

反転を修正する

カメラの回転の問題は、WebCamTextureのデフォルトの向きが横持ちだからでした。
(WebCamTextureのデフォルトというよりかは、デバイスカメラの向きのデフォルトが横持ちというのが正しいかも)
反転についても、いろいろな方が同じ質問をしていて、これも反転しているからTransformで反転しましょうというものでした。
反転する原因はよくわかりませんが、おそらくデフォルトの何かが違うんでしょう。座標系なのかな。。ちょっと詳しくはわかりませんでした。
これは他に良い方法もなさそうだったので、Transformをいじって回転を直します。
Start()の中に以下記述をしてみます。


if (Application.platform == RuntimePlatform.IPhonePlayer)
    {            
        cameraImage.rectTransform.localScale = new Vector3(1,-1,1);
    }

結果確認

これでうまく表示できまし。。。。せん
なんか小さい? やっぱり小さい

横基準のWebCamTextureを縦に回転しただけなので、上下に空白ができてしまったようです。
当たり前か。。
画面いっぱいに表示したい。。
さらに、デバイスを傾けると、なんだか歪んでいます。(横にのびてる??)

画面いっぱいに広げる

そもそもWebCamTextureがカメラから取れる画像の向きが横向きなので、これを縦にいっぱいに広げるには、カメラから取れる画像の向きを変えるしかなさそうです。
しかし、APIにもそのような記述はありません。。。
どうすんだこれ。。

SizeDeltaをAspect比からいじってみる

やはり同じような質問をしている方がいました。

カメラから取れる画像のデフォルトの向きを変更することはできなそうです。。
やるなら、縦基準で広げて、横を殺すか、上下に空白を残すしかないとのこと。
他にもいろいろ見てみましたがやはりそれらしいのは見当たらず。。
うーん。。

もうそういう仕様だから仕方ない。。
ということで、画面の上下に空白ができるのは嫌なので、画面いっぱいに広げます。縦基準に合わせるので横にハミ出た分はもうしょうがない。。
Start()の中で、以下処理をしてみます。

float aspectRatio = (float)Screen.currentResolution.height / (float)Screen.currentResolution.width;
cameraImage.rectTransform.sizeDelta = new Vector2(Screen.currentResolution.width * aspectRatio, Screen.currentResolution.width);


ここでややこしいのが、RawImageは回転しているので、サイズの調整は回転を考慮しています。

結果は。。。

全体的に小さくなった

なんでやねん。

でもなんか、惜しい!ちょうど2分の1くらいのサイズになっている気がする。。。

CanvasScalarの設定を変更する

ちょっと設定を見直してみたところ、CanvasScalarの設定を変えることで、表示サイズが正しくなりました。
CanvasScalerの設定
なんかこの変ちょっと理解が足りないです。。別機会に勉強し直そう。。
で、結果がこれ。うまく表示できました。 画面いっぱいに広げる

これで画面いっぱいに広げることができました。
次回はデバイスの回転によって画像が歪む問題について解消します。
続きは次回。
さようなり〜