ブログ

Armadillo-810開発セットでカメラの画像の動画と静止画をWebブラウザで見るサンプルデモ

at_kazutaka.bito
2015年6月26日 17時40分

Armadillo-810開発セットをPCとLANで接続して、PCのWebブラウザから  カメラの画像の動画(MJPG:10fps)  カメラの画像の5秒毎の静止画(JPEG)  静止画を10枚分のファイルのダウンロード ができるサンプルデモを作ってみた。

1.Armadillo-810上に下記のスクリプトのファイル(start_mjpg、while_get_still)を作成する。

1-1.mjpg_streamerを起動するスクリプトのファイル

start_mjpg

mjpg_streamer \
-i "/usr/lib/mjpg_streamer/input_uvc.so --device /dev/video1 --yuv --resolution 640x480 --fps 10" \
-o "/usr/lib/mjpg_streamer/output_http.so -www /usr/lib/mjpg_streamer/www"

1-2.mjpg_streamerを起動して、3秒毎に静止画のファイル(10個まで)を作るスクリプト。

静止画のファイル10個ごとに圧縮ファイルにまとめる。
while_get_still

/etc/config/start_mjpg &
mkdir /home/www-data/pictures
sleep 3
while :
do
  for i in 0 1 2 3 4 5 6 7 8 9 
  do 
    echo 1 > /sys/class/leds/LED1/brightness
    wget -O /home/www-data/pictures/picture$i.jpg http://192.168.10.20:8080/?action=snapshot
    echo 0 > /sys/class/leds/LED1/brightness
    sleep 5
  done
  echo 0 > /sys/class/leds/LED4/brightness
  tar czvf /home/www-data/pictures.tar.gz  /home/www-data/pictures
  echo 1 > /sys/class/leds/LED4/brightness
done

説明)

  • 前述のstart_mjpgを実行してmjpg_streamerを動作させる。
  • 5秒毎に静止画(JPEG)を、picture[0-9].jpgという名前で/home/www-dataに置く。
  • 静止画が10枚更新される毎に、10枚の静止画をpictures.tar.gzという名前の圧縮ファイルにして、/home/www-dataに置く。
  • なお、静止画は10枚ごとに同じファイル名に上書きされる。
  • スクリプト内のIPアドレスは、下記4-2にてArmadilloの固定IPアドレスを192.168.10.20とした場合を前提としている。

1-3.start_mjpg、while_get_stillに実行権限を付ける。

[armadillo ~]# chmod +x start_mjpg
[armadillo ~]# chmod +x while_get_still

1-4.start_mjpg、while_get_stillを/etc/config/に置く。

[armadillo ~]# mv start_mjpg /etc/config
[armadillo ~]# mv while_get_still /etc/config

補足) while_get_stillファイル内で、

/etc/config/start_mjpg &

のようにstart_mjpgが/etc/config/にあることを前提としているため。

2.PC上に下記htmlファイル(a810_get_jpeg.html)を作成する。

補足) html内のIPアドレスは、下記4-2にてArmadilloの固定IPアドレスを192.168.10.20とした場合を 前提としている。

a810_get_jpeg.html

<a href="http://192.168.10.20:8080/stream.html" > Armadillo-810 MJPEG </a> </br>
<a href="http://192.168.10.20/pictures/picture0.jpg" download="picture0.jpg"> Armadillo-810 JPEG(0) </a> </br>
<a href="http://192.168.10.20/pictures/picture1.jpg" download="picture1.jpg"> Armadillo-810 JPEG(1) </a> </br>
<a href="http://192.168.10.20/pictures/picture2.jpg" download="picture2.jpg"> Armadillo-810 JPEG(2) </a> </br>
<a href="http://192.168.10.20/pictures/picture3.jpg" download="picture3.jpg"> Armadillo-810 JPEG(3) </a> </br>
<a href="http://192.168.10.20/pictures/picture4.jpg" download="picture4.jpg"> Armadillo-810 JPEG(4) </a> </br>
<a href="http://192.168.10.20/pictures/picture5.jpg" download="picture5.jpg"> Armadillo-810 JPEG(5) </a> </br>
<a href="http://192.168.10.20/pictures/picture6.jpg" download="picture6.jpg"> Armadillo-810 JPEG(6) </a> </br>
<a href="http://192.168.10.20/pictures/picture7.jpg" download="picture7.jpg"> Armadillo-810 JPEG(7) </a> </br>
<a href="http://192.168.10.20/pictures/picture8.jpg" download="picture8.jpg"> Armadillo-810 JPEG(8) </a> </br>
<a href="http://192.168.10.20/pictures/picture9.jpg" download="picture9.jpg"> Armadillo-810 JPEG(9) </a> </br>
<a href="http://192.168.10.20/pictures.tar.gz" download="pictures.tar.gz"> Armadillo-810 JPEG(0-9) </a> </br>

