Firefox OSを使ってFPV戦車を作った話

2015/09/19FxOSコードリーディング#21

ひらとり はやと

自己紹介

ひらとり● Firefox OS コミュニティ

● FxOSコードリーディング

● くらぶ WoT● html5j Web プラ部

FPV 戦車

● タンク (クローラー) にカメラを載せたもの。

● 戦車視点の一人称視点=First Person View (FPV)

カメラ

作例

http://www.instructables.com/id/Engineering-DUDES-The-RC-Edition/

今年は何度も作りました

Ⅰ号au Firefox OS WoTハッカソン on ホワイトデー

Ⅱ号Firefox OS and Raspberry Pi, WoT ハンズオン展示

Ⅲ号AWS Summit Tokyo IoT ハッカソン 2015

Ⅳ号Maker Faire Tokyo 2015ラズパイコンテスト2015

仕組みの概要

ゲームパッド入力の送信

カメラ動画の表示

AR

Firefox OS でやったこと

● 動画の表示

● AR

動画のストリーミング

MJPEG

● Motion JPEG○ 動画の各フレームがJPEG画像になっ

ているパラパラ漫画。

● MJPEG over HTTP○ 各フレームをマルチパートで送ってく

る。

● IE では対応しない。

...Content-type: multipart/x-mixed-replace;boundary=BoundaryString --BoundaryStringContent-type: image/jpgContent-Length: xxxx

<フレーム１の画像> --BoundaryStringContent-type: image/jpgContent-Length: xxxx <フレーム２の画像>

MJPEG

● ラズパイ(送信)側○ mjpg-streamer○ ラズパイとかLinuxで動画ストリーミングする際

の定番。

○ Edisonでも使える。

● ブラウザ(受信)側○ <img src=“/?action=stream” />

MJPEG

Chromeで動くコードが Firefoxで動かない！

問題: ブラウザが固まる！

原因

● img.onload が何度も呼ばれるため。

● 延々と canvas やらを作り続けて重くなって固まる。

https://html.spec.whatwg.org/#read-multipart-x-mixed-replace

Firefoxが正しい！

問題: 画像が動かない (最初の画像のまま固まる)

原因

● AR処理で動画を繰り返し canvasに描画している。

● canvas2d.drawImage() の挙動に起因。MJPEG の最初のフレームしか描画しない。

Firefoxが正しい！？https://www.w3.org/Bugs/Public/show_bug.cgi?id=13060

DrawImage test case with MJPG (traffic web cam)

Currently, the canvas2d drawImage() spec says:

"When the drawImage() method is passed an animated image as its image argument, the user agent must use the poster frame of the animation, or, if there is no poster frame, the first frame of the animation."

それともバグ？？？

Ref. https://bugzilla.mozilla.org/show_bug.cgi?id=667206

困った・・・

ラズパイ２なら WebRTC も使える！

http://www.linux-projects.org/modules/sections/index.php?op=viewarticle&artid=14

送信側 (ラズパイ)

● UV4L: User space Video4Linux○ http://www.linux-projects.org/○ ラズパイでWebRTC ヾ(*´∀｀*)ﾉｷｬｯｷｬ uv4l-webrtc 軽くハックしてみたよ！

■ http://www.slideshare.net/KensakuKOMATSU/webrtc-uv4lwebrtc

● UV4LのサーバにWebRTC拡張を追加

● シグナリングサーバーとかも実装されてる

● コードは公開されていない。。。

(略)$ sudo apt-get install uv4l-server(略)$ sudo apt-get install uv4l-webrtc$ sudo service uv4l_raspicam restart

受信側 (FxOS)● 「色々する」と、メディアストリームが取れるので video.src に

セットする。

function onRemoteStreamAdded(event) {var video = document.createElement('video');video.src = URL.createObjectURL(event.stream);(略)

}

● 「色々する」内容は、これを見ると良く分かる。

○ WebRTCの技術解説 第二版 公開版 完全版http://www.slideshare.net/nttwestcon/20140805-technical-description-of-webrtc-second-edition-public-edition-full-version

問題カメラが勝手にズームする？

時々こうなる

原因

WebRTC の画像はサイズが変わる！

WebRTCの技術解説 第二版 公開版 完全版

http://www.slideshare.net/nttwestcon/20140805-technical-description-of-webrtc-second-edition-public-edition-full-version

見切れてただけ

AR

JSARToolkit を利用

JSARToolKit を使用した拡張現実アプリケーションの作成 - HTML5 Rockshttp://www.html5rocks.com/ja/tutorials/webgl/jsartoolkit_webrtc/

DEMO

概要

● 繰り返し canvas に描画。

● JSARToolkit でマーカーの位置を検出。

● マーカーに重ねてWebGLで3Dオブジェクトを描

画。

○ magi.jsというのを使っている。

○ https://github.com/kig/magi

問題

JSARToolkit のコードが追えない！

● C 言語の ARToolKit○ ...を移植した Java の NyARToolKit

■ ...を移植した Flash の FLARToolKit● ...を移植したのが JSARToolkit

めんどくさい！

NyARXXX を継承した FLARXXX とか

マーカーがハードコードされてるみたいだけど、、、

たぶんこれ？/** * Marker pattern encoder 。

* */_bit_table_3 = new IntVector([ 25, 26, 27, 28, 29, 30, 31, 48, 9, 10, 11, 12, 13, 32, 47, 24, 1, 2, 3, 14, 33, 46, 23, 8, 0, 4, 15, 34, 45, 22, 7, 6, 5, 16, 35, 44, 21, 20, 19, 18, 17, 36, 43, 42, 41, 40, 39, 38, 37 ])

まだ、マーカー増やせない。。。

ご清聴ありがとうございました！