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枚溜まるまでは、開けないファイルがある。

ブログ