ハッカソンでFPS視点ラジコンをデモしたら思った以上に好評だったので作り方を紹介します #JavaScript

はじめに

前回紹介したラジコンを改良して、ハッカソンで RPGのデモしたら、好評だったので作り方を紹介します。前回はFPS視点とコントローラが別々でしたが、今回はそれらをくっつけてFPS視点コントローラにしました。

※とあるイベントで登壇したときに嬉しいお言葉頂きました。

オタク歓喜のFPS仕様#AzureBaseDKY #ゆるメカトロ #ビジュアルプログラミング交流会 pic.twitter.com/hKdLLp0Qb5
— もりけん (@moriken_tech) 2020年1月22日

デモ

FPS視点コントローラの操作デモです。ライブ配信画面をタップしてラジコンを操作します。画面から指を離すとラジコンが止まります。

ラジコン視点のコントローラーできた。探索できるラジコンできた！ラジコン見ないように操作したので、めちゃ徐行運転(笑) 1人称視点で操作するの難しいな😅#obniz #ラジコン #コントローラー pic.twitter.com/flLtuuvNx5
— j4amountain (@zsipparu) 2020年1月7日

こちらは、コントローラの画面です。スワイプでラジコンを操作します。タップした位置が原点となり、スワイプした方向でラジコンの進む方向が決まります。上にスワイプすると前進し、左にスワイプすると左旋回します。

ラジコン試運転。奥に映っている人(私)が操作しています。#protoout #ヒーローズリーグ pic.twitter.com/o9Gmout2VD
— j4amountain (@zsipparu) 2020年1月11日

ラジコン本体はこんな感じ

ラジコン本体の構造について概要を紹介します。

このようにIoTデバイス(ラズパイ、obniz)と、給電用のバッテリーを2つ搭載しています。

※車体はLEGOテクニックで作っています。LEGOパーツと作り方はこちら→ ラジコン車体編

FPS視点コントローラのソースはこちら

ソースはgithubに置きました

controller2.html内の {{ラズパイのIP}} と obniz-ID を環境に合わせて書き換えます。


obniz-ID	ラジコンにのせるobnizのID
{{ラズパイのIP}}	ラジコンにのせるラズパイの（ローカルの）IPアドレス

ーーー

では、順に作っていきます

1.モーターを制御しよう

ラジコンの動力となるモーターをobnizで制御します。obnizは電子回路がわからない私でも気軽に使えるのでありがたいIoTデバイスです。インターネット経由で制御できるようになっており、ラジコンみたいに遠隔操作したいものを作るのにも便利です。

モーターとobnizを接続しよう

後輪にはそれぞれモーターがあり、それらモーター制御にobnizを使用します。

左車輪のモーターをobnizのメス端子0,1に、右車輪のモーターをobnizのメス端子10,11に接続します。赤と黒の配線を図のように接続します。obnizのメス端子の番号と、モータの配線の色を間違えないように注意します。また、左車輪のモーターはコードが上になるように、右車輪のモーターはコードが下になるようにします。

※今回使用したモーターはこちらです → 赤い歯車モーター

制御の概要はこんな感じ

