M5CAMERAで、ストリーミングカメラ映像見ながら遊べるWiFiリモート戦車作ってみた
M5CAMERA使ってラジコン戦車作ってみました
ストリーミングカメラの映像見ながら、スマホから操縦できます!
小学生の息子が別の部屋から操縦して、月面探査機みたく遊んでいます。
↓こんな感じ
作ってみると色々な勉強になったので、おいおい製作方法を備忘録として残そうと思います。今回は、とりあえず概要ということで。
ハードウエア
- 本体とキャタピラ、モータ・ギアはタミヤの教育用工作キットです
リンク
- 左右2つのモータの回転方向とスピードをコントロールするために、モータドライバIC GROVE - I2C ミニモータードライバ - スイッチサイエンス を使いました。Amazonで扱っていないのでスイッチサイエンスさんのリンクを貼っておきます
- バッテリは、充電して何度もつかえる単四型のエネループを4本使っています。1.2x4=4.8Vで、M5カメラ本体とモータドライバIC両方に給電しています
リンク
- それぞれのパーツの電気接続はグローブケーブル使いました
部品を使っている場所と、部品の形状を下記の動画にまとめたので組み立ての参考にしてください
ソフトウエア
操縦画面はこんな感じです。
カメラの映像を中央にして、左右のキャタピラを動かすための前進・後退用スライダーを付けました。左右のキャタピラを反対方向に動かすと、その場でクルクルと回転します。
- 操縦画面はホームページを作成する要領でHTMLで作りました
- M5カメラ側でHTML表示用のウェブサーバーを動かし、そこにスマホからウェブブラウザでアクセスしてスマホの画面に表示させています
- スマホとM5カメラは、WiFiでつながっています
- ウェブサーバーは、マイクロパイソンで動かすことのできるpicowebサーバー
- スライダーを動かすと、htmlファイル内のjavaScriptがスライダーの状態に応じた変数を、xmlHttpRequestを使ってサーバーに通知します
- 通知を受けたサーバ側は、スライダーの状態を受け取り、モータドライバにI2Cで命令を送ります。この部分はPythonで書いています
工夫したところ
スマホ側での操作は、HTMLの状態変化として認識されますが、スライダーを動かすたびにhtml全体を更新すると、カメラのストリーミングも再読み込みされてしまい、数秒間映像が途切れてしまいました。カメラのストリーミングに影響を与えることなくスライダーの操作を行うために、htmlの必要な部分のみを更新させる、Ajaxと呼ばれる方法を使っています。