Flutter中与硬件相关的部分,一直都挺蛋疼的。方案基本上有两种,自己写,或者等出相关的库。

最近做的一个项目中,需要对相机做定制。有过相关模块开发经验的,就知道这种需求并不简单,况且是这种跨平台解决方案的初期。

需求来了,怎么办呢?那就只能硬着头皮上了。先去pub上找找,有没有可以使用的库。初步挑到两个库,一个camera,另一个是image_picker。

image_picker试了下,基本上就pass了,只能调用系统相机或者选择相册,相机相关部分,肯定是没法使用。相册部分倒是可以拿来使用。

camera试着运行了下demo,感觉这个库可以使用,直接将相机预览封装成一个flutter widget。我们可以很方便的在上面进行各种定制。

设计图上需要相机全屏显示,试着在demo上修改成全屏,悲剧出现了,风一般的拉伸效果。添加一个调取相机的页面,在退出相机页面后,demo置后台,切换到前台的时候,Android这边crash了,试了N多次,100%的crash,我勒个擦,谷歌官方的插件写的这么随意~

然后,重点来了,本文主要是解决这两个问题,一个是全屏显示的问题,另一个则是crash问题

先上一张Android端的拍照效果图:

Android端全屏拉伸问题

对于这种相机拉伸问题,做过相机定制相关的,都会知道是预览的分辨率选择错误导致的,知道这一点过后,修改起来就简单的多了。直接拉camer plugin的源码,Android的实现,相对还是比较简单,一个文件700来行代码。找到计算预览尺寸的方法。

    private void computeBestPreviewAndRecordingSize(
StreamConfigurationMap streamConfigurationMap, Size minPreviewSize, Size captureSize) {
....
}

考虑到以后camera插件升级的问题,直接单独新建一个文件进行最佳预览尺寸的计算,然后在调用处进行替换即可。

Android端前后台切换必现crash问题

Android端前后台切换的问题,查看log发现是resume过后崩溃的,直接撸源代码,发现插件监听了Activity的生命周期,在resume的时候进行了open操作。

  @Override
public void onActivityResumed(Activity activity) {
if (requestingPermission) {
requestingPermission = false;
return;
}
if (activity == CameraPlugin.this.activity) {
if (camera != null) {
camera.open(null);
}
}
}

问题来了,关键是,插件没有进行unregister操作,在退出相机页面过后,调用dispose方法,会将camera关闭,并且将cameraDevice置为null,其他生命周期回调中调用cameraDevice的都会crash。onActivityResumed调用camer.open也会crash。这些crash的根本原因是因为没有将回调unregister掉。了解这些过后,修改起来就简单了,在dispose的时候,将插件的生命周期回调给unregister掉。修改完成后,试下效果,果然都没有crash。

后话

相关代码段我就不贴出来了,关于全屏预览尺寸的计算,网上太多的资料了,将previewSize计算正确即可。第二个crash的问题,添加一个unregisterActivityLifecycleCallbacks即可。对于修改的地方,做好注释,后续升级插件合入的时候不错乱即可。

目前来看Flutter第三方真的很差,如果只是自己个人项目,或者一些偏向于数据展示的项目,可以试一下。但是对于商业项目,尤其是硬件依赖性比较强的,还是建议一段时间过后再看看。

大后话

谷歌官方的camera插件,如果只是自己使用的话,可以按照上面的方法去修改,如果想要用在商业项目上,还是劝三思。

谷歌官方camera插件Android部分,用的是camera2 API,这个API有什么问题呢?

  1. 从21开始支持,也就是说需要放弃百分之十几的份额;
  2. 上面版本不是最坑的,最坑的是什么呢?硬件厂商对camera2的支持程度,遇到几台机子,对camera2支持非常差,这些机子还是近一年比较新的机子(vivo x20a),获取到的最大预览分辨率非常低,拍出来的图片尺寸也对不上。

最后,重写了Android部分,直接采用camera API,支持版本从16开始,完全没啥问题,对硬件支持也都非常完美。谷歌这个坑埋的有点深,最开始考虑时间因素,结果花在插件上修改分辨率、修改crash、排查特殊机型问题的时间不少。

参考

  1. Android设备对新Camera2 API的支持问题:以华为M2为例

