Kinect v2のカメラから画像を取り込んで表示する基本プログラム

2014年9月10日(水)
薬師寺 国安

第1回でVisual Studio 2013 Express for WindowsではWPFの作成はできないと書いていましたが、Visual Studio 2013 for Windows Desktopでは作成が可能ですので、こちらを使用してください。下記のURLよりダウンロードできます。

Download Microsoft Visual Studio Express 2013 for Windows Desktop
http://www.microsoft.com/ja-jp/download/details.aspx?id=40787

いよいよ、実際にKinect v2プログラムの作成に入ります。今回は最初ということで、Kinect v2の基本的なサンプルの作成に限定しています。この記述方法を理解すれば、後々のKinectプログラミングに役立ちますので、ぜひマスターしていただきたいと思います。

「Color画像の表示」とは、Kinect v2センサーのRGBカメラから、画像を撮り込むことを指します。第1回目でも解説したように、Kinect v2からはColor画像の解像度が「1920×1080」にアップし、Kinect v1当時よりも自然色に近い綺麗な画像を映し出すことが可能になりました。今回は、Kinect v2の基本の一つである、このRGBカメラを使って画像を撮り込む方法を解説します。まずはプロジェクトからの作成です。

プロジェクトの作成

VS 2013のメニューから[ファイル]ー[新規作成]ー[プロジェクト]と選択します。次に、「テンプレート」から「Visual Basic」を選択し、右に表示される項目名から「WPF アプリケーション」を選択します。「名前」には、任意のプロジェクト名を指定します。今回は「Color_Basic_Sample」という名前を付けています。

コントロールの配置

デザイン画面上にツールボックスからImageコントロールを1個配置し、「名前(x:Name)」に「Image1」と指定しておきます。レイアウトは図1のようになります。

図1: デザイン画面上にImageコントロールだけを配置している(クリックで拡大)

編集し、書き出されたXAMLコードはリスト1のようになります。

リスト1 編集し、書き出されたXAMLコード(MainWindow.xaml)

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="600" Width="800">   (1)
    <Grid>
        <Image x:Name="Image1"  />   (2)
    </Grid>
</Window>
  1. Window要素のHeightプロパティに「600」、Widthプロパティに「800」と指定しておきます。
  2. 名前がImage1というImageコントロールを配置しています。

参照設定

ソリューションエクスプローラー内の「参照設定」に、Microsoft.Kinect.dllを追加する必要があります。この手順については第1回で解説していますので、そちらを参照してください。

ロジックコードを記述する

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト2のコードを記述します。

リスト2 メンバー変数の宣言など(MainWindow.xaml.vbの一部)

Imports Microsoft.Kinect   (1)
Class MainWindow
    Private myKinect As KinectSensor   (2)
    Private myColorFrameReader As ColorFrameReader = Nothing   (3)
    Private colorBitmap As WriteableBitmap = Nothing   (4)
    Private ColorImagePixelData As Byte()   (5)
    Private BytesPerPixel As Integer = 4 ‘CInt(PixelFormats.Bgr32.BitsPerPixel / 8)   (6)
  1. Kinectの使用を可能にするために、Microsoft.Kinect名前空間をインポートします。次は、メンバー変数を宣言します。
  2. Kinectセンサーを表すクラスであるKinectSensor型のメンバー変数myKinectを宣言します。
  3. カラーフレームリーダーを表すクラスであるColorFrameReader型のメンバー変数myColorFrameReaderを宣言します。
  4. WriteableBitmapクラス型のメンバー変数colorBitmapを宣言します。WriteableBitmapは、書き込みおよび更新が可能なBitmapSource を提供するクラスで、BitmapSourceは単一の一定なピクセルセットを、特定のサイズおよび解像度で表わすクラスを意味します。
  5. バイト型の配列であるメンバー変数ColorImagePixelDataを宣言します。6. Integer型のメンバー変数BytePerPixelを宣言し、「4」で初期化しておきます。この「4」という値は、32ビットフルカラーのRGB形式で、先頭から1バイト(8ビット)ずつ「青」、「緑」、「赤」の情報が入っており、各カラーチャネルに割り当てられる「bits per pixel(BPP)」が「8」のため、Bgr32を「8」で除算した「4」バイトを意味します。「青」、「緑」、「赤」では24ビットしか使用されませんが、残りの8ビットは「Alpha(不透明度)」に使用されることが多いです。「4」という直接的な値ではなく

    CInt(PixelFormats.Bgr32.BitsPerPixel / 8)

    と記述しても同じです。

