More Related Content
What's hot
Similar to 進撃の火狐裏話 -cameraデバイスは使えません-
Similar to 進撃の火狐裏話 -cameraデバイスは使えません- (6)
Recently uploaded
Recently uploaded (14)
進撃の火狐裏話 -cameraデバイスは使えません-
- 3. C84ではこんなもの展示してました XperiaZ (C6603) + JCROM すーぱーそに子仕様
- 4. それはともかく…
- 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
- 13. 妥協案 Camera API 要約 Cameraを使いたかったらWeb Activities APIを使え。
- 14. 葛藤 certified applicationでなければ使えないもの を解説して意味があるか？ 残念アプリになるが、Web Activities (pick)を 使って解説するか？ 今回はWeb Activitiesで勘弁してやろう！ という事で、進撃の⽕狐ではCamera=Web Activities (pick) を使って解説しました。（実際はページ数が足りなかっただけ）
- 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. これだけじゃ何なので…
- 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); } );
- 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しているように⾒えるので、 何か手順を踏む必要があるのかも？（未調査）
- 31. Error autofocusが利かない Callする位置が違う？ function onSuccess(camera) { var size = camera.capabilities.previewSizes[0]; cameracontrol = camera; camera.getPreviewStream(size, onStreamReady); camera.autoFocus(onFocuesPossible, onFocusNotPossible); };
- 34. ご清聴ありがとうございました。