カメラとマイクを使った新しいユーザー体験

Silverlight 4で作る新しいRIAアプリケーション（2）

ページの構成

　プログラムの解説に移る前に今回作成するアプリケーションの概要と、サンプルページの構成を確認しておきましょう。

　図2は今回作成するサンプルの動作イメージです。

図2　サンプルの動作イメージ

　サンプル画面は、実際にカメラの情報を表示する表示部と、キャプチャーの開始、停止、チャプターの取得、キャプチャーした音声を保存する操作部、チャプターごとのイメージを並べるチャプター部からなります。リスト1は今回のサンプルのページ定義です。

リスト1　サンプルページ定義

<navigation:Page x:Class="Slverlight4_2Sample.Views.WebCamSample" 
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
       d:DesignWidth="640" d:DesignHeight="480"
       Title="WebCamSample Page">
  <StackPanel x:Name="LayoutRoot">
    <Rectangle Width="200" Height="200" Fill="Blue" x:Name="webCamDisplay" />
    <StackPanel Orientation="Horizontal">
      <Button Content="開始" Click="btnStart_Click" />
      <Button Content="停止" x:Name="btnStop" Click="btnStop_Click" />
      <Button Content="画像の切取" Click="btnCapture_Click" />
      <Button Content="音声の保存" Click="btnCaptureAudio_Click" /> 
    </StackPanel>
    <StackPanel HorizontalAlignment="Center">
      <ListBox x:Name="captureImages">
        <ListBox.ItemsPanel>
          <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal" />
          </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
      </ListBox>
    </StackPanel>
  </StackPanel>
</navigation:Page>

　画面の構成自体は特に問題になるところはないでしょう。後述しますが、ビデオデバイスから取得した動画データは、VideoBrushクラスでSilverlightのさまざまな要素に表示できます。今回は、webCamDisplayという名前を持つRectangleクラスに、ビデオデバイスから取得した動画を表示させています。

デバイスから取得した動画の表示

　リスト2に、デバイスから取得した動画を表示するサンプルを示します。

リスト2　ビデオデバイスから取得した動画を表示するサンプル

private CaptureSource _captureSource = null;

// キャプチャーの開始ボタンのイベントハンドラー
private void btnStart_Click(object sender, RoutedEventArgs e)
{
    // 1.デバイスへのアクセス許可を調査する。
    if (!(   CaptureDeviceConfiguration.AllowedDeviceAccess
          || CaptureDeviceConfiguration.RequestDeviceAccess()))
    {
        MessageBox.Show("デバイスの起動に失敗しました。");
        return;
    }

    // 2.デバイスを操作するためのCaptureSourceを作成する。
    _captureSource = new CaptureSource()
    {
        VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice(),
        AudioCaptureDevice = CaptureDeviceConfiguration.GetDefaultAudioCaptureDevice(),
    };

    // 3.ビデオブラシを作成し、動画を表示する。
    var brush = new VideoBrush();
    brush.SetSource(_captureSource);
    webCamDisplay.Fill = brush;

    // 4.ビデオデバイスからデータの取得を開始する。
    _captureSource.Start();
}

// キャプチャーのストップボタンのイベントハンドラー
private void btnStop_Click(object sender, RoutedEventArgs e)
{
    if (_captureSource != null)
        _captureSource.Stop();

}