Bedienungsanleitung Elektro-Quadrocopter „Rocket Drone FPV ...
Firefox OSを使ってFPV戦車を作った話
-
Upload
hayato-hiratori -
Category
Technology
-
view
590 -
download
1
Transcript of Firefox OSを使ってFPV戦車を作った話
![Page 1: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/1.jpg)
Firefox OSを使ってFPV戦車を作った話
2015/09/19FxOSコードリーディング#21
ひらとり はやと
![Page 2: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/2.jpg)
自己紹介
ひらとり● Firefox OS コミュニティ
● FxOSコードリーディング
● くらぶ WoT● html5j Web プラ部
![Page 3: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/3.jpg)
FPV 戦車
● タンク (クローラー) にカメラを載せたもの。
● 戦車視点の一人称視点=First Person View (FPV)
カメラ
![Page 4: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/4.jpg)
作例
http://www.instructables.com/id/Engineering-DUDES-The-RC-Edition/
![Page 5: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/5.jpg)
今年は何度も作りました
![Page 6: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/6.jpg)
Ⅰ号au Firefox OS WoTハッカソン on ホワイトデー
Ⅱ号Firefox OS and Raspberry Pi, WoT ハンズオン展示
![Page 7: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/7.jpg)
Ⅲ号AWS Summit Tokyo IoT ハッカソン 2015
Ⅳ号Maker Faire Tokyo 2015ラズパイコンテスト2015
![Page 8: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/8.jpg)
![Page 9: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/9.jpg)
仕組みの概要
![Page 10: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/10.jpg)
ゲームパッド入力の送信
![Page 11: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/11.jpg)
カメラ動画の表示
![Page 12: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/12.jpg)
AR
![Page 13: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/13.jpg)
Firefox OS でやったこと
● 動画の表示
● AR
![Page 14: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/14.jpg)
動画のストリーミング
![Page 15: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/15.jpg)
MJPEG
● Motion JPEG○ 動画の各フレームがJPEG画像になっ
ているパラパラ漫画。
● MJPEG over HTTP○ 各フレームをマルチパートで送ってく
る。
● IE では対応しない。
![Page 16: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/16.jpg)
...Content-type: multipart/x-mixed-replace;boundary=BoundaryString --BoundaryStringContent-type: image/jpgContent-Length: xxxx
<フレーム1の画像> --BoundaryStringContent-type: image/jpgContent-Length: xxxx <フレーム2の画像>
![Page 17: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/17.jpg)
MJPEG
● ラズパイ(送信)側○ mjpg-streamer○ ラズパイとかLinuxで動画ストリーミングする際
の定番。
○ Edisonでも使える。
● ブラウザ(受信)側○ <img src=“/?action=stream” />
![Page 18: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/18.jpg)
MJPEG
Chromeで動くコードが Firefoxで動かない!
![Page 19: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/19.jpg)
問題: ブラウザが固まる!
![Page 20: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/20.jpg)
原因
● img.onload が何度も呼ばれるため。
● 延々と canvas やらを作り続けて重くなって固まる。
![Page 21: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/21.jpg)
https://html.spec.whatwg.org/#read-multipart-x-mixed-replace
Firefoxが正しい!
![Page 22: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/22.jpg)
問題: 画像が動かない (最初の画像のまま固まる)
![Page 23: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/23.jpg)
原因
● AR処理で動画を繰り返し canvasに描画している。
● canvas2d.drawImage() の挙動に起因。MJPEG の最初のフレームしか描画しない。
![Page 24: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/24.jpg)
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
![Page 25: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/25.jpg)
困った・・・
![Page 26: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/26.jpg)
ラズパイ2なら WebRTC も使える!
http://www.linux-projects.org/modules/sections/index.php?op=viewarticle&artid=14
![Page 27: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/27.jpg)
送信側 (ラズパイ)
● 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
![Page 28: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/28.jpg)
受信側 (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
![Page 29: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/29.jpg)
問題カメラが勝手にズームする?
![Page 30: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/30.jpg)
時々こうなる
![Page 31: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/31.jpg)
原因
WebRTC の画像はサイズが変わる!
WebRTCの技術解説 第二版 公開版 完全版
http://www.slideshare.net/nttwestcon/20140805-technical-description-of-webrtc-second-edition-public-edition-full-version
![Page 32: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/32.jpg)
見切れてただけ
![Page 33: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/33.jpg)
AR
![Page 34: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/34.jpg)
JSARToolkit を利用
JSARToolKit を使用した拡張現実アプリケーションの作成 - HTML5 Rockshttp://www.html5rocks.com/ja/tutorials/webgl/jsartoolkit_webrtc/
![Page 35: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/35.jpg)
DEMO
![Page 36: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/36.jpg)
概要
● 繰り返し canvas に描画。
● JSARToolkit でマーカーの位置を検出。
● マーカーに重ねてWebGLで3Dオブジェクトを描
画。
○ magi.jsというのを使っている。
○ https://github.com/kig/magi
![Page 37: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/37.jpg)
問題
JSARToolkit のコードが追えない!
● C 言語の ARToolKit○ ...を移植した Java の NyARToolKit
■ ...を移植した Flash の FLARToolKit● ...を移植したのが JSARToolkit
めんどくさい!
NyARXXX を継承した FLARXXX とか
![Page 38: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/38.jpg)
マーカーがハードコードされてるみたいだけど、、、
たぶんこれ?/** * 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 ])
まだ、マーカー増やせない。。。
![Page 39: Firefox OSを使ってFPV戦車を作った話](https://reader033.fdocument.pub/reader033/viewer/2022042517/58a8ae661a28abbd6b8b45ed/html5/thumbnails/39.jpg)
ご清聴ありがとうございました!