草庐IT

记录--react native 封装人脸 检测、美颜组件

林恒 2023-03-28 原文

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

本组件目前只能用在React Native 的iOS端

本组件来之实际中的开发需求：可以检测并且标记人脸，实现基本的美颜，可进行拍照、换行镜头等基础相机功能。官方组件封装 教程

本文代码：DEMO 运行demo

$ git clone https://github.com/lianglei777/demos.git
$ cd demos
$ git checkout RNFaceDemo
$ cd RNFaceDemo
$ npm install 
$ cd ios 
$ pod install

如果 pod install 失败，请参考 此文 的 cocoapods 部分。

组件功能

  • 人脸标记，返回人脸个数
  • 滤镜美颜（基于GPUImage），美颜程度可调节（0~9）
  • 相机功能，包括拍照、转换前后镜头，其余相机功能可自行扩展

效果如下图

如何使用

代码文件

  1. 添加 demo 的 ios 文件夹下的 Camera 到自己项目的 ios 目录下，
  2. ios中添加相关相机相册权限配置
  <key>NSCameraUsageDescription</key>
  <string>上传头像时，使用您的相机来拍摄照片</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>保存图片时,使用您的相册来保存照片</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>上传头像时，使用您的相册来获取图片</string>
  1. js 层使用参考 NativeModule/RNFaceDetectView.js 和 Pages/ComponentBridgeDemo.js

安装GPUImage

Podfile 文件中添加如下内容， 运行 pod install

pod 'GPUImage',:git => 'https://github.com/lianglei777/GPUImage.git'

cmd + b 进行编译，如果遇到以下问题

错误1

解决方法： 按照如下途中点击步骤，添加 libGPUImage.a 文件

错误2

解决方法： Build Settings --》 Library Search Paths ，双击添加 "${PODS_CONFIGURATION_BUILD_DIR}/GPUImage"，选择 non-recursive

介绍

代码中已经加了比较多的注释，这里主要根据文件来说一些我觉得要关注的点。

GPUImage

GPUImage 是一款利用GPU添加滤镜效果，美化图像的 Object-C 库，但是可惜的是 swift 出现之后作者放弃维护了，需要修改一些代码才能运行在较新的iOS版本中，这里是我修改之后的 GPUImage 库，也是组件中在用的

FSKGPUImageBeautyFilter

FSKGPUImageBeautyFilter 是基于 GPUImage 的美颜滤镜，可以通过三个维度调整美颜效果。

/** 美颜程度 */
@property (nonatomic, assign) CGFloat beautyLevel;
/** 美白程度 */
@property (nonatomic, assign) CGFloat brightLevel;
/** 色调强度 */
@property (nonatomic, assign) CGFloat toneLevel;

这里需要注意 FSKGPUImageBeautyFilter.m 文件中 initWithFragmentShaderFromString 的定义方式，传入的着色器参数如果不懂相关内容请不要修改，也不要为了代码美观去添加空格个或则换行, 这都是我踩过的大坑，目前的代码都是调试实际验证过的，请放心使用。

RCTFaceDetectView

这里是封装组件的主要代码

RCTFaceDetectView.h

// 在 js 组件中使用的回调方法, 必须使用 RCTBubblingEventBlock 来定义
@property(nonatomic,copy)RCTBubblingEventBlock onFaceCallback;
//传入的美颜参数
@property(nonatomic,copy)NSString *beautyLevel;

+ (instancetype)sharedInstance; // 单例
- (UIView *)initBeautifyFaceView;  // 初始化相机界面

//相机切换前后摄像头
- (void)switchCameraFrontOrBack;
//拍照
-(void)takeFaceDetectCamera:(RCTResponseSenderBlock)successBlock;

//设置美颜系数
-(void)setBeautyLevel:(NSString *)level;

// 停止相机捕捉
-(void)stopCamera;

此处需要注意

  • onFaceCallback 是在 js 组件中使用的回调方法，必须使用 RCTBubblingEventBlock 定义，beautyLevel 是 prop 传参，使用正常类型就可以

  • switchCameraFrontOrBack、takeFaceDetectCamera、stopCamera 是组件的功能方法，之前由于需求的原因，没有封装为组件的传参方法，可以自定义相关调用方法暴露到 js 中，目前 demo 中没有添加，暴露方法参考 中原生方法的封装。写法如下:

#pragma mark - 人脸检测相机：拍照回调拍照图片base64
RCT_REMAP_METHOD(takeFaceDetectCameraWithCallback,takeFaceDetectCamera:(RCTResponseSenderBlock)successBlock){
  
  dispatch_async(dispatch_get_main_queue(), ^{
    [[RCTFaceDetectView sharedInstance] takeFaceDetectCamera:successBlock];
  });
}