Flutter 相机定制的更多相关文章

  1. 用 Flutter 和 Firebase 轻松构建 Web 应用

    作者 / Very Good Ventures Team 我们 (Very Good Ventures 团队) 与 Google 合作,在今年的 Google I/O 大会上推出了 照相亭互动体验 ( ...

  2. 【温故知新】——BABYLON.js学习之路·前辈经验(一)

    前言:公司用BABYLON作为主要的前端引擎,同事们在长时间的项目实践中摸索到有关BABYLON的学习路径和问题解决方法,这里只作为温故知新. 一.快速学习BABYLON 1. 阅读Babylon[基 ...

  3. iOS写在定制相机之前

    问题 不是所有的拍照UIImagePickerController都能搞定,理由如下: 1.产品不整点幺蛾子,哪来体验创新 2.设计不整点幺蛾子,怎能体现用心 3.运营:这体验跟某宝某信咋不一样??? ...

  4. Flutter: 使用相机拍照

    文档 camera import 'dart:io'; import 'package:camera/camera.dart'; import 'package:flutter/material.da ...

  5. html 通过input video canvas 打开摄像头 定制相机

    在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...

  6. Flutter与Dart 入门

    Flutter简介 Flutter是google推出的,一个使用Dart语言开发的跨平台移动UI框架,通过自建绘制引擎,能高性能.高保真地进行Android和IOS开发. Flutter是什么 Flu ...

  7. 【Flutter】Flutter 一些常用库

    Flutter社区和资源传送门 新: 慕课网<Flutter入门与案例实战>   |   中文网<Flutter实战>电子书 字体图标生成 http://fluttericon ...

  8. Flutter的需要与原生交互的一些常用库

    [说明]由于这些库一直在更新,请自己选择合适的稳定版本下载. 另外如果发现有问题或者你有更好的库,欢迎留言告诉我. 谷歌官方的针对Dart语言的一些实用性的功能以及扩展的库 -- Quiver Qui ...

  9. Flutter 一些常用第三方库、插件

    网络请求 http ^0.12.0+2 https://pub.dev/packages/http https://github.com/dart-lang/http 该软件包包含一组高级函数和类,可 ...

随机推荐

  1. Mybatis框架三:DAO层开发、Mapper动态代理开发

    这里是最基本的搭建:http://www.cnblogs.com/xuyiqing/p/8600888.html 接下来做到了简单的增删改查:http://www.cnblogs.com/xuyiqi ...

  2. spring-boot(hello world)

    重拾程序,想不到从java开始,最近两周开搞web,从基本框架开始,仅做个人学习记录,遗漏之处望请海涵. 1.基本准备 开发环境win7: IDE  myeclipse Version: 2017 C ...

  3. org.springframework.dao.TransientDataAccessResourceException

    今天给大家分析一个在mybatis中遇见的错误 是什么原因导致这个错误信息呢,请看下面代码 再来看看下面找个 发现区别在哪里没有,没错就是#与$的区别. 1 #是将传入的值当做字符串的形式,eg:se ...

  4. 脚手架vue-cli系列四:vue-cli工程webpack的基本用法

    webpack的打包依赖于它的一个重要配置文件webpack.config.js,在这个配置文件中就可以指定所有在源代码编译过程中的工作了,就一个配置就可以与冗长的Gruntfile或者Gulpfil ...

  5. Android 性能优化-启动时间

    adb shell am start -W -n com.xxxx(包名)/xxx.xxxActivity(launch Activity)

  6. 使用crypt配置Basic Auth登录认证

    简介 Basic Auth用于服务端简单的登录认证,通常使用服务器Nginx.Apache本身即可完成.比如我们要限定某个域名或者页面必须输入用户名.密码才能登录,但又不想使用后端开发语言,此时Bas ...

  7. 自动生成getter setter

    如何使用java黑魔法给一个entity生成getter,setter方法? 由于java是一门静态语言,要给一个类动态添加方法,看似是不可能的.但牛B的程序员会让任何事情发生.我只知道有两种方式可以 ...

  8. Kafka文件存储机制那些事

    Kafka是什么 Kafka是最初由Linkedin公司开发,是一个分布式.分区的.多副本的.多订阅者,基于zookeeper协调的分布式日志系统(也可以当做MQ系统),常见可以用于web/nginx ...

  9. php手撸轻量级开发(二)框架加载

    先上图,有图有真相 1. 加载index文件 index文件是整个项目的唯一入口,任何请求进入项目都是走的index,只是带的参数不一样,然后再在index文件里加载其他文件,相当于把其他文件整个复制 ...

  10. Python 3 进阶 —— 使用 PyMySQL 操作 MySQL

    PyMySQL 是一个纯 Python 实现的 MySQL 客户端操作库,支持事务.存储过程.批量执行等. PyMySQL 遵循 Python 数据库 API v2.0 规范,并包含了 pure-Py ...