図6●Webカメラの画像を埋め込んだRasRoboコントローラー

 続いて、Webカメラから送られてくる映像を図6のようにRasRoboコントローラーへ埋め込んでみましょう。とても簡単に実現できます。

 RasRoboコントローラーのHTMLファイルは「rasrobo.html」ですが、これは「/usr/share/webiopi/htdocs」というディレクトリー(フォルダー)の下に置いてあります。下記のコマンドでnanoを起動して編集してください。

$ sudo nano /usr/share/webiopi/htdocs/rasrobo.html 

 図7の赤い部分を追加するだけです。

図7●rasrobo.htmlの修正点
赤い部分を追加する。
<body>
    <p>ボタンを押すとRasRoboが動くよ!</p>
    <button id="left_forward" type="button" onClick="left_forward()">左前</button>
    <button id="forward" type="button" onClick="forward()">前進</button>
    <button id="right_forward" type="button" onClick="right_forward()">右前</button>
    <p>
      <button type="button">*</button>
      <button id="stop" type="button" onClick="stop()">停止</button>
      <button type="button">*</button>
    </p>
    <button id="left_back" type="button" onClick="left_back() ">左後</button>
    <button id="back" type="button" onClick="back()">後進</button>
    <button id="right_back" type="button" onClick="right_back() ">右後</button>

    <p>RasRoboの目</p>
    <img src="http://rasrobo.local:8080/?action=stream" />

    <script type="text/javascript" src="/webiopi.js"></script>

 ファイルを保存したら次のコマンドを実行してください。最初のコマンドで「mjpg-streamer」ディレクトリーに移動し、次のコマンドでシェルスクリプト「webcam.sh」を実行し、MJPEG-streamを起動しています。

$ cd ~/mjpg-streamer 
$ ./webcam.sh 

 PCまたはスマートフォンのブラウザーからURL「http://rasrobo.local:8000/rasrobo.html」にアクセスしてください。ボタンの下にWebカメラの画像が映れば成功です!