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

② アイコンの準備

WP８の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標準のカメラアプリから２タッチで起動できる

•ユーザは標準機能の拡張として気軽に利用するはず

•特徴的なエクスペリエンスを提供すれば、多くのユーザを得られる可能性がある

Lensアプリの注意点

標準カメラアプリとエクスペリエンスの整合性が取れている必要がある

•レンズアプリのガイドラインの対応が必要

Windows Phone のレンズ デザイン ガイドライン

http://msdn.microsoft.com/ja-jp/library/windowsphone/design/jj662922(v=vs.105).aspx

まとめ

WPアプリからカメラを利用する方法は3通りある

•カメラを使う目的に応じて使い分ける

Lensアプリは手軽に作成できる上に、OS標準のカメラアプリとの一体化を実現できる

•ユーザにより利用されやすくなるため、Lensアプリの仕組みを活用したい