首页 > 代码库 > Android Camera API/Camera2 API 相机预览及滤镜、贴纸等处理

Android Camera API/Camera2 API 相机预览及滤镜、贴纸等处理

Android Lollipop 增加了Camera2 API,并将原来的Camera API标记为废弃了。相对原来的Camera API来说,Camera2是重新定义的相机 API,也重构了相机 API 的架构。初看之下,可能会感觉Camera2使用起来比Camera要复杂,然而使用过后,你也许就会喜欢上使用Camera2了。无论是Camera还是Camera2,当相机遇到OpenGL就比较好玩了。

问题及思路

Camera的预览比较常见的是使用SurfaceHolder来预览,Camera2比较常见的是使用TextureView来预览。如果利用SurfaceHolder作为Camera2的预览,利用TextureView作为Camera的预览怎么做呢?实现起来可能也很简单,如果预览之前,要做美颜、磨皮或者加水印等等处理呢?实现后又如何保证使用Camera还是Camera2 API,使用SurfaceHolder还是TextureView预览,或者是直接编码不预览都可以迅速的更改呢?
本篇博客示例将数据、处理过程、预览界面分离开,使得无论使用Camera还是Camera2,只需关注相机自身。无论最终期望显示在哪里,都只需提供一个显示的载体。详细点说来就是:

  1. 以一个SurfaceTexture作为接收相机预览数据的载体,这个SurfaceTexture就是处理器的输入。
  2. SurfaceView、TextureView或者是Surface,提供SurfaceTexture或者Surface给处理器作为输出,来接收处理结果。
  3. 重点就是处理器了。处理器利用GLSurfaceView提供的GL环境,以相机数据作为输入,进行处理,处理的结果渲染到视图提供的输出点上,而不是GLSurfaceView内部的Surface上。当然,也可以不用GLSurfaceView,自己利用EGL来实现GL环境,问题也不大。具体实现就参照GLSurfaceView的源码来了。

处理效果

既然是用OpenGL来处理,索性利用OpenGL在图像上加两个其他图片,类似水印、贴纸的效果。随便两幅图贴上去,也不管好看不好看了,重点是功能。依次为先贴纸然后灰色滤镜,先灰色滤镜然后贴纸,只有贴纸。
技术分享技术分享技术分享

具体实现

根据上述思路来,主要涉及到以下问题:

  1. 使用GLSurfaceView创建GL环境,但是要让这个环境为离屏渲染服务,而不是直接渲染到GLSurfaceView的Surface上。在这其中还涉及到其他的一些问题,具体的问题,在下面再说。
  2. OpenGL 的使用。相关文章
  3. 务必使相机、处理过程、显示视图分离。以便能够自由的替换数据源、显示视图,只需要关注处理过程。

GLSurfaceView的利用

通常我们在Android中使用OpenGL环境,只需要在GLSurfaceView的Renderer接口中,调用GL函数就好了。这是因为GLSurfaceView在内部帮我们创建了GL环境,如果我们要抛开GLSurfaceView的话,只需要根据GLSurfaceView创建GL环境的过程在,做相同实现就可了,也就是EGL的使用。也就是说,OpenGL是离不开EGL的。EGL的使用步骤参考。
首先,我们使用GLSurfaceView,是希望利用它的GL环境,而不是它的视图,所以,我们需要改变它的渲染位置为我们期望的位置:

//这句是必要的,避免GLSurfaceView自带的Surface影响渲染
getHolder().addCallback(null);  
//指定外部传入的surface为渲染的window surface
setEGLWindowSurfaceFactory(new GLSurfaceView.EGLWindowSurfaceFactory() {
    @Override
    public EGLSurface createWindowSurface(EGL10 egl, EGLDisplay display, EGLConfig
        config, Object window) {
        //这里的surface由外部传入,可以为Surface、SurfaceTexture或者SurfaceHolder
        return egl.eglCreateWindowSurface(display,config,surface,null);
    }

    @Override
    public void destroySurface(EGL10 egl, EGLDisplay display, EGLSurface surface) {
        egl.eglDestroySurface(display, surface);
    }
});

