Android组件化架构热卖中
相信很多人都用过相机功能，也开发过简单调度相机功能。相机采集功能是图像信号输入的重要来源。
我们首先了解一下Android相机采集数据的格式一般为YUV格式的数据。YUV 表示三个分量， Y 表示 亮度（Luminance），即灰度值，UV表示色度（Chrominance），描述图像色彩和饱和度，指定颜色。YUV格式有YUV444、 YUV422 和 YUV420 三种，差别在于：
YUV444： 每个Y分量对应一组UV分量
YUV422：每两个Y分量共用一组UV分量
YUV420：每四个Y分量共用一组UV分量
一张图让你理解理解这三种比例的区别。
YUV解析图
而YUV打包时其排列也会有不同，可以查看此Android中的YUV格式解析。
如果你英文好的，可以看着篇，这篇更加详细介绍排列和RGB等转换计算Video Rendering with 8-Bit YUV Formats
为何使用YUV呢？
因为普通的RGB排布大小是width* height* 3,RGBA排布大小是width* height* 4,而YUV420的大小是width* height* 1.5，在移动端内存利用非常重要的情况下，在采集效果不变的情况下，YUV420的数据量会比RGB排列少将近一倍的大小，这有利于数据的采集速度和传输速度。
但是这样就会有另外一个问题出现，就是我们的屏幕是RGBA排列着色的，但是采集的数据却是YUV数据，那他是如何转换到屏幕上显示呢？这里需要利用Opengl调用GPU计算资源来渲染绘制，而比较高效的调用GPU的渲染的有SurfaceView和GLSurfaceView。但有一个差异GLSurfaceView是已经内置了单独线程用于更新，而SurfaceView可以开发者去自定义线程做任务管理。
然而我在一些demo中看到了别人是采集了数据之后，通过帧缓冲（FBO）获取到帧图，然后再做滤镜处理，为何要这样做呢？
是因为如果你使用摄像图采集帧图是yuv数据，Android中shader（glsl）需要使用GL_OES的扩展库来对数据做特殊处理，glsl文件是类C文件，不存在覆写和扩展。如果你想将图片和摄像头采集的数据做同一种转换，那就需要两个不同的文件，意思就是你需要维护两份shader的代码，这是一件很蛋痛的事。那要怎么做呢，最好的方式是先用GL_OES采集数据，然后通过帧缓冲来缓冲图转变为RGBA数据，这样再做滤镜操作，这样滤镜的shader就只需要一份就了事了。
这节主要介绍摄像头帧缓冲，先来一个总图吧。
摄像头帧缓冲.png
直接在native代码中分析吧，下面是创建摄像头采集和绘制的代码。
//surfaceView初始化的时候创建JNIEXPORT jint JNICALLJava_com_cangwang_magic_util_OpenGLJniLib_magicFilterCreate(JNIEnv *env, jobject obj,
jobject surface,jobject assetManager) { std::unique_lock<std::mutex> lock(gMutex); if(glCameraFilter){ //停止摄像头采集并销毁
glCameraFilter->stop(); delete glCameraFilter;
} //初始化native window
ANativeWindow *window = ANativeWindow_fromSurface(env,surface); //初始化app内获取数据管理
aAssetManager= AAssetManager_fromJava(env,assetManager); //初始化相机采集
glCameraFilter = new CameraFilter(window,aAssetManager); //创建
return glCameraFilter->create();
}//窗口大小设置，SurfaceView初始化后会触发一次JNIEXPORT void JNICALLJava_com_cangwang_magic_util_OpenGLJniLib_magicFilterChange(JNIEnv *env, jobject obj,jint width,jint height) { std::unique_lock<std::mutex> lock(gMutex); //视口变换，可视区域
if (!glCameraFilter){
ALOGE("change error, glCameraFilter is null"); return;
} //更改窗口大小
glCameraFilter->change(width,height);
}JNIEXPORT void JNICALLJava_com_cangwang_magic_util_OpenGLJniLib_magicFilterDraw(JNIEnv *env, jobject obj,jfloatArray matrix_,jstring address) { //获取摄像头矩阵
jfloat *matrix = env->GetFloatArrayElements(matrix_,NULL); //加锁
std::unique_lock<std::mutex> lock(gMutex); //如果为空，就判断错误，中断
if (!glCameraFilter){
ALOGE("draw error, glCameraFilter is null"); return;
} //摄像头采集画图
glCameraFilter->draw(matrix);
//释放矩阵数据
env->ReleaseFloatArrayElements(matrix_,matrix,0);
}初始化帧缓冲，涉及到视口的地方都需要设定长宽，这里glTexImage2D需要长宽，在SurfaceView的surfaceChanged的时候可以获取到surfaceview的长宽，来作为输入大小。
void CameraFilter::change(int width, int height) { //设置视口
glViewport(0,0,width,height);
mWidth = width;
mHeight = height; if (cameraInputFilter!= nullptr){ if (cameraInputFilter!= nullptr){ //触发输入大小更新
cameraInputFilter->onInputSizeChanged(width, height); //初始化帧缓冲
cameraInputFilter->initCameraFrameBuffer(width,height);
} if (filter != nullptr){ //初始化滤镜的大小
filter->onInputSizeChanged(width,height);
} else{
cameraInputFilter->destroyCameraFrameBuffers();
}
}
}void CameraInputFilter::initCameraFrameBuffer(int width, int height) { //比对大小
if ( mFrameWidth != width || mFrameHeight !=height){
destroyCameraFrameBuffers();
}
mFrameWidth = width;
mFrameHeight = height;
mFrameBuffer=0;
mFrameBufferTextures=0; //生成帧缓冲id
glGenFramebuffers(1,&mFrameBuffer); //生成纹理id
glGenTextures(1,&mFrameBufferTextures); //绑定纹理
glBindTexture(GL_TEXTURE_2D,mFrameBufferTextures); //纹理赋值为空，先纹理占位
glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA,width,height,0,GL_RGBA,GL_UNSIGNED_BYTE, nullptr); //设定纹理参数
glTexParameterf(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);
glTexParameterf(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_CLAMP_TO_EDGE); //绑定帧图
glBindFramebuffer(GL_FRAMEBUFFER,mFrameBuffer); //绑定纹理到帧图
glFramebufferTexture2D(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0,GL_TEXTURE_2D,mFrameBufferTextures,0); //切换回默认纹理
glBindTexture(GL_TEXTURE_2D,0); //切换回默认的帧缓冲
glBindFramebuffer(GL_FRAMEBUFFER,0);
}画帧图，并回调帧缓冲纹理id。这里帧图使用的是GL_TEXTURE_2D，但是采集图像的时候需要使用GL_TEXTURE_EXTERNAL_OES。
void CameraFilter::draw(GLfloat *matrix) { //清屏
glClearColor(0,0,0,0);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); if (cameraInputFilter != nullptr){// cameraInputFilter->onDrawFrame(mTextureId,matrix,VERTICES,TEX_COORDS);
//获取帧缓冲id
GLuint id = cameraInputFilter->onDrawToTexture(mTextureId,matrix); if (filter != nullptr)
//通过滤镜filter绘制
filter->onDrawFrame(id,matrix); //缓冲区交换
glFlush();
mEGLCore->swapBuffer();
}
}
GLuint CameraInputFilter::onDrawToTexture(const GLuint textureId, GLfloat *matrix) { //视口切换
glViewport(0,0,mFrameWidth,mFrameHeight); //绑定帧缓冲id
glBindFramebuffer(GL_FRAMEBUFFER,mFrameBuffer);
glUseProgram(mGLProgId); if (!mIsInitialized){ return (GLuint) NOT_INIT;
} //顶点缓冲
glVertexAttribPointer(mGLAttribPosition,2,GL_FLOAT,GL_FALSE,0,mGLCubeBuffer);
glEnableVertexAttribArray(mGLAttribPosition);
glVertexAttribPointer(mGLAttribTextureCoordinate,2,GL_FLOAT,GL_FALSE,0,mGLTextureBuffer);
glEnableVertexAttribArray(mGLAttribTextureCoordinate);
glUniformMatrix4fv(mTexturetransformMatrixlocation,1,GL_FALSE,matrix); //设置美颜等级
setBeautyLevelOnDraw(beautyLevel);
setTexelSize(mInputWidth,mInputHeight); //加载矩阵// glUniformMatrix4fv(mMatrixLoc,1,GL_FALSE,matrix);
if (textureId != NO_TEXTURE){ //绑定纹理
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_EXTERNAL_OES,textureId);
glUniform1i(mGLUniformTexture,0);
} //绘制图像（长方形）
glDrawArrays(GL_TRIANGLE_STRIP,0,4); //关闭顶点缓冲
glDisableVertexAttribArray(mGLAttribPosition);
glDisableVertexAttribArray(mGLAttribTextureCoordinate); //切换回默认纹理
glBindTexture(GL_TEXTURE_EXTERNAL_OES,0); //切换回默认帧缓冲
glBindFramebuffer(GL_FRAMEBUFFER,0); return mFrameBufferTextures;
}返回来的帧缓冲id，用于滤镜操作
再看一下shader中输出图像采集代码的转换，需要使用扩展库已经smplerExternalOES
#version 300 es//加入opengles扩展库#extension GL_OES_EGL_image_external_essl3 : requireprecision highp float;//来自摄像头预览的外部纹理uniform samplerExternalOES sTexture;in vec2 vTexCoord;out vec4 fragColor;void main() {
fragColor = texture(sTexture, vTexCoord);
作者：CangWang
链接：https://www.jianshu.com/p/04b58a8521e9
随时随地看视频
