ラズパイで動画配信 - ハードウェア技術者のスキルアップ日誌

前回から大分間が開いてしまいましたが、見守りカメラ作成に向けた第三回目をやっていきます。

masaeng.hatenablog.com

今回はUSBカメラで撮影した動画をWebサイト上でリアルアイムに表示する方法について書いていきたいと思います。

⓪USBカメラをラズパイに接続

事前準備として、ラズパイにUSBカメラを接続しておきます。カメラは何でもいいのですが、私はこちらのカメラを見守りカメラ作成用に購入しました。

ロジクールウェブカメラ C270n ブラック HD 720P ウェブカムストリーミング小型シンプル設計国内正規品 2年間メーカー保証

①MJPG-streamerをラズパイにインストール

動画をストリーミング配信するのにMJPG-streamerというソフトウェアを使用します。ラズパイ上で以下のコマンドを入力し、インストールを行います。

$ cd <work_space>   #mjpg-streamerをインストールするフォルダに移動
$ sudo apt-get install subversion libjpeg-dev imagemagick
$ svn co https://mjpg-streamer.svn.sourceforge.net/svnroot/mjpg-streamer mjpg-streamer
$ cd mjpg-streamer/mjpg-streamer
$ make

②MJPG-streamerを起動

以下のコマンドでMJPG-streamerを起動させます。

cd mjpg-streamer
sudo ./mjpg_streamer -i "./input_uvc.so -f 10 -r 320x240 -d /dev/video0 -y -n"\
                     -o "./output_http.so -w ./www -p 8080"

オプションのうち、-fはフレームレート、-rは解像度です。配信の解像度、フレームレートを変えたい場合はこれらの引数を変更します。上記のコマンドの場合はフレームレート10fps, 解像度QVGA(320x240)としています。

コマンドを実行するとターミナル上に以下のように表示され、MJPG-streamerが起動することを確認できます。

MJPG Streamer Version: svn rev: 3:172
i: Using V4L2 device.: /dev/video0
i: Desired Resolution: 320 x 240
i: Frames Per Second.: 10
i: Format............: YUV
i: JPEG Quality......: 80
o: www-folder-path...: ./www/
o: HTTP TCP port.....: 8080
o: username:password.: disabled
o: commands..........: enabled

➂ストリーム動画の表示

カメラの映像がうまく配信されているかを確認するため、ブラウザから以下のURLにアクセスします。
　http://"ラズパイのIPアドレス":8080/stream.html

配信がうまくいっていれば以下のような画面が表示されます。カメラの画面は動画となっており、リアルアイムに動いていることが確認できると思います。動画のフレームレートは10fpsですが、個人的には特に違和感は感じませんでした。見守り用途としては十分だと思います。

ラズパイに接続したUSBカメラの映像を配信する①

④動画を自作htmlファイルに埋め込む

➂のサイトはMJPG-streamerのデモページでしたので、自作のhtmlファイル上で動画を見れるようにしていきます。試しにraspi_movie.htmlというhtmlファイルを作ってみました。埋め込んだ動画はimgタグの部分です。

raspi_movie.html

<html>
<head>
<title>Raspberry pi stream</title>
</head>
<body>
<h1>Raspberry Pi</h1>
<img src="http://"ラズパイのIPアドレス":8080/?action=stream">
</body>
</html>