草庐IT

flutter camera调用摄像头拍照及遇到的问题

YML_426 2023-04-21 原文

注意!!!项目使用fishRedux框架,除状态管理和flutter原生不一样外,包的使用步骤是一样的

项目中的需求是前后置摄像头均可拍摄,当用前后置中的某一个拍摄成功后自动转换用另一个摄像头拍摄,同时有闪光灯、拍照按钮、转换摄像头三个功能键。

实现拍照功能

实现步骤如下:

1.引入camera包,注意包的版本,在changelog中查看更新日志,使用符合flutter最低版本的包版本

camera: ^0.10.0+2

2.申请相机权限

这里需要使用permission_handler权限管理包,判断是否有相机权限,有相机权限时可以直接进行初始化相机的操作,若没有则需要先申请相机权限。这里只贴代码,关于permission_handler的相关配置不做阐述。

//effect.dart文件
bool hasCameraPermission = await requestCameraPermission(); //获取当前是否有相机权限

//申请相机权限
Future<bool> requestCameraPermission() async {
  //获取当前的权限
  var status = await Permission.camera.status;
  if (status == PermissionStatus.granted) {
    print('已授权');
    //已经授权
    return true;
  } else {
    //未授权则发起一次申请
    status = await Permission.camera.request();
    print('未授权');
    if (status == PermissionStatus.granted) {
      return true;
    } else {
      return false;
    }
  }
}

 3.定义一些会使用到的变量

//state.dart文件
import 'package:camera/camera.dart';

List<CameraDescription> cameras; //代表所有的相机,例如前置、后置,因此是一个集合
CameraController controller; //相机的实例化对象
XFile afterImageFile; //后置拍照文件
XFile frontImageFile; //前置拍照文件

4.相机初始化

cameras数组是所有的相机列表,cameras[0]表示后置摄像头,cameras[1]表示前置摄像头。

//effect.dart文件
await availableCameras().then((value) async { //获取设备相机列表
    ctx.dispatch(PhotographPublishActionCreator.getCamera(value)); //这个方法相当于原生的setState()
    if(ctx.state.cameras != null){ //判断是否有可用摄像头
      ctx.state.controller = await CameraController(ctx.state.cameras[0], ResolutionPreset.medium); //实例化相机对象--后置
      ctx.state.controller.initialize().then((_) async { //相机初始化
        await ctx.dispatch(PhotographPublishActionCreator.getCameraController(ctx.state.controller));
        if (!ctx.state.controller.value.isInitialized) { //判断是否初始化成功
          return;
        }
      });
    }
});
//action.dart文件
import 'package:camera/camera.dart';
//获取设备相机列表
static Action getCamera(List<CameraDescription> camera) {
    return Action(PhotographPublishAction.getCamera,payload: camera);
}

//获取相机实例化对象
static Action getCameraController(CameraController controller) {
    return Action(PhotographPublishAction.getCameraController,payload: controller);
}
//reducer.dart文件
//获取设备相机列表
PhotographPublishState _getCamera(PhotographPublishState state, Action action) {
  final PhotographPublishState newState = state.clone();
  newState.cameras = action.payload;
  return newState;
}

//获取相机实例化对象
PhotographPublishState _getCameraController(PhotographPublishState state, Action action) {
  final PhotographPublishState newState = state.clone();
  newState.controller = action.payload;
  return newState;
}

 5.镜头预览

当相机初始化成功后可以在CameraPreview()进行镜头预览

//view.dart
Widget _cameraView(final size, final deviceRatio){
  if (!_state.controller?.value?.isInitialized ?? false) {
    return Container();
  }
  return Stack(
    children: [
      CameraPreview(_state.controller),
    ],
  );
}

 6.点击拍照

//effect.dart文件
//拍照按钮的点击方法
void _takePicture(Action action, Context<PhotographPublishState> ctx) async {
  takePicture(ctx).then((XFile afterFile) async {
    if(ctx.state.controller.value.isInitialized){
      ctx.dispatch(PhotographPublishActionCreator.getAfterImageFile(afterFile))
      if(afterFile != null){
        print('第一张图片保存在------${afterFile.path}---------');
      }
    }
  });
}

//拍照
Future<XFile> takePicture(Context<PhotographPublishState> ctx) async {
  if (!ctx.state.controller.value.isInitialized) { //相机初始化判断
    print('没有可用相机');
    return null;
  }
  if (ctx.state.controller.value.isTakingPicture) {
    return null;
  }
  try {
    final XFile afterFile = await ctx.state.controller.takePicture(); //后置拍照
    return afterFile;
  } on CameraException catch (e) {
    print("出现异常$e");
    return null;
  }
}
//action.dart文件
//获取后置拍摄的文件
static Action getAfterImageFile(XFile file) {
    return Action(PhotographPublishAction.getAfterImageFile,payload: file);
}
//reducer.dart文件
//获取后置拍摄的文件
PhotographPublishState _getAfterImageFile(PhotographPublishState state, Action action) {
  final PhotographPublishState newState = state.clone();
  newState.afterImageFile = action.payload;
  return newState;
}

 执行以上操作后afterImageFile即为拍摄成功后的图片文件

7.展示拍摄的图片

