Armadillo-IoT G4：USBカメラの画像をmjpg-streamerを使って、ネットワーク経由でPCのWebブラウザで見る方法

at_shinya.matsumoto

2021年12月23日 14時14分

本ブログはArmadillo-X1：USBカメラの画像をmjpg-streamerを使って、ネットワーク経由でPCのWebブラウザで見る方法をArmadillo-IoT G4で実践した内容となります。

動作イメージ

当ブログの動作イメージとしては、以下の動画をご覧ください。

はじめに

Armadillo-IoT G4はコンテナ型OS(podmanエンジン)を採用しており、アプリケーション開発は全てコンテナ内で行います。
コンテナ操作の詳細につきましてはマニュアルをご参照下さい。

また、Armadillo-IoT G4はeMMC(ストレージ)への書き込みを最小限にする観点から、tmpfs(メモリ上に作成するファイルシステム)に保存する設定にしております。メモリ上のファイルは電源を一度落とすと消えてしまう為、開発時はeMMCへ書き込む様に下記の様に設定を変更します。

ファイルをeMMCへ保存に変更するコマンド
# podman_switch_storage --disk

ファイルをtmpfs(メモリ)へ保存に変更するコマンド
# podman_switch_storage --tmpfs

ファイルの保存先設定を確認するコマンド（下記はeMMCへ保存する設定）
# podman_switch_storage --status
Currently in disk mode, run with --tmpfs to switch

以下、eMMCへ保存する事を前提で記載致します。

アプリケーションの作成

mjpg-streamerを使用したプリケーション作成を下記の順に実行していきます。
１．コンテナイメージの取得
２．コンテナの作成
３．パッケージのインストール
４．動作確認（mjpg-streamerの起動～Webブラウザ起動）

１．コンテナイメージの取得

ここではコンテナイメージはDebian 11(bullseye)を取得し、実装していきます。
他のUbuntuやAlpine Linux等のコンテナイメージを取得し、その環境で開発する事も可能です。コンテナイメージはDockerHubをご参照ください。

debianのbullseyeタグのついたイメージを取得
# podman pull docker.io/debian:bullseye

取得したイメージを確認
# podman images
REPOSITORY                     TAG         IMAGE ID      CREATED       SIZE
docker.io/library/debian       bullseye    5852ca45f7bf  2 days ago    123 MB

２．コンテナの作成

上記で取得したdebian:bullseyeのイメージを使用してコンテナを作成します。
作成するコンテナに下記2点を接続します。
・localhost:9000のアクセスでコンテナのポート8080に接続
・USBカメラをコンテナに接続

下記コマンドでコンテナ"mjpg_stream"を作成し、コンテナ内に入ります。
videoXについては下記備考を参照ください。

# podman run -it --name=mjpg_stream \
               --publish=9000:8080 \
               --device=/dev/video3:/dev/video3 \
               docker.io/debian:bullseye \
               /bin/bash
#<ここからコンテナ内の作業になります＞

＜備考＞
　USBカメラをArmadillo-IoT G4のUSBに差すと、/devディレクトリ下にVideoX(Xは数字)が追加されます。
　この/dev/videoXがUSBカメラとなり、このvideoXをコンテナ側で使用出来る様にする必要があります。
　例えばvideo3とvideo4が追加された場合はvideo3(数字の小さい方)を使用します。
　※末尾の数字は機器によって変わる可能性がございますので、お客様自身でご確認ください。

３．パッケージのインストール

作成したコンテナ内でアップデート/アップグレード及び必要なパッケージをインストールします。
続いてgithubからmjpg-streamerコピーし、ビルドします

アップデート・アップグレード・各種インストールを行う
# apt-get update
# apt-get upgrade
# apt-get install -y build-essential git imagemagick libv4l-dev libjpeg-dev cmake

githubからコピーし、mjpg-streamerをビルドする
# cd /tmp
# git clone https://github.com/jacksonliam/mjpg-streamer.git
# cd mjpg-streamer/mjpg-streamer-experimental
# make
# make install

４．動作確認（mjpg-streamerの起動～Webブラウザ起動）

コンテナ内でmjpg-streamerを下記コマンドで実行します。

mjpg_streamerの実行
# mjpg_streamer \
    -i "/usr/local/lib/mjpg-streamer/input_uvc.so --device /dev/video2 --yuv --resolution VGA --fps 30" \
    -o "/usr/local/lib/mjpg-streamer/output_http.so --www /usr/local/share/mjpg-streamer/www"

上記実行後、ネットワークに接続されたPCでWebブラウザを立ち上げ、http://[Armadillo-IoT G4のIPアドレス]:9000/にアクセスすると、Armadillo-IoT G4に接続されたUSBカメラの画像がmjpg-streamerのhtmlに表示されます。（デフォルトは静止画）
Streamタブを押すとストリーミング表示に切り替わります。

mjpg-streamerの終了はCtrl+C、コンテナを抜ける場合はexitコマンドで抜けます。

コンテナを抜ける
# exit

ブログ