Flutter人脸网格识别插件apple_vision_face_mesh的使用

Flutter人脸网格识别插件apple_vision_face_mesh的使用

apple_vision_face_mesh

Pub Version 分析 GitHub上的星标 许可证: MIT

Apple Vision Face Mesh 是一个使 Flutter 应用能够使用 TensorFlow 的 Face Mesh 的插件。

  • 该插件不是由 Apple 赞助或维护。作者是一些希望为 macOS 创建类似 Google ML Kit 的开发者。

要求

MacOS

  • 最低 osx 部署目标: 11.0
  • Xcode 13 或更新版本
  • Swift 5
  • ML Kit 仅支持 64 位架构 (x86_64 和 arm64)

iOS

  • 最低 ios 部署目标: 13.0
  • Xcode 13 或更新版本
  • Swift 5
  • ML Kit 仅支持 64 位架构 (x86_64 和 arm64)

开始使用

首先需要导入 'package:apple_vision/apple_vision.dart'

import 'package:apple_vision/apple_vision.dart';

final GlobalKey cameraKey = GlobalKey(debugLabel: "cameraKey");
AppleVisionFaceMeshController visionController = AppleVisionFaceMeshController();
InsertCamera camera = InsertCamera();
String? deviceId;
bool loading = true;
Size imageSize = const Size(640,640*9/16);

List<FaceMesh>? faceData;
late double deviceWidth;
late double deviceHeight;

[@override](/user/override)
void initState() {
  camera.setupCameras().then((value){
    setState(() {
      loading = false;
    });
    camera.startLiveFeed((InputImage i)async {
      if(i.metadata?.size != null){
        imageSize = i.metadata!.size;
      }
      if(mounted) {
        Uint8List? image = i.bytes;
        await visionController.processImage(image!, i.metadata!.size).then((data){
          faceData = 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:<Widget>[
      SizedBox(
        width: imageSize.width, 
        height: imageSize.height, 
        child: loading?Container():CameraSetup(camera: camera, size: imageSize)
    ),
    ]+showPoints()
  );
}

List<Widget> showPoints(){
  if(faceData == null || faceData!.isEmpty) return[];
  List<Widget> widgets = [];
  
  for(int k = 0; k < faceData!.length;k++){
    List<FacePoint> points = faceData![k].mesh;

    for(int j = 0; j < points.length;j++){
      //print(min.width);
      widgets.add(
        Positioned(
          left: points[j].x*imageSize.aspectRatio+faceData![0].image.origin.x+20,
          bottom: imageSize.height/2+90-points[j].y*imageSize.aspectRatio+faceData![0].image.origin.y,
          child: Container(
            width: 2,
            height: 2,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(1)
            ),
          )
        )
      );
    }
  }
  return widgets;
}

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

更多关于Flutter人脸网格识别插件apple_vision_face_mesh的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter人脸网格识别插件apple_vision_face_mesh的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用apple_vision_face_mesh插件来实现人脸网格识别的示例代码。请注意,这个插件目前仅支持iOS平台,因此以下代码仅适用于iOS开发环境。

首先,确保你已经在pubspec.yaml文件中添加了apple_vision_face_mesh依赖:

dependencies:
  flutter:
    sdk: flutter
  apple_vision_face_mesh: ^latest_version  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中,你可以使用以下代码来实现人脸网格识别:

import 'package:flutter/material.dart';
import 'package:apple_vision_face_mesh/apple_vision_face_mesh.dart';
import 'dart:typed_data';
import 'dart:ui' as ui;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Face Mesh Demo',
      home: FaceMeshScreen(),
    );
  }
}

class FaceMeshScreen extends StatefulWidget {
  @override
  _FaceMeshScreenState createState() => _FaceMeshScreenState();
}

class _FaceMeshScreenState extends State<FaceMeshScreen> {
  late AppleVisionFaceMeshController _controller;
  Uint8List? _imageBytes;

  @override
  void initState() {
    super.initState();
    _controller = AppleVisionFaceMeshController();
    _controller.initialize().then((_) {
      // 初始化完成后,可以开始处理图像
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Future<void> _processImage(Uint8List imageBytes) async {
    try {
      final result = await _controller.processImage(imageBytes);
      if (mounted) {
        setState(() {
          _imageBytes = imageBytes; // 保存原始图像字节数据以便显示
          // 这里可以根据result.faces进行进一步处理,比如绘制人脸网格
        });
      }
      // 处理识别结果
      result.faces?.forEach((face) {
        // face包含人脸关键点等信息,可以用来绘制网格
        print('Detected face with ${face.landmarks.length} landmarks.');
      });
    } catch (e) {
      print('Error processing image: $e');
    }
  }

  Future<Uint8List?> _pickImage() async {
    final pickedFile = await ImagePicker().pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      final file = File(pickedFile.path);
      final imageBytes = await file.readAsBytes();
      _processImage(imageBytes);
      return imageBytes;
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Face Mesh Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
            if (_imageBytes != null)
              Image.memory(
                _imageBytes!,
                width: 300,
                height: 300,
                fit: BoxFit.cover,
              ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们使用了apple_vision_face_mesh插件来处理从设备图库中选择的图像。首先,我们初始化AppleVisionFaceMeshController,然后定义一个方法来处理图像。在处理图像时,我们使用_controller.processImage方法来获取人脸网格数据,并打印出检测到的人脸关键点数量。

请注意,这个示例中并没有实际绘制人脸网格,因为绘制网格需要自定义绘图逻辑。你可以根据result.faces中的关键点数据,使用CustomPaintCanvas来绘制网格。

此外,由于apple_vision_face_mesh插件依赖于Apple的Vision框架,因此在实际应用中,你可能需要处理更多与图像捕获、处理和显示相关的细节,比如实时摄像头输入、图像预处理等。这些功能可以通过结合Flutter的相机插件和其他图像处理库来实现。

回到顶部