Suche senden
Hochladen
進撃の火狐裏話 -cameraデバイスは使えません-
•
1 gefällt mir
•
735 views
K
Kaikias
Folgen
関西Firefox OS勉強会 3rd GIGの発表で使用した資料です。 2013/08/31時点での資料になります。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 34
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Summercamp2020 group2
Summercamp2020 group2
openrtm
Summercamp2020 group3
Summercamp2020 group3
openrtm
Summer camp2018 group2
Summer camp2018 group2
openrtm
Summer camp2019 group1
Summer camp2019 group1
openrtm
小ネタ:Android上でroscoreを走らせてみた
小ネタ:Android上でroscoreを走らせてみた
Ryodo Tanaka
Summer camp2019 group2
Summer camp2019 group2
openrtm
Hiyoshi Jumpの作り方
Hiyoshi Jumpの作り方
MakotoItoh
ルネサスナイト10発表資料 Rubyで作るラムネシュータ
ルネサスナイト10発表資料 Rubyで作るラムネシュータ
三七男 山本
Empfohlen
Summercamp2020 group2
Summercamp2020 group2
openrtm
Summercamp2020 group3
Summercamp2020 group3
openrtm
Summer camp2018 group2
Summer camp2018 group2
openrtm
Summer camp2019 group1
Summer camp2019 group1
openrtm
小ネタ:Android上でroscoreを走らせてみた
小ネタ:Android上でroscoreを走らせてみた
Ryodo Tanaka
Summer camp2019 group2
Summer camp2019 group2
openrtm
Hiyoshi Jumpの作り方
Hiyoshi Jumpの作り方
MakotoItoh
ルネサスナイト10発表資料 Rubyで作るラムネシュータ
ルネサスナイト10発表資料 Rubyで作るラムネシュータ
三七男 山本
Summercamp2020 group1
Summercamp2020 group1
openrtm
天体を静止画として長時間撮影できる装置 の紹介
天体を静止画として長時間撮影できる装置 の紹介
Masaki Otsuki
Ruby関西76 gr citrusの使い方#2
Ruby関西76 gr citrusの使い方#2
三七男 山本
ET2016 小さなRubyボード GR-CITRUSの紹介
ET2016 小さなRubyボード GR-CITRUSの紹介
三七男 山本
メガドラ実機で自作のROMファイルを動かしてみた話
メガドラ実機で自作のROMファイルを動かしてみた話
Yuma Ohgami
20190828 sd by kitazaki_t0
20190828 sd by kitazaki_t0
Ayachika Kitazaki
Rosjp37 live ros
Rosjp37 live ros
Tatsuya Fukuta
セガサターンマシン語プログラミングの紹介
セガサターンマシン語プログラミングの紹介
Yuma Ohgami
ET2016展示パネル
ET2016展示パネル
三七男 山本
ICSをビルドしてみた
ICSをビルドしてみた
kinneko
LINQ、Select連弾ってやります?
LINQ、Select連弾ってやります?
Ryota Murohoshi
第9回 北関東3県工業高校生徒研究発表大会
第9回 北関東3県工業高校生徒研究発表大会
Masaki Kobayashi
Gorilla.vim#6
Gorilla.vim#6
MasatakaHigashijima
PhotonCloudで一ヶ月ゲーム作った話
PhotonCloudで一ヶ月ゲーム作った話
Hiroto Imoto
AllwinnerタブレットのOSを作ってみる(中編)
AllwinnerタブレットのOSを作ってみる(中編)
shimadah
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Weitere ähnliche Inhalte
Was ist angesagt?
Summercamp2020 group1
Summercamp2020 group1
openrtm
天体を静止画として長時間撮影できる装置 の紹介
天体を静止画として長時間撮影できる装置 の紹介
Masaki Otsuki
Ruby関西76 gr citrusの使い方#2
Ruby関西76 gr citrusの使い方#2
三七男 山本
ET2016 小さなRubyボード GR-CITRUSの紹介
ET2016 小さなRubyボード GR-CITRUSの紹介
三七男 山本
メガドラ実機で自作のROMファイルを動かしてみた話
メガドラ実機で自作のROMファイルを動かしてみた話
Yuma Ohgami
20190828 sd by kitazaki_t0
20190828 sd by kitazaki_t0
Ayachika Kitazaki
Rosjp37 live ros
Rosjp37 live ros
Tatsuya Fukuta
セガサターンマシン語プログラミングの紹介
セガサターンマシン語プログラミングの紹介
Yuma Ohgami
ET2016展示パネル
ET2016展示パネル
三七男 山本
Was ist angesagt?
(9)
Summercamp2020 group1
Summercamp2020 group1
天体を静止画として長時間撮影できる装置 の紹介
天体を静止画として長時間撮影できる装置 の紹介
Ruby関西76 gr citrusの使い方#2
Ruby関西76 gr citrusの使い方#2
ET2016 小さなRubyボード GR-CITRUSの紹介
ET2016 小さなRubyボード GR-CITRUSの紹介
メガドラ実機で自作のROMファイルを動かしてみた話
メガドラ実機で自作のROMファイルを動かしてみた話
20190828 sd by kitazaki_t0
20190828 sd by kitazaki_t0
Rosjp37 live ros
Rosjp37 live ros
セガサターンマシン語プログラミングの紹介
セガサターンマシン語プログラミングの紹介
ET2016展示パネル
ET2016展示パネル
Ähnlich wie 進撃の火狐裏話 -cameraデバイスは使えません-
ICSをビルドしてみた
ICSをビルドしてみた
kinneko
LINQ、Select連弾ってやります?
LINQ、Select連弾ってやります?
Ryota Murohoshi
第9回 北関東3県工業高校生徒研究発表大会
第9回 北関東3県工業高校生徒研究発表大会
Masaki Kobayashi
Gorilla.vim#6
Gorilla.vim#6
MasatakaHigashijima
PhotonCloudで一ヶ月ゲーム作った話
PhotonCloudで一ヶ月ゲーム作った話
Hiroto Imoto
AllwinnerタブレットのOSを作ってみる(中編)
AllwinnerタブレットのOSを作ってみる(中編)
shimadah
Ähnlich wie 進撃の火狐裏話 -cameraデバイスは使えません-
(6)
ICSをビルドしてみた
ICSをビルドしてみた
LINQ、Select連弾ってやります?
LINQ、Select連弾ってやります?
第9回 北関東3県工業高校生徒研究発表大会
第9回 北関東3県工業高校生徒研究発表大会
Gorilla.vim#6
Gorilla.vim#6
PhotonCloudで一ヶ月ゲーム作った話
PhotonCloudで一ヶ月ゲーム作った話
AllwinnerタブレットのOSを作ってみる(中編)
AllwinnerタブレットのOSを作ってみる(中編)
Kürzlich hochgeladen
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
Kürzlich hochgeladen
(9)
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
進撃の火狐裏話 -cameraデバイスは使えません-
1.
進撃の⽕狐裏話 -Cameraデバイスは使えません- @Kaikias_lys
2.
自己紹介 濵田 怜実 Twitter: @Kaikias_lys Android関係のお仕事やってます。 最近は提督になったらしい。
3.
C84ではこんなもの展示してました XperiaZ (C6603) +
JCROM すーぱーそに子仕様
4.
それはともかく…
5.
C84でこんな本出しました Mozilla Japanさんにも10冊納品されたとか…? 完売御礼! 完売御礼! ありがとうございます! ありがとうございます!
6.
事の始まり この辺がFirefox OS本を書かないかと言って きた ホイホイ乗った 結果:ごらんの有様だよ!
7.
担当箇所 デバイス周りのところ (10、11、12章+3章の後半(実機部分)) 10章:Camera 11章:GPS 12章:Vibrator 3章後半:実機での開発環境構築方法 合計11ページ (本文書いた7人のうちで一番多い(想定外))
8.
前途多難? 面白そうだと乗ったは良いものの… 実はJavascriptを知らない HTML5?何それおいしいの? そもそもFirefox OSにはあんまり期待していない 出るのが遅すぎ ?
9.
意外と… やってみたら意外と簡単 GPSとVibratorは楽勝
10.
ところが… Cameraが曲者
11.
どういうことか? Camera API アプリの許可設定 /
App permissions https://developer.mozilla.org/en-US/docs/WebAPI/Camera https://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions
12.
つまり、 CameraデバイスをAndroidのように直接叩く アプリはFirefox OSではcertified applications でしか作れない! 一般の開発者は(現状)Cameraデバイスを直 接叩いたアプリケーションを作れない! = カメラ系アプリのDeveloper全滅
13.
妥協案 Camera API 要約 Cameraを使いたかったらWeb Activities
APIを使え。
14.
葛藤 certified applicationでなければ使えないもの を解説して意味があるか? 残念アプリになるが、Web Activities
(pick)を 使って解説するか? 今回はWeb Activitiesで勘弁してやろう! という事で、進撃の⽕狐ではCamera=Web Activities (pick) を使って解説しました。(実際はページ数が足りなかっただけ)
15.
でもそれでは面白くないので 今日はcertified applicationの 作り方を解説します
16.
必要なもの UbuntuのインストールされたPC or Mac =Firefox
OSのビルド環境 Firefox OS用のアプリ開発環境 KEONとかPEAK、Nexus Sなどの実機(あれ ば) やる気(必須)
17.
手順 Firefox OSのbuild環境を整える[1] githubからB2GのSourceをcloneする[2] ターゲットデバイスにあわせて./config.shす る certified applicationを作る buildする 端末に焼く [1]
https://developer.mozilla.org/ja/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Firefox_OS [2] git://github.com/mozilla-b2g/B2G.git
18.
簡単ですね!
19.
これだけじゃ何なので…
20.
Cameraアプリをpreinstallする Web Activities版と同様のPreviewを表示して 撮影できるだけのアプリを作ってpreinstallし ます
21.
manifest.webappを変更する manifest.webappにpermissionとtypeを設定す る "permissions": { "device-storage:pictures": { "access":
"readwrite“ }, "camera": {}, "storage": {} }, "type": "certified",
22.
htmlを変更する 今回は単純にCamera APIを叩くだけのアプリ なので簡単に <body> <h1>Camera demo</h1> <div
id="content"> <video></video> <button id="capture-btn">capture</button> </div> <script type="text/javascript" src="js/app.js"></script> </body>
23.
app.jsをゴリゴリ書く var storage =
navigator.getDeviceStorage('pictures'); var display = document.getElementsByTagName('video')[0]; var cameras = window.navigator.mozCameras; var options = { camera: cameras.getListOfCameras()[0] }; var pictureOptions = { rotation: 0, pictureSize: null, fileFormat: null }; var captureBtn = document.getElementById('capture-btn'); var cameracontrol = null; function onStreamReady(stream) { display.mozSrcObject = stream; display.play(); }; function onFocusPossible(success) { if(success){ console.log("The image has been focused"); }else{ console.log("The image has not been focused"); } }; function onFocusNotPossible(error) { console.log("The camera is not able to focus anything"); console.log(error); }; function onSuccess(camera) { var size = camera.capabilities.previewSizes[0]; cameracontrol = camera; camera.getPreviewStream(size, onStreamReady); camera.autoFocus(onFocuesPossible, onFocusNotPossible); }; function onError(error) { console.warn(error); }; function onPictureTaken(blob) { storage.addNamed(blob, 'test.jpg'); cameracontrol.resumePreview(); }; cameras.getCamera(options, onSuccess, onError); captureBtn.addEventListener('click', function() { pictureOptions.pictureSize = cameracontrol.capabilities.pictureSizes[0]; pictureOptions.fileformat = cameracontrol.capabilities.fileFormats[0]; cameracontrol.takePicture(pictureOptions, onPictureTaken); } );
24.
certified application Simulatorにinstallするとこうなります
25.
どこに入れてbuildすればいいか? $B2Groot/gaia/apps/ の下 放り込んでおくだけでbuild対象になるので楽!
26.
アプリケーションの構成 通常のFirefox OS用アプリケーションと同じ でいけるっぽい?
27.
buildしたROMを焼いて起動する preinstallされてる!
28.
こいつ、動くぞ!? 左:プレビュー、右:撮影した画像
29.
Camera applicationに潜む罠 KEONとNexus Sで挙動が違う navigator.mozCameras()
の応答 KEON JavaScript Error: "TypeError: navigator.mozCameras is null" {file: "app://orecamera.gaiamobile.org/js/app.js" line: 6} Nexus S No problem. navigator.mozCameras()はCameraを使用する場合に最初に呼ぶので 動かないと困る。 ただ、標準のCameraアプリでもCallしているように⾒えるので、 何か手順を踏む必要があるのかも?(未調査)
30.
Error Nexus Sでは一⾒正しく動くように⾒えるが、 PreviewScreenが90度回転した状態で表示さ れる。 →このPPTのScreenShotはcssでrotateして 無理やり解決している バグっぽい気がするけど…Nexus Sでしか確認で きてないので良くわからない。
31.
Error autofocusが利かない Callする位置が違う? function onSuccess(camera) { var
size = camera.capabilities.previewSizes[0]; cameracontrol = camera; camera.getPreviewStream(size, onStreamReady); camera.autoFocus(onFocuesPossible, onFocusNotPossible); };
32.
注意? 端末にbuildしたimageを焼く場合、 userdata.imgも焼く必要がある? preinstallのアプリケーションが増えた場合は焼か ないと⽴ち上がらなかった
33.
まとめ 普通の開発者でも環境さえ揃っていれば certified applicationを作って動かす事は可能 課題 debug方法 いちいちbuildするのは面倒
34.
ご清聴ありがとうございました。
Jetzt herunterladen