C#でUWPデスクトップアプリを作る 3/5: 写真撮影と5秒のカウントダウン機能追加

シリーズ

こんにちは！今回はUWPアプリで5秒のカウントダウン後、写真を撮影して結果を画面に表示する機能を実装してみます。プレビュー画面をクリックするとカウントダウンが始まり、写真が撮影された後はプレビューが消えて撮影された写真、再撮影、印刷ボタンが表示されます。

前回の記事でカメラプレビュー機能を実装したので、今回はカウントダウンと撮影機能を追加してよりインタラクティブなアプリに発展させてみます。

1. アプリのフロー計画

ユーザーがアプリを使う時に経験する流れは次のようになります：

プレビュー画面でユーザーが画面をクリックすると、5秒のカウントダウンが始まります。

カウントダウンが終わると写真が撮影され、プレビュー画面が消えます。

撮影された写真が画面に表示され、再撮影と 印刷ボタンが表示されます。

ユーザーが「再撮影」ボタンを押すとプレビュー画面に戻り、「印刷」ボタンを押すと(印刷機能は後日追加予定)、写真を印刷することができます。

2. UI構成

まず、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>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- カメラプレビュー -->
        <CaptureElement x:Name="CameraPreview" HorizontalAlignment="Center" VerticalAlignment="Center" Width="640" Height="480" Grid.Row="0" Tapped="CameraPreview_Tapped"/>

        <!-- カウントダウンテキスト -->
        <TextBlock x:Name="CountdownText" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="60" Visibility="Collapsed" Grid.Row="0"/>

        <!-- 撮影した写真の表示 -->
        <Image x:Name="CapturedImage" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed" Width="640" Height="480" Grid.Row="0"/>

        <!-- 再撮影と印刷ボタン -->
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom" Opacity="0" x:Name="ButtonPanel" Grid.Row="1" Margin="0,10,0,10">
            <Button Content="再撮影" Click="RetakeButton_Click" Margin="10"/>
            <Button Content="印刷" Click="PrintButton_Click" Margin="10"/>
        </StackPanel>
    </Grid>
</Page>
XML
복사

UIの説明

•

CaptureElement: カメラのプレビュー画面を表示するコントロール。

•

TextBlock (CountdownText)： 写真撮影前のカウントダウンを表示します。

•

Image (CapturedImage): 撮影された写真を表示するコントロールです。

•

StackPanel (ButtonPanel): 撮影後、「再撮影」および「印刷」ボタンを表示する領域です。

3. 写真撮影とカウントダウンの実装

MainPage.xaml.csでカウントダウンと写真撮影機能を実装します。全画面モードに切り替えるコードとカメラキャプチャを処理するロジックが含まれています。

using System;
using System.IO;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Threading.Tasks;
using Windows.Media.Capture;
using Windows.Storage.Streams;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;

namespace PhotoBooth
{
    public sealed partial class MainPage : Page
    {
        private MediaCapture _mediaCapture;
        private bool _isPreviewing = true;

        public MainPage()
        {
            this.InitializeComponent();
            // 全画面モードに切り替え
            EnterFullScreenMode();
            InitializeCameraAsync();
        }

        private void EnterFullScreenMode()
        {
            var view = ApplicationView.GetForCurrentView();
            view.TryEnterFullScreenMode();
            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.FullScreen;
        }

        private async void InitializeCameraAsync()
        {
            _mediaCapture = new MediaCapture();
            await _mediaCapture.InitializeAsync();

            CameraPreview.Source = _mediaCapture;
            await _mediaCapture.StartPreviewAsync();
        }

        private async void CameraPreview_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
        {
            if (_isPreviewing)
            {
                await StartCountdownAndTakePhoto();
            }
        }

        private async Task StartCountdownAndTakePhoto()
        {
            try
            {
                CountdownText.Visibility = Visibility.Visible;

                for (int i = 5; i > 0; i--)
                {
                    CountdownText.Text = i.ToString();
                    await Task.Delay(1000);
                }

                CountdownText.Visibility = Visibility.Collapsed;
                await TakePhotoAsync();
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine($"Error in StartCountdownAndTakePhoto: {ex.Message}");
            }
        }

        private async Task TakePhotoAsync()
        {
            try
            {
                var renderTargetBitmap = new RenderTargetBitmap();
                await renderTargetBitmap.RenderAsync(CameraPreview);

                var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
                var bitmap = new WriteableBitmap(renderTargetBitmap.PixelWidth, renderTargetBitmap.PixelHeight);
                using (var stream = bitmap.PixelBuffer.AsStream())
                {
                    await stream.WriteAsync(pixelBuffer.ToArray(), 0, (int)pixelBuffer.Length);
                }

                CapturedImage.Source = bitmap;

                CameraPreview.Visibility = Visibility.Collapsed;
                CapturedImage.Visibility = Visibility.Visible;

                ButtonPanel.Opacity = 1;

                _isPreviewing = false;
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine($"Error in TakePhotoAsync: {ex.Message}");
            }
        }

        private void RetakeButton_Click(object sender, RoutedEventArgs e)
        {
            ButtonPanel.Opacity = 0;
            CapturedImage.Visibility = Visibility.Collapsed;
            CameraPreview.Visibility = Visibility.Visible;
            _isPreviewing = true;
        }

        private void PrintButton_Click(object sender, RoutedEventArgs e)
        {
            // 印刷機能の実装予定
        }
    }
}
C#
복사

コード説明

•

EnterFullScreenMode: アプリが全画面モードで実行するように設定します。

•

InitializeCameraAsync： カメラを初期化してプレビューを開始します。

•

CameraPreview_Tapped: 画面をタップするとカウントダウンが始まり、写真を撮影するロジックを実行します。

•

StartCountdownAndTakePhoto: 5秒間カウントダウンを行い、写真を撮影します。

•

TakePhotoAsync: 写真を撮影してキャプチャした画像を画面に表示します。ここではRenderTargetBitmapを利用してプレビュー画面をキャプチャします。

•

RetakeButton_Click: 「再撮影」ボタンを押すと、プレビュー画面に戻ります。

4.デバッグとテスト

アプリをビルドして実行した後、画面をクリックするとカウントダウンが始まり、カウントダウン後に写真が撮影されるとプレビュー画面が消えて撮影された写真とボタンが表示されます。

5.まとめ

今回のポストでは、5秒のカウントダウン後、写真撮影機能を実装しました。撮影された写真を表示し、再撮影と印刷機能のためのUIまで実装しました。次のポストでは、背景と写真を結合する機能を追加してアプリの完成度を高める予定です。

次回予告：

C#でUWPデスクトップアプリを作る 4/5: 画像合成-背景と写真を組み合わせる

他の言語で読む:

Read in English:

한국어로 읽기:

著者をサポートする:

私の記事を楽しんでいただけたら、一杯のコーヒーで応援してください！

buymeacoffee.com

https://buymeacoffee.com/kimjangwook

December 2024

Today