[#KINECT] HowTo: Mostrar el contenido de la cámara en WPF

image

Buenas,

después de mostrar como se pinta el Skeleton en Kinect aquí y aquí, hoy vamos a un ejemplo más simple (en lo que cabe) donde mostraremos el contenido de la cámara de Kinect en un IMAGE de WPF.

Tutorial

1. Crear un nuevo proyecto de tipo WPF Application en Visual Studio 2010.

2. Agregamos las siguientes referencias

  • Microsoft.Research.Kinect
    <%Program Files%>\Microsoft SDKs\Kinect\v1.0 Beta2\Assemblies\Microsoft.Research.Kinect.dll

3. Modificamos la MainWindow para mostrar un título y un Image donde mostraremos el contenido de la cámara

   1: <Window x:Class="ElBruno.KinectViewer.MainWindow"

   2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:         Title="El Bruno - Kinect Viewer" Height="480" Width="740">

   5:     <Grid>

   6:         <TextBlock Text="Camera Viewer" FontSize="20" 

   7:                     HorizontalAlignment="Center" Foreground="Black" />

   8:         <Image x:Name="CameraViewer" Margin="10,40,10,10" Stretch="Fill" />

   9:     </Grid>

  10: </Window>

4. A continuación inicializamos el runtime de Kinect (líneas 17 a 26), teniendo en cuenta que solo utilizaremos el feed de la cámara (línea 22). Además nos suscribimos al evento VideoFrameReady() que es el que nos entregará la información para procesarla y mostrarla en nuestro Image (línea 36).

   1: public partial class MainWindow

   2: {

   3:     private Runtime _kinect;

   4:     private InteropBitmapHelper _imageHelper;

   5:  

   6:     public MainWindow()

   7:     {

   8:         InitializeComponent();

   9:         Loaded += MainWindowLoaded;

  10:     }

  11:  

  12:     void MainWindowLoaded(object sender, RoutedEventArgs e)

  13:     {

  14:         InitKinect();

  15:     }

  16:  

  17:     void InitKinect()

  18:     {

  19:         if (Runtime.Kinects.Count == 0)

  20:             return;

  21:         _kinect = Runtime.Kinects[0];

  22:         _kinect.Initialize(RuntimeOptions.UseColor);

  23:         _kinect.VideoStream.Open(ImageStreamType.Video, 2, 

  24:                                  ImageResolution.Resolution640x480, ImageType.Color);

  25:         _kinect.VideoFrameReady += KinectVideoFrameReady;

  26:     }

  27:  

  28:     void KinectVideoFrameReady(object sender, ImageFrameReadyEventArgs e)

  29:     {

  30:         var planarImage = e.ImageFrame.Image;

  31:         if (_imageHelper == null)

  32:         {

  33:             _imageHelper = new InteropBitmapHelper(planarImage.Width, 

  34:                                                    planarImage.Height, 

  35:                                                    planarImage.Bits);

  36:             CameraViewer.Source = _imageHelper.InteropBitmap;

  37:         }

  38:         else

  39:         {

  40:             _imageHelper.UpdateBits(planarImage.Bits);

  41:         }   

  42:     }

  43: }

5. En este ejemplo estoy utilizando una clase distribuida con el SDK de Kinect, InteropBitmapHelper que nos ayuda a trabajar de una forma más efectiva con las imágenes.

6. Una vez terminado el proyecto, ya podemos ejecutar el mismo y podremos ver el feed de la cámara del sensor Kinect

image

Nota: ya lo sé, la tableta, un HP TouchSmart, 2 portátiles, etc. demasiado para un domingo … Confundido

Puedes descargar el ejemplo desde

https://skydrive.live.com/embedicon.aspx/Code%20Samples/2011%2011%2013%20ElBruno.KinectViewer.zip?cid=bef06dffdb192125&sc=documents

 

Saludos @ Home

El Bruno

   

About these ads

4 pensamientos en “[#KINECT] HowTo: Mostrar el contenido de la cámara en WPF

  1. Pingback: [#KINECT] HowTo: Cambiar el ángulo de la cámara | El Bruno

  2. Pingback: [#KINECT] HowTo: Mostrar el contenido del depth sensor en nuestras aplicaciones | El Bruno

  3. Pingback: [#KINECT] HowTo: Mostrar el contenido del depth sensor en nuestras aplicaciones - El Bruno

  4. Pingback: [#KINECT] Recopilatorio de enlaces con #KinectSDK (I) | El Bruno

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s