Camera APIで何か

FxOSコードリーディングミートアップ＃１１ 2014/11/15

1. Camera API で 何か FxOSコードリーディングミートアップ＃１１ 2014/11/15
2. 自己紹介 ひらとり • @flatbirdH • FxOS コードリーディング • html5j Webプラットフォー ム部 (スタッフ)
4. なぜ Camera API？
5. Firefox OS 2.0 から Privileged API に！
6. アプリの権限 web (通常) • ホスト型アプリ。 • または、特権なしパッケージ型アプリ。 privileged (特権) • パッケージ型アプリのみ。 • Marketplace での審査が必要。 certified (認定) • プレインストールアプリ（パッケージ型）。 • 一般開発者は使えない。 権限によって使える API が異なる。
7. 昔見たときのパーミッション FxOS 1.1 くらい？ web alarms, fmradio, geolocation, storage, desktop- notification privileged browser, contacts, systemXHR, tcp-socket, device- storage:music, device-storage:videos, device-storage: pictures, device-storage:sdcard certified backgroundservice, bluetooth, camera, mobileconnection, power, settings, sms, systemclock, telephony, webapps-manage, wifi-manage
8. FxOS 1.1 くらい？ web alarms, fmradio, geolocation, storage, desktop- notification privileged browser, contacts, systemXHR, tcp-socket, device- storage:music, device-storage:videos, device-storage: pictures, device-storage:sdcard certified backgroundservice, bluetooth, camera, mobileconnection, power, settings, sms, systemclock, telephony, webapps-manage, wifi-manage カメラも使えないのか、、、という衝撃 昔見たときのパーミッション
9. 関西Firefox OS勉強会 3rd GIG
10. 関西Firefox OS勉強会 3rd GIG
11. 関東Firefox OS勉強会 7th
12. 関東Firefox OS勉強会 7th
13. Privileged になった！ 感慨深い。。。
14. Camera API を使わずカメラを使う • 写真が欲しい場合 ◦ Web Activities • リアルタイムのカメラ画像 (ビデオスト リーム) が欲しい場合 ◦ getUserMedia() ◦ Firefox OS 1.4 以降 "video-capture" が 使えるように
15. Web Activities var activity = new MozActivity({ // Ask for the "pick" activity name: "pick", // Provide the data required by the filters of the activity data: { type: "image/jpeg" } }); activity.onsuccess = function() { var blob = this.result.blob; var img = document.querySelector('img'); img.src = window.URL.createObjectURL(blob); }; activity.onerror = function() { console.log(this.error); };
16. getUserMedia "permissions": { "video-capture": { "description": "Required to capture audio via getUserMedia" } }
17. getUserMedia navigator.getUserMedia = (navigator.getUserMedia || navigator.mozGetUserMedia); navigator.getUserMedia( // constraints { video: true, audio: false }, // successCallback function(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, // errorCallback function(err) { console.log("The following error occured: " + err); } );
18. Camera API は どんなとき使うの？
19. Camera API を使う時 カメラアプリを作る時 Note: Except if you are implementing a replacement for the default Camera application, you shouldn't use this API. Instead, if you want to use the camera in your device, you should use the Web Activities API. https://developer.mozilla.org/docs/Web/API/Camera_API
20. Camera API で出来ること • 写真撮影 … takePicture() • プレビュー … getPreviewStream() • 動画撮影 … startRecording() • フォーカス … autoFocus(), focusAreas, etc. • ズーム … zoom • ホワイトバランス … whiteBalanceMode • シーン … sceneMode • フラッシュ … flashMode • エフェクト … effect
21. Camera API の使い方
23. http://www.slideshare.net/chikoski/20141030-html5jfirefox-osdeviceapi/
24. http://www.slideshare.net/chikoski/20141030-html5jfirefox-osdeviceapi/
25. 今日のコレはやんなくても よかったんじゃ...？
26. なので、 清水さんのスライドを 使わせていただきます
27. http://www.slideshare.net/chikoski/20141030-html5jfirefox-osdeviceapi/ “type”: “privileged”
28. http://www.slideshare.net/chikoski/20141030-html5jfirefox-osdeviceapi/ CameraControl [“back”, “front”] CameraManager
29. CameraControl • 写真撮影 … takePicture() • プレビュー … getPreviewStream() • 動画撮影 … startRecording() • フォーカス … autoFocus(), focusAreas, etc. • ズーム … zoom • ホワイトバランス … whiteBalanceMode • シーン … sceneMode • フラッシュ … flashMode • エフェクト … effect
30. http://www.slideshare.net/chikoski/20141030-html5jfirefox-osdeviceapi/
31. http://www.slideshare.net/chikoski/20141030-html5jfirefox-osdeviceapi/
32. http://www.slideshare.net/chikoski/20141030-html5jfirefox-osdeviceapi/
33. http://www.slideshare.net/chikoski/20141030-html5jfirefox-osdeviceapi/
34. http://www.slideshare.net/chikoski/20141030-html5jfirefox-osdeviceapi/
35. Flame の CameraCapabilities “back” カメラ（=メインカメラ）
36. previewSizes: {"height":720,"width":1280},{"height":480,"width":864},{"height": 480,"width":800},{"height":432,"width":768},{"height":480,"width":720},{"height": 480,"width":640},{"height":432,"width":576},{"height":320,"width":480},{"height": 288,"width":384},{"height":288,"width":352},{"height":240,"width":320},{"height": 160,"width":240},{"height":144,"width":176},{"height":176,"width":144} pictureSizes: {"height":1944,"width":2592},{"height":1536,"width":2048},{"height": 1080,"width":1920},{"height":1200,"width":1600},{"height":768,"width":1280}, {"height":720,"width":1280},{"height":768,"width":1024},{"height":600,"width": 800},{"height":480,"width":800},{"height":480,"width":720},{"height":480,"width": 640},{"height":288,"width":352},{"height":240,"width":320},{"height":144,"width": 176} thumbnailSizes: {"height":480,"width":640},{"height":288,"width":512},{"height": 288,"width":480},{"height":154,"width":256},{"height":288,"width":432},{"height": 240,"width":320},{"height":144,"width":176},{"height":0,"width":0} videoSizes: {"height":720,"width":1280},{"height":480,"width":864},{"height":480," width":800},{"height":480,"width":720},{"height":480,"width":640},{"height":320," width":480},{"height":288,"width":352},{"height":240,"width":320},{"height":144," width":176}
37. fileFormats: "jpeg","bayer-mipi-10bggr","bayer-ideal-qcom-10bggr","bayer-qcom- 10bggr","yuv422sp" whiteBalanceModes: "auto","incandescent","fluorescent","warm-fluorescent"," daylight","cloudy-daylight","twilight","shade" sceneModes: "auto","asd","landscape","snow","beach","sunset","night","portrait"," backlight","sports","steadyphoto","flowers","candlelight","fireworks","party","night- portrait","theatre","action","AR","hdr" effects: "none","mono","negative","solarize","sepia","posterize","whiteboard"," blackboard","aqua" flashModes: "off","auto","on","torch" focusModes: "auto","infinity","macro","continuous-video","continuous-picture"
38. zoomRatios: 1,1.02,1.04,1.07,1.09,1.12,1.14,1.17,1.2,1.23,1.25,1.28,1.31,1.35,1.38,1.41,1.44,1.48,1.51,1. 55,1.58,1.62,1.66,1.7,1.74,1.78,1.82,1.86,1.9,1.95,2,2.04,2.09,2.14,2.19,2.24,2.29,2.35,2 .4,2.46,2.51,2.57,2.63,2.7,2.76,2.82,2.89,2.96,3.03,3.1,3.17,3.24,3.32,3.4,3.48,3.56,3.6 4,3.73,3.81,3.9,4,4.09,4.18,4.28,4.38,4.48,4.59,4.7,4.81,4.92,5.03,5.15,5.27,5.4,5.52,5. 65,5.78,5.92,6.06 maxFocusAreas: 1 maxMeteringAreas: 5 maxDetectedFaces: 5 minExposureCompensation: -2.0000039935112 maxExposureCompensation: 2.0000039935112 exposureCompensationStep: 0.16666699945926666
39. recorderProfiles: low:{"format":"3gp","video":{"codec":"h264","bitrate":192000,"framerate":30," width":176,"height":144},"audio":{"codec":"amrnb","bitrate":12200,"samplerate": 8000,"channels":1}}, high:{"format":"mp4","video":{"codec":"h264","bitrate":14000000,"framerate":30," width":1280,"height":720},"audio":{"codec":"aac","bitrate":156000,"samplerate": 48000,"channels":2}}, qcif:{"format":"3gp","video":{"codec":"h264","bitrate":192000,"framerate":30," width":176,"height":144},"audio":{"codec":"amrnb","bitrate":12200,"samplerate": 8000,"channels":1}}, cif:{"format":"3gp","video":{"codec":"h264","bitrate":720000,"framerate":30," width":352,"height":288},"audio":{"codec":"amrnb","bitrate":12200,"samplerate": 8000,"channels":1}}, 480p:{"format":"mp4","video":{"codec":"h264","bitrate":2000000,"framerate":30," width":720,"height":480},"audio":{"codec":"aac","bitrate":156000,"samplerate": 48000,"channels":2}}, 720p:{"format":"mp4","video":{"codec":"h264","bitrate":14000000,"framerate":30," width":1280,"height":720},"audio":{"codec":"aac","bitrate":156000,"samplerate": 48000,"channels":2}}, isoModes: "auto","hjr","100","200","400","800","1600"
40. Flame の CameraCapabilities “back” カメラ vs “front” カメラ
41. back front previewSizes 最大 720x1280 最大 480x640 pictureSizes 最大 1194x2592 最大 1200x1600 videoSizes 最大 720x1280 最大 480x640 fileFormats jpeg,bayer-mipi-10bggr,bayer-ideal-qcom-10bggr, bayer-qcom-10bggr,yuv422sp jpeg,yuv422sp sceneModes auto,asd,landscape,snow,beach,sunset,night, portrait,backlight,sports,steadyphoto,flowers, candlelight,fireworks,party,night-portrait,theatre, action,AR,hdr なし effects none,mono,negative,solarize,sepia,posterize, whiteboard,blackboard,aqua なし flashModes off,auto,on,torch なし focusModes auto,infinity,macro,continuous-video,continuous- picture fixed maxFocusAreas 1 0 recorderProfiles low(3gp),high(mp4),qcif(3gp),cif(3gp),480p (mp4),720p(mp4) low(3gp),qcif(3gp), cif(3gp)
42. おまけ
43. おまけ１ mozCamera? mozCameras? • MDN のドキュメントは mozCamera と書いてあ るけど実際に取れるのは mozCameras • mozCameras のほうには mozCamera に変 わったのでそっちを見ろと書いてある。 https://developer.mozilla.org/en-US/docs/Web/API/Navigator.mozCameras
44. WebIDL 見ても mozCameras http://mxr.mozilla.org/mozilla-b2g34_v2_1/source/dom/webidl/Navigator. webidl#280
45. おまけ２ フラッシュライトはできるのか？ Bug 968119 - Need a privileged (not certified) API for accessing the camera's flash https://bugzilla.mozilla.org/show_bug.cgi?id=968119
46. できた var mode = flashON ? 'torch' : 'off'; var capabilities = mainCamera.capabilities; if (capabilities.flashModes.indexOf(mode) > -1) { mainCamera.flashMode = mode; console.log('flashMode=' + mainCamera.flashMode); }
47. おまけ３ Open Web Board につないだ Web カメラはどう見える？
48. おまけ３ Open Web Board につないだ Web カメラはどう見える？ 近日公開
49. 最後に
50. http://www.adventar.org/calendars/411
51. Thank you!