拡張編 03．ソフトウェアの車載カメラ対応

RCタンクを操縦する画面にカメラ映像が表示されるようにするRaspberry Pi のプログラムの変更

概要

動画ストリーミングソフトウェアのインストールと、操縦画面HTMLファイルへの映像表示スクリプトの追加。

動画ストリーミングソフトウェアのインストール

Raspberry Pi に MJPG-streame をインストールしていない場合は、まず、MJPG-streamer をインストールします。

WEBカメラで動画ストリーミング

HTMLファイルの作成

「RCタンクを作る」で作成した HTMLファイルを、WEBカメラ映像も表示されるように変更します。

「RCタンクを作る」で作成した「/home/pi/work/webiopi」フォルダの「rctank.html」をコピーし「rccameratank.html」というファイルを作成し、以下の記述を追記します。
※IPアドレスは、Raspberry Pi の無線LANのIPアドレスを指定します。

「rccameratank.html」の全内容は以下です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>tank controller</title> <script type="text/javascript" src="/webiopi.js"></script> <script type="text/javascript"> webiopi().ready( function() { // Initialize drive( 0 ); vlevel( 5 ); } ); function drive(mode) { // Change drive mode. 0 : Stop, 1 : Forward, 2 : Backward, 3 : CW, 4 : CCW webiopi().callMacro( "ChangeDriveMode", mode ); } function vlevel(level) { // Change Voltage Level. webiopi().callMacro( "ChangeVoltageLevel", level); } </script> </head> <body> <div align="center"> <img src="http://192.168.1.122:8080/?action=stream" /> <table border="1"> <tbody> <tr> <td align="center" width="100" height="100"></td> <td align="center" width="100" height="100"> <form><input type="button" value="Forward" onclick="drive(1)" data-role="none"></form> </td> <td align="center" width="100" height="100"></td> </tr> <tr> <td align="center" width="100" height="100"> <form><input type="button" value="Turning CCW" onclick="drive(4)" data-role="none"></form> </td> <td align="center" width="100" height="100"> <form><input type="button" value="Stop" onclick="drive(0)" data-role="none"></form> </td> <td align="center" width="100" height="100"> <form><input type="button" value="Turning CW" onclick="drive(3)" data-role="none"></form> </td> </tr> <tr> <td align="center" width="100" height="100"></td> <td align="center" width="100" height="100"> <form><input type="button" value="Backward" onclick="drive(2)" data-role="none"></form> </td> <td align="center" width="100" height="100"></td> </tr> </tbody> </table> </div> <p align="center">voltage level</p> <div align="center"> <form>1 <input type="radio" name="vl" onclick="vlevel(1)" data-role="none"> <input type="radio" name="vl" onclick="vlevel(2)" data-role="none"> <input type="radio" name="vl" onclick="vlevel(3)" data-role="none"> <input type="radio" name="vl" onclick="vlevel(4)" data-role="none"> <input type="radio" name="vl" onclick="vlevel(5)" data-role="none" checked> <input type="radio" name="vl" onclick="vlevel(6)" data-role="none"> <input type="radio" name="vl" onclick="vlevel(7)" data-role="none"> <input type="radio" name="vl" onclick="vlevel(8)" data-role="none"> <input type="radio" name="vl" onclick="vlevel(9)" data-role="none"> <input type="radio" name="vl" onclick="vlevel(10)" data-role="none"> 10</form> </div> </body> </html>

WebIOPi サービスの設定の変更

Webブラウザからアクセスしたときに、作成したHTMLが表示されるように、WebIOPi サービスの設定を変更します。

WebIOPi サービスの設定は、「/etc/webiopi/config」ファイルに記述されています。

以下のコマンドを実行し、「/etc/webiopi/config」ファイルを開きます。

sudo nano /etc/webiopi/config

[HTTP] セクションを探し、[HTTP] セクションの「doc-root =」、「welcome-file =」を以下のように書き換えます。

（・・・省略・・・） [HTTP] # HTTP Server configuration enabled = true port = 8000 # File containing sha256(base64("user:password")) # Use webiopi-passwd command to generate it passwd-file = /etc/webiopi/passwd # Use doc-root to change default HTML and resource files location #doc-root = /home/pi/webiopi/examples/scripts/macros doc-root = /home/pi/work/webiopi/ # Use welcome-file to change the default "Welcome" file #welcome-file = index.html welcome-file = rccameratank.html #------------------------------------------------------------------------# （・・・省略・・・）

編集し終えたら、
Ctrl + O
で上書き保存し、
Ctrl + X
で nano を終了します。

ダウンロード

プログラムファイル

拡張編 03．ソフトウェアの車載カメラ対応

概要

動画ストリーミングソフトウェアのインストール

HTMLファイルの作成

WebIOPi サービスの設定の変更

ダウンロード

関連ページ