WebIOPi を使って、ブラウザからサーボモータを制御する所まではできた。
いよいよ、本当にいよいよであるが、
・ブラウザからリモートで操作出来るライブ（監視）カメラ
を完成させたいと思う。
といっても、前回の
を実現した段階で、やることはほぼ終わっていると言っていい。
追加でやることは、
『ブラウザ上にカメラからの映像を出力する』
ということぐらい。
その方法は色々あるようだが、最もメジャーな方法は、おそらく
・mjpg-streamer
を使った方法だろうと思う。
実際、いろんなサイトを見ても、この方法を紹介している所が多い。
これはこれで自分でも試して見たいと思うが、今回は別の方法で実現する。
具体的には、
・RPi_Cam_Web_Interface
を使った方法。
なぜこれを使うのか、というと、
・既に『レンズ型カメラを作る！』でインストール済みである
・静止画の撮影、動画録画機能が既に実現されている
というのが主な理由。
ということで、早速作って行きたいと思う。
■実現したいこと
実現したいことは基本的に
で実現したことに、カメラ画像の配信を追加すること。
具体的にはこんな感じ。
で、上下左右ボタンで、サーボモータが動かせる、と言う状況。
以下、これを実現するために必要なものと設定を記載する。
■必要なもの
今回、サーボモータの制御は
で書いた内容そのままで実現する。
このため、
・raspberry pi 本体を動かすのに必要なもの
に加え、
・『サーボモータを動かす！』
・『カメラマウントを組み立てる！』
などで必要とした、サーボモータ、カメラマウント等が必要。
また、映像の配信は
・RPi_Cam_Web_Interface
というソフトウェアパッケージを利用する。
が、このソフトは、以下のような、
ラズパイ専用カメラモジュール
| サインスマート Raspberry Pi 用 カメラモジュール Camera Module for ラズベリーパイ |
||||
|
高性能版、
| Raspberry Pi Official Camera V2 for 3B/2B/B+/A+/B/A ソニー製808万画素CMOSセンサ使用 ラズベリーパイ公式 HDカメラ |
||||
|
赤外線カメラ、
| Raspberry Pi PiNoir カメラモジュール V2 |
||||
|
等にのみ対応ということらしい。
よって、一般的な USB カメラでは実現できない。
USB カメラで実現したい場合は、おそらく
・mjpg-streamer
を使えばよいと思う。
その方法については後日まとめる予定。
以上、必要なものをざっくりあげた。
これらについても、後日一覧化してまとめるつもり。
とりあえず現時点では、
・本サイト内の各記事
をみて準備していただきたい。
■必要な設定
OS のインストールや初期設定に関しては、既に終了している前提で記載する。
そこから始めたい方は、
に記載している各種設定を実施していただければと思う。
その上で、やるべきことは主に以下の三つ。
各々記載する。
・ブラウザからサーボモータを制御できる様にする
多分実現方法は色々あるが、今回は実現済みの方法を利用。
具体的には、まず、
の内容を実現し、ブラウザから GPIO を操作できる環境を整える。
次に、
で、GPIO に繋がったサーボモータを制御できるようにする。
遠隔操作系はとりあえずこれだけ。
・ブラウザで映像を見れる様にする
次は、専用カメラモジュールからの映像をブラウザに表示できるようにする。
これも実現済みの手法を使う。
具体的には、
・『レンズ型カメラを作る！』
でも記載している、
RPi-Cam-Web-Interface
http://elinux.org/RPi-Cam-Web-Interface
を利用する。
これを、
・『レンズ型カメラを作る！』
に記載の通り、インストールすればよい。
・上の二つを一つにまとめる
ここまでくれば、
・ブラウザからサーボモータを動かす
・ブラウザからカメラ画像を確認する
ということが個別にできるようになる。
が、当然のことながら、同じ画面上に両方がないと、操作しづらい。
よって、これを一枚の画面にまとめる。
最初はこれの実現方法について、悩んだが、思いついてみれば超簡単。
無理くりの力技で、あんまりスマートな方法ではないが、
で作った index.html の中に、
RPi_Cam_Web_Interface 側の画面
を iframe で組み込んでやればよいのだ、と気がついた。
＊ほんとはあまりよい方法ではないが。
ということで、
で作った index.html の中の、
・body 部分直下の div の直後の行
に、
・<iframe width=”640″ height=”480″ src=”http://[IP addess]/[Subfolder]/”></iframe>
を組み込んでやればよい。
ここで、
・[IP address] は RPi_Cam_Web_Interface を起動している raspberry pi の IP Address
・[Subfolder] は RPi_Cam_Web_Interface インストール時に指定したディレクトリ
に置き換える必要があることに注意が必要。
これで、最初に書いた、『実現したいこと』が実現できる。
■まとめ
では、SSH 等で raspberry pi にログインして操作する方法を書いた。
それから、二ヶ月半。
ようやく、元々やりたかった、
・ブラウザから操作できるライブ（監視）カメラ
を作れた。
ということで、今回の内容をまとめておく。
・『WebIOPi で遠隔操作（インストール編）！』に基づき、WebIOPi をインストール！
・『WebIOPi で遠隔操作（サーボモータ制御編）！』に基づき、プログラムと index.html 作成！
・『レンズ型カメラを作る！』に基づき、カメラ画像をブラウザで表示！
・index.html の中に iframe タグで RPi_Cam_Web_Interface の出力を表示！
これで、ブラウザから操作出来るライブ（監視）カメラは完成。
なお、今回は、
・ラズパイとスマホが同じネットワークに接続されている前提
で実現している。
が、これだと、IP address が毎回変わったり、ちょっと大変。
もうちょっと楽にやるには、
で書いたように、Raspberry Pi を WiFi アクセスポイントにするとよい。
また、完全に外部のネットワークからアクセスするには、
WebIOPi の機能を使えば出来る模様。
私はまだ試していないが、
WebIOPi の install ページ
http://webiopi.trouch.com/INSTALL.html
の
Access WebIOPi over local network
と言う所に記載があるので、これを参考にすれば出来る模様。
実際に試してみてうまくいったら、また記載しようと思う。
さて、今後に関してだが、
・mjpg-streamer での実現方法
・音声送受信機能の追加
などが出来れば、ライブ（監視）カメラとしてやりたいことは完了。
後者は実現への道が見えてきたので、早速取り組みたいと思う。
これまでかなり苦労したが、なんとか実現できてよかったよ。ほんと。
Copyright (c) 2017 Webmaster of this site All Rights Reserved.