Flutter媒体处理插件thinksys_mediapipe_plugin的使用

Flutter媒体处理插件thinksys_mediapipe_plugin的使用

ThinkSys Mediapipe 插件将姿态检测功能引入到 Flutter 应用程序中，填补了 iOS 开发者在这一领域的空白。它提供了实时跟踪功能，易于集成，并且可以定制选项，适用于健身和医疗保健应用。通过将 MediaPipe 的能力与 Flutter 框架相结合，我们使开发人员能够轻松构建基于运动的 iOS 应用程序。

设置

1. 首先，在 pubspec.yaml 文件中添加依赖项，并在终端运行 flutter pub get：

dependencies:
   thinksys_mediapipe_plugin: ^0.0.13

1. 在 example/ios/Info.plist 中添加相机使用权限：

<key>NSCameraUsageDescription</key>
<string>此应用使用相机获取出现在相机视野中的姿态关键点。</string>

1. 运行 cd ios && pod install

2. 运行 flutter pub get

属性

使用方法

基本用法

以下是不带任何属性的基本使用 PoseLandmarks 小部件的方法：

import 'package:thinksys_mediapipe_plugin/pose_detection.dart';

PoseLandmarks(
  key: UniqueKey(),
)

使用相机方向选项

指定要使用的摄像头（前置或后置）：

PoseLandmarks(
  key: UniqueKey(),
  cameraFacing: CameraFacing.front,
)

处理方向变化

处理方向变化（竖屏或横屏）：

PoseLandmarks(
  key: UniqueKey(),
  options: PoseLandmarkOptions(
    cameraOrientation: orientation == Orientation.portrait
        ? CameraOrientation.portrait
        : CameraOrientation.landscape,
  ),
)

使用身体属性

自定义要跟踪的身体部位，如面部、左臂、右腿等：

PoseLandmarks(
  key: UniqueKey(),
  options: PoseLandmarkOptions(
    face: true,
    leftArm: true,
    rightArm: true,
    leftLeg: true,
    rightLeg: true,
    torso: true,
  ),
)

使用 onLandmark 属性

捕获并处理检测到的姿态关键点：

PoseLandmarks(
  key: UniqueKey(),
  options: PoseLandmarkOptions(
    poseLandmarks: (value) {
      print("Received Landmarks: $value");
    },
  ),
)

示例代码

以下是一个完整的示例代码，展示了如何使用该插件：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:thinksys_mediapipe_plugin/pose_detection.dart';
import 'package:thinksys_mediapipe_plugin_example/pose_example/landmarks_filter_options.dart';

void main() {
  runApp(const MyHomePage());
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PoseExample(),
    );
  }
}

class PoseExample extends StatefulWidget {
  const PoseExample({super.key});

  [@override](/user/override)
  State<PoseExample> createState() => _PoseExampleState();
}

class _PoseExampleState extends State<PoseExample> {
  PoseLandmarkOptions options = PoseLandmarkOptions(
      face: true, leftArm: true, rightArm: true, leftLeg: true, torso: true, rightLeg: true);

  void _updateFilters(String key, bool value) {
    switch (key) {
      case "face":
        options.face = value;
        break;
      case "leftArm":
        options.leftArm = value;
        break;
      case "rightArm":
        options.rightArm = value;
        break;
      case "torso":
        options.torso = value;
        break;
      case "leftLeg":
        options.leftLeg = value;
        break;
      case "rightLeg":
        options.rightLeg = value;
        break;
      case "rightWrist":
        options.rightWrist = value;
        break;
      case "leftWrist":
        options.leftWrist = value;
        break;
      case "rightAnkle":
        options.rightAnkle = value;
        break;
      case "leftAnkle":
        options.leftAnkle = value;
        break;
    }
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: const Text("Camera View"),
            actions: [
              GestureDetector(
                  onTap: () {
                    Navigator.of(context).push(CupertinoPageRoute(
                        builder: (_) => LandmarksFilterOptions(
                              onFilterChange: _updateFilters,
                              defaultFilters: options.toJson(),
                            )));
                  },
                  child: const Icon(Icons.settings_input_component_sharp))
            ],
          ),
          body: poseLandmarks()),
    );
  }

  Widget poseLandmarks() {
    return OrientationBuilder(builder: (_, orientation) {
      return PoseLandmarks(
        key: UniqueKey(),
        options: PoseLandmarkOptions(
            cameraFacing: CameraFacing.front,
            cameraOrientation: orientation == Orientation.portrait
                ? CameraOrientation.portrait
                : CameraOrientation.landscape,
            face: true,
            leftLeg: true,
            rightLeg: true,
            leftArm: true,
            rightArm: true,
            torso: true,
            rightAnkle: true,
            leftAnkle: true,
            rightWrist: true,
            leftWrist: true),
        poseLandmarks: (value) {
          //  print("Received Landmarks : $value");
        },
      );
    });
  }
}