[Windows Store App 開發筆記] Windows 8.1 拍照與攝影---CameraCaptureUI 類別

2013-12-29

前言

小編今天突然靈機一動，想試試在自己的APP中加入拍照和攝影的功能，所以就上網搜尋了一番，發現程式碼並不困難，只要幾行就可以輕鬆搞定。

但前置作業很重要，否則就會出現以下畫面：

解決方法：

在Package.appxmanifest的功能中將麥克風和網路攝影機勾選起來

網路攝影機是必要的，而如果你有使用到攝影，就必須再勾選麥克風，因為它有錄音的功能，否則又會出現第一張的錯誤畫面喔。

實作

1. 當然首先就是簡單的xaml：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		
    <Grid.ColumnDefinitions>
		
        <ColumnDefinition Width="1*"/>
		
        <ColumnDefinition Width="1*"/>
		
    </Grid.ColumnDefinitions>
		
    <Button x:Name="PhotoBtn" Content="拍照" HorizontalAlignment="Left" Margin="118,128,0,0" VerticalAlignment="Top" FontSize="48" Click="PhotoBtn_Click"/>
		
    <Image x:Name="PhotoOutput" HorizontalAlignment="Left" Margin="121,302,0,0" VerticalAlignment="Top" Height="270" Width="480"/>
		
    <Button x:Name="VideoBtn" Content="攝影" Grid.Column="1" HorizontalAlignment="Left" Margin="118,128,0,0" VerticalAlignment="Top" FontSize="48" Click="VideoBtn_Click"/>
		
    <MediaElement x:Name="VideoOutput" Grid.Column="1" HorizontalAlignment="Left" Height="270" Margin="121,302,0,0" VerticalAlignment="Top" Width="480"/>
		
</Grid>

2. 接下來xaml.cs就比較複雜：

public sealed partial class MainPage : Page
		
{
		
    public MainPage()
		
    {
		
        this.InitializeComponent();
		
    }
		
  
		
    private async void PhotoBtn_Click(object sender, RoutedEventArgs e)
		
    {
		
        CameraCaptureUI cameraUI = new CameraCaptureUI();
		
        Size aspectRatio = new Size(16, 9);
		
        cameraUI.PhotoSettings.CroppedAspectRatio = aspectRatio;
		
  
		
        StorageFile file = await cameraUI.CaptureFileAsync(CameraCaptureUIMode.Photo);
		
        if (file != null)
		
        {
		
            BitmapImage bitmapImage = new BitmapImage();
		
            using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read))
		
            {
		
                bitmapImage.SetSource(fileStream);
		
            }
		
            PhotoOutput.Source = bitmapImage;
		
        }
		
    }
		
  
		
    private async void VideoBtn_Click(object sender, RoutedEventArgs e)
		
    {
		
        CameraCaptureUI cameraUI = new CameraCaptureUI();
		
  
		
        StorageFile file = await cameraUI.CaptureFileAsync(CameraCaptureUIMode.Video);
		
        if (file != null)
		
        {
		
            IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read);
		
            VideoOutput.SetSource(fileStream, file.ContentType);
		
        }
		
    }
		
}

註：

(1) 拍照和攝影的差別其實就是CameraCaptureUIMode，這個模式中還有一個PhotoOrVideo可以選擇，這邊小編先暫時不介紹它。

(2) 11,12行的功能是使用者拍照完之後，程式會提供一個擷取的框框，而這個比例為16:9。

(3) 當然拍照的圖片檔我們以BitmapImage來處理；而影片檔我們就已MediaElement來接收，使用者可以自行在xaml中加上AreTransportControlsEnabled="True"這行強大的新指令，讓使用者可以自由控制影片喔。

執行結果：

拍照：

攝影：

主畫面：

是不是很酷呢，大家趕快來試試看吧!!!

回首頁