[# KINECT] HowTo: Display the contents of the camera in WPF

image

Hi,

After displaying as it paints the Skeleton in Kinect here and here, today we are going to a more simple example (in what should be) where we will show the contents of the Chamber about Kinect in a WPF IMAGE.

Tutorial

1. Create a new type WPF Application project in Visual Studio 2010.

2 Add the following references

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

3 We modify the MainWindow to display a title and an Image where we’ll show you the contents of the Chamber

   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. Then we initialized the runtime about Kinect (lines 17 to 26), taking into account that we will only use the feed from the camera (line 22). We we also subscribe to the VideoFrameReady() event, which is that will deliver us the information to process and display it in our Image (line 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. In this example I’m using a class distributed with the SDK Kinect, InteropBitmapHelper that helps us work more effectively with the pictures.

6. Once completed the project, you can now run the same and we can see the feed from the camera’s sensor Kinect

image

Note: I know, Tablet, HP TouchSmart, 2 laptops, etc. too for a Sunday… Confundido

You can download the example since

https://SkyDrive.live.com/embedicon.aspx/code%20Samples/2011%2011%2013%20ElBruno.KinectViewer.zip?CID=bef06dffdb192125 & sc = documents

Greetings @ Home

The Bruno

[#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