另外,GLSurfaceView的GL环境是受View的状态影响的,比如View的可见与否,创建和销毁,等等。我们需要尽可能的让GL环境变得可控。因此,GLSurfaceView有两个方法一顶要暴露出来:

public void attachedToWindow(){
    super.onAttachedToWindow();
}

public void detachedFromWindow(){
    super.onDetachedFromWindow();
}

这里就又有问题了,因为GLSurfaceView的onAttachedToWindow和onDetachedFromWindow是需要保证它有parent的。所以,在这里必须给GLSurfaceView一个父布局

//自定义的GLSurfaceView
mGLView=new GLView(mContext);

//避免GLView的attachToWindow和detachFromWindow崩溃
new ViewGroup(mContext) {
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

    }
}.addView(mGLView);

另外,GLSurfaceView的其他设置:

setEGLContextClientVersion(2);          
setRenderer(TextureController.this);    
setRenderMode(RENDERMODE_WHEN_DIRTY);
setPreserveEGLContextOnPause(true);

这样,我们就可以愉快的使用GLSurfaceView来提供GL环境,给指定的Surface或者SurfaceTexture渲染图像了。

数据的接收

我们针对的是相机的处理,相机的图像数据和视频的图像数据,在Android中都可以直接利用SurfaceTexture来接收,所以我们可以提供一个SurfaceTexture给相机,然后将SurfaceTexture的数据拿出来,调整好方向,作为原始数据。具体处理和相机普通的预览类似,不同的是,我们是不希望直接显示到屏幕上的,而且在后续我们还会对这个图像做其他处理。所以我们时将相机的当前帧数据渲染到一个2d的texture上,作为后续处理过程的输入。所以在渲染时,需要绑定FrameBuffer。

@Override
public void draw() {
    boolean a=GLES20.glIsEnabled(GLES20.GL_DEPTH_TEST);
    if(a){
        GLES20.glDisable(GLES20.GL_DEPTH_TEST);
    }
    if(mSurfaceTexture!=null){
        mSurfaceTexture.updateTexImage();
        mSurfaceTexture.getTransformMatrix(mCoordOM);
        mFilter.setCoordMatrix(mCoordOM);
    }
    EasyGlUtils.bindFrameTexture(fFrame[0],fTexture[0]);
    GLES20.glViewport(0,0,width,height);
    mFilter.setTextureId(mCameraTexture[0]);
    mFilter.draw();
    Log.e("wuwang","textureFilter draw");
    EasyGlUtils.unBindFrameBuffer();

    if(a){
        GLES20.glEnable(GLES20.GL_DEPTH_TEST);
    }
}

上面所使用的mFilter就是用来渲染相机数据的Filter,该Filter所起的作用就是将相机数据的方向调整正确。然后通过绑定FrameBuffer并制定接受渲染的Texture,就可以将相机数据以一个正确的方向渲染到这个指定的Texture上了。
mFilter的顶点着色器为:

attribute vec4 vPosition;
attribute vec2 vCoord;
uniform mat4 vMatrix;
uniform mat4 vCoordMatrix;
varying vec2 textureCoordinate;

void main(){
    gl_Position = vMatrix*vPosition;
    textureCoordinate = (vCoordMatrix*vec4(vCoord,0,1)).xy;
}

其片元着色器为:

#extension GL_OES_EGL_image_external : require
precision mediump float;
varying vec2 textureCoordinate;
uniform samplerExternalOES vTexture;
void main() {
    gl_FragColor = texture2D( vTexture, textureCoordinate );
}

渲染相机数据到指定窗口上

在之前利用OpenGLES预览Camera的博客中,我们是直接将相机的数据“draw”到屏幕上了。在上面的处理中,我们在绘制之前调用了EasyGlUtils.bindFrameTexture(fFrame[0],fTexture[0]),这个方法是让我们后续的渲染,渲染到fTexture[0]这个纹理上。具体可以参考前面的博客FBO离屏渲染。
所以,通过上面的方式接收数据,然后利用自定义的GLSurfaceView指定渲染窗口并执行渲染后,我们依旧无法看到相机的预览效果。为了将相机的数据渲染到屏幕上,我们需要将fTexture[0]的内容再渲染到制定的窗口上。这个渲染比之前的接收相机数据,渲染到fTexture[0]上更为简单:

