Silverlight 4 Beta – Soporte de Webcam y Micrófono
Posted on : 24-11-2009 | By : Rodrigo | In : Silverlight 4
Tags: CaptureDeviceConfiguration, CaptureSource, Microfono, Silverlight 4, Webcam
3
Con la llegada de Silverlight 4 Beta también ha llegado a nosotros la posibilidad de implementar en nuestras aplicaciones la capacidad de tomar video a través de la Webcam y capturar audio por medio del micrófono del equipo. Este fue una de las peticiones más fuertes en Silverlight 3 y la espera ha terminado. En este artículo veremos cómo usar la Webcam en un aplicativo de Silverlight para mostrar el video y además capturar imágenes para posteriormente mostrarlas en una lista.
El proyecto
En esta demostración crearemos una aplicación que capture el video por medio de la WebCam del usuario y además que vaya tomando fotos según un intervalo de tiempo configurable. Cada foto tomada se mostrará en la lista de fotos (control ListBox de color gris).
Crearemos un nuevo proyecto de Silverlight 4 desde Visual Studio 2010 Beta 2 y le nombraremos Demo.SL4.WebcamMic. Aceptaremos las opciones por default para la creación del proyecto Web de prueba. MainPage.xaml tendrá el siguiente código:
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:Ignorable="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 y Micrófono"
FontSize="30"
HorizontalAlignment="Center"
/>
<Rectangle x:Name="captura"
Grid.Row="1"
Width="120"
Height="120"
RadiusX="10"
RadiusY="10"
Stroke="White"
StrokeThickness="3">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="White"
Offset="0.005" />
<GradientStop Color="Black"
Offset="0.20" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<StackPanel Orientation="Horizontal" Grid.Row="2" HorizontalAlignment="Center">
<Button Content="Iniciar" Click="Button_Click" Tag="Iniciar" />
<Button Content="Parar" Click="Button_Click" Tag="Parar" />
<Button Content="Borrar" Click="Button_Click" Tag="Borrar" />
<TextBlock Text="Intervalo:" />
<Slider Width="100" Height="20" Minimum="1" Maximum="10" SmallChange="1" x:Name="intervalo" />
<TextBlock Text="{Binding Value, ElementName=intervalo}" />
<TextBlock Text="segundo(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>
Los elementos a destacar son los siguientes:
- El rectángulo llamado captura nos servirá para mostrar el video de la WebCam.
- Los botones Iniciar, Parar y Borrar nos servirán para iniciar la captura de video, parar la captura de video y borrar todas las fotos que se hayan tomado respectivamente.
- El slider de intervalo de tiempo nos servirá para controlar el tiempo que transcurrirá entre foto y foto.
Detallado lo anterior, ahora explicaremos las clases para soportar esta funcionalidad.
Clase CaptureDeviceConfiguration
La clase CaptureDeviceConfiguration tiene diferentes objetivos. El primero y el más importante es determinar si el usuario nos ha dado permiso para usar su Webcam / Micrófono. Esto está indicado en la propiedad AllowedDeviceAccess. Asimismo contamos con el método RequestDeviceAccess() el cuál mostrará una caja de diálogo al usuario indicándole que la aplicación en cuestión desea usar la Webcam y Micrófono de su equipo:
Si el usuario decide dar permiso a la aplicación, la propiedad AllowedDeviceAccess será true y estaremos listos para utilizar esos dispositivos. Además, la clase CaptureDeviceConfiguration expone los siguientes métodos:
GetDefaultAudioCaptureDevice()
GetDefaultVideoCaptureDevice()
GetAvailableAudioCaptureDevice()
GetAvailableVideoCaptureDevice()
La diferencia entre los primeros dos y los últimos dos es que los primeros nos regresarán el dispositivos de audio o video respectivamente configurado como default en el equipo, mientras que los últimos dos nos regresarán una colección de dispositivos de audio y video disponibles.
Clase CaptureSource
Será en la clase CaptureSource donde encontraremos las funciones necesarias para comenzar a capturar el video y adicionalmente capturar imágenes de ese video.
Las propiedades VideoCaptureDevice y AudioCaptureDevice indican los dispositivos de video y audio respectivamente a usar, mientras que su método Start() inicia la captura de video. Será a través de una brocha de tipo VideoBrush el medio por el cual mostraremos el video, pintándolo en el rectángulo explicado con anterioridad.
CaptureDeviceConfiguration.RequestDeviceAccess())
{
fuente.Stop();
//Indica los dispositivos para captura de video y audio respectivamente
fuente.VideoCaptureDevice = vcd;
fuente.AudioCaptureDevice = acd;
//Creamos una nueva brocha de video para 'pintar' con ella el rectángulo
VideoBrush brocha = new VideoBrush() { Stretch = System.Windows.Media.Stretch.Uniform };
brocha.SetSource(fuente);
captura.Fill = brocha;
//Inicia la captura de video
fuente.Start();
//Inicia el timer para capturar fotos
timer.Start();
}
Finalmente, para capturar imágenes del video utilizamos el método AsyncCaptureImage el cual recibe un delegado de tipo Action<WriteableBitmap> como parámetro. En el delegado podemos obtener la imagen capturada para potencialmente guardarla en disco o simplemente mostrarla en un elemento de tipo Image. En nuestro ejemplo estamos usando una colección de tipo ObservableCollection<WriteableBitmap> en donde iremos agregando todas las fotos tomadas automáticamente por la aplicación, y, debido a que esta colección está atada al Listbox y por tratarse de un ObservableCollection, la lista es actualizada de manera adecuada automáticamente sin código extra. Las fotos son tomadas en el evento Tick de un DispatcherTimer en el intervalo de tiempo establecido por el usuario usando el control Slider (por default el valor es 1 segundo).
timer.Tick += (s, a) =>
{
//Captura la imagen y la agrega a la colección de fotos
fuente.AsyncCaptureImage((imagen) =>
{
fotos.Add(imagen);
});
};
La siguiente figura muestra el resultado de la aplicación:
Resumen
El soporte de Webcam y Micrófono en Silverlight 4 abre un mundo de posibilidades para crear aplicaciones que hagan uso de este tipo de dispositivos, además de tener un modelo de programación bastante sencillo.
Puedes descargar el código aquí
Puedes ver el demo en vivo aquí (requiere Silverlight 4)
[...] Ve el artículo completo aquí [...]
muy buen aporte
lamentablemente el ejemplo no se lo puede ver por que es una ver. de prueba
a ver si lo actualizar para disfrutarlo
una pregunta, al respecto, junto con tener acceso a la webcam queria saver si saber como hacer traking de objetos con la webcam, escribeme si lo sabes, agradecere mucho tu ayuda
Hola Rodrigo! excelente articulo, me gustaria saber como hago para guardar una imagen en mi pc una vez capturada.
Gracias!