Flutter 3D手部识别插件apple_vision_hand_3d的使用

apple_vision_hand_3d 是一个 Flutter 插件，它使 Flutter 应用能够使用 TensorFlow 的 Blaze 手部关键点检测模型。

要求

MacOS

• 最低 osx 部署目标版本：12.0
• Xcode 13 或更新版本
• Swift 5
• ML Kit 仅支持 64 位架构（x86_64 和 arm64）

iOS

• 最低 ios 部署目标版本：14.0
• Xcode 13 或更新版本
• Swift 5
• ML Kit 仅支持 64 位架构（x86_64 和 arm64）

开始使用

首先需要导入 apple_vision 包：

import 'package:apple_vision_hand_3d/apple_vision_hand_3d.dart';

以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:apple_vision_hand_3d/apple_vision_hand_3d.dart';
import 'package:apple_vision_commons/apple_vision_commons.dart';
import '../camera/camera_insert.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';
import 'camera/input_image.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const VisionHand(),
    );
  }
}

class VisionHand extends StatefulWidget {
  const VisionHand({
    Key? key,
    this.onScanned
  }) : super(key: key);

  final Function(dynamic data)? onScanned;

  [@override](/user/override)
  _VisionHand createState() => _VisionHand();
}

class _VisionHand extends State<VisionHand> {
  final GlobalKey cameraKey = GlobalKey(debugLabel: "cameraKey");
  AppleVisionHand3DController visionController = AppleVisionHand3DController();
  InsertCamera camera = InsertCamera();
  Size imageSize = const Size(640, 640 * 9 / 16);
  String? deviceId;
  bool loading = true;

  List<HandMesh>? handData;
  late double deviceWidth;
  late double deviceHeight;

  [@override](/user/override)
  void initState() {
    camera.setupCameras().then((value) {
      setState(() {
        loading = false;
      });
      camera.startLiveFeed((InputImage i) {
        if (i.metadata?.size != null) {
          imageSize = i.metadata!.size;
        }
        if (mounted) {
          Uint8List? image = i.bytes;
          visionController.processImage(image!, imageSize, ImageOrientation.up).then((data) {
            handData = data;
            setState(() {});
          });
        }
      });
    });
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    camera.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    deviceWidth = MediaQuery.of(context).size.width;
    deviceHeight = MediaQuery.of(context).size.height;
    return Stack(
      children: [
        SizedBox(
          width: imageSize.width,
          height: imageSize.height,
          child: loading ? Container() : CameraSetup(camera: camera, size: imageSize),
        ),
      ] + showPoints()
    );
  }

  List<Widget> showPoints() {
    if (handData == null || handData!.isEmpty) return [];
    List<Widget> widgets = [];
    Map<FingerJoint3D, Color> colors = {
      FingerJoint3D.thumbCMC: Colors.amber,
      FingerJoint3D.thumbIP: Colors.amber,
      FingerJoint3D.thumbMCP: Colors.amber,
      FingerJoint3D.thumbTip: Colors.amber,

      FingerJoint3D.indexDIP: Colors.green,
      FingerJoint3D.indexMCP: Colors.green,
      FingerJoint3D.indexPIP: Colors.green,
      FingerJoint3D.indexTip: Colors.green,

      FingerJoint3D.middleDIP: Colors.purple,
      FingerJoint3D.middleMCP: Colors.purple,
      FingerJoint3D.middlePIP: Colors.purple,
      FingerJoint3D.middleTip: Colors.purple,

      FingerJoint3D.ringDIP: Colors.pink,
      FingerJoint3D.ringMCP: Colors.pink,
      FingerJoint3D.ringPIP: Colors.pink,
      FingerJoint3D.ringTip: Colors.pink,

      FingerJoint3D.littleDIP: Colors.cyanAccent,
      FingerJoint3D.littleMCP: Colors.cyanAccent,
      FingerJoint3D.littlePIP: Colors.cyanAccent,
      FingerJoint3D.littleTip: Colors.cyanAccent,

      FingerJoint3D.wrist: Colors.black
    };
    for (int j = 0; j < handData!.length; j++) {
      for (int i = 0; i < handData![j].poses.length; i++) {
        HandPoint3D points = handData![j].poses[i].location;
        widgets.add(
          Positioned(
            left: points.x * imageSize.width / 2.56 + handData![0].image.origin.x,
            bottom: imageSize.height / 2 - points.y * imageSize.width / 2.56 + handData![0].image.origin.y + 120,
            child: Container(
              width: 10,
              height: 10,
              decoration: BoxDecoration(
                color: colors[handData![j].poses[i].joint],
                borderRadius: BorderRadius.circular(5)
              ),
            )
          )
        );
      }
    }
    return widgets;
  }

  Widget loadingWidget() {
    return Container(
      width: deviceWidth,
      height: deviceHeight,
      color: Theme.of(context).canvasColor,
      alignment: Alignment.center,
      child: const CircularProgressIndicator(color: Colors.blue)
    );
  }
}