Enviar pesquisa
Carregar
進撃の火狐裏話 -cameraデバイスは使えません-
•
1 gostou
•
735 visualizações
K
Kaikias
Seguir
関西Firefox OS勉強会 3rd GIGの発表で使用した資料です。 2013/08/31時点での資料になります。
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 34
Baixar agora
Baixar para ler offline
Recomendados
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で作るラムネシュータ
三七男 山本
Recomendados
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
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
Mais conteúdo relacionado
Mais procurados
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展示パネル
三七男 山本
Mais procurados
(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展示パネル
Semelhante a 進撃の火狐裏話 -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
Semelhante a 進撃の火狐裏話 -cameraデバイスは使えません-
(6)
ICSをビルドしてみた
ICSをビルドしてみた
LINQ、Select連弾ってやります?
LINQ、Select連弾ってやります?
第9回 北関東3県工業高校生徒研究発表大会
第9回 北関東3県工業高校生徒研究発表大会
Gorilla.vim#6
Gorilla.vim#6
PhotonCloudで一ヶ月ゲーム作った話
PhotonCloudで一ヶ月ゲーム作った話
AllwinnerタブレットのOSを作ってみる(中編)
AllwinnerタブレットのOSを作ってみる(中編)
Último
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
Último
(8)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.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.
ご清聴ありがとうございました。
Baixar agora