解决相机库CameraView多滤镜拍照错乱的BUG (二) : 解决BUG

2024-01-14 22:28
文章标签 解决 bug 拍照 错乱 滤镜 cameraview 机库

本文主要是介绍解决相机库CameraView多滤镜拍照错乱的BUG (二) : 解决BUG，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 前言

这段时间，在使用 natario1/CameraView 来实现带滤镜的预览、拍照、录像功能。
由于CameraView封装的比较到位，在项目前期，的确为我们节省了不少时间。
但随着项目持续深入，对于CameraView的使用进入深水区，逐渐出现满足不了我们需求的情况。
Github中的issues中，有些BUG作者一直没有修复。

那要怎么办呢 ? 项目迫切地需要实现相关功能，只能自己硬着头皮去看它的源码，去解决这些问题。
上一篇文章我们已经复现了CameraView在使用多滤镜MultiFilter的时候哦度会遇到拍照错乱的BUG，这篇文章我们来解决这个BUG。

以下源码解析基于CameraView 2.7.2

implementation("com.otaliastudios:cameraview:2.7.2")

为了在博客上更好的展示，本文贴出的代码进行了部分精简

在这里插入图片描述

2. CameraView滤镜预览的流程

关于CameraView带滤镜预览的流程，我们在Android 相机库CameraView源码解析 (四) : 带滤镜预览中已经详细说明过了，这里我们在来简单说明一下。
在这里插入图片描述

  • 首先在CamerView中，会调用View生命周期的onAttachedToWindow，去初始化GlCameraPreview
  • 在GlCameraPreview的onCreateView中，会初始化GLSurfaceView，并调用GLSurfaceView.setRenderer()将GLSurfaceView和Renderer建立关联
  • 然后，GlCameraPreview会回调onSurfaceCreate()和onSurfaceChanged()
  • 当我们手动调用requestRender后，会调用onDrawFrame()来重新渲染
  • 拍照实现了RendererFrameCallback回调，会在回调中的onRendererTextureCreated()、onRendererFilterChanged()、onRendererFrame()中，来实现带滤镜拍照功能

3. GLSurfaceView保存的图片尺寸的决定因素

Android中GLSurfaceView保存的图片尺寸，是和相机支持的尺寸有关，还是和GLSurfaceView的尺寸有关呢 ?

GLSurfaceView是Android中用于显示OpenGL渲染的视图，它的大小决定了OpenGL渲染的区域。
当相机的原始图像被用于OpenGL渲染时，会根据GLSurfaceView的尺寸进行缩放或裁剪。
当你从glSurfaceView中获取或保存图片时，获取到的是OpenGL渲染在这个视图上的内容，因此图片的尺寸会和GLSurfaceView的尺寸相同。

4. 预览过程中是怎么确定尺寸的

在预览过程中，也就是在GlCameraPreview类中，回调onSurfaceChanged()时，会传入宽高。

  • 会调用gl.glViewport()确定OpenGL在窗口中显示的区域范围
  • 会调用Filter.setSize()将宽高尺寸设置给Filter滤镜
  • dispatchOnSurfaceAvailable()中会调用crop()确定裁剪、缩放参数
public void onSurfaceChanged(GL10 gl, final int width, final int height) {gl.glViewport(0, 0, width, height);mCurrentFilter.setSize(width, height);if (!mDispatched) {dispatchOnSurfaceAvailable(width, height);mDispatched = true;} else if (width != mOutputSurfaceWidth || height != mOutputSurfaceHeight) {dispatchOnSurfaceSizeChanged(width, height);}
}

crop()中会计算得到mCropping、mCropScaleX、mCropScaleY，从而确定裁剪、缩放参数

