SlideShare une entreprise Scribd logo
1  sur  39
Télécharger pour lire hors ligne
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-Length: xxxx
<フレーム1の画像>
--BoundaryString
Content-type: image/jpg
Content-Length: xxxx
<フレーム2の画像>
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
困った・・・
ラズパイ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 軽くハックしてみたよ!
■ 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 Rocks
http://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
])
まだ、マーカー増やせない。。。
ご清聴ありがとうございました!

Contenu connexe

Tendances

Tendances (8)

Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Enpit bizapp_aiit_20130902_for_WindowsEnvironmentEnpit bizapp_aiit_20130902_for_WindowsEnvironment
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
 
Write slides and books in VSCode + Markdown
Write slides and books in VSCode + MarkdownWrite slides and books in VSCode + Markdown
Write slides and books in VSCode + Markdown
 
Edición de video
Edición de videoEdición de video
Edición de video
 
プラグイン公開までの道のり
プラグイン公開までの道のりプラグイン公開までの道のり
プラグイン公開までの道のり
 
Monomeeting 20081022
Monomeeting 20081022Monomeeting 20081022
Monomeeting 20081022
 
Remote Development with Visual Studio Code & A clean dev env, working every ...
Remote Development with Visual Studio Code &  A clean dev env, working every ...Remote Development with Visual Studio Code &  A clean dev env, working every ...
Remote Development with Visual Studio Code & A clean dev env, working every ...
 
THETA プラグインで WebRTC やってみた
THETA プラグインでWebRTC やってみたTHETA プラグインでWebRTC やってみた
THETA プラグインで WebRTC やってみた
 
多様性の中の選択肢!Concrete5とは?
多様性の中の選択肢!Concrete5とは?多様性の中の選択肢!Concrete5とは?
多様性の中の選択肢!Concrete5とは?
 

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

Firefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own PathFirefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own Path
dynamis
 
次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch
次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch
次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch
Honma Masashi
 

Similaire à Firefox OSを使ってFPV戦車を作った話 (20)

Firefox OS and Open Web Board - IGGG Meetup 2015 Spring
Firefox OS and Open Web Board - IGGG Meetup 2015 SpringFirefox OS and Open Web Board - IGGG Meetup 2015 Spring
Firefox OS and Open Web Board - IGGG Meetup 2015 Spring
 
2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk
 
2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk
 
[Maker Faire Tokyo 2014] FlashAirは超ミニマイコン! ひろがる電子工作コミュニティ
[Maker Faire Tokyo 2014] FlashAirは超ミニマイコン!ひろがる電子工作コミュニティ[Maker Faire Tokyo 2014] FlashAirは超ミニマイコン!ひろがる電子工作コミュニティ
[Maker Faire Tokyo 2014] FlashAirは超ミニマイコン! ひろがる電子工作コミュニティ
 
PhoneGapなんか要らない? FirefoxOS
PhoneGapなんか要らない? FirefoxOSPhoneGapなんか要らない? FirefoxOS
PhoneGapなんか要らない? FirefoxOS
 
Firefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own PathFirefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own Path
 
Firefox os hackathon
Firefox os hackathonFirefox os hackathon
Firefox os hackathon
 
Embedded Webで加速するWeb of Things
Embedded Webで加速するWeb of ThingsEmbedded Webで加速するWeb of Things
Embedded Webで加速するWeb of Things
 
Linuxベースのオープンソース フライトコントローラーの概要( #ABC2015S )
Linuxベースのオープンソース フライトコントローラーの概要( #ABC2015S )Linuxベースのオープンソース フライトコントローラーの概要( #ABC2015S )
Linuxベースのオープンソース フライトコントローラーの概要( #ABC2015S )
 
次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch
次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch
次世代プラットフォームでのHTML5アプリ開発 Firefox OS/Ubuntu Touch
 
ドローン用フライトコントローラ「Dronecode」の概要( #KOF2015 )
ドローン用フライトコントローラ「Dronecode」の概要( #KOF2015 )ドローン用フライトコントローラ「Dronecode」の概要( #KOF2015 )
ドローン用フライトコントローラ「Dronecode」の概要( #KOF2015 )
 
20150117 gunmaweb Firefox OSの紹介
20150117 gunmaweb Firefox OSの紹介20150117 gunmaweb Firefox OSの紹介
20150117 gunmaweb Firefox OSの紹介
 
Dronecodeの概要とROSの対応について
Dronecodeの概要とROSの対応についてDronecodeの概要とROSの対応について
Dronecodeの概要とROSの対応について
 
Firefox OSの何が嬉しいか
Firefox OSの何が嬉しいかFirefox OSの何が嬉しいか
Firefox OSの何が嬉しいか
 
Mobile + HTML5
Mobile + HTML5Mobile + HTML5
Mobile + HTML5
 
Arduino を PHP で制御する
Arduino を PHP で制御するArduino を PHP で制御する
Arduino を PHP で制御する
 
Firefox OS for Embedded System
Firefox OS for Embedded SystemFirefox OS for Embedded System
Firefox OS for Embedded System
 
Firefox OS Updates 201311
Firefox OS Updates 201311Firefox OS Updates 201311
Firefox OS Updates 201311
 
Web∩アプリ
Web∩アプリWeb∩アプリ
Web∩アプリ
 
[Mobile5] 最新動向 2012年5月
[Mobile5] 最新動向 2012年5月[Mobile5] 最新動向 2012年5月
[Mobile5] 最新動向 2012年5月
 

Dernier

Dernier (7)

業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 

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