使ってないIPhoneでリアルタイム監視カメラ

## はじめに
昔使ってたIPhoneって，いい値段で売れませんよね

バッテリーも弱くなっていて，充電しながらでないと使えない
画面がバキバキに割れている　　とか

このようなIPhoneを有効活用するために，Webで確認できる監視カメラを作ります！

## 使用環境
IPhone 6
　 -- iOS ver. 12.0
AWS
　 -- Elemental MediaLive
　 -- Elemental MediaPackage
　 -- CloudFront

![スクリーンショット 2019-02-13 15.33.20.png](https://qiita-image-store.s3.amazonaws.com/0/358821/a6152a1c-f677-2652-86a0-50c0fc572ed4.png)

(AWSのシンプルアイコンって変更されてたんですね，知らなかった．．．)

##手順
1. [MediaPackageの設定](#MediaPackageの設定)
2. [MediaLiveの設定](#MediaLiveの設定)
3. [RTMPソフトインストール，設定](#RTMPソフトインストール,設定)
4. [CloudFrontの設定](#CloudFrontの設定)

※2019年2月現在の手順
※AWSは改変が頻繁に起こる．検索すれば他の記事も出てくるが，現在と異なっている or 全文英語のため，改めて手順を示す．先駆者の方々に感謝（参考サイトは最後に示す）

## 1. MediaPackageの設定
* **AWS Elemental MediaPackage**サービスへアクセスし，``Create``を押す
* **ID / Description** に任意の名前をつける（今回はSecurityCameraChannel）
* **Input Type** は Apple HLS を選択

![スクリーンショット 2019-02-13 15.12.06.png](https://qiita-image-store.s3.amazonaws.com/0/358821/fc7720c7-61bd-c6ed-2b60-9ddafd155506.png)

* CloudFront を使うか，と聞かれているため作成するを選択し，``Create``

![スクリーンショット 2019-02-13 15.38.48.png](https://qiita-image-store.s3.amazonaws.com/0/358821/b56a50ff-1a87-a0c6-1e9b-2e04c947dae0.png)

* **Inputs** に書かれた2つの**URL**, **Username**, **Password** は後ほど使う（メモしててもOK）
* **Endpoints** を設定するため, ``Add endpoints`` を押す
* **ID** に任意の名前(ここでは,SecurityCameraChannelMPEndpoint)を入力し, ``Save``

## 2. MediaLiveの設定
* **AWS Elemental MediaLive**サービスへアクセスし，``Create channel``を押す
* まず何より先に, **Channel template** にプルダウンメニューから Live event を選択
* **Channel name** を SecurityCameraChannel に
* **IAM role** は既存の MediaLiveAccessRole を使用
* 左側にある **Input attachments** の ``Add`` を押す
![スクリーンショット 2019-02-13 16.08.10.png](https://qiita-image-store.s3.amazonaws.com/0/358821/1eac8c06-0ed0-bc8c-3182-371ff9841f54.png)

* 右上``Create Input`` を押し,**Input name**に SecurityCameraInputChannel
  **Input Type**に RTMP(push) を選択

* **Input security group** は元々ある 0.0.0.0/0 を使用してもよいし， 
監視カメラとして使うIPhoneがWifi環境下にあるなら，アクセスを制限してもよい
(今回は簡単のため0.0.0.0/0を使用．
元々なければCreateから入力し，``Create input security group``を押す)

* **Input destination** を以下のように設定し，``Create``
![スクリーンショット 2019-02-13 16.20.05.png](https://qiita-image-store.s3.amazonaws.com/0/358821/28b92c44-1645-d4c5-2ab0-c76c8b9ca612.png)

* 前の画面に戻ると，今作ったものがプルダウンで選択できるようになっている．
ここまで順調なら，このような画面になる．右下``Confirm``を押す
![スクリーンショット 2019-02-13 16.25.37.png](https://qiita-image-store.s3.amazonaws.com/0/358821/85e692d8-538b-2bf5-8bf6-cc70ab55aceb.png)

* 左側**Output groups** の``1.HD(HLS)``を押す
* **HLS group destination A**の**URL**に，先ほど「後で使う」と言った**MediaPackage**で得られたURLを入力する
* ``Credentials``を押し，``Create parameter``を選択．**Name, Password value**に先ほど
得られたUsername, Passwordを入れ，最後に右下``Create parameter``を押す
(Username, NameにMediaPackageのUsername．Password valueにPassword)
![スクリーンショット 2019-02-14 12.31.39.png](https://qiita-image-store.s3.amazonaws.com/0/358821/eb1d7525-1acb-5921-43ba-d98659d0ba22.png)


* **HLS group destination B**にも同様の手順をとるが，Aとは被らないようもう一つのURL等を使用する

* 下へスクロールし，**HLS settings** の **CDN Settings**を``Hls basic put ``に変更

* ``Create Channel``を押す
(ここまで上手くできていれば，エラーが出ずにチャネルが作られるはず．
逆にエラーが出れば，どこか設定ミス or 漏れが考えられる)

* ``Start``を押し，起動を待ちつつ，次のステップへ
このとき**Active alerts** がエラーを出すが，無視して良い

## 3. RTMPソフトインストール，設定

* App storeにて「RTMP」と入力し，RTMPに対応している配信アプリをインストール
私は「Larix」というアプリを使用．動作しないアプリもいくつか確認しています

* アプリ内設定画面（大体歯車マーク）から，RTMPモードを選択（なければスルー）

* 宛先の**URL**には，**MediaLive**左側より
**Inputs** -> **SecurityCameraInputChannel** -> **Endpoints** の値を入力
![スクリーンショット 2019-02-14 10.19.46.png](https://qiita-image-store.s3.amazonaws.com/0/358821/8c9d6a00-89d1-1c06-ad09-02843536c3da.png)

* IPhoneから配信が行えるかを確認するため，**MediaPackage**の**Endpoints**にある**Preview** 
 ``Play``を押す

* 少し時間差があるが，IPhoneで撮影された映像がPreviewで確認できたら成功 

## 4. CloudFrontの設定
* **CloudFront**サービスへアクセスし，STEP 1で作成したCloudFrontがすでにあることを確認
* 自動生成されたドメイン名を，MediaPackageのEndpointsにかかれたURLと一部置き換える

(例)
**MediaPackageのEndpointsにあるURL**
https://〇〇〇〇.mediapackage.ap-northeast-1.amazonaws.com/out/v1/〜〜〜/index.m3u8
**CloudFrontのドメイン名**
△△△△.cloudfront.net

**置き換えて得られるURL**
https://△△△△.cloudfront.net/out/v1/〜〜〜/index.m3u8

* ドメイン名を変えたい場合は，**CloudFront**サービス内**ID**の配列をクリックし，``Edit``を押せば代替ドメインを設定できる
* 置き換えて得られたURLで撮影している映像を確認できる
* Google Chromeで確認するときは，「Native HLS Playback」等で拡張を行う

![スクリーンショット 2019-02-14 12.24.45.png](https://qiita-image-store.s3.amazonaws.com/0/358821/164cac02-735b-0cae-7054-d6b87d015aa5.png)

##おわりに
今後改良するところ

* 録画機能をつける(AWS S3を使う)
* 複数台のカメラ映像を一箇所で見れるようにする
* 物体（主に人）検出

色々広げられそう！


##　参考サイト（圧倒的感謝）
AWS SAの方のSlide Share
https://www.slideshare.net/KamedaHarunobu/20180123-20liveaws-media-servicesmedia-live-mediapackagepub
AWS Black Belt
https://aws.amazon.com/jp/blogs/news/webinar-bb-livestreaming_realtimechat-2018/
MediaLiveのDocument（英語）
https://docs.aws.amazon.com/medialive/latest/ug/getting-started.html