Windows Phone 8 の デバイスを使おう ~カメラ& フォト編~ @Community Open Day 2013/5/11 まどべんよっかいち 青木宣明(@kumar0001)
Windows Phone 8のデバイスを使おう~カメラ&フォト編~
@Community Open Day2013/5/11まどべんよっかいち 青木宣明(@kumar0001)
Agenda
1. Windows Phoneのカメラ
2. アプリからの静止画撮影
3. Lensアプリ
4. まとめ
Windows Phoneのカメラ
• Windows Phoneのカメラ機能
• Windows Phoneアプリからできること
ところで…
カメラで写真をよく撮りますか?
旅行だけでなく、日常生活でも気軽に撮影する方もいるのでは
カメラとモバイル機器
モバイル機器においては
•スマフォ、携帯、ノートPC 、タブレットとモバイル端末にほぼ搭載されている
•カジュアルな写真の撮影から、SNSへの写真投稿、またARでの活用など、カメラはモバイル機器に必須の機能に
Windows Phoneのカメラ
もちろんWindows Phoneにもカメラが搭載されています。
IS12T (Windows Phone 7.8) Lumia 820 (Windows Phone 8)
リアカメラ
フロントカメラ
リアカメラ
フロントカメラは非搭載
OS標準アプリでのカメラ
カメラによる静止画・動画撮影
•スタート画面のカメラアプリ
•端末のシャッターボタン
画面ロック状態からのカメラ起動も可能
カメラロールへの保存
SkyDriveへの自動アップロード
•画質の選択
フル画質だとWi-Fi接続が必要
•オフにすることも可能
OS標準アプリでのカメラ
レンズ機能
• OSのカメラアプリからアプリを起動
•レンズを交換するように効果の異なるアプリを起動して撮影できる
OS標準のカメラアプリ
レンズアプリの選択画面
レンズアプリが起動
Lensアプリの例
NokiaのPanoramaレンズ
複数回に分けて撮影した写真から、パノラマ写真を作成するレンズアプリ・画像がつながるように、撮影時にガイドが表示される
WPアプリからできること
No. 機能 内容
1 カメラ制御 フラッシュ・露出補正・露出時間・ISOなどの設定、フォーカス制御
2 静止画撮影 静止画を撮影する
3 動画撮影 動画を撮影する
4 撮影データの保存・参照
メディアライブラリ(カメラロールなど)に保存、参照する
5 Photoハブへの登録 Photoハブから起動できるよう登録する
6 共有機能の拡張 カメラロールの共有機能からAPを実行
7 編集機能の拡張 カメラロールの編集機能からAPを実行
8 リッチメディア拡張 メディアライブラリに保存した画像からAPを起動(編集機能よりも高度な処理向け)
9 オートアップロード機能
撮影した画像をネットワークにバックグラウンド送信する
WPアプリからのカメラの利用
以降では、アプリからのカメラの使い方を紹介します。1. アプリからの静止画撮影
2. Lensアプリ
以下はまたの機会に…• YCbCrの扱い
•リッチメディア
•動画撮影
•オートアップロード
•カメラアプリとOSの統合
アプリからの静止画撮影
• 3種類の方法
Chooser
PhotoCamera
PhotoCaptureDevice
WPアプリでの静止画撮影
方法 特徴
Chooser方式 お手軽だけど機能はOS依存
PhotoCamera方式 カメラを制御可能。細かな設定は不可
PhotoCaptureDevice方式 カメラの細かい設定まで可能
静止画撮影の3種類の方法
各方法ともアプリが実現できる機能の制約、メリット・デメリットが異なる
撮影方式の比較
Chooser方式 PhotoCamera方式 PhotoCaptureDevice方式
コードの作成 不要(OSのカメラ機能を利用)
必要 必要
APからのフラッシュ制御
× ○ ○
APからの解像度の設定
× ○ ○
シャッターボタンの制御
× ○ ○
APからの撮影指示 × ○ ○
フォーカス制御 AF(OS依存) AF AF / MF
撮影の設定(ISO,露出補正など)
× × ○
対象OS 7.8/8 7.8/8 8
Chooser方式
カメラに関するChooserは2個
• PhotoChooserTask
画像の選択画面を表示
オプション設定で新規撮影ボタンを表示
• CameraCaptureTask
カメラを直接起動する
PhotoChooserTaskの利用方法
PhotoChooserTask task = new PhotoChooserTask();task.ShowCamera = true;task.Completed += (s, r) =>{
if (r.TaskResult == TaskResult.OK){
this.imagePath.Text = r.OriginalFileName;BitmapImage bitmap = new BitmapImage();bitmap.SetSource(r.ChosenPhoto);this.photoImage.Source = bitmap;
}};task.Show();
Stream
Imageコントロール
CameraCaptureTaskの利用方法
CameraCaptureTask task = new CameraCaptureTask();
task.Completed += (s, r) =>
{
if (r.TaskResult == TaskResult.OK)
{
BitmapImage bitmap = new BitmapImage();
bitmap.SetSource(r.ChosenPhoto);
this.photoImage.Source = bitmap;
}
};
task.Show();
Stream
Imageコントロール
PhotoCamera方式
PhotoCameraクラス
•アプリからカメラでの撮影を制御する基本的なクラス
• Microsoft.Devices名前空間
.NET FrameworkのAPI
WP7, WP8で利用可能
PhotoCameraの使い方
生成
• カメラの存在確認
• PhotoCameraインスタンスの生成
• イベントハンドラの設定
設定
• 解像度の設定
• フラッシュ設定
撮影
• フォーカス制御(全体 or 点指定)
• 撮影の開始
• 撮影データの保存
PhotoCameraでのアプリ作成(1)
カメラの存在確認
• PhotoCamera.IsCameraTypeSupported(CameraType)
CameraType.FrontFacing
CameraType.Primary
インスタンス生成
• new PhotoCamera(CameraType)
フロントカメラがない機種もあるので、確認は必須
PhotoCameraでのアプリ作成(2)
イベントハンドラの設定
• PhotoCamera:6種類
カメラでの撮影について
• CameraButtons: 3種類
端末のシャッターボタンについて
シャッターボタン→CameraButtons
カメラ→PhotoCamera
PhotoCameraのイベントハンドラNo. イベント名 内容
1 Initialized カメラの初期化完了
2 AutoFocusCompleted オートフォーカス完了
3 CaptureStarted 画像の取り込み開始
4 CaptureImageAvailable 画像が利用可能になったとき
5 CaptureThumbnailAvailable サムネイルが利用可能になったとき
6 CaptureCompleted 画像の取り込み完了
CameraButtonsのイベントハンドラ
No. イベント名 内容
1 ShutterKeyHalfPressed シャッターボタンの半押し(→フォーカス機能の起動)
2 ShutterKeyPressed シャッターボタンの押し下げ(→撮影)
3 ShutterKeyReleased シャッターボタンを離す(→フォーカスのキャンセル)
PhotoCameraでのアプリ作成(3)
ファインダーはどうやって作成?
• CanvasコントロールにVideoBrushを設定
• VideoBrushのソースにPhotoCameraを設定する
これだけでカメラが捉えている画像がCanvasコントロールに表示される
PhotoCamera
VideoBrush
Canvas
PhotoCameraでのアプリ作成(4)
解像度の設定• PhotoCamera.ResolutionSystem.Windows.Sizeで指定する
PhotoCamera.AvailableResolutionsで対応解像度を取得できる
フラッシュ• PhotoCamera.FlashModeに設定FlashMode.Auto
FlashMode.On
FlashMode.Off
FlashMode. RedEyeReduction
PhotoCameraでのアプリ作成(5)
フォーカス• PhotoCamera.Focus場所を指定せずにオートフォーカス開始
IsFocusSupportedでサポート有無を確認
• PhotoCamera.FocusAtPointフォーカスポイントを指定してAF開始縦横の割合(0~1の範囲)で指定
IsFocusAtPointSupportedでサポート有無を確認
完了するとAutoFocusCompletedイベントが発生する
PhotoCameraでのアプリ作成(6)
撮影
• PhotoCamera.CaptureImage
保存
•画像が利用可能になるとCaptureImageAvailableイベントが発生
画像のStreamを取得できるのでMediaLibraryに保存する
PhotoCameraでのアプリ作成(7)
撮影のタイミングは?
•アプリが自前で実装する
シャッターボタン押し下げイベント
アプリのUIによる指示
画面のタップ
画面のボタン操作
PhotoCameraでのアプリ
デモ:サンプルアプリ
デモ
PhotoCaptureDevice方式
より細かな撮影パラメータを設定するときはPhotoCaptureDeviceを使う
• ISO、露出補正、など
•デジタルカメラ専用機に匹敵する機能を持つアプリも作成可能に
Windows.Phone.Media.Capture名前空間
• WinRT API
•ネイティブコードからも利用可能
撮影のプロパティ
WP8で利用可能なプロパティ
• 2種類のクラスに定義されている
KnownCameraGeneralPropertiesに定義されたプロパティ
KnownCameraPhotoPropertiesに定義されたプロパティ
•定義されたGuidを値の指定時に用いる
撮影のプロパティ
設定値について• RangeとValuesの2タイプRange=上限・下限で
Values=複数の値から構成
•端末ごとに取り得る値が違う指定可能な値を確認する必要があるRangeタイプ: GetSupportedPropertyRange
Valuesタイプ: GetSupportedPropertyValues
(例)Rangeタイプ: ISO感度→上限~下限が指定される(100~3200など)Valuesタイプ: AF補助光→Off/Auto/Onの取り得る値(Off/Onなど)
デモ
撮影のプロパティの一覧
プロパティの一覧、それぞれのタイプの情報源
• MSDNライブラリに記載されている
• Windows Phone 8 の高度なキャプチャプロパティ http://msdn.microsoft.com/ja-
JP/library/windowsphone/develop/jj662939(v=vs.105).aspx
撮影のプロパティ
範囲タイプだが任意の値を設定できない・ISO感度に定義された値だけ・それ以外は例外が発生
露出補正は範囲タイプだがExposureCompensationの説明に「 1/6EV単位」と記述
KnownCameraGeneralPropeties
主要なプロパティNo. プロパティ タイプ 内容
1 AutoFocusRange 値の組 オートフォーカスの種類
2 EncodeWithOrientation 範囲 エンコード時の画像の向き
3 ManualFocusPosition 範囲 マニュアルフォーカスの位置
4 PlayShutterSoundOnCapture 値の組 シャッター音の有無
5 SpecifiedCaptureOrientation 範囲 メタデータに記載する画像の向き
AutoFocusRange・マクロモード (Macro)・通常モード (Normal)・フルモード (Full)・過焦点モード (Hyperfocal)・無限遠モード (Infinity)
KnownCameraPhotoProperties
No. プロパティ タイプ 内容
1 ExposureCompensation 範囲 1/6EV単位の露出補正
2 ExposureTime 範囲 露出時間
3 FlashMode 値の組 フラッシュのモード
4 FlashPower 範囲 フラッシュの強さ
5 FocusIlluminationMode 値の組 AF補助光のモード
6 Iso 範囲 ISO感度
7 LockedAutoFocusParameter 値の組 オートフォーカス、自動露出、自動ホワイトバランスの有無
8 ManualWhiteBalance 範囲 ホワイトバランスの設定
9 SceneMode 値の組 撮影シーン
10 WhiteBalancePreset 値の組 ホワイトバランスのプリセット値
KnownCameraPhotoProperties
ExposureCompensation・1/6EV単位で指定する・+1EV⇒6を指定する
SceneMode・自動モード (Auto)・マクロモード (Macro)・ポートレートモード (Portrait)・スポーツモード (Sport)・ナイトモード (Night)・ランドスケープモード(Landscape)など
FlashModeFocusIlluminationMode・On、Off、Autoで指定
Iso・上限/下限の範囲タイプだが100,125,200,…など規格で定義された値を指定する
WhiteBalancePreset・曇り (Cloudy)・昼光 (Daylight)・フラッシュ (Flash)・蛍光灯 (Fluorescent)・タングステン (Tungsten)・キャンドル (Candlelight)
PhotoCaptureDeviceの使い方
初期化
• カメラの存在確認
• PhotoCaptureDeviceのオープン
• イベントハンドラの設定(シャッターボタン)
シーケンス設定
• シーケンスの生成
• プロパティの設定
• シーケンスの準備
撮影
• フォーカス制御(全体 or 領域指定)
• 画像出力用ストリームの設定
• 撮影の開始
• 撮影データの保存
PhotoCaptureDeviceの使い方(1)
カメラの存在確認
• PhotoCaptureDevice.AvailableSensorLocations.Contains(CameraSensorLocation)
CameraSensorLocation.Front
CameraSensorLocation.Back
PhotoCaptureDeviceの使い方(2)
デバイスのオープン
•カメラの位置、解像度を指定してオープン
public static IAsyncOperation<PhotoCaptureDevice> OpenAsync(CameraSensorLocation, Size)
• PhotoCameraとは違って、解像度の指定はオープン時になる
PhotoCaptureDeviceの使い方(3)
イベントハンドラ
• PhotoCaptureDeviceでは非同期処理がイベントではなく、async/awaitで行う
カメラ撮影に関するイベントはない
シャッターボタンのイベントはこれまで通り
• Asyncで終わる処理が対象
PhotoCaptureDeviceの使い方(4)
シーケンスの生成・準備• PhotoCaptureDeviceでは、複数のフレームが含まれるシーケンスにカメラデバイスが対応する構成
• シーケンスの作成自にフレーム数を指定する現時点では1フレームのみをサポート
FrameFrame
Frame
PhotoCaptureDevice
CameraCaptureSequence
Frameはそれぞれのプロパティを設定できる
準備時に対応付ける
PhotoCaptureDeviceの使い方(5)
プロパティの設定方法は2通り
•カメラデバイスにSetPropertyする
フレーム共通に設定される
• FrameのDesiredPropertiesに代入する
特定のフレームだけ設定される(はず)
どちらも設定先をGuidで指定する• camera.SetProperty(KnownCameraPhotoProperties.FlashMode,
FlashState.On);
• seq.Frames[0].DesiredProperties[KnownCameraPhotoProperties.SceneMode] = CameraSceneMode.Portrait;
PhotoCaptureDeviceの使い方(6)
撮影前にシーケンスを準備する• await camera.PrepareCaptureSequenceAsync(seq)
プロパティを設定したらPrepare…を再度実行する
PhotoCaptureDeviceの使い方(7)
フォーカス
• PhotoCaptureDevice.FocusAsync
• AF領域はFocusRegionプロパティに設定
Rectオブジェクトで領域を指定
Previewの解像度の範囲に収まる必要がある
フラッシュ
• KnownCameraPhotoProperties.FlashModeプロパティを設定
PhotoCaptureDeviceの使い方(8)
ストリームの設定
•撮影前に、画像を取得するストリームをフレームに設定する
CaptureStream: フル解像度版
ThumbnailStream: サムネイル版
撮影
•シーケンスのStartCaptureAsyncで
保存
• PhotoCameraと同様
PhotoCaptureDeviceでのアプリ
デモ:サンプルアプリ
デモ
まとめ: WPアプリでの静止画撮影
どの方法を使えばいいのか?
方式 利用する場面
Chooser ・写真撮影がアプリの主目的でない場合(撮影したデータが利用できればよい、など)
・カメラからのデータをリアルタイムに処理する必要がない場合
PhotoCamera ・カメラからのデータをリアルタイムに処理する場合(プレビュー画像もフィルタ処理する、など)・フラッシュ、フォーカスをAPで制御したい場合
PhotoCaptureDevice PhotoCameraの要件に加えて・ISO感度、露出補正、ホワイトバランスなど細かな制御をしたい場合
補足:エミュレータについて
•エミュレータでは、小さな箱が周りを動き回る映像になる
• APIが期待される通りに動作しない可能性もある
•デバイスでの開発がおすすめ
LENSアプリ
• Lensアプリの作成方法
カメラアプリの起動方法
スタート画面 OS標準のカメラアプリ
Photoハブ
アプリ一覧
作成したカメラアプリをユーザに利用してもらうには?
標準カメラアプリに近い場所から起動させたい!
OSとの統合OS標準のカメラアプリ Photoハブ
画像のメニュー
レンズアプリ
Photoハブからの起動
画像のメニューからの起動
Lensアプリの作成方法
Lensアプリの作成方法
① カメラアプリを作成する
PhotoCameraでもPhotoCaptureDeviceでもOK
② アイコンの準備
WP8の3解像度に応じた3ファイルを用意する
WVGA 173x173, 720p 259x259, WXGA 277x277
③ WMAppManifest.xmlへのExtensionの登録
<Tokens>の直後に追加
<Extension ExtensionName="Camera_Capture_App" ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5631}"TaskID="_default" />
デモ:Lensアプリ
モノクロームレンズ
•ファインダーに撮影画像をモノクローム化しながら表示
•撮影した画像をモノクローム化して保存
デモ
補足:ファインダーの処理
ファインダーの映像もリアルタイムで処理した場合は?
別スレッドでカメラから取得したプリビュー画像を処理してImageコントロール等に表示
• PhotoCaptureDeviceのPreview画像取得
GetPreviewBufferArgb
GetPreviewBufferY
GetPreviewBufferYCbCr
Lensアプリのメリット
LensアプリはOS標準のカメラアプリから2タッチで起動できる
•ユーザは標準機能の拡張として気軽に利用するはず
•特徴的なエクスペリエンスを提供すれば、多くのユーザを得られる可能性がある
Lensアプリの注意点
標準カメラアプリとエクスペリエンスの整合性が取れている必要がある
•レンズアプリのガイドラインの対応が必要
Windows Phone のレンズ デザイン ガイドライン
http://msdn.microsoft.com/ja-jp/library/windowsphone/design/jj662922(v=vs.105).aspx
まとめ
WPアプリからカメラを利用する方法は3通りある
•カメラを使う目的に応じて使い分ける
Lensアプリは手軽に作成できる上に、OS標準のカメラアプリとの一体化を実現できる
•ユーザにより利用されやすくなるため、Lensアプリの仕組みを活用したい