COD2013＠名古屋での発表資料です。

1. Windows Phone 8の
デバイスを使おう
～カメラ&フォト編～
＠Community Open Day
2013/5/11
まどべんよっかいち 青木宣明(@kumar0001)

2. Agenda
1. Windows Phoneのカメラ
2. アプリからの静止画撮影
3. Lensアプリ
4. まとめ

3. Windows Phoneのカメラ
• Windows Phoneのカメラ機能
• Windows Phoneアプリからできること

4. ところで…
カメラで写真をよく撮りますか？
旅行だけでなく、日常生活でも気軽に
撮影する方もいるのでは

5. カメラとモバイル機器
モバイル機器においては
• スマフォ、携帯、ノートPC 、タブレット
とモバイル端末にほぼ搭載されている
• カジュアルな写真の撮影から、SNSへの写
真投稿、またARでの活用など、カメラは
モバイル機器に必須の機能に

6. Windows Phoneのカメラ
もちろんWindows Phoneにもカメラ
が搭載されています。
IS12T (Windows Phone 7.8) Lumia 820 (Windows Phone 8)
リアカメラ
フロントカメラ
リアカメラ
フロントカメラは非搭載

7. OS標準アプリでのカメラ
カメラによる静止画・動画撮影
• スタート画面のカメラアプリ
• 端末のシャッターボタン
画面ロック状態からのカメラ起動も可能
カメラロールへの保存
SkyDriveへの自動アップロード
• 画質の選択
フル画質だとWi-Fi接続が必要
• オフにすることも可能

8. OS標準アプリでのカメラ
レンズ機能
• OSのカメラアプリからアプリを起動
• レンズを交換するように効果の異なるアプ
リを起動して撮影できる
OS標準のカメラアプリ
レンズアプリの選択画面
レンズアプリが起動

9. Lensアプリの例
Nokiaの
Panoramaレンズ
複数回に分けて撮影した写真から、パノラマ写真を作成
するレンズアプリ
・画像がつながるように、撮影時にガイドが表示される

10. WPアプリからできること
No. 機能 内容
1 カメラ制御 フラッシュ・露出補正・露出時間・ISOなど
の設定、フォーカス制御
2 静止画撮影 静止画を撮影する
3 動画撮影 動画を撮影する
4 撮影データの保存・
参照
メディアライブラリ（カメラロールなど）
に保存、参照する
5 Photoハブへの登録 Photoハブから起動できるよう登録する
6 共有機能の拡張 カメラロールの共有機能からAPを実行
7 編集機能の拡張 カメラロールの編集機能からAPを実行
8 リッチメディア拡張 メディアライブラリに保存した画像からAP
を起動（編集機能よりも高度な処理向け）
9 オートアップロード
機能
撮影した画像をネットワークにバックグラ
ウンド送信する

11. WPアプリからのカメラの利用
以降では、アプリからのカメラの使い
方を紹介します。
1. アプリからの静止画撮影
2. Lensアプリ
以下はまたの機会に…
• YCbCrの扱い
• リッチメディア
• 動画撮影
• オートアップロード
• カメラアプリとOSの統合

12. アプリからの静止画撮影
• 3種類の方法
 Chooser
 PhotoCamera
 PhotoCaptureDevice

13. WPアプリでの静止画撮影
方法 特徴
Chooser方式 お手軽だけど機能はOS
依存
PhotoCamera方式 カメラを制御可能。
細かな設定は不可
PhotoCaptureDevice方式 カメラの細かい設定ま
で可能
静止画撮影の3種類の方法
各方法ともアプリが実現できる機能の制約、
メリット・デメリットが異なる

14. 撮影方式の比較
Chooser方式 PhotoCamera方式 PhotoCaptureDevice
方式
コードの作成 不要（OSのカメラ
機能を利用）
必要 必要
APからの
フラッシュ制御
× ○ ○
APからの
解像度の設定
× ○ ○
シャッターボタン
の制御
× ○ ○
APからの撮影指示 × ○ ○
フォーカス制御 AF（OS依存） AF AF / MF
撮影の設定（ISO,
露出補正など）
× × ○
対象OS 7.8/8 7.8/8 8

15. Chooser方式
カメラに関するChooserは2個
• PhotoChooserTask
画像の選択画面を表示
オプション設定で新規撮影ボタンを表示
• CameraCaptureTask
カメラを直接起動する