Windows上にNodejsでWebサーバーを用意し controler2.html をサイトからアクセスできるよう(http://localhost/controler2.htmlみたいにアクセスできる)にします。

この時点で、モーター制御できるコントローラーまでが完成しました。次にFPS視点の機能を作っていきます。

2.ライブ配信しよう

ラズパイをライブ配信サーバにします。そして、ラジコンにカメラ付きのラズパイを搭載します。これで、ラズパイは『動くライブ配信サーバ』になります。このライブ配信サーバからの映像をコントローラと合わせることでFPS視点のコントローラーになります。

※ラズパイはRaspberry Pi 4 Model B 4 GBを使いましたが、次に紹介する MJPEG-StreamerはRaspberry Pi 4 Model B, Raspberry Pi 4 Model B+ でも動作しました。

MJPEG-Streamerをインストールしよう

ラズパイをライブ配信サーバにするため、MJPEG-Streamerをインストールします。

$ sudo apt-get install build-essential libjpeg8-dev imagemagick libv4l-dev cmake -y
$ git clone https://github.com/jacksonliam/mjpg-streamer.git
$ cd mjpg-streamer/mjpg-streamer-experimental

CMakeLists.txtを編集します。
⾏頭に#を追加してコメントアウトします。（これすると、make実行時のエラー発生を対策できるみたいです）

#add_subdirectory(plugins/input_opencv)

$ make
$ sudo make install

※わかってないのですが ↓ をするといいらしいです

~/mjpg-streamer/mjpg-streamer-experimental $ cp input_raspicam.so ../

インストールが終われば、ストリーミングを起動してライブ配信ができるか確認します。（ここではオプションの説明は省きます）

# ストリーミング起動
$ /usr/local/bin/mjpg_streamer -i "input_raspicam.so -x 640 -y 480 -fps 30 -q 80" -o "output_http.so -p 8090 -w /usr/local/share/mjpg-streamer/www"

配信を開始したら、ブラウザで http://{{ラズパイのIP}}:8090/にアクセスして、↓のようなサイトが表示されれば成功です。

※参考※ ストリーミングを開始するShellを作ると便利です。

/usr/local/bin/start_mjpeg.sh

#!/bin/sh
/usr/local/bin/mjpg_streamer -i "input_raspicam.so -x 640 -y 480 -fps 30 -q 80" -o "output_http.so -p 8090 -w /usr/local/share/mjpg-streamer/www"

作成したシェルstart_mjpeg.shに実行権限を付与します。

$ chmod +x start_mjpeg.sh

以下のようにシェルを実行するとストリーミングが開始します。

$ ./start_mjpeg.sh

これでFPS視点のコントローラが完成しました。
ライブ配信のオプションを変更したときは、controler2.htmlの修正が必要か確認してください。

controler2.htmlにライブ配信のURLhttp://{{ラズパイのIP}}:8090/?action=snapshot・・・が2か所あります。

コントローラの操作方法を知っとこう

タップした位置を原点に移動した指の位置と原点との距離・角度で左右のモードの回転方向と出力を変更します。指を話すと止まります。

あとは、おまけです。

【補足情報】

ライブ配信のJavaScriptについて

ライブ配信に使用するJavaScriptは、MJPEG-StreamerのWebサイトhttp://{ラズパイのIP}:8090/javascript_simple.htmlから取得しました。このサイトは↓このように映像配信のみのシンプルなサイトになっています。（カメラの前のカーテンが映っています）

javascript_simple.htmlのソースを見ると、videoタグではなくimgタグを使っており、JavaScriptで画像を更新していました。パラパラ漫画なんですね。

javascript_simple.html

<div id="webcam"><noscript><img src="./?action=snapshot" /></noscript></div>

FPS視点のコントローラの構造

ライブ配信のimgタグとコントローラのcanvasタグが重なるようCSSでスタイルを記述しました。重ね合わせのサンプルを紹介します。

sample.html

<!-- img,canvasタグを重ねる -->
<html>
    <head>
        <style>
            #container {
                position: relative;
            }
            #webcam {
                width: 640px;
                height: 480px;
                position: absolute;
                z-index: 1;
            }
            #hoge {
                position: absolute;
                z-index: 2;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <canvas id="hoge" width="600" height="600"></canvas>
            <div id="webcam"><img id="testImage" src="test.jpg" width="600" height="600"></div>
        </div>
    </body>
</html>

次は・・・

FPS視点をさらに拡張したいと思っていて、"首振り"の機能を追加しようと試行錯誤中です。そのための部品は揃えたので、あとは作るだけ！　のはず

LEGOテクニック大量購入😃 pic.twitter.com/voJl1RajlN
— j4amountain (@zsipparu) January 9, 2020