Windowsストアアプリで動画を録画、再生する

Windows ストア アプリにて動画の再生をおこなうには、MediaElementコントロールを使用します。画面上に配置したMediaElementコントロールで動画を再生するには、メディアソースに動画データを指定する必要があります。

テスト的に下記のXAMLのように、録画をおこなうボタン、動画を再生するボタン、そして動画を再生するコントロールを配置します。

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

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="btnRecord" Content="Record" HorizontalAlignment="Left" Margin="25,26,0,0" VerticalAlignment="Top" Height="81" Width="122" Click="btnRecord_Click"/>
        <Button x:Name="btnPlay1" Content="Play Stream" HorizontalAlignment="Left" Margin="172,26,0,0" VerticalAlignment="Top" Height="81" Width="122" Click="btnPlay1_Click"/>
        <Button x:Name="btnPlay2" Content="Play Uri" HorizontalAlignment="Left" Margin="299,26,0,0" VerticalAlignment="Top" Height="81" Width="122" Click="btnPlay2_Click"/>

        <MediaElement x:Name="mediaElement" HorizontalAlignment="Left" Height="383" Margin="25,141,0,0" VerticalAlignment="Top" Width="586"/>
    </Grid>
</Page>

かなり適当に配置しているので分かりにくいのですが、上記のXAMLをVisual Studioのデザイナーで見ると下図のように配置されます。

プログラム上でメディアソースに動画データを指定するために、MediaElementコントロールに名前をつけておきます。ここでは仮にmediaElementと名前をつけておきます。

	<MediaElement x:Name="mediaElement" 
		HorizontalAlignment="Left" Height="383" Width="586"
		Margin="25,141,0,0" VerticalAlignment="Top" />

まずは、録画したデータを用意する必要があります。CameraCaptureUIクラスを使用して動画を録画する方法は、「CameraCaptureUIを使って静止画撮影をおこなう - 酢ろぐ！」をご覧ください。

using System;
using Windows.Media.Capture;
using Windows.Storage;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace PlayMovieSample
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private async void btnRecord_Click(object sender, RoutedEventArgs e)
        {
            // 動画ファイルをMP4フォーマットで録画する
            var capture = new CameraCaptureUI();
            capture.VideoSettings.Format = CameraCaptureUIVideoFormat.Mp4;
            var file = await capture.CaptureFileAsync(CameraCaptureUIMode.Video);
            if (file != null)
            {
                // ローカルフォルダーに録画したファイルを移動する
                var folder = ApplicationData.Current.LocalFolder;
                var movedFile = await folder.CreateFileAsync("sample.mp4", 
                    CreationCollisionOption.ReplaceExisting);

                await file.MoveAndReplaceAsync(movedFile);
            }
        }

        private void btnPlay1_Click(object sender, RoutedEventArgs e)
        {
        }

        private async void btnPlay2_Click(object sender, RoutedEventArgs e)
        {
        }
    }
}

上記でローカルフォルダーに保存した動画ファイルを、ms-appdataスキームの形式でメディアソースに指定して、動画を再生します。

        private void btnPlay1_Click(object sender, RoutedEventArgs e)
        {
            // メディアソースにローカルフォルダーにある動画を指定する(再生する)
            mediaElement.Source = new Uri("ms-appdata:///local/sample.mp4");
        }

もしくは、ローカルフォルダーに保存した動画のストリームを開き、ストリームをメディアソースに設定して、動画を再生します。

        private async void btnPlay2_Click(object sender, RoutedEventArgs e)
        {
            // Uriからファイルを取得して、ストリームを開く
            var file = await StorageFile.GetFileFromApplicationUriAsync(
                new Uri("ms-appdata:///local/sample.mp4"));
            var strm = await file.OpenReadAsync();
            // ストリームをメディアソースに設定します
            mediaElement.SetSource(strm, strm.ContentType);
        }

正しい動画データをメディアソースに指定した場合、下図のように動画が再生されます。