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

Advertisements

One thought on “[# KINECT] HowTo: Display the contents of the camera in WPF”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.