Capturar Video y Tomar Fotos – Silverlight

Hoy voy a mostrar un ejemplo de como Silverlight 4 permite la integración de Cámaras Web y Micrófonos en las aplicaciones.

El espacio de Nombres que permite la captura de video es System.Windows.Media, y la clase CaptureSource que es la encargada de capturar el video y el audio.

Para empezar podemos crear un control Rectangle, que será el encargado de pintar el contenido del Video, gracias a la clase VisualBrush.

También adicionamos dos ListBox que mostrarán los dispositivos de audio y video instalados, agregamos 3 botones para Iniciar y Detener el Video, y otro para capturar las fotos.

Las fotos serán mostradas en un ScrollViewer.

La aplicación en modo de diseño queda así:

En el código, en cuánto carga la aplicación, buscamos los dispositivos disponibles y los adicionamos a los listBox:

public MainPage()
{
    InitializeComponent();
    listAudio.ItemsSource = CaptureDeviceConfiguration.GetAvailableAudioCaptureDevices();
    listVideo.ItemsSource = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();
}

Si ejecutamos, vemos que no aparece el nombre del dispositivo, para eso se debe modificar el template de los items para mostrar la propiedad friendlyname de los dispositivos, en el XAML, los listbox quedan así:

<ListBox Height="157" HorizontalAlignment="Left" Margin="407,11,0,0" Name="listAudio" VerticalAlignment="Top" Width="245" >
    <ListBox.ItemTemplate>
        <DataTemplate>
           <TextBlock Text="{Binding FriendlyName}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Esto se hace para ambos ListBox.

Para mostrar el contenido del video, declaramos un objeto CaptureSource y asignamos un evento en el Botón iniciar que tendrá lo siguiente:

CaptureSource fuente;public MainPage()
{
 InitializeComponent();
 listAudio.ItemsSource = CaptureDeviceConfiguration.GetAvailableAudioCaptureDevices();
 listVideo.ItemsSource = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();
 fuente = new CaptureSource();
}
private void button1_Click(object sender, RoutedEventArgs e)
{
  if (fuente != null)
   {
     fuente.Stop();
     fuente.VideoCaptureDevice = (VideoCaptureDevice)listVideo.SelectedItem;
     fuente.AudioCaptureDevice = (AudioCaptureDevice)listAudio.SelectedItem;

     VideoBrush videoBrush = new VideoBrush();
     videoBrush.SetSource(fuente);
     rectVideo.Fill = videoBrush;

     if (CaptureDeviceConfiguration.AllowedDeviceAccess
            || CaptureDeviceConfiguration.RequestDeviceAccess())
     {
        fuente.Start();
     }
   }
}

Primero se declara el objeto CaptureSource, luego cuando presionamos el botón Iniciar, se verifica que el objeto no sea nulo, para evitar excepciones, sí no es nulo entonces detenemos el la captura y asignamos los dispositivos, dependiendo de los items seleccionados en las listas de audio y video.

Declaramos el objeto VisualBrush y le asignamos como fuente el objeto CaptureSource, después llenamos el rectángulo, que en este caso se llama rectVideo.

Si ejecutamos en este momento no va a aparecer aún nada, debemos darle permisos a Silverlight para que pueda capturar el audio y el video, y cuando tengamos permiso, llamamos el método Start, que va a empezar a iniciar la cámara web y el audio:

 

El evento del botón detener es sencillo, ya que solo debemos verificar que el objeto CaptureSource no sea nulo, y llamar el método Stop:

if (fuente != null)
{
   fuente.Stop();
}

 Para tomar capturas del video, se llama el método Asincrónico CaptureImageAsync(), pero para eso se debe antes adicinar el evento CaptureImageCompleted al objeto CaptureSource, este evento retorna un objeto WriteableBitmap.

Para poder mostrar las imagenes en el ScrollViewer, he modificado el template para contener como items unos controles Image, luego asignar una colección de imagenes al ScrollViewer:

ScrollViewer:

<ScrollViewer Height="115" HorizontalAlignment="Left" Margin="21,407,0,0" Name="scrollViewer1" VerticalAlignment="Top" Width="631" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
   <ItemsControl x:Name="capturas" Background="{x:Null}">
      <ItemsControl.ItemTemplate>
         <DataTemplate>
           <Image Source="{Binding}"  Margin="5" Stretch="UniformToFill" Height="100"/>
         </DataTemplate>
      </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>
     </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
  </ItemsControl>
</ScrollViewer>

Código de captura de imagenes:

CaptureSource fuente;
ObservableCollection<WriteableBitmap> imagenes = new ObservableCollection<WriteableBitmap>();

public MainPage()
{
  InitializeComponent();
  listAudio.ItemsSource = CaptureDeviceConfiguration.GetAvailableAudioCaptureDevices();
  listVideo.ItemsSource = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();
  fuente = new CaptureSource();
  fuente.CaptureImageCompleted += new EventHandler<CaptureImageCompletedEventArgs>(fuente_CaptureImageCompleted);
  capturas.ItemsSource = imagenes;
}

void fuente_CaptureImageCompleted(object sender, CaptureImageCompletedEventArgs e)
{
  imagenes.Add(e.Result);
}

private void TomarFoto_Click(object sender, RoutedEventArgs e)
{
  if (fuente != null)
   {
     fuente.CaptureImageAsync();
   }
}

Ahora, cuando se ejecuta la aplicación podemos lo que muestra la cámara de video y tomar unas capturas.

Código Fuente en Microsoft Web Developer Express 2010 Aquí

Enlace: Accessing Web Cam and Microphone