Webブラウザから操作するFPVロボットを作ってみる(1)

Webブラウザから操作可能なロボットを作ります。 ただ操作するだけではなくwebカメラを搭載し、その画像をリアルタイムに伝送してくれるロボットを作ってみることにします。

FPVとはFirst Person Viewつまり男の浪漫コックピット視点のこと

構成は以下の通り。ざっくりですが

f:id:masahirosuzuka:20150726224746p:plain

今回作るロボットのポイントは2つ

WebRTC

WebRTCというのはWeb Real Time Communicationの略です。いろいろてんこ盛りな技術で説明しづらいのですがブラウザ間でp2p通信を行い、大きなデータ、たとえば動画や音声のリアルタイム伝送のために作られた技術です。 すでにWeb標準化が進んでいるのですが規格は策定の途中の様子。

たとえばこれを使えばSkypeがブラウザ上で動くようになる。あるいはFacebook MessangerはこのWebRTCで実装されている。といえばピンとくる人もいらっしゃるかもしれません。

WebRTCには二つ種類があります。カメラ画像や音声の伝送のために用いられるmedia streamとファイルや文字データの伝送に用いられるdata connectionです。

今回はmedia streamを画像データの送受信に、ブラウザからの操作(たとえば前進後退などなど)の伝送にdataconnectionを使います。

ChromeApp

WebRTCがすごいのはわかった。 でもそれってブラウザ間の技術だよね?ブラウザってハードウェアにアクセスできないよね?

ええそうなんです。ブラウザは基本的にハードウェアアクセスできません。 ではどうするのかというとChromeAppというものを使います。これは乱暴な言い方をしてしまうと独立したアプリのように振る舞うChrome拡張です。ほとんど、というか全く知られていませんがChromeAppはハードウェアにアクセスできます。 それもUSBとシリアルを操作するためのAPIを提供しています。このシリアルからArduinoにコマンドを送り、 Arduinoがモータを操作するという構成になっています。

今日一日でできたものはこんな感じ

f:id:masahirosuzuka:20150726225322j:plain

Mac上で動いているのがChromeApp、これをロボットのラズパイで動かす予定です。 Android上のChromeで動いているのはコントローラとなるwebアプリ?webサイト?

わかりにくいかもしれませんがChromeAppにはAndroidのカメラからの動画が、AndroidChromeで動いているものにはMacのFacetimeからキャプチャした動画がリアルタイムで流れています。

今日は一旦ここまで、次回はロボットの本体とArduino編の予定