16. 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コントロール

17. 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コントロール

18. PhotoCamera方式
PhotoCameraクラス
• アプリからカメラでの撮影を制御する基本
的なクラス
• Microsoft.Devices名前空間
.NET FrameworkのAPI
WP7, WP8で利用可能

19. PhotoCameraの使い方
生成
• カメラの存在確認
• PhotoCameraインスタンスの生成
• イベントハンドラの設定
設定
• 解像度の設定
• フラッシュ設定
撮影
• フォーカス制御（全体 or 点指定）
• 撮影の開始
• 撮影データの保存

20. PhotoCameraでのアプリ作成(1)
カメラの存在確認
• PhotoCamera.IsCameraTypeSupported
(CameraType)
CameraType.FrontFacing
CameraType.Primary
インスタンス生成
• new PhotoCamera(CameraType)
フロントカメラがない機種もあるので、
確認は必須

21. PhotoCameraでのアプリ作成(2)
イベントハンドラの設定
• PhotoCamera：6種類
カメラでの撮影について
• CameraButtons： 3種類
端末のシャッターボタンについて
シャッターボタン
→CameraButtons
カメラ→PhotoCamera

22. PhotoCameraのイベントハンド
ラ
No. イベント名 内容
1 Initialized カメラの初期化完了
2 AutoFocusCompleted オートフォーカス完了
3 CaptureStarted 画像の取り込み開始
4 CaptureImageAvailable 画像が利用可能になったとき
5 CaptureThumbnailAvailable サムネイルが利用可能になったとき
6 CaptureCompleted 画像の取り込み完了

23. CameraButtonsのイベントハンドラ
No. イベント名 内容
1 ShutterKeyHalfPressed シャッターボタンの半押し
（→フォーカス機能の起動）
2 ShutterKeyPressed シャッターボタンの押し下げ
（→撮影）
3 ShutterKeyReleased シャッターボタンを離す
（→フォーカスのキャンセル）

24. PhotoCameraでのアプリ作成(3)
ファインダーはどうやって作成？
• CanvasコントロールにVideoBrushを設定
• VideoBrushのソースにPhotoCameraを設
定する
これだけでカメラが捉えている画像が
Canvasコントロールに表示される
PhotoCamera
VideoBrush
Canvas

25. PhotoCameraでのアプリ作成(4)
解像度の設定
• PhotoCamera.Resolution
System.Windows.Sizeで指定する
PhotoCamera.AvailableResolutionsで対応解
像度を取得できる
フラッシュ
• PhotoCamera.FlashModeに設定
FlashMode.Auto
FlashMode.On
FlashMode.Off
FlashMode. RedEyeReduction

26. PhotoCameraでのアプリ作成(5)
フォーカス
• PhotoCamera.Focus
場所を指定せずにオートフォーカス開始
IsFocusSupportedでサポート有無を確認
• PhotoCamera.FocusAtPoint
フォーカスポイントを指定してAF開始
縦横の割合（0～1の範囲）で指定
IsFocusAtPointSupportedでサポート有無を
確認
完了するとAutoFocusCompletedイ
ベントが発生する

27. PhotoCameraでのアプリ作成(6)
撮影
• PhotoCamera.CaptureImage
保存
• 画像が利用可能になると
CaptureImageAvailableイベントが発生
画像のStreamを取得できるのでMediaLibrary
に保存する

28. PhotoCameraでのアプリ作成(7)
撮影のタイミングは？
• アプリが自前で実装する
シャッターボタン押し下げイベント
アプリのUIによる指示
画面のタップ
画面のボタン操作

29. PhotoCameraでのアプリ
デモ：サンプルアプリ
デモ

30. PhotoCaptureDevice方式
より細かな撮影パラメータを設定する
ときはPhotoCaptureDeviceを使う
• ISO、露出補正、など
• デジタルカメラ専用機に匹敵する機能を持
つアプリも作成可能に
Windows.Phone.Media.Capture名前
空間
• WinRT API
• ネイティブコードからも利用可能

31. 撮影のプロパティ
WP8で利用可能なプロパティ
• 2種類のクラスに定義されている
KnownCameraGeneralPropertiesに定義され
たプロパティ
KnownCameraPhotoPropertiesに定義された
プロパティ
• 定義されたGuidを値の指定時に用いる

32. 撮影のプロパティ
設定値について
• RangeとValuesの2タイプ
Range＝上限・下限で
Values＝複数の値から構成
• 端末ごとに取り得る値が違う
指定可能な値を確認する必要がある
Rangeタイプ： GetSupportedPropertyRange
Valuesタイプ： GetSupportedPropertyValues
(例)
Rangeタイプ: ISO感度 →上限～下限が指定される（100～3200など）
Valuesタイプ： AF補助光→Off/Auto/Onの取り得る値（Off/Onなど）
デモ

33. 撮影のプロパティの一覧
プロパティの一覧、それぞれのタイプ
の情報源
• MSDNライブラリに記載されている
• Windows Phone 8 の高度なキャプチャ
プロパティ
 http://msdn.microsoft.com/ja-
JP/library/windowsphone/develop/jj662939(v=vs.105).aspx

34. 撮影のプロパティ
範囲タイプだが任意の値を設
定できない
・ISO感度に定義された値だけ
・それ以外は例外が発生
露出補正は範囲タイプだが
ExposureCompensationの説明に
「 1/6EV単位」と記述

35. KnownCameraGeneralPropeties
主要なプロパティ
No. プロパティ タイプ 内容
1 AutoFocusRange 値の組 オートフォーカスの種類
2 EncodeWithOrientation 範囲 エンコード時の画像の向き
3 ManualFocusPosition 範囲 マニュアルフォーカスの位置
4 PlayShutterSoundOnCapture 値の組 シャッター音の有無
5 SpecifiedCaptureOrientation 範囲 メタデータに記載する画像の
向き
AutoFocusRange
・マクロモード (Macro)
・通常モード (Normal)
・フルモード (Full)
・過焦点モード (Hyperfocal)
・無限遠モード (Infinity)

36. 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 値の組 ホワイトバランスのプリセット値

37. KnownCameraPhotoProperties
ExposureCompensation
・1/6EV単位で指定する
・+1EV⇒6を指定する
SceneMode
・自動モード (Auto)
・マクロモード (Macro)
・ポートレートモード (Portrait)
・スポーツモード (Sport)
・ナイトモード (Night)
・ランドスケープモード
(Landscape)
など
FlashMode
FocusIlluminationMode
・On、Off、Autoで指定
Iso
・上限/下限の範囲タイプだが
100,125,200,…など規格で定義さ
れた値を指定する
WhiteBalancePreset
・曇り (Cloudy)
・昼光 (Daylight)
・フラッシュ (Flash)
・蛍光灯 (Fluorescent)
・タングステン (Tungsten)
・キャンドル (Candlelight)

38. PhotoCaptureDeviceの使い方
初期化
• カメラの存在確認
• PhotoCaptureDeviceのオープン
• イベントハンドラの設定（シャッターボタン）
シーケンス
設定
• シーケンスの生成
• プロパティの設定
• シーケンスの準備
撮影
• フォーカス制御（全体 or 領域指定）
• 画像出力用ストリームの設定
• 撮影の開始
• 撮影データの保存

39. PhotoCaptureDeviceの使い方(1)
カメラの存在確認
• PhotoCaptureDevice.AvailableSensorLoc
ations.Contains(CameraSensorLocation)
CameraSensorLocation.Front
CameraSensorLocation.Back

40. PhotoCaptureDeviceの使い方(2)
デバイスのオープン
• カメラの位置、解像度を指定してオープン
public static
IAsyncOperation<PhotoCaptureDevice>
OpenAsync(CameraSensorLocation, Size)
• PhotoCameraとは違って、解像度の指定
はオープン時になる

41. PhotoCaptureDeviceの使い方(3)
イベントハンドラ
• PhotoCaptureDeviceでは非同期処理がイ
ベントではなく、async/awaitで行う
カメラ撮影に関するイベントはない
シャッターボタンのイベントはこれまで通り
• Asyncで終わる処理が対象

42. PhotoCaptureDeviceの使い方(4)
シーケンスの生成・準備
• PhotoCaptureDeviceでは、複数のフレーム
が含まれるシーケンスにカメラデバイスが対
応する構成
• シーケンスの作成自にフレーム数を指定する
現時点では1フレームのみをサポート
Frame
Frame
Frame
PhotoCapture
Device
CameraCaptureSequence
Frameはそれぞれのプロ
パティを設定できる
準備時に対応付ける