3.機材の接続

3-1.必要な機材

  • Armadillo-810開発セット
  • USB-LAN変換ケーブル(LAN-TXU2C)
  • LANケーブル
  • PC

3-2.Armadillo-810とPCをLANで接続する

  • Armadillo-810開発セットのUSBにUSB-LAN変換ケーブルを接続。
  • 上記のArmadillo-810開発セット+USB-LAN変換ケーブルとPCを、LANケーブルで接続。

補足)
Armadillo-810開発セットとPCの接続は、 Howto : Armadillo-810を接続して使用するためのWindows環境設定のように Armadillo-810開発セットに同梱のUSBケーブルを使ってEthernetガジェットを使う方法もあるが、ここでは、USB-LAN変換ケーブルを使った。

4.ネットワークの設定

4-1.PCのネットワークの設定(固定IPアドレスは一例として、192.168.10.10とする)

(下記はWindows7の例)
 右下のアンテナのアイコンを左クリックして
  ネットワークと共有センター
  ->ローカルエリア接続
  ->プロパティ
  ->インターネットプロトコルバージョン4(TCP/IPv4)にカーソルを合わせて、プロパティ
  ->次のIPアドレス、を使うを選択して
   IPアドレス:192.168.10.10
   サブネットマスク:255.255.255.0
   デフォルトゲートウェイ:未記入

4-2.Armadillo-810のネットワークの設定(固定IPアドレスは一例として、192.168.10.20とする)

[armadillo ~]# ifconfig eth0 192.168.10.20 up

5.Armadillo-810で動画ストリーミング&静止画作成のスクリプトを実行する

標準のイメージファイルの場合、uvc-gadgetが自動的に起動し、カメラデバイスを使用しているため、 uvc-gadgetを止める。

[armadillo ~]# killall uvc-gadget

while_get_stillを実行。

[armadillo ~]# /etc/config/while_get_still

6.PC上でa810_get_jpeg.htmlをダブルクリックする

7.上記6で開いたWebブラウザで項目(下記)をクリックする。

(Webブラウザによっては開けないものがあるかも。FireFoxは動画、静止画ともにOK。)

Webブラウザで動画を見る場合
 Armadillo-810 MJPEG:動画(10fps)

Webブラウザで静止画を見る場合
 Armadillo-810 JPEG(0):静止画
 Armadillo-810 JPEG(1):静止画
 Armadillo-810 JPEG(2):静止画
 Armadillo-810 JPEG(3):静止画
 Armadillo-810 JPEG(4):静止画
 Armadillo-810 JPEG(5):静止画
 Armadillo-810 JPEG(6):静止画
 Armadillo-810 JPEG(7):静止画
 Armadillo-810 JPEG(8):静止画
 Armadillo-810 JPEG(9):静止画
(11枚目以降は、JPEG(0)に戻って上書きされる。)

Webブラウザ経由で静止画ファイル(10枚)をダウンロードする場合
 Armadillo-810 JPEG(0-9):10枚ごとの静止画をまとめた圧縮ファイル(.tar.gz)
              ->ダウンロードして、7zip等のソフトで解凍して閲覧可能。

->静止画が10枚溜まるまでは、開けないファイルがある。