ブラウザから操作できるライブ(監視)カメラを作る!




WebIOPi を使って、ブラウザからサーボモータを制御する所まではできた。

いよいよ、本当にいよいよであるが、

・ブラウザからリモートで操作出来るライブ(監視)カメラ

を完成させたいと思う。

といっても、前回の

WebIOPi で遠隔操作(サーボモータ制御編)!

を実現した段階で、やることはほぼ終わっていると言っていい。

追加でやることは、

『ブラウザ上にカメラからの映像を出力する』

ということぐらい。

その方法は色々あるようだが、最もメジャーな方法は、おそらく

・mjpg-streamer

を使った方法だろうと思う。

実際、いろんなサイトを見ても、この方法を紹介している所が多い。

これはこれで自分でも試して見たいと思うが、今回は別の方法で実現する。

具体的には、

・RPi_Cam_Web_Interface

を使った方法。

なぜこれを使うのか、というと、

・既に『レンズ型カメラを作る!』でインストール済みである
・静止画の撮影、動画録画機能が既に実現されている

というのが主な理由。

ということで、早速作って行きたいと思う。

  1. 実現したいこと
  2. 必要なもの
  3. 必要な設定
  4. 結果
  5. まとめ



■実現したいこと

実現したいことは基本的に

WebIOPi で遠隔操作(サーボモータ編)!

で実現したことに、カメラ画像の配信を追加すること。

具体的にはこんな感じ。


で、上下左右ボタンで、サーボモータが動かせる、と言う状況。

以下、これを実現するために必要なものと設定を記載する。



■必要なもの

今回、サーボモータの制御は

WebIOPi で遠隔操作(サーボモータ制御編)!

で書いた内容そのままで実現する。

このため、

・raspberry pi 本体を動かすのに必要なもの

に加え、

・『サーボモータを動かす!
・『カメラマウントを組み立てる!

などで必要とした、サーボモータ、カメラマウント等が必要。

また、映像の配信は

・RPi_Cam_Web_Interface

というソフトウェアパッケージを利用する。

が、このソフトは、以下のような、

ラズパイ専用カメラモジュール

サインスマート Raspberry Pi 用 カメラモジュール Camera Module for ラズベリーパイ
by カエレバ

高性能版、

Raspberry Pi Official Camera V2 for 3B/2B/B+/A+/B/A ソニー製808万画素CMOSセンサ使用 ラズベリーパイ公式 HDカメラ
by カエレバ

赤外線カメラ、

Raspberry Pi PiNoir カメラモジュール V2
by カエレバ

等にのみ対応ということらしい。

よって、一般的な USB カメラでは実現できない。

USB カメラで実現したい場合は、おそらく

・mjpg-streamer

を使えばよいと思う。

その方法については後日まとめる予定。

以上、必要なものをざっくりあげた。

これらについても、後日一覧化してまとめるつもり。

とりあえず現時点では、

・本サイト内の各記事

をみて準備していただきたい。



■必要な設定

OS のインストールや初期設定に関しては、既に終了している前提で記載する。

そこから始めたい方は、

ラズパイで linux

に記載している各種設定を実施していただければと思う。

その上で、やるべきことは主に以下の三つ。

  1. ブラウザからサーボモータを制御できる様にする
  2. ブラウザで映像を見れる様にする
  3. 上の二つを一つにまとめる

各々記載する。



・ブラウザからサーボモータを制御できる様にする

多分実現方法は色々あるが、今回は実現済みの方法を利用。

具体的には、まず、

・『WebIOPi で遠隔操作(インストール編)!

の内容を実現し、ブラウザから GPIO を操作できる環境を整える。

次に、

・『WebIOPi で遠隔操作(サーボモータ制御編)!

で、GPIO に繋がったサーボモータを制御できるようにする。

遠隔操作系はとりあえずこれだけ。



・ブラウザで映像を見れる様にする

次は、専用カメラモジュールからの映像をブラウザに表示できるようにする。

これも実現済みの手法を使う。

具体的には、

・『レンズ型カメラを作る!

でも記載している、

RPi-Cam-Web-Interface
http://elinux.org/RPi-Cam-Web-Interface

を利用する。

これを、

・『レンズ型カメラを作る!

に記載の通り、インストールすればよい。



・上の二つを一つにまとめる

ここまでくれば、

・ブラウザからサーボモータを動かす
・ブラウザからカメラ画像を確認する

ということが個別にできるようになる。

が、当然のことながら、同じ画面上に両方がないと、操作しづらい。

よって、これを一枚の画面にまとめる。

最初はこれの実現方法について、悩んだが、思いついてみれば超簡単。

無理くりの力技で、あんまりスマートな方法ではないが、

・『WebIOPi で遠隔操作(サーボモータ制御編)!

で作った index.html の中に、

RPi_Cam_Web_Interface 側の画面

を iframe で組み込んでやればよいのだ、と気がついた。
*ほんとはあまりよい方法ではないが。

ということで、

・『WebIOPi で遠隔操作(サーボモータ制御編)!

で作った 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 にログインして操作する方法を書いた。

それから、二ヶ月半。

ようやく、元々やりたかった、

・ブラウザから操作できるライブ(監視)カメラ

を作れた。

ということで、今回の内容をまとめておく。

Point!・カメラはラズパイ専用カメラモジュールが必要!
・『WebIOPi で遠隔操作(インストール編)!』に基づき、WebIOPi をインストール!
・『WebIOPi で遠隔操作(サーボモータ制御編)!』に基づき、プログラムと index.html 作成!
・『レンズ型カメラを作る!』に基づき、カメラ画像をブラウザで表示!
・index.html の中に iframe タグで RPi_Cam_Web_Interface の出力を表示!

これで、ブラウザから操作出来るライブ(監視)カメラは完成。

なお、今回は、

・ラズパイとスマホが同じネットワークに接続されている前提

で実現している。

が、これだと、IP address が毎回変わったり、ちょっと大変。

もうちょっと楽にやるには、

・『WiFi アクセスポイント化

で書いたように、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.
カテゴリー: ラズパイで電子工作 タグ: , パーマリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください