WinUI（WASDK）使用MediaPipe檢查人體姿態關鍵點

前言

之前有用這個MediaPipe.NET .NET包裝庫搞了手勢識別，豐富了稚暉君的ElectronBot機器人的第三方上位機軟體的功能，MediaPipe作為谷歌開源的機器視覺庫，功能很豐富了，於是就開始整活了，來體驗了一把人體姿態關鍵點檢測。

所用框架介紹

1. WASDK

這個框架是微軟最新的應用開發框架，我是用來開發程式的主體，做一些交互和功能的承載，本質上和wpf，uwp這類程式沒什麼太大的區別，區別就是一些工具鏈的不同。

2. MediaPipe

MediaPipe offers open source cross-platform, customizable ML solutions for live and streaming media.

我主要使用MediaPipe進行人體姿態關鍵點坐標的提取，我的需求是將人體關鍵點坐標實時提取，並且同步到模型機器人的骨骼上，來實現同步的功能，但是這個博客只展示關鍵點的獲取。

官方文檔地址

推薦文檔

MediaPipe 集成人臉識別，人體姿態評估，人手檢測模型

代碼講解（乾貨篇）

1. 項目介紹

項目地址

項目結構如下圖：

註意

由於MSIX打包的WASDK的路徑訪問為虛擬文件系統所以我們需要在項目裡加入VFS目錄，將引用的mediapipe的模塊和dll放進去，不然會導致代碼無法使用。

詳情見如下文檔：
打包的 VFS 位置

還有經過本人的測試，模型需要下載【Pose landmarker (Heavy)】的，不然檢查不到坐標點。

特別註意的點，記得下載mediapipe的源碼，將對應的模塊依賴下載複製到對應的的目錄，如果模型解壓之後的名稱和圖片的不匹配記得修改文件名稱之後複製到對應的目錄，代碼倉庫就不上傳模型文件了。

軟體處理過程如下：

=>WinUI（WASDK）項目打開圖片

=>OpencvSharp處理圖片數據

=>轉換成ImageFrame

=>MediaPipe處理返回人體姿態關鍵點坐標數據

=>軟體通過win2d將坐標繪製到圖片上

2.核心代碼講解

核心代碼如下：

這段代碼是將圖片讀取處理並且通過mediapipe獲取坐標返回

  private async void StartButton_Click(object sender, RoutedEventArgs e)
    {
        var matData = new OpenCvSharp.Mat(Package.Current.InstalledLocation.Path + $"\\Assets\\pose.jpg");

        var mat2 = matData.CvtColor(OpenCvSharp.ColorConversionCodes.BGR2RGB);

        var dataMeta = mat2.Data;

        var length = mat2.Width * mat2.Height * mat2.Channels();

        var data = new byte[length];

        Marshal.Copy(dataMeta, data, 0, length);

        var widthStep = (int)mat2.Step();

        var imgframe = new ImageFrame(ImageFormat.Types.Format.Srgb, mat2.Width, mat2.Height, widthStep, data);

        PoseOutput handsOutput = calculator.Compute(imgframe);

        if (handsOutput.PoseLandmarks != null)
        {
            _poseOutput = handsOutput;

            CanvasControl1.Invalidate();
            var landmarks = handsOutput.PoseLandmarks.Landmark;
            Console.WriteLine($"Got pose output with {landmarks.Count} landmarks");
        }
        else
        {
            Console.WriteLine("No pose landmarks");
        }
    }

將結果繪製到圖片上的代碼如下，採用win2d繪製

    private void CanvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args)
    {
        if (_image != null)
        {
            // Draw the image
            args.DrawingSession.DrawImage(_image);

        }

        if (_poseOutput != null)
        {


            var poseLineList = _poseOutput.GetPoseLines(_image.Size.Width, _image.Size.Height);
            foreach (var postLine in poseLineList)
            {
                args.DrawingSession.DrawLine(postLine.StartVector2, postLine.EndVector2, Microsoft.UI.Colors.Green, 4);
            }
            foreach (var Landmark in _poseOutput?.PoseLandmarks?.Landmark)
            {

                var x = (int)_image.Size.Width * Landmark.X;
                var y = (int)_image.Size.Height * Landmark.Y;
                // Draw a point at (100, 100)
                args.DrawingSession.DrawCircle(x, y, 2, Microsoft.UI.Colors.Red, 2);
            }
        }
    }

效果如下：

人體點對應關係如圖：

0 - nose
1 - left eye (inner)
2 - left eye
3 - left eye (outer)
4 - right eye (inner)
5 - right eye
6 - right eye (outer)
7 - left ear
8 - right ear
9 - mouth (left)
10 - mouth (right)
11 - left shoulder
12 - right shoulder
13 - left elbow
14 - right elbow
15 - left wrist
16 - right wrist
17 - left pinky
18 - right pinky
19 - left index
20 - right index
21 - left thumb
22 - right thumb
23 - left hip
24 - right hip
25 - left knee
26 - right knee
27 - left ankle
28 - right ankle
29 - left heel
30 - right heel
31 - left foot index
32 - right foot index

特別感謝的項目就是這個MediaPipe.NET了，沒有它就沒有我的這篇文章，更沒有我的項目了。

個人感悟

又到了個人感悟環節，這次感覺舒服多了，因為看著wasdk框架的版本號越來越高，功能也越來越完善了。

總之是朝著好的方向發展了，希望別步了uwp的後塵,喜歡的話記得star一下了。

參考推薦文檔如下

demo地址

WASDK文檔地址

MediaPipe

MediaPipe.NET

ElectronBot

ElectronBot.DotNet