cleanUrl: "/creating-a-uwp-desktop-application-with-c-sharp-2-5-jp"
floatFirstTOC: "right"

シリーズ

C#でUWPデスクトップアプリを作る 1/5: Hello World!

こんにちは！今回はUWPアプリでカメラプレビュー機能を実装してみます。 前回の記事ではUWPアプリ開発環境を設定して簡単な「Hello World！」アプリを作ってみました。 今度は本格的にカメラを使って写真を撮るための最初のステップを始める番です。

この記事ではUWPでメディアキャプチャAPIを使ってカメラプレビューを画面に出力する方法を説明します。

1. UWPでカメラを使う準備

UWPでカメラのようなデバイスを使うためにはまず、権限を設定する必要があります。Package.appxmanifestファイルでカメラの権限を設定することができます。

1) カメラの権限設定

1. Package.appxmanifestファイルを開いて機能タブへ移動します。
2. ウェブカメラと マイクの権限をチェックします。マイクは音声録音機能がなくてもカメラと一緒に使われる場合があるので、一緒にチェックしておいた方がいいです。

このように権限を設定したら、UWPアプリでカメラにアクセスできるようになります。

2. メディアキャプチャ初期化

カメラプレビューを出力するためにはMediaCaptureオブジェクトを使う必要があります。 このオブジェクトはUWPでカメラ映像をキャプチャする役割を担当します。カメラを初期化し、キャプチャした映像をUIに接続する過程は下記の通りです。

1) XAMLでUIを構成する

まず、MainPage.xamlファイルを開いてカメラプレビューを出力するコントロールを追加します。

<Page
    x:Class="PhotoBooth.MainPage"
    xmlns="<http://schemas.microsoft.com/winfx/2006/xaml/presentation>"
    xmlns:x="<http://schemas.microsoft.com/winfx/2006/xaml>"
    xmlns:local="using:PhotoBooth"
    xmlns:d="<http://schemas.microsoft.com/expression/blend/2008>"
    xmlns:mc="<http://schemas.openxmlformats.org/markup-compatibility/2006>"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <CaptureElement x:Name="CameraPreview" HorizontalAlignment="Center" VerticalAlignment="Center" Width="640" Height="480"/>
    </Grid>
</Page>

上のコードでCaptureElementはカメラプレビュー映像を出力する役割をします。 このコントロールにメディアキャプチャオブジェクトを連結します。

2) MediaCaptureオブジェクトの初期化