Web Camera - Capturing still Images
The new CaptureSource object allows you to capture audio and video from your computers webcam and microphone. In this simple tutorial we will show how to capture an image from a web camera.
The code for this is fairly straight forward, firstly when the Start Camera button is clicked we request the users permission to use the web camera and, once granted, we begin to stream the camera source to a rectangle. When the Take Picture button is clicked we capture a still image and render it to the screen.
<UserControl x:Class="WebCamera.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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="startVideo" Grid.Row="0" Grid.Column="0" Content="Start Camera!" Click="startVideo_Click" />
<Button x:Name="snap" Grid.Row="0" Grid.Column="1" Content="Take Picture!" Click="snap_Click" IsEnabled="False" />
<Image x:Name="snapImage" Grid.Row="1" Grid.Column="1" />
<Rectangle x:Name="video" Grid.Row="1" Grid.Column="0" />
</Grid>
</UserControl>
Here we have two buttons, an Image and a Rectangle. The Rectangle will be used to display the live video stream from the camera and the Image will be used to contain the still capture. The code will do all the hard work here:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
namespace WebCamera
{
public partial class MainPage : UserControl
{
private CaptureSource cs = null;
public MainPage()
{
InitializeComponent();
}
private void startVideo_Click(object sender, RoutedEventArgs e)
{
bool ok = CaptureDeviceConfiguration.AllowedDeviceAccess;
if (!ok)
{
ok = CaptureDeviceConfiguration.RequestDeviceAccess();
}
if (ok)
{
cs = new CaptureSource()
{
VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice()
};
VideoBrush vidBrush = new VideoBrush();
vidBrush.SetSource(cs);
video.Fill = vidBrush;
cs.Start();
snap.IsEnabled = true;
}
}
private void snap_Click(object sender, RoutedEventArgs e)
{
cs.AsyncCaptureImage((bitmap) =>
{
Dispatcher.BeginInvoke(() =>
{
snapImage.Source = bitmap;
});
});
}
}
}
When the Start Camera button is clicked we firstly check the CaptureDeviceConfiguration.AllowedDeviceAccess property to ensure the user has allowed the Silverlight application to use the web camera/mic. If this property is fase you can display a dialog requesting the users permission for access using:
CaptureDeviceConfiguration.RequestDeviceAccess();
The call to AsyncCaptureImage() returns a WriteableBitmap containing the still image from the camera, if you have the Silverlight 4 runtime installed you can test it here.
vipul wrote:
Could you please build this for latest version of Silverlight?