AFilter filter=new NoFilter(getResource());

...

void onDrawFrame(GL10 gl){
    GLES20.glViewPort(0,0,width,height)
    filter.setMatrix(matrix);
    filter.setTexture(fTexture[0]);
    filter.draw();
}

...

NoFilter的顶点着色器为:

attribute vec4 vPosition;
attribute vec2 vCoord;
uniform mat4 vMatrix;

varying vec2 textureCoordinate;

void main(){
    gl_Position = vMatrix*vPosition;
    textureCoordinate = vCoord;
}

片元着色器为:

precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D vTexture;
void main() {
    gl_FragColor = texture2D( vTexture, textureCoordinate );
}

没错,就是显示超简单的渲染一张图片的着色器,看过前面的博客的应该见过这段着色器代码。

增加滤镜、贴纸效果

如果仅仅是预览相机,我们这种做法简直就是多次一句,直接指定渲染窗口,渲染出来就万事大吉了。但是仅仅是这样的话,就太没意思了。而现在要做的就是相机有意思的起点了。很多有意思的相机应用,都可以通过这样的方式去实现,比如我们常见美妆、美颜、色彩处理(滤镜),甚至瘦脸、大眼,或者其他的让脸变胖的,以及一些给相机中的人带眼镜、帽子、发箍(这些一般需要做人脸识别特征点定位)等等等等。
通过上面的接收数据,和渲染相机数据到指定的窗口上,我们是已经可以看到渲染的结果了的。
然后我们要在渲染到指定窗口前,增加其他的Filter,为了保证易用性,我们增加一个GroupFilter,让其他的Filter,直接加入到GroupFilter中来完成处理。

public class GroupFilter extends AFilter{

   private Queue<AFilter> mFilterQueue;
   private List<AFilter> mFilters;
   private int width=0, height=0;
   private int size=0;

   public GroupFilter(Resources res) {
       super(res);
       mFilters=new ArrayList<>();
       mFilterQueue=new ConcurrentLinkedQueue<>();
   }

   @Override
   protected void initBuffer() {

   }

   public void addFilter(final AFilter filter){
       //绘制到frameBuffer上和绘制到屏幕上的纹理坐标是不一样的
       //Android屏幕相对GL世界的纹理Y轴翻转
       MatrixUtils.flip(filter.getMatrix(),false,true);
       mFilterQueue.add(filter);
   }

   public boolean removeFilter(AFilter filter){
       boolean b=mFilters.remove(filter);
       if(b){
           size--;
       }
       return b;
   }

   public AFilter removeFilter(int index){
       AFilter f=mFilters.remove(index);
       if(f!=null){
           size--;
       }
       return f;
   }

   public void clearAll(){
       mFilterQueue.clear();
       mFilters.clear();
       size=0;
   }

