derekchan84

Webcam and microphone integration was one of the exciting features introduced in Silverlight 4. With that, you can start creating your very own image capturing web application or videoconferencing app easily. One of the issues I faced is to ensure that it works with the Model View ViewModel (MVVM) pattern as well.

I have also used some 3rd party tools for doing PRISM and image compression. So please get them from the list as shown below:

• Prism v4 from Microsoft Patterns & Practices 
• FJCore for Image Compression

So here goes the steps:

Step 1 – Create the View

I am just going to create a simple view where it consists of a rectangle to display your video stream, and an image control above it to show the snapped webcam picture. Together with the image, I also have a button where you can click on to trigger a snap, and another for you to retake if you are not happy with it.

All the way down at the bottom, there is an option for you to start capturing your webcam stream. All bindings have already been placed here as well as the relevant converters. If you are confused about converters, don’t worry, they are available in the full source code here.

Below is the xaml representing the View:

 

<UserControl x:Class="SimpleWebcamApp.MainPage"
    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"
    xmlns:converters="clr-namespace:SimpleWebcamApp.Converters"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.Resources>
            <converters:VisibilityConverter x:Key="VisibilityConverter" />
            <converters:VisibilityConverterReverse x:Key="VisibilityConverterReverse" />
            <converters:ByteToImageConverter x:Key="ByteToImageConverter" />
        </Grid.Resources>

        <Border Grid.Column="0" Margin="10,8,8,8" BorderThickness="4" Background="Black" Grid.Row="0" Width="320" Height="240">
            <Grid>
                <Rectangle Stroke="Black" x:Name="rectVideo" Fill="{Binding VideoBrush}" Visibility="{Binding IsSnapshotVisible, Converter={StaticResource VisibilityConverterReverse}}"/>
                <Image x:Name="snapshot" Source="{Binding MemberPicture, Converter={StaticResource ByteToImageConverter}}" Visibility="{Binding IsSnapshotVisible, Converter={StaticResource VisibilityConverter}}" />
                <Button Content="Click to take photo" Height="30" VerticalAlignment="Bottom" Command="{Binding TakePhotoCommand}" Visibility="{Binding IsSnapshotVisible, Converter={StaticResource VisibilityConverterReverse}}"/>
                <Button Content="Click to retake photo" Height="30" VerticalAlignment="Bottom" Command="{Binding RetakePhotoCommand}" Visibility="{Binding IsSnapshotVisible, Converter={StaticResource VisibilityConverter}}"/>
            </Grid>
        </Border>

        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button x:Name="btnStartWebCam" Content="Start Capture" Command="{Binding StartCaptureCommand}">
            </Button>
        </StackPanel>
    </Grid>
</UserControl>

Step 2 – Create the View Model

The view model will contain all the core functionality of your properties that you have binded on your controls. Ensure that your view model class is implementing iNotifyPropertyChanged to ensure that the UI will update the bindings. The full codes for the entire solution is available for download here.

Alright, back to the codes then. 1st we have the view model code for starting up the webcam:

 

private void StartCaptureCommandAction()
        {
            if (CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices().Count > 0)
            {
                VideoBrush = new VideoBrush();
                CapSource = new CaptureSource
                {
                    VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice()
                };

                if (CapSource != null)
                {
                    if (CapSource.State != CaptureState.Stopped)
                    {
                        CapSource.Stop(); // stop whatever device may be capturing
                    }

                    // create the brush
                    VideoBrush.SetSource(CapSource);

                    // request user permission and display the capture
                    if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
                    {
                        CapSource.Start();
                    }
                }
            }
            else
            {
                MessageBox.Show("No webcam detected");
            }
        }

Then we have the code to capture the image stream:

private void TakePhotoCommandAction()
        {
            if (CapSource != null && CapSource.State == CaptureState.Started)
            {
                CapSource.CaptureImageCompleted += (s, a) =>
                {
                    //WriteableBitmap bmp = a.Result;
                    WriteableBitmap bmp = resizeBicubic(a.Result, 800, 800);
                    //put the stream in the BinaryReader
                    Stream stream = Encode(bmp, 80);
                    BinaryReader binary = new BinaryReader(stream);
                    //Read bytes from the BinaryReader and put them into a byte array.
                    MemberPicture = binary.ReadBytes((int)stream.Length);
                    MemberPictureStream = stream;

                    CapSource.Stop();
                    IsSnapshotVisible = true;
                };
                CapSource.CaptureImageAsync();
            }
        }

 

 Step 3 – Hook up your View to the View Model

Hooking up the view model to the view is pretty simple. All you need to do is to create a new instance of the view model and attach it to the view’s cs file DataContext as shown below:

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
        {
            MainPageViewModel vm = new MainPageViewModel();
            this.DataContext = vm;
            //vm.Initialize();
        }

 

And that’s it! You will now be able to capture screencaps from your webcam and retake if you are not happy.

Full source code for this application is available here.