Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Firefox OSを使って
FPV戦車を作った話
2015/09/19
FxOSコードリーディング#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
--BoundaryString
Content-type: image/jpg
Content-Lengt...
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)
Current...
困った・・・
ラズパイ2なら
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 軽くハックし...
受信側 (FxOS)
● 「色々する」と、メディアストリームが取れるので video.src に
セットする。
function onRemoteStreamAdded(event) {
var video = document.createE...
問題
カメラが勝手にズームする?
時々こうなる
原因
WebRTC の画像はサイズが変わる!
WebRTCの技術解説 第二版 公開版 完全版
http://www.slideshare.net/nttwestcon/20140805-technical-description-of-webr...
見切れてただけ
AR
JSARToolkit を利用
JSARToolKit を使用した拡張現実アプリケーションの作成 - HTML5 Rocks
http://www.html5rocks.com/ja/tutorials/webgl/jsartoolkit_we...
DEMO
概要
● 繰り返し canvas に描画。
● JSARToolkit でマーカーの位置を検出。
● マーカーに重ねてWebGLで3Dオブジェクトを描
画。
○ magi.jsというのを使っている。
○ https://github.com/k...
問題
JSARToolkit のコードが追えない!
● C 言語の ARToolKit
○ ...を移植した Java の NyARToolKit
■ ...を移植した Flash の FLARToolKit
● ...を移植したのが JSAR...
マーカーがハードコードされてるみたいだけ
ど、、、
たぶんこれ?
/**
* Marker pattern encoder 。
*
*/
_bit_table_3 = new IntVector([
25, 26, 27, 28, 29, 30...
ご清聴ありがとうございました!
Firefox OSを使ってFPV戦車を作った話
Upcoming SlideShare
Loading in …5
×

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

951 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

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

×