Printable View
I am having a doubt about the compatibility of webcam and microphone with the latest version of the Silverlight i.e. Silverlight 4. I know that you guys must be knowing about this topic, so thought to post here so that someone hanging out there can share some notes with me. So I am requesting to all those guys that are having ideas about the working of webcam and microphone with Silverlight 4.
SilverLight 4 has been taking quite a stir in recent days and no wonder with the inclusion of many features that will make SilverLight excellent entry point to the development of powerful applications and the interesting thing is that many companies without the need have a strong infrastructure can mount these applications.
We will create a new Silverlight project from Visual Studio 2010 4 Beta 2 and was appointed Demo.SL4.WebcamMic. Accept the default options for creating the Web project test. MainPage.xaml have the following code:
Code:<UserControl
x: Class = "Demo.SL4.WebcamMic.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: ignore = "d"
xmlns: tk = "clr-namespace: System.Windows.Controls; assembly = System.Windows.Controls.Toolkit"
d: DesignHeight = "300" d: DesignWidth = "800">
<UserControl.Resources>
<Style TargetType = "TextBlock">
<Setter Property = "Foreground"
Value = "White" />
<Setter Property = "VerticalAlignment"
Value = "Center" />
<Setter Property = "Margin"
Value = "5" />
</ Style>
<Style TargetType = "Button">
<Setter Property = "Width"
Value = "100" />
<Setter Property = "Margin"
Value = "5" />
<Setter Property = "FontSize"
Value = "14" />
</ Style>
</ UserControl.Resources>
<Grid x: Name = "LayoutRoot" Background = "Black">
<Grid.RowDefinitions>
<RowDefinition Height = "50" />
<RowDefinition Height = "150" />
<RowDefinition Height = "35" />
<RowDefinition />
</ Grid.RowDefinitions>
<TextBlock Text = "Silverlight 4 Beta - Webcam and Microphone"
FontSize = "30"
HorizontalAlignment = "Center"
/>
<Rectangle x: Name = "capture"
Grid.Row = "1"
Width = "120"
Height = "120"
RadiusX = "10"
RadiusY = "10"
Stroke = "White"
StrokeThickness = "3">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color = "White"
Offset = "0005" />
<GradientStop Color = "Black"
Offset = "0.20" />
</ RadialGradientBrush>
</ Rectangle.Fill>
</ Rectangle>
<StackPanel Orientation = "Horizontal" Grid.Row = "2" HorizontalAlignment = "Center">
<Button Content = "Start" Click = "Button_Click" Tag = "Start" />
<Button Content = "Stop" Click = "Button_Click" Tag = "Stop" />
<Button Content = "Delete" Click = "Button_Click" Tag = "Delete" />
<TextBlock Text = "Interval:" />
<Slider Width = "100" Height = "20" Minimum = "1" Maximum = "10" SmallChange = "1" x: Name = "range" />
<TextBlock Text = "(Binding Value, ElementName = interval)" />
<TextBlock Text = "second (s)" />
</ StackPanel>
<ListBox x: Name = "listaFotos"
Grid.Row = "3" Margin = "5" Background = "LightGray"
ScrollViewer.HorizontalScrollBarVisibility = "Disabled"
>
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source = "(Binding)"
Width = "100">
<Image.Effect>
<DropShadowEffect />
</ Image.Effect>
</ Image>
</ DataTemplate>
</ ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Tk: WrapPanel />
</ ItemsPanelTemplate>
</ ListBox.ItemsPanel>
</ ListBox>
</ Grid>
</ UserControl>
You should also know about the Class CaptureDeviceConfiguration. CaptureDeviceConfiguration class has different objectives. The first and most important is to determine if the user has given us permission to use your webcam / microphone. This is indicated in the property AllowedDeviceAccess. We also have RequestDeviceAccess method () which displays a box dialog to the user indicating that the application in question want to use the webcam and microphone on your computer:
If you decide to give permission to the application, the property AllowedDeviceAccess be true and be ready to use these devices. In addition, CaptureDeviceConfiguration class exposes the following methods:
- GetDefaultAudioCaptureDevice ()
- GetDefaultVideoCaptureDevice ()
- GetAvailableAudioCaptureDevice ()
- GetAvailableVideoCaptureDevice ()
The difference between the first two and last two is that we will return the first audio or video devices respectively configured as default on your computer, while the last two we will return a collection of audio and video devices available.
Class will CaptureSource we will find the functions needed to start capturing the video and capture additional images of that video. The properties indicate AudioCaptureDevice VideoCaptureDevice and video and audio devices to use respectively, while the method Start () starts the video capture. It will be through a brush-type VideoBrush the means by which I will show the video, painting in rectangle.
Code:if (CaptureDeviceConfiguration. AllowedDeviceAccess | |
CaptureDeviceConfiguration. RequestDeviceAccess ())
(
source. Stop ();
// Indicates the devices to capture video and audio respectively
source. VideoCaptureDevice = vcd;
source. AudioCaptureDevice = acd;
// Create a new video brush to 'paint' with it the rectangle
VideoBrush VideoBrush brush = new () (Stretch = System. Windows. Media. Stretch. Uniform);
brush. SetSource (source);
capture. Fill = brush;
// Start video capture
source. Start ();
// Start the timer to capture photos
timer. Start ();
)
To capture video images AsyncCaptureImage use the method which receives a <WriteableBitmap> Action delegate type as a parameter. In the delegate we can get the captured image to potentially save it to disk or simply display it in an element of type Image. In our example we are using a collection of type ObservableCollection <WriteableBitmap> where we will be adding all the pictures taken automatically by the application, and, because this collection is tied to the Listbox and be an ObservableCollection, the list is automatically updated properly no extra code. The photos are taken in the event of a DispatcherTimer Tick in the interval of time set by the user using the Slider control (by default the value is 1 second).
Code:timer. Interval = TimeSpan. fromSeconds (interval. Value);
timer. Tick + = (s, a) =>
(
/ / Capture the image and adds it to the photo collection
source. AsyncCaptureImage ((image) =>
(
photos. Add (image);
));
);
New classes are now available in the namespace "System.Windows.Media" to interact with audio and video devices. The first class you will need is "CaptureDeviceConfiguration" which allows the user to request permission to use the webcam and microphone peripherals through the static method "RequestDeviceAccess. Calling this method will launch a dialog confirmation from the user. To avoid having to reapply for access to devices, it is possible to use the property "AllowedDeviceAccess" which returns true if the user has already given its approval for access to its devices during the session.Code:if (CaptureDeviceConfiguration . AllowedDeviceAccess | | CaptureDeviceConfiguration . RequestDeviceAccess ()) { }
Once the user has confirmed access to its devices, we will be able to find available devices. To do this, you can regain access to default video device through the static method "GetDefaultVideoCaptureDevice. It is also possible to retrieve the default audio device via the static method "GetDefaultAudioCaptureDevice.Code:VideoCaptureDevice videoDevice = CaptureDeviceConfiguration . GetDefaultVideoCaptureDevice () ;
AudioCaptureDevice audioDevice = CaptureDeviceConfiguration . GetDefaultAudioCaptureDevice () ;
if (videoDevice ! = null & & audioDevice ! = null ) { }
To initialize the video capture, you will need to create an instance of the class "CaptureSource" by initializing its properties "VideoCaptureDevice" and "AudioCaptureDevice" to specify the video and audio devices to use.Code:var captureSource = new CaptureSource () ;
captureSource . VideoCaptureDevice = videoDevice ;
captureSource . AudioCaptureDevice = audioDevice ;