【PowerApps Tip's】撮影ボタンを実現する(注意点アリ)

カメラコントロール[.Photo]は他コントロールから更新できなくてハマった[前回はこちら](https://qiita.com/yamad365/items/c44c2c3bd5bd31f06892)。
PowerAppsで「撮影ボタン」による写真撮影の実現方法になります。


#完成例と動作
![メディア1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/d0c33be2-ffa0-71a8-4426-75f412b70f2c.gif)
動画のようにカメラコントロールのクリックでも、撮影ボタン押下でも写真撮影が実現可能です。ただし、機種によっては注意する点がありますが、それは後ほど。

#作成アプリ概要
主要部分を解説します。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/e1ebbce0-1f11-9b0a-33b2-f15f6a9a91af.png)

1. Camera（カメラコントロール）
まずカメラの向きは画面上部にあるラジオボタンで選択された番号で指定。カメラコントロール自体をクリックした（.OnSelect）イベントで画像をCollect。

    ```Camera.Camera
    Value(Radio.Selected.Value)
    ```

    ```Camera.OnSelect
    Collect(Phots,Camera1.Photo)
    ```

2. Button（ボタン）
前回ボタン押下で[.Photo]が取得できませんでした。今回は[.Stream]をCollectします。区別しやすいように(1)のカメラコントロールクリック時とは異なるコレクションへ退避しています。

    ```Button.OnSelect
    Collect(StreamPhots,Camera1.Stream)
    ```

3. Gallery1 カメラコントロールクリック時の結果
カメラコントロール自体をクリックした際に作成している Photos コレクションを表示します。

4. Gallery2 撮影ボタン押下時の結果
撮影ボタン押下時の StreamPhots コレクションを表示します。

#重要な設定 StreamRate(ストリームレート)
今回、撮影ボタン押下時の処理で利用している[.Stream]ですが、カメラコントロールを配置した直後の初期状態では期待した動作をしません。なので、上記のロジックを記載した状態だけでは撮影ボタンを押下しても期待した動作にはなりません。

Stream を利用したい場合は、StreamRate(ストリームレート)をミリ秒単位で指定する必要があります。今回は下イメージのように100を指定しています。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/85eebdec-8727-167d-79fb-8cb41de0ef02.png)

ストリームレートに指定可能な数値は下限と上限があります。詳しくは公式を確認ください。範囲外の数値を指定した場合は期待した動作をしません。

■参考URL
　[PowerApps のカメラ コントロール](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/controls/control-camera)

> Stream – StreamRate プロパティに基づいて自動的に更新された画像です。
> StreamRate – Stream プロパティの画像を更新する頻度です (ミリ秒単位)。 この値の範囲は、100 (0.1 秒) から 3,600,000 (1 時間) です。

#[.Stream]を利用する際の注意点
アプリを利用するデバイスによって、インカメラ(画面側のカメラ)を利用して撮影した画像が反転する場合があります。いわゆる、デバイス依存というヤツですね。

反転する例。iPhone XS。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">iPhone XS。<br>0 = 背面カメラ、1 = イン（画面側）カメラ。反転するし、画像のサイズが異なるな…。 <a href="https://t.co/lKcecel5Xb">pic.twitter.com/lKcecel5Xb</a></p>&mdash; やま (@yamad365) <a href="https://twitter.com/yamad365/status/1116520710447304704?ref_src=twsrc%5Etfw">April 12, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


反転しない例。Xperia。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Xperia だと反転しないのです･･･<br><br>泥で操作動画撮れないので、インカメの結果をどうぞ。 <a href="https://t.co/rNiqsAEVhB">pic.twitter.com/rNiqsAEVhB</a></p>&mdash; やま (@yamad365) <a href="https://twitter.com/yamad365/status/1116538696361070592?ref_src=twsrc%5Etfw">April 12, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

前回のハマった話題の際にお伝えした**カメラの向きが 0 と 1 ではない**デバイスが存在する点、およびこの**背面カメラで反転する**現象については、記事投稿時点で、設定、または関数等による回避策は存在しません。デバイスの情報、およびカメラの状態、撮影された画像の向き変更などが取得できないためです。

#まとめ
- カメラコントロール以外で撮影したい場合は[.Stream]を利用する
- [.Stream]を利用する場合はストリームレートの設定必須
    - ストリームレートは上限、下限があるぞ！キヲツケロ！
- [.Stream]を利用する際は画像が反転するカメラがあるので注意
    - 記事投稿時点では回避する術はない

撮影ボタンによる写真撮影は実現できたのですが、デバイス依存による課題は残ってしまう、という結論でした。「反転してても問題ない」という判断であれば十分利用可能な機能ですが・・・。どうしても反転されると困る、という場合は、利用時の制約事項にするか、素直に反転しない側のカメラのみを利用するよう制限するしかないかな、と考えています。

それでは、皆さま。素晴らしい Power Platform Life を！