43. PhotoCaptureDeviceの使い方(5)
プロパティの設定方法は2通り
• カメラデバイスにSetPropertyする
フレーム共通に設定される
• FrameのDesiredPropertiesに代入する
特定のフレームだけ設定される（はず）
どちらも設定先をGuidで指定する
• camera.SetProperty(KnownCameraPhotoProperties.FlashMode,
FlashState.On);
• seq.Frames[0].DesiredProperties[KnownCameraPhotoProperties.Sce
neMode] = CameraSceneMode.Portrait;

44. PhotoCaptureDeviceの使い方(6)
撮影前にシーケンスを準備する
• await camera.PrepareCaptureSequenceAsync(seq)
プロパティを設定したらPrepare…を
再度実行する

45. PhotoCaptureDeviceの使い方(7)
フォーカス
• PhotoCaptureDevice.FocusAsync
• AF領域はFocusRegionプロパティに設定
Rectオブジェクトで領域を指定
Previewの解像度の範囲に収まる必要がある
フラッシュ
• KnownCameraPhotoProperties.FlashMo
deプロパティを設定

46. PhotoCaptureDeviceの使い方(8)
ストリームの設定
• 撮影前に、画像を取得するストリームをフ
レームに設定する
CaptureStream： フル解像度版
ThumbnailStream： サムネイル版
撮影
• シーケンスのStartCaptureAsyncで
保存
• PhotoCameraと同様

47. PhotoCaptureDeviceでのアプリ
デモ：サンプルアプリ
デモ

48. まとめ: WPアプリでの静止画撮
影
どの方法を使えばいいのか？
方式 利用する場面
Chooser ・写真撮影がアプリの主目的でない場合
（撮影したデータが利用できればよい、など）
・カメラからのデータをリアルタイムに処理する必要
がない場合
PhotoCamera ・カメラからのデータをリアルタイムに処理する場合
（プレビュー画像もフィルタ処理する、など）
・フラッシュ、フォーカスをAPで制御したい場合
PhotoCaptureDevice PhotoCameraの要件に加えて
・ISO感度、露出補正、ホワイトバランスなど細かな
制御をしたい場合

49. 補足：エミュレータについて
• エミュレータでは、
小さな箱が周りを動
き回る映像になる
• APIが期待される通り
に動作しない可能性
もある
• デバイスでの開発が
おすすめ

50. LENSアプリ
• Lensアプリの作成方法

51. カメラアプリの起動方法
スタート画面 OS標準のカメラアプリ
Photoハブ
アプリ一覧
作成したカメラアプリを
ユーザに利用してもらう
には？
標準カメラアプリに近い
場所から起動させたい！

52. OSとの統合
OS標準のカメラアプリ Photoハブ
画像のメニュー
レンズアプリ
Photoハブから
の起動
画像のメニュー
からの起動

53. 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" />

54. デモ：Lensアプリ
モノクロームレンズ
• ファインダーに撮影画像をモノクローム化
しながら表示
• 撮影した画像をモノクローム化して保存
デモ

55. 補足：ファインダーの処理
ファインダーの映像もリアルタイムで
処理した場合は？
別スレッドでカメラから取得したプリ
ビュー画像を処理してImageコント
ロール等に表示
• PhotoCaptureDeviceのPreview画像取得
GetPreviewBufferArgb
GetPreviewBufferY
GetPreviewBufferYCbCr

56. Lensアプリのメリット
LensアプリはOS標準のカメラアプリ
から２タッチで起動できる
• ユーザは標準機能の拡張として気軽に利用
するはず
• 特徴的なエクスペリエンスを提供すれば、
多くのユーザを得られる可能性がある

57. Lensアプリの注意点
標準カメラアプリとエクスペリエンス
の整合性が取れている必要がある
• レンズアプリのガイドラインの対応が必要
Windows Phone のレンズ デザイン ガイドラ
イン
http://msdn.microsoft.com/ja-
jp/library/windowsphone/design/jj662922(v=vs.
105).aspx

58. まとめ
WPアプリからカメラを利用する方法
は3通りある
• カメラを使う目的に応じて使い分ける
Lensアプリは手軽に作成できる上に、
OS標準のカメラアプリとの一体化を実
現できる
• ユーザにより利用されやすくなるため、
Lensアプリの仕組みを活用したい