//view.dart文件
Widget _showContent(){
  return Container(
    child: _state.afterImageFile == null
        ? Container()
        : Container(
                width: MediaQuery.of(_context).size.width,
                child: Image.file(
                  File(_state.afterImageFile.path),
                  fit: BoxFit.cover,
                ),
          ),
  );
}

 以上就实现了最基本的拍摄功能。

闪光灯功能

实现闪光灯功能的其实只需要一行代码:ctx.state.controller.setFlashMode(FlashMode.torch)。setFlashMode的参数有很多,不同参数代表闪光灯的不同状态,off(关闭)、auto(根据环境决定)、always(拍照时打开闪光灯)、torch(常量),可以根据自己的需求进行选择

用一个变量管理闪光灯的开关状态,此处只展示takePicture()方法中关于闪光灯的部分,管理闪光灯的开关不做展示

//拍照
Future<XFile> takePicture(Context<PhotographPublishState> ctx) async {
  if (!ctx.state.controller.value.isInitialized) { //相机初始化判断
    print('没有可用相机');
    return null;
  }
  if (ctx.state.controller.value.isTakingPicture) {
    return null;
  }
  ctx.state.controller.setFlashMode(FlashMode.torch)
  try {
    final XFile afterFile = await ctx.state.controller.takePicture(); //后置拍照
    return afterFile;
  } on CameraException catch (e) {
    print("出现异常$e");
    return null;
  }
}

 转换摄像头

前面提到cameras[0]表示后置摄像头,cameras[1]表示前置摄像头,因此分别写两个方法initAfterCamera()初始化后置和initFrontCamera()初始化前置

//effect.dart文件
//初始化后置
void initAfterCamera(Context<PhotographPublishState> ctx) async {
  await availableCameras().then((value) async { //获取设备相机列表
    ctx.dispatch(PhotographPublishActionCreator.getCamera(value));
    if(ctx.state.cameras != null){ //判断是否有可用摄像头
      ctx.state.controller = await CameraController(ctx.state.cameras[0], ResolutionPreset.medium); //实例化相机对象--后置
      ctx.state.controller.initialize().then((_) async { //相机初始化
        await ctx.dispatch(PhotographPublishActionCreator.getCameraController(ctx.state.controller));
        if (!ctx.state.controller.value.isInitialized) { //判断是否初始化成功
          return;
        }
      });
    }
});
}

//初始化前置
void initFrontCamera(Context<PhotographPublishState> ctx) async {
  await availableCameras().then((value) async { //获取设备相机列表
    ctx.dispatch(PhotographPublishActionCreator.getCamera(value));
    if(ctx.state.cameras != null){ //判断是否有可用摄像头
      ctx.state.controller = await CameraController(ctx.state.cameras[1], ResolutionPreset.medium); //实例化相机对象--前置
      ctx.state.controller.initialize().then((_) async { //相机初始化
        await ctx.dispatch(PhotographPublishActionCreator.getCameraController(ctx.state.controller));
        if (!ctx.state.controller.value.isInitialized) {
          return;
        }
      });
    }
  });
}

 用一个bool变量afterCamera管理此时初始化的是前置还是后置,为true时展示后置,false展示前置。点击后需要改变afterCamera的值,改变值的方法在此处不展示。

//effect.dart
//切换镜头前后置的点击方法
void _changeCameraInit(Action action, Context<PhotographPublishState> ctx) async {
  ctx.state.afterCamera ? initAfterCamera(ctx) : initFrontCamera(ctx);
}

 遇到的问题

1.没有注意sdk最低版本,flutter创建的工程默认为16,需要改为21

2.直接使用的网上demo的版本号,导致一直报错。原因:flutter版本不匹配实际我的flutter版本是2.10,需要和camera的版本匹配,查看changelog最终使用0.10.0+2

有关flutter camera调用摄像头拍照及遇到的问题的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止,这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题,我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常,除了该文件不是公开可用的,而且我无法获得它的公共(public)URL。但是当我登录到S3时,我可以正常查看我的文件。为了使其公开可用,我将最后一行更改为obj.upload_file(file

  6. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  7. c# - 如何在 ruby​​ 中调用 C# dll? - 2

    如何在ruby​​中调用C#dll? 最佳答案 我能想到几种可能性:为您的DLL编写(或找人编写)一个COM包装器,如果它还没有,则使用Ruby的WIN32OLE库来调用它;看看RubyCLR,其中一位作者是JohnLam,他继续在Microsoft从事IronRuby方面的工作。(估计不会再维护了,可能不支持.Net2.0以上的版本);正如其他地方已经提到的,看看使用IronRuby,如果这是您的技术选择。有一个主题是here.请注意,最后一篇文章实际上来自JohnLam(看起来像是2009年3月),他似乎很自在地断言RubyCL

  8. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java,并成功地将它与另一个Java包一起使用,但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  9. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章? - 2

    我意识到这可能是一个非常基本的问题,但我现在已经花了几天时间回过头来解决这个问题,但出于某种原因,Google就是没有帮助我。(我认为部分问题在于我是一个初学者,我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI,但我仍然停留在这个问题上.我找到了一些关于多态关系的信息,但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  10. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试,那不是几乎涵盖了我对create_new_character和display_invent

随机推荐