As with the PhotoCamera
example earlier in this chapter, the view displays video using a VideoBrush
, which is defined as shown:
<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:
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:
<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:
<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.
CaptureSource
is the recommended way for recording video to isolated storage; it offers exciting possibilities for creating rich multimedia apps.
18.116.42.149