   public void draw(){
       updateFilter();
       textureIndex=0;
       if(size>0){
           for (AFilter filter:mFilters){
               GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fFrame[0]);
               GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
                       GLES20.GL_TEXTURE_2D, fTexture[textureIndex%2], 0);
               GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT,
                       GLES20.GL_RENDERBUFFER, fRender[0]);
               GLES20.glViewport(0,0,width,height);
               if(textureIndex==0){
                   filter.setTextureId(getTextureId());
               }else{
                   filter.setTextureId(fTexture[(textureIndex-1)%2]);
               }
               filter.draw();
               unBindFrame();
               textureIndex++;
           }
       }

   }

   private void updateFilter(){
       AFilter f;
       while ((f=mFilterQueue.poll())!=null){
           f.create();
           f.setSize(width,height);
           mFilters.add(f);
           size++;
       }
   }

   @Override
   public int getOutputTexture(){
       return size==0?getTextureId():fTexture[(textureIndex-1)%2];
   }

   @Override
   protected void onCreate() {

   }

   @Override
   protected void onSizeChanged(int width, int height) {
       this.width=width;
       this.height=height;
       updateFilter();
       createFrameBuffer();
   }

   //创建离屏buffer
   private int fTextureSize = 2;
   private int[] fFrame = new int[1];
   private int[] fRender = new int[1];
   private int[] fTexture = new int[fTextureSize];
   private int textureIndex=0;

   //创建FrameBuffer
   private boolean createFrameBuffer() {
       GLES20.glGenFramebuffers(1, fFrame, 0);
       GLES20.glGenRenderbuffers(1, fRender, 0);

       genTextures();
       GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fFrame[0]);
       GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, fRender[0]);
       GLES20.glRenderbufferStorage(GLES20.GL_RENDERBUFFER, GLES20.GL_DEPTH_COMPONENT16, width,
           height);
       GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
           GLES20.GL_TEXTURE_2D, fTexture[0], 0);
       GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT,
           GLES20.GL_RENDERBUFFER, fRender[0]);
//        int status = GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER);
//        if(status==GLES20.GL_FRAMEBUFFER_COMPLETE){
//            return true;
//        }
       unBindFrame();
       return false;
   }

   //生成Textures
   private void genTextures() {
       GLES20.glGenTextures(fTextureSize, fTexture, 0);
       for (int i = 0; i < fTextureSize; i++) {
           GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, fTexture[i]);
           GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height,
               0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);
           GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
           GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);
           GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
           GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
       }
   }

   //取消绑定Texture
   private void unBindFrame() {
       GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, 0);
       GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
   }


   private void deleteFrameBuffer() {
       GLES20.glDeleteRenderbuffers(1, fRender, 0);
       GLES20.glDeleteFramebuffers(1, fFrame, 0);
       GLES20.glDeleteTextures(1, fTexture, 0);
   }

}

将这个FilterGroup加入到已有的流程中,只需要将保持的相机数据的Texture作为FilterGroup的输入,然后将FilterGroup的输出作为渲染到指定窗口的Filter的输入即可:

 @Override
 public void onDrawFrame(GL10 gl) {
     if(isParamSet.get()){
         mCameraFilter.draw();
         mGroupFilter.setTextureId(mCameraFilter.getOutputTexture());
         mGroupFilter.draw();

         GLES20.glViewport(0,0,mWindowSize.x,mWindowSize.y);
         mShowFilter.setMatrix(SM);
         mShowFilter.setTextureId(mGroupFilter.getOutputTexture());
         mShowFilter.draw();
         if(mRenderer!=null){
             mRenderer.onDrawFrame(gl);
         }
         callbackIfNeeded();
     }
 }

然后将需要增加的其他的Filter,依次增加到GroupFilter中即可:

WaterMarkFilter filter=new WaterMarkFilter(getResources());
            filter.setWaterMark(BitmapFactory.decodeResource(getResources(),R.mipmap.logo));
filter.setPosition(300,50,300,150);
mController.addFilter(filter);
//mController.addFilter(new GrayFilter(getResources()));
mController.setFrameCallback(720, 1280, Camera2Activity.this);

其他

如果之前没有接触过OpenGL,这篇博客看下来可能也是云里雾里。主要是因为篇幅有限,加上之前的博客分享的也是从零开始学习OpenGLES的内容,所以在这篇博客中没有赘述,如有问题,可在评论区留言,或给我发邮件,共同探讨。另外,分享一下我们公司的项目——AiyaEffectSDK,可以快速实现各种好玩的美颜、贴纸效果,欢迎Star和Fork。

源码

所有的代码全部在一个项目中,托管在Github上——Android OpenGLES 2.0系列博客的Demo


欢迎转载,转载请保留文章出处。湖广午王的博客[http://blog.csdn.net/junzia/article/details/61207844]


<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

    Android Camera API/Camera2 API 相机预览及滤镜、贴纸等处理