protected void crop(@Nullable final CropCallback callback) {if (mInputStreamWidth > 0 && mInputStreamHeight > 0 && mOutputSurfaceWidth > 0&& mOutputSurfaceHeight > 0) {float scaleX = 1f, scaleY = 1f;AspectRatio current = AspectRatio.of(mOutputSurfaceWidth, mOutputSurfaceHeight);AspectRatio target = AspectRatio.of(mInputStreamWidth, mInputStreamHeight);if (current.toFloat() >= target.toFloat()) {// We are too short. Must increase height.scaleY = current.toFloat() / target.toFloat();} else {// We must increase width.scaleX = target.toFloat() / current.toFloat();}mCropping = scaleX > 1.02f || scaleY > 1.02f;mCropScaleX = 1F / scaleX;mCropScaleY = 1F / scaleY;getView().requestRender();}if (callback != null) callback.onCrop();
}

5. 拍照过程中是怎么确定尺寸的

在带滤镜拍照过程中，也就是在SnapshotGlPictureRecorder中调用take()方法的时候，会实现RendererFrameCallback回调接口。

public void take() {mPreview.addRendererFrameCallback(new RendererFrameCallback() {@RendererThreadpublic void onRendererTextureCreated(int textureId) {SnapshotGlPictureRecorder.this.onRendererTextureCreated(textureId);}@RendererThread@Overridepublic void onRendererFilterChanged(@NonNull Filter filter) {SnapshotGlPictureRecorder.this.onRendererFilterChanged(filter);}@RendererThread@Overridepublic void onRendererFrame(@NonNull SurfaceTexture surfaceTexture,int rotation, float scaleX, float scaleY) {mPreview.removeRendererFrameCallback(this);SnapshotGlPictureRecorder.this.onRendererFrame(surfaceTexture,rotation, scaleX, scaleY);}});
}

5.1 onRendererTextureCreated

在onRendererTextureCreated()中，会调用computeCrop来计算得到适合的尺寸，然后赋值给mResult.size

protected void onRendererTextureCreated(int textureId) {mTextureDrawer = new GlTextureDrawer(textureId);// Need to crop the size.Rect crop = CropHelper.computeCrop(mResult.size, mOutputRatio);mResult.size = new Size(crop.width(), crop.height());//...省略了无关代码...
}

5.2 onRendererFilterChanged

在onRendererFilterChanged中，会调用filter.copy()，拷贝一份滤镜，然后将拷贝的滤镜设置给GlTextureDrawer

mTextureDrawer.setFilter(filter.copy());

6. Filter.copy

我们再来看一下Filter.copy的逻辑

6.1 BaseFilter.copy

BaseFilter中，内部调用了getClass().newInstance()来反射得到一个新的BaseFilter，并赋值了Size，如果实现了OneParameterFilter或TwoParameterFilter接口，还会给拷贝相关的参数过来。

protected Size size;@Override
public void setSize(int width, int height) {size = new Size(width, height);
}public final BaseFilter copy() {BaseFilter copy = onCopy();if (size != null) {copy.setSize(size.getWidth(), size.getHeight());}if (this instanceof OneParameterFilter) {((OneParameterFilter) copy).setParameter1(((OneParameterFilter) this).getParameter1());}if (this instanceof TwoParameterFilter) {((TwoParameterFilter) copy).setParameter2(((TwoParameterFilter) this).getParameter2());}return copy;
}protected BaseFilter onCopy() {try {return getClass().newInstance();} catch (IllegalAccessException e) {throw new RuntimeException("Filters should have a public no-arguments constructor.", e);} catch (InstantiationException e) {throw new RuntimeException("Filters should have a public no-arguments constructor.", e);}
}

6.2 MultiFilter.copy

MultiFilter中有一个filters滤镜列表，用来存储多个子滤镜。

  • setSize的时候，会赋值给size变量，并遍历filters列表调用maybeSetSize()
    • maybeSetSize()内部会根据filter取到state，如果size和state.size不同，就会将size赋值给state.size，并调用filter.size()将size赋值给filter，确保filter中的filter是最新的
  • copy的时候
    • 会新创建一个MultiFilter，并调用setSize()
    • 遍历filters列表，调用filter.copy()，并调用MultiFilter.addFilter()将拷贝的filter添加到MultiFilter中
final List<Filter> filters = new ArrayList<>();
final Map<Filter, State> states = new HashMap<>();
private Size size = null;@Override
public void setSize(int width, int height) {size = new Size(width, height);synchronized (lock) {for (Filter filter : filters) {maybeSetSize(filter);}}
}private void maybeSetSize(@NonNull Filter filter) {State state = states.get(filter);if (size != null && !size.equals(state.size)) {state.size = size;state.sizeChanged = true;filter.setSize(size.getWidth(), size.getHeight());}
}@Override
public Filter copy() {synchronized (lock) {MultiFilter copy = new MultiFilter();if (size != null) {copy.setSize(size.getWidth(), size.getHeight());}for (Filter filter : filters) {copy.addFilter(filter.copy());}return copy;}
}

7. 造成多滤镜拍照错乱的原因分析

上篇文章我们总结了下这个BUG，是跟CameraView的尺寸和摄像头选取的分辨率匹配有关。

  • 使用单个滤镜
    • 一切正常
  • 使用多个滤镜，预览正常，但是
    • 手机选用的摄像头分辨率比CameraView分辨率高 : 照片得到的画面会放大
    • 手机选用的摄像头分辨率比CameraView分辨率低 : 拍照得到的画面会缩小，会有黑边

结合我们上面分析了源码，那么为什么会导致这个BUG呢 ? 我们再来理一下逻辑

  • 预览的时候
    • onSurfaceChanged(width, height)
      • glViewport(0, 0, width, height) : 确定OpenGL窗口的显示范围
      • Filter.setSize(width, height) : 将宽高设置给Filter
  • 带滤镜拍照的时候
    • onRendererTextureCreated
      • computeCrop() : 确定裁剪尺寸，并赋值给mResult.size
    • onRendererFilterChanged()
      • filter.copy() : 拷贝滤镜，并赋值给GlTextureDrawer
        • 这个时候拷贝后的filter中的尺寸是预览时候的GlSurfaceView的宽高

再来打印下日志 (预览摄像头分辨率选用1080*1920，屏幕分辨率1080*2412)的情况下

11:02:27.349  I  CameraActivity onCreate
11:02:27.351  I  CameraActivity onStart
11:02:27.351  I  CameraActivity onResume
11:02:27.385  I  屏幕尺寸:width:1080 height:2412
11:02:27.385  I  CameraView尺寸:width:1080 height:2412
11:02:27.389  I  GlCameraPreview.onSurfaceCreated
11:02:27.389  I  GlCameraPreview.onSurfaceChanged width:1080 height:2412
11:02:27.495  I  选取的摄像头预览尺寸(setPreviewStreamSize): 1080x1920
11:02:27.622  I  MultiFilter FrameBufferCreated:CrossProcessFilter width:1080 height:2412
11:02:34.688  I  CameraActivity ---- 点击拍照(takePictureSnapshot) ----
11:02:34.712  I  SnapshotGlPictureRecorder onRendererTextureCreated size:860x1920
11:02:34.712  I  SnapshotGlPictureRecorder onRendererFilterChanged copyFilter.size:1080x2412
11:02:34.732  I  SnapshotGlPictureRecorder onRendererFrame->takeFrame size:860x1920 rotation:0 scaleX:0.79602 scaleY:1.0
11:02:34.758  I  MultiFilter FrameBufferCreated:CrossProcessFilter width:1080 height:2412
11:02:34.820  I  MultiFilter maybeDestroyFramebuffer

现在我们可以来解答这个BUG了

7.1 为什么会出现拍照错乱的情况 ?

根据这个逻辑，我们可以推测出，是带滤镜拍照的时候的filter宽高用的GlSurfaceView的宽高(比如1080x2316)，而实际上带滤镜拍照的EglSurface的宽高是mResult.size(通过computeCrop估算得到，比如1910x4096)，两者是不一致的，导致最终拍照出现了错乱。

public class CropHelper {public static Rect computeCrop(@NonNull Size currentSize, @NonNull AspectRatio targetRatio) {int currentWidth = currentSize.getWidth();int currentHeight = currentSize.getHeight();if (targetRatio.matches(currentSize, 0.0005F)) {return new Rect(0, 0, currentWidth, currentHeight);}AspectRatio currentRatio = AspectRatio.of(currentWidth, currentHeight);int x, y, width, height;if (currentRatio.toFloat() > targetRatio.toFloat()) {height = currentHeight;width = Math.round(height * targetRatio.toFloat());y = 0;x = Math.round((currentWidth - width) / 2F);} else {width = currentWidth;height = Math.round(width / targetRatio.toFloat());y = Math.round((currentHeight - height) / 2F);x = 0;}return new Rect(x, y, x + width, y + height);}
}

7.2 为什么预览时正常的，拍照才出现这个问题 ?

这个详见我的这篇文章 为什么相机库CameraView预览和拍照的效果不一致 ?，本质是因为在CameraView中，GlSurfaceView是专门用来预览，而作者自己实现的EglSurface是用来拍照时候存储图像的，所以可能会出现预览效果和拍照的实际效果不一致的情况。

7.3 为什么使用单个滤镜的时候，没有这个问题，而使用多个滤镜就有问题了 ?

因为在MultiFilter中，如果有多个滤镜，需要通过创建一个新的GlTexture，并传入width和height，从而实现多个滤镜叠加。
而单个滤镜的情况下，是不需要多这一步操作的，所以单个滤镜情况下，直接就return了，没有走后面的逻辑，所以就不会有这个问题。

private void maybeCreateFramebuffer(@NonNull Filter filter, boolean isFirst, boolean isLast) {State state = states.get(filter);if (isLast) {state.sizeChanged = false;//单个滤镜的情况下，直接returnreturn;}//多个滤镜才会走这里的逻辑if (state.sizeChanged) {maybeDestroyFramebuffer(filter);state.sizeChanged = false;}if (!state.isFramebufferCreated) {state.isFramebufferCreated = true;state.outputTexture = new GlTexture(GLES20.GL_TEXTURE0,GLES20.GL_TEXTURE_2D,state.size.getWidth(),state.size.getHeight());state.outputFramebuffer = new GlFramebuffer();state.outputFramebuffer.attach(state.outputTexture);}
}

8 .其他

8.1 CameraView源码解析系列

Android 相机库CameraView源码解析 (一) : 预览-CSDN博客
Android 相机库CameraView源码解析 (二) : 拍照-CSDN博客
Android 相机库CameraView源码解析 (三) : 滤镜相关类说明-CSDN博客
Android 相机库CameraView源码解析 (四) : 带滤镜拍照-CSDN博客
Android 相机库CameraView源码解析 (五) : 保存滤镜效果-CSDN博客

这篇关于解决相机库CameraView多滤镜拍照错乱的BUG (二) : 解决BUG的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/606727。

相关文章

SpringBoot自定义注解如何解决公共字段填充问题

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3
阅读更多...
基于.NET编写工具类解决JSON乱码问题

基于.NET编写工具类解决JSON乱码问题

《基于.NET编写工具类解决JSON乱码问题》在开发过程中,我们经常会遇到JSON数据处理的问题,尤其是在数据传输和解析过程中,很容易出现编码错误导致的乱码问题,下面我们就来编写一个.NET工具类来解... 目录问题背景核心原理工具类实现使用示例总结在开发过程中，我们经常会遇到jsON数据处理的问题，尤其是
阅读更多...
前端bug调试的方法技巧及常见错误

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》：本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误
阅读更多...
Oracle登录时忘记用户名或密码该如何解决

Oracle登录时忘记用户名或密码该如何解决

《Oracle登录时忘记用户名或密码该如何解决》：本文主要介绍如何在Oracle12c中忘记用户名和密码时找回或重置用户账户信息,文中通过代码介绍的非常详细,对同样遇到这个问题的同学具有一定的参... 目录一、忘记账户：二、忘记密码：三、详细情况情况 1：1.1. 登录到数据库1.2. 查看当前用户信息1.
阅读更多...
springboot3.4和mybatis plus的版本问题的解决

springboot3.4和mybatis plus的版本问题的解决

《springboot3.4和mybatisplus的版本问题的解决》本文主要介绍了springboot3.4和mybatisplus的版本问题的解决,主要由于SpringBoot3.4与MyBat... 报错1:spring-boot-starter/3.4.0/spring-boot-starter-
阅读更多...
解决java.lang.NullPointerException问题(空指针异常)

解决java.lang.NullPointerException问题(空指针异常)

《解决java.lang.NullPointerException问题(空指针异常)》本文详细介绍了Java中的NullPointerException异常及其常见原因,包括对象引用为null、数组元... 目录Java.lang.NullPointerException(空指针异常)NullPointer
阅读更多...
Android开发中gradle下载缓慢的问题级解决方法

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问
阅读更多...
python安装whl包并解决依赖关系的实现

python安装whl包并解决依赖关系的实现

《python安装whl包并解决依赖关系的实现》本文主要介绍了python安装whl包并解决依赖关系的实现,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录一、什么是whl文件？二、我们为什么需要使用whl文件来安装python库？三、我们应该去哪儿下
阅读更多...
MySQL安装时initializing database失败的问题解决

MySQL安装时initializing database失败的问题解决

《MySQL安装时initializingdatabase失败的问题解决》本文主要介绍了MySQL安装时initializingdatabase失败的问题解决,文中通过图文介绍的非常详细,对大家的学... 目录问题页面：解决方法：问题页面：解决方法：1.勾选红框中的选项：2.将下图红框中全部改为英
阅读更多...
IDEA编译报错“java: 常量字符串过长”的原因及解决方法

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①：StringBui
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2