Displaying Video in the CaptureSourceView

As with the PhotoCamera example earlier in this chapter, the view displays video using a VideoBrush, which is defined as shown:

Click here to view code image

<Rectangle Width="780" Height="460" Margin="10">
    <Rectangle.Fill>
        <VideoBrush x:Name="videoBrush_Preview" />
    </Rectangle.Fill>
</Rectangle>

The CaptureSourceViewModel.Start method is called in the OnNavigatedTo method of the page. Once started, the VideoBrush has its source set to the viewmodel’s CaptureSource property. See the following excerpt:

Click here to view code image

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    Dispatcher.BeginInvoke(
        delegate
            {
                ViewModel.Start();
                videoBrush_Preview.SetSource(ViewModel.CaptureSource);
            });
}

The Dispatcher is used to push the ViewModel.Start call onto the work stack of the UI thread. This workaround, for what appears to be an issue with the CaptureSource class, prevents the CaptureSource from raising a COMException when the app is activated.

Unlike the PhotoCamera, no Initialized event is raised when the CaptureSource is attached to a VideoBrush.

Captured images overlay the video preview and are displayed using a ListBox, as shown:

Click here to view code image

<ListBox ItemsSource="{Binding CapturedImages}" Margin="12">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="2,2,2,8" BorderBrush="White" Margin="3">
                <Image Source="{Binding}" Stretch="Uniform" Width="80" />
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

An AppBar contains buttons that are bound to the three viewmodel commands: PlayVideoCommand, ToggleVideoCaptureCommand, and TakePhoneCommand.

An AppBarToggleButton changes its icon depending on the value of the viewmodel’s CapturingVideo property. See the following excerpt:

Click here to view code image

<u:AppBar>
    <u:AppBarIconButton
                Command="{Binding PlayVideoCommand}"
                Text="play video"
                IconUri="/Sensors/Camera/Icons/Play.png" />
    <u:AppBarToggleButton
                Command1="{Binding ToggleVideoCaptureCommand}"
                Text1="record video"
                Icon1Uri="/Sensors/Camera/Icons/Record.png"
                Text2="stop"
                Icon2Uri="/Sensors/Camera/Icons/Stop.png"
                Toggled="{Binding CapturingVideo}" />
    <u:AppBarIconButton
                Command="{Binding TakePhotoCommand}"
                Text="take photo"
                IconUri="/Sensors/Camera/Icons/TakePhoto.png" />
</u:AppBar>

Figure 21.5 shows the CaptureSourceView page with the three application bar buttons, allowing the user to take a still capture and to record and play back video.

FIGURE 21.5 CaptureSourceView page.

CaptureSource is the recommended way for recording video to isolated storage; it offers exciting possibilities for creating rich multimedia apps.