#pragma mark - 人脸检测相机：前后摄像头切换
RCT_REMAP_METHOD(switchCameraFrontOrBack,switchCameraFrontOrBack){
  dispatch_async(dispatch_get_main_queue(), ^{
    [[RCTFaceDetectView sharedInstance] switchCameraFrontOrBack];
  });
}

#pragma mark - 人脸检测相机：美颜系数
RCT_REMAP_METHOD(setFilterLevel,setBeautyLevel:(float)level){
  dispatch_async(dispatch_get_main_queue(), ^{
    [[RCTFaceDetectView sharedInstance] setBeautyLevel: [NSString stringWithFormat:@"%f",level]];
  });
}

#pragma mark --停止视频流--
RCT_EXPORT_METHOD(stopFaceDetectCamera) {
   [[RCTFaceDetectView sharedInstance] stopCamera];
   [[RCTFaceDetectView sharedInstance] unobserveGlobalNotifications];
}

RCTFaceDetectView.m

要点介绍

如何获取到人脸相关的参数

需要实现ios的代理方法，如下

#pragma mark - AVCaptureMetadataOutputObjectsDelegate
- (void)captureOutput:(AVCaptureOutput *)captureOutput didOutputMetadataObjects:(NSArray *)metadataObjects fromConnection:(AVCaptureConnection *)connection {
  ...
}

metadataObjects 参数中即包含了面部个数以及面部在摄像头中的坐标位置。

如何绘制面部框

此处需要进行坐标转换，将面部在摄像头中的坐标转为在屏幕中的坐标，此处需要使用 transformedMetadataObjectForMetadataObject 方法，具体请查看代码

如何进行美颜

在 GPUImage 中使用 FSKGPUImageBeautyFilter 滤镜，常规写法。

RCTFaceDetectViewManager

将 RCTFaceDetectView 封装的原生组件，暴露到 js 层

更多内容，运行 demo，阅读代码

https://juejin.cn/post/6978297307733164068

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

nativereactstrongdivhttpsReact

有关记录--react native 封装人脸 检测、美颜组件的更多相关文章

  1. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  2. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  3. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  4. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  5. Ruby 守护进程导致 ActiveRecord 记录器 IOError - 2

    我目前正在用Ruby编写一个项目，它使用ActiveRecordgem进行数据库交互，我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录，因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame

  6. ruby-on-rails - 在 Rails 中更高效地查找或创建多条记录 - 2

    我有一个应用需要发送用户事件邀请。当用户邀请friend(用户)参加事件时，如果尚不存在将用户连接到该事件的新记录，则会创建该记录。我的模型由用户、事件和events_user组成。classEventdefinvite(user_id,*args)user_id.eachdo|u|e=EventsUser.find_or_create_by_event_id_and_user_id(self.id,u)e.save!endendend用法Event.first.invite([1,2,3])我不认为以上是完成我的任务的最有效方法。我设想了一种方法，例如Model.find_or_cr

  7. ruby - 在模块/类之间共享全局记录器 - 2

    在许多ruby​​类之间共享记录器实例的最佳(正确)方法是什么？现在我只是将记录器创建为全局$logger=Logger.new变量，但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么？我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题？ 最佳答案 在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..

  8. ruby - Sinatra 中的全局救援和日志记录异常 - 2

    如何在出现异常时指定全局救援，如果您将Sinatra用于API或应用程序，您将如何处理日志记录？ 最佳答案 404可以在not_found方法的帮助下处理，例如:not_founddo'Sitedoesnotexist.'end500s可以通过调用带有block的错误方法来处理，例如:errordo"Applicationerror.Plstrylater."end错误的详细信息可以通过request.env中的sinatra.error访问，如下所示:errordo'Anerroroccured:'+request.env['si

  9. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录？ - 2

    例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果

  10. ruby - 检测由 RSpec、Ruby 运行的代码 - 2

    我想知道我的代码是否在rspec下运行。这可能吗？原因是我正在加载一些错误记录器，这些记录器在测试期间会被故意错误(expect{x}.toraise_error)弄得乱七八糟。我查看了我的ENV变量，没有(明显的)测试环境变量的迹象。 最佳答案 在spec_helper.rb的开头添加:ENV['RACK_ENV']='test'现在您可以在代码中检查RACK_ENV是否经过测试。 关于ruby-检测由RSpec、Ruby运行的代码，我们在StackOverflow上找到一个类似的问题

随机推荐