Ohotech特盛#13 スマホで操作するカメラ付きWi-Fiラジコンカー ― C#とラズパイとWebアプリの技術で作っちゃおう! ―

スマホで操作するカメラ付きWi-Fiラジコンカー

― C#とラズパイとWebアプリの技術で作っちゃおう! ―

今晩の宿「ホテルニューおはる」¥3,600

#ohotech

ハッシュタグ#ohotechでツイートはじめ、facebook やブログなどへの投稿OKです

最近は TypeScript をたくさん書いてます

皆さんの興味分野は何ですか?SignalYN http://j.mp/1JG1DWJ

Goalこのセッションで伝えたいこと

私の年1回の学習発表会です

• 私がどんなことをどの程度成し遂げたかをわ

かってもらえたら目標達成です

• さらに何かひとつでも

「あれやってみようかな」

「これ面白そう」

と共感を得られることがあれば、仲間が増えた

ような気がして嬉しいですね!

昨年のOhotechで学んだ成果投げ銭 as a Service http://j.mp/1GknH9h

で、今年の作品 =「スマホで操作するカメラ付きWi-Fiラジコンカー」

• C#とラズパイとWebアプリの技術で作っちゃ

います。

※今回は「特盛」なので、玄人向けということで、「ラズパイとはなんぞや?」

「C#とは?」といった説明はスライドからは割愛させていただきます。

Let’s try it!試してみよう!

SSID ohotech13a

http://192.168.43.200/

Why do you made it?制作の動機

OLYMPUS AIR A01 を見たのがきっかけ

ラズパイ使えば、同じようなの作れるんじゃね?

これを...

こうじゃ。

勉強会コミュニティ & 宿泊イベント

Code in 定山渓温泉

...の集合写真を撮るのに使おう!

と思ったら、クロージングどたばたして忘れてしまった...orz

☁☁

How does it work?仕組みの解説

HTTP 通信

Raspberry Pi Model B+Spec ARM 700MHz / 512MB RAM

OS Linux Distribution “Raspbian”

Runtime mono

HTTP Server XSP3

Application ASP.NET MVC3 / C#

Wi-Fiで直接通信

• スマホの Web ブラウザで操作

• Webカメラで撮影した画像を1fpsで表示

USB 接続

Webカメラ

モータードライバ x 3

モーター x 3基

GPIO

USB 接続 Wi-Fiドングル

構成

GPIOのピンの電圧On/Offは簡単

• ラズパイの GPIO のピンは「ファイル」とし

て読み書きできる

• なので、HTTP 要求に応じて所定の「ファイ

ル」に書き込む Web アプリをラズパイ上で動

かせば、それはすなわち、GPIO のピンの電圧

を On/Off する Web アプリになる

ファイルの読み書きなのでシェルコマンドでもできる

$ echo 25 > /sys/class/gpio/export

$ echo out > /sys/class/gpio/gpio/25/direction

$ echo 1 > /sys/class/gpio/gpio/25/value

模型組み立てのほうが、よっぽど大変

Web アプリは C# で書きました

• ラズパイでも C# 製の Web アプリが動きます

• 「sudo apt-get install mono-complete」っ

てやっておけば、実行環境の準備はOK!

• xsp3 っていうコマンドで ASP.NET な Web

サーバーを起動できたり

※厳密には mono を構成する全ては要らないんだろうけど、面倒なので mono-complete!

なぜ C#?

• 単に自分がC#に慣れてるから

• もし皆さんが似たようなことやるとしても、

Python、Ruby、Node.js、etc... 好きな言

語・処理系でできる程度には簡単なアプリです

Visual Studioで開発は超快適♪

• Windows 上でビルドした .exe や .dll を、そ

のままラズパイに送り込めば動きます

• C#、というか .NET 製な .exe や .dll は、IL

(中間言語) を収録しているので、同じバイナ

リファイルが Windows 上でもラズパイ上で

も動く

※ただしカメラへのアクセス方法とか、GPIOのデバイスファイルのパス

とかはWinとラズパイとでは違うので、#if～#endif のプリプロセッ

サでコンパイル仕分けたり、若干の互換レイヤーを書いたり、は必要。

カメラは USB 接続

• ラズパイはUSB接続機器が使えるのが楽ちん。

• NFC (Felica) の読み書きとか、GPS とか、色々使える

• カメラでの画像撮影は、Linux 系では鉄板な

fswebcamコマンドを実行することで実現

※画像はストリーミングじゃなくて、オレオレ実装なポーリン

グで毎秒1フレームで更新してます。ここだけ複数スレッドが

交錯するため、同期処理がちょっと凝った作りにしてます。

HTML側は jQueryでゴリゴリ

• AngularJS 等、MV* なライブラリは未使用

• 但し JavaScript を生で書かずに TypeScript

使用。

• TypeScript に慣れたので...

実はこの手のアプリは初めてではないです

まずは実証実験 http://j.mp/1KTAWiZ

LED点灯/消灯と、押ボタンのOn/Off状態をリアルタイムで表示する、Webアプリの実装。

次にクリスマスツリー http://j.mp/1MJikFe

こどもたち向け。スマホのブラウザから、点灯させるLED の色が指定できる。

Build INSIDERに寄稿 http://j.mp/signalr-rbpi

ということで、

ドォーン!

どやっ!

ソースコードは GitHub にありますhttps://github.com/codejp/code2015-cameracar

完!Happy Coding :)

One more thing.

USB 接続

USB 接続 Wi-Fiドングル

カメラ

Wi-Fi

プロセッサ

GPIO

ラズパイ、GPIOを介して実世界に作用するのは面白いのですが...

• 配線やパッケージングが厄介。

• 追加の部品も多く、結果として安く済まない。

ケース

電源用MicroUSBケーブルバッテリー

ここで、皆さんお持ちのスマホを見てみましょう。

カメラ

Wi-Fi

バッテリー、配線込み

プロセッサ

ケーシング済み

カメラ

Wi-Fi

バッテリー、配線込み

プロセッサ

ケーシング済み

GPIO がないだけ で、

ほかは完璧じゃないッスか!

スマホの画面を白黒明滅させるのを、光学センサで読み取れば、

GPIO の OUT 相当が実現できるのでは!?

Let’s try it!試してみよう!

SignalR 使う。http://www.slideshare.net/jsakamoto/osc13-do

SSID ohotech13a

http://192.168.43.210/ http://192.168.43.210/controller.html

白・黒の窓の開閉が制御される側 窓の開閉切替を指示する側

LED

フォトダイオード

白/黒が開閉するSignalRなWebアプリをブラウザで

開いている

LEDが光った!

ブラウザの表示コンテンツが白くなったら、この明かりにフォトダイオードが反応して...

動画 https://youtu.be/bqUF-Atn8y4

カメラ

Wi-Fi

バッテリー、配線込み

プロセッサ

ケーシング済み

GPIO の Out は達成!

Learn, Practice, Share.

Happy Coding :)