ラズパイにRPi-Cam-Web-Interfaceとremote.itで遠隔Web IPカメラ

# はじめに
~ Remote controlled Web IP camera over the internet via cellular network ~
ラズパイにカメラモジュール「Camera Module V2」を接続して
今回はラズベリーパイ(Raspberry pi)に「[RPi-Cam-Web-Interface](https://elinux.org/RPi-Cam-Web-Interface)」をインストールして、そのあとremote.itを追加するとインターネット越しでも監視できるWeb IPカメラが作れちゃいます。ラズパイ設置場所にあるWifiや有線LANにDHCPで接続して、外部向けのポート公開などは不要です。

> [RPi-Cam-Web-Interface](https://elinux.org/RPi-Cam-Web-Interface)

ラズパイ用カメラ向けのWebインターフェースソフトウェアはいくつかあります。
他にも「[MJPG-streamer](https://github.com/jacksonliam/mjpg-streamer)」なんかも優秀です、ご参考まで。今回は本文では触れません。

# 「RPi-Cam-Web-Interface」とは
「RPi-Cam-Web-Interface」はラズパイカメラモジュール用のWebインターフェースです。
カメラモジュールの操作を毎回コマンドラインやプログラミングから行うのは面倒ですが、このソフトを使うとWebブラウザから簡単に画像の確認や操作ができます。また定期的な撮影と保存、動体検知なども設定できます。
RPi-Cam-Web-Interface本家での説明では、特徴として高フレームレート、カメラの明るさやコントラストの調節機能、ビデオ画像、静止画をSDカードに保存、ダウンロード可能。また動体検知やスケジュール録画、スクリプトの実行、データのローテーションなどが解説されています。

### Raspberry Pi camera Module
カメラモジュールの例は[こちら](https://projects.raspberrypi.org/en/projects/getting-started-with-picamera)。他にももっと安い汎用品も販売されています。画質とお値段を考慮して選ぶと良いです。


# RPi-Cam-Web-Interfaceのインストール

[RPi-Cam-Web-Interface](https://elinux.org/RPi-Cam-Web-Interface)の　Basic Installation　に沿ってインストールします。

###　ラズパイの準備
　まずはRaspbianを通常通りインストールします。
　[NOOBS](https://www.raspberrypi.org/downloads/noobs/)を使うと簡単ですね。

###　カメラモジュールの取り付け

　[Getting started with the Camera Module](https://projects.raspberrypi.org/en/projects/getting-started-with-picamera)　を参考にカメラを取り付けます。

![pi-camera-attached.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/5c2b6685-e48f-16c3-4c16-8fc4936f9045.jpeg)

　画像は同じく上記本家サイトから。

###　カメラ、SSH、VNCの有効化

　Raspberry Piの設定から、カメラ、ついでにSSH、VNCを有効化します。
　GUIであれば　Raspberry Pi Configuration　から

![スクリーンショット 2019-08-10 22.21.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/92701efa-a27f-afe1-d0fa-b4d760517cea.png)

　InterfaceタブでそれぞれをEnableを選択しOKをクリック。

![スクリーンショット 2019-08-10 22.13.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/b8317895-7b3c-54ef-e4bf-383be4d8776f.png)

　設定を反映するために再起動が実行されます。


###　最新パッケージ一覧の取得

　再起動後再度ログインし、ターミナルを開きパッケージリストをアップデートします。

```console
xxx@pi01:~ $ sudo apt update
xxx@pi01:~ $ sudo apt upgrade
```

###　RPi_Cam_Web_Interfaceのダウンロード

　githubからラズパイ上にソフト一式クローン。

```console
xxx@pi01:~ $ git clone https://github.com/silvanmelchior/RPi_Cam_Web_Interface.git

Cloning into 'RPi_Cam_Web_Interface'...
remote: Enumerating objects: 26, done.
remote: Counting objects: 100% (26/26), done.
remote: Compressing objects: 100% (16/16), done.
remote: Total 3095 (delta 12), reused 21 (delta 9), pack-reused 3069
Receiving objects: 100% (3095/3095), 4.35 MiB | 534.00 KiB/s, done.
Resolving deltas: 100% (1925/1925), done.
xxx@pi01:~ $ 
```

###　RPi_Cam_Web_Interfaceのインストール

　ディレクトリを移動しインストーラーを起動。

```console
xxx@pi01:~ $ cd RPi_Cam_Web_Interface
xxx@pi01:~/RPi_Cam_Web_Interface $ ./install.sh
```

　インストール中にいくつかの設定ができる選択画面が表示されます。

![スクリーンショット 2019-08-11 0.00.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/53ce6eea-f79b-bd82-56fc-781c33c38a09.png)

WebサイトのサブフォルダーやWebサーバーの種類を選択できます。
カメラ画像を表示させる時のUser/Password認証も設定できますが、少し癖があるようなので注意。
今回はデフォルトのまま、一度タブを押してOKを選択。
インストールを完了します。

###　ブラウザからローカル接続動作確認

　一旦ここまでの動作確認をしましょう。
　ブラウザからラズパイのIPアドレスにアクセスします。

![スクリーンショット 2019-08-11 13.47.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/78095d35-951d-1f6c-ebd1-f65bb0499ea0.png)

　html　のリンクをクリックします。

![スクリーンショット 2019-08-11 13.43.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/9a37d81a-98cb-02da-26cb-af0e66b15ed8.png)

無事、リアルタイムカメラ映像が表示されました。


:::note info
2021.10.14 更新
これ以降の手順を従来のconnectd_installerを使う手順からDesktop/CLIを使う手順に更新しました。
:::

# remote.itでネットワーク設計が不要に
remote.itを使うとラズパイをDHCPで運用してもremote.it経由であれば気にせずデバイスに乗り込めちゃいます。ポートフォワードや自宅ネットワークをインターネット側にポート公開（穴あけ）する必要もありません。
remote.itの概要は、こちらの[@u___sk](https://qiita.com/u___sk)さんの記事でも紹介されています。

https://qiita.com/u___sk/items/e0df9581d2e58891ec8a

加えると、インターネット接続の種類は選びません。ラズパイが携帯電話ネットワーク（Pocket Wifiやテザリングなど）にぶら下がっていてもOK。乗り込めちゃいます。

# remote.it導入からサービスに接続するまでの流れ
- remote.itアカウントの作成
- remote.itのインストール
- Raspberry piをremote.itデバイスとして登録
- 接続したいサービス（カメラのWeb Interface, SSH, VNC等）の設定

最初にremote.itアカウント作成が必要ですが「[インターネット世界の「どこでもドア」　remote.it](https://qiita.com/u___sk/items/e0df9581d2e58891ec8a)」の記事がわかりやすいです。

# remote.itのインストール
<!--　さっき上でしているので省略コメントアウト
- まず最新パッケージ一覧の取得（さっきしたので省略可ですが一応）

```console
xxx@pi01:~ $ sudo apt update
```
-->

- remote.itをインストール

```console
xxx@pi01:~ $ sudo apt install remoteit
```
これでremote.itのインストールは完了です。

# Raspberry piをremote.itデバイスとして登録

- このRaspberry piをremote.itデバイス登録するためにGUIコンソールにアクセスします。

> http://[ラズパイのIPアドレス]:29999

remote.itアカウント、パスワードを入力し、`SIGN IN`をクリックします。

![signin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/f401e1de-e575-c1ff-a809-740528c8c937.png)


`Set up remote access`をクリックします。
![setup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/6ab88f5e-b22e-4949-58c6-3dac53292cb7.png)

デバイス登録画面が表示されます。 任意のデバイス名を入力します。 "Services"にはラズパイ上で稼働中のサービスが表示されます。 リモートアクセスしたいサービスにチェックを入れ、`REGISTER`をクリックします。 `remoteit admin`サービスは、このWeb管理画面自体のサービスです。 このサービスを登録しておけば、遠隔からサービスの追加・削除を行うことができます。

RPi_Cam_Web_InterfaceのWeb Interfaceは`HTTP-80`のhttpサービスに割り当てられています。

デバイス名の入力、登録サービスの選択が完了したら、`REGISTER`をクリックします。

![register.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/101e1eb0-f91b-49c0-c258-8dc3584bcaa5.png)

少し待つと、、、、

![ServiceRegistrationProgress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/420382f8-3945-eb2f-50b2-ec5715a24720.png)

登録が完了します。

![registered.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/03fb1a7c-cc33-d5e6-9fff-6b843e06f026.png)

これでRaspberry Piへリモート接続する準備が整いました。


# RPi_Cam_Web_Interfaceにremote.itでリモートログインしてみる
remote.itにサインインして先程登録したデバイス名を探す

![portal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/84365ff5-3f67-9150-545a-09267d5a76e6.png)



無事、remote.itにデバイス（ラズパイ）が登録されていますね。この例ではデバイスの名前`develop-JPN-01`をクリックします。
すると、このデバイスに登録されているサービスがいくつか表示されました。先程登録したWeb InterfaceやSSHですね。


![portalServices.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/c90434c6-5349-44e5-ae32-5d15a1868b9a.png)
`http`をクリックすると…

![スクリーンショット 2019-08-11 14.26.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/3cc57029-8293-fd59-5d19-b4108e8c7dc2.png)

新しいタブが開いてつながりました！URLの部分がremote.itで払い出された一時アクセス用のリンクになっていますね。これで接続するネットワークを変更してもインターネットに繋がっていればremote.itがその所在を特定してくれます。インターネット越しでもケータイのテザリングでも大丈夫です。

# 安定した運用のために
念の為にcronで一日一回ぐらいリブートしておけばまあ安心かな。
設定例

```console
xxx@pi01:~ $ sudo crontab -e
```
エディタ画面で以下の1行を追加

```
0 2 * * * /sbin/shutdown -r now
```

上記例は、1日1回深夜2時にリブートするのが私の人生経験上無難だったというだけです、お好みに合わせて変更してください。cronでなくとも、また編集方法なども各宗派お好みで。



# つまりこれは、セキュアかつ簡単で安価な遠隔コントロールIPカメラ
またじいちゃんばあちゃんの住む実家に置きに帰ろうと思います。こないだ作った[デジタルフォトフレーム](https://qiita.com/mskairmail/items/226b650fb16256173ea5)に追加してもいいかもしれないですね。
実家のネットワークの設計は不要、DHCPでインターネットにさえ出られればOK。
設置する場所を変更されてもたいして問題になりません。
私はじいさんの手入れする庭を眺めようと思います。

![スクリーンショット 2019-08-11 14.46.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309124/e0698d89-eb4b-ab36-8b22-944fa2f2f3fa.png)

（カメラの絵はイメージです）


# まとめ
以前書いたデジタルサイネージとほぼ同様のユースケースですが今回は遠隔側の様子を手元に持ってきました。
ラズパイで実現できる機能をインターネットに「安全に」「簡単に」「便利に」双方向接続する方法としてremote.itはとても良い組み合わせだと思います。他の利用例も紹介したいです。

ご参考
> [ラズパイにScreenlyとremote.itで遠隔デジタルサイネージ](https://qiita.com/mskairmail/items/226b650fb16256173ea5)