ウインドウが読み込まれた時の処理

続いて、ウインドウが読み込まれた際の処理です。

リスト3 ウインドウが読み込まれた時の処理(MainWindow.xaml.vbの一部、リスト2の続き)

    Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
        myKinect = KinectSensor.GetDefault   (1)
        If myKinect Is Nothing = False Then
            myColorFrameReader = myKinect.ColorFrameSource.OpenReader(2)
            Dim myColorFrameDescripton As FrameDescription = myKinect.ColorFrameSource.CreateFrameDescription(ColorImageFormat.Bgra)   (3)
            ColorImagePixelData = New Byte(myColorFrameDescripton.Width * myColorFrameDescripton.Height * BytesPerPixel - 1) {}
            colorBitmap = New WriteableBitmap(myColorFrameDescripton.Width, myColorFrameDescripton.Height, 96.0, 96.0, PixelFormats.Bgr32, Nothing)  (4)
            AddHandler myColorFrameReader.FrameArrived, AddressOf myColorFrameReader_FrameArrived   (5)
            myKinect.Open()   (6)
        End If
    End Sub
  1. 最初に、Kinectセンサーを使用可能にします。Kinectセンサーが使用可能な状態にある場合は、以下の処理を行います。
  2. カラーフレームのソースを取得する、ColorFrameSourceのOpenReaderメソッドで、カラーフレームのソースフレームのリーダーを開きます。
  3. KinectSensorからのイメージフレームのプロパティを表わすクラスである、FrameDescriptionクラス型の変数myColorFrameDescriptionを宣言し、ColorFrameSource.CreateFrameDesciptionメソッドで、指定した形式のColorFrameのFrameDescription オブジェクトを作成します。この場合は、ColorImageFormatが「Bgra形式」のFrameDescriptionオブジェクトを作成します。簡単にいうと、「BGRA形式」のカラー画像の情報を作成することになります。次にバイト配列を作成します。
  4. 指定したパラメーターを使用して、WriteableBitmapのインスタンスを作成します。WriteableBitmapの書式は下記の通りです。

    WriteableBitmap(pixelWidth,pixelHeight,dpiX,dpiY,pixelFormat,palette)

    「dpiX」は「ビットマップの水平ドット/インチ」を、「dpiY」は「ビットマップの垂直ドット/インチ」を表します。通常は両方とも「96.0」を指定します。「PixelFormat」には「Bgr32」を指定し、「palette」には「Nothing」と指定しておきます。「PixelFormats.Bgr32」は、「Bgr32ピクセル形式」を取得します。 「Bgr32」は、ピクセルあたりのビット数 (BPP) が「32」の「sRGB 形式」です。 各カラーチャネル (青、緑、および赤) に割り当てられるピクセルあたりのビット数 (BPP) は「8」になります。
  5. AddHandlerステートメントで、ColorFrameReaderのFrameArrivedイベントに、イベントハンドラを指定します。FrameArrivedイベントは、カラーフレームが到着した時に発生するイベントです。
  6. OpenメソッドでKinectセンサーを開きます。

カラーフレームが到着した時に発生するイベントの処理

リスト3で指定したイベントハンドラを記述していきます。

リスト4 カラーフレーム到着時のイベント(MainWindow.xaml.vbの一部、リスト3の続き)

    Private Sub myColorFrameReader_FrameArrived(sender As Object, e As ColorFrameArrivedEventArgs)
        Using myColorFrame As ColorFrame = e.FrameReference.AcquireFrame   (1)
            If myColorFrame Is Nothing = True Then
                Return
            End If                              myColorFrame.CopyConvertedFrameDataToArray(ColorImagePixelData, ColorImageFormat.Bgra)   (2)
        End Using
        colorBitmap.WritePixels(New Int32Rect(0, 0, colorBitmap.PixelWidth, colorBitmap.PixelHeight), ColorImagePixelData, colorBitmap.PixelWidth * BytesPerPixel, 0)   (3)
        Image1.Source = colorBitmap   (4)
    End Sub
  1. e.FrameReference.AcquireFrameメソッドでカラーフレームを取得し、myColorFrameで参照します。
  2. CopyConvertedFrameDataToArrayメソッドで、フレームから「BGRA形式」のバイト列に変換し、バイト配列に格納します。書式は下記の通りです。

    CopyConvertedFrameDataToArray(frameData,colorFomat)

    frameDataには格納する配列、この場合は、バイト配列のColorImagePixelDataを指定しています。colorFormatには「色の形式」を指定します。この場合は、「Bgra形式」を指定しています。
  3. colorBitmap(WriteableBitmapクラス)のWritePixelsメソッドで、ビットマップの指定した領域内のピクセルを更新します。書式は下記の通りです。

    WritePixels(sourecRect,pixels,stride,offset)

    「sourceRect」には「Int32Rect型」を指定します。更新するWriteableBitmapの四角形です。「pixels」にはビットマップの更新に使用する「ピクセル配列」を指定します。この場合は、ColorImagePixelDataのバイト列を指定しています。「stride」にはpixels内の更新領域の「ストライド」を指定します。今回はcolorBitmapのPixelWidthに「4」を乗算した値を指定しています。「ストライド」とは、画像データのX座標横一列あたりに用いられるバイト数を示す値です。例えば、横幅が512ピクセルで、RGBA各色8ビット(32ビットカラー)で表現される画像データのストライドは、

    512(ピクセル)×4(バイト)=2048

    となります。今回の場合はRGBカラーの解像度が1920×1080(ピクセル)であるため

    1920×4=7680

    の値がstrideに適用されることになります。「offset」には入力バッファのオフセットを指定します。今回は「0」を指定しています。
  4. Image1のSourceプロパティにcolorBitmapオブジェクトを指定します。これでRGBカメラからの画像が表示されます。

ウインドウが閉じられる時の処理

最後は、ウインドウが閉じられる際の処理です。

リスト5 ウインドウを閉じる際の処理(MainWindow.xaml.vbの一部、リスト4の続き)

Private Sub MainWindow_Closing(sender As Object, e As ComponentModel.CancelEventArgs) Handles Me.Closing
        If myColorFrameReader Is Nothing = False Then
            myColorFrameReader.Dispose()   (1)
            myColorFrameReader = Nothing
        End If
        If myKinect Is Nothing = False Then
            myKinect.Close()   (2)
            myKinect = Nothing
        End If
    End Sub
End Class
  1. ColorFrameReaderをDisposeし、全ての関連付けから解放します。
  2. Kinectセンサーも閉じ、全ての関連付けから解放します。

実行すると図2のように表示されます。

図2: RGBカメラから取得されたColor画像

今回の「Color画像」の表示コードが、Kinectを操作するうえでの基本的な流れになります。以下のような流れになります。

Kinectセンサー
→Openメソッド
→ColorFrameSource
→OpenReaderメソッド
→ColorFrameReader
→FrameArrivedイベント
→ColorFrameReference
→AcquireFrameメソッド
→ColorFrame→CopyConvertedFrameDataToArrayメソッド
→WritePixelsメソッド
→Image1.Sourceに表示

次回は、Depth画像の取り込みに挑戦します。

  • Kinect v2のカメラから画像を取り込むサンプル

    『速攻攻略!Kinect v2』 第2回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています