Android Camera Preview YUV format into RGB on the GPU

Converting on CPU sounds easy but I believe question is how to do it on GPU?

I did it recently in my project where I needed to get very fast QR code detection even when camera angle is 45 degrees to surface where code is printed, and it worked with great performance:

(following code is trimmed just to contain key lines, it is assumed that you have both Java and OpenGLES solid understanding)

1. Create a GL texture that will contain stored Camera image:

   int[] txt = new int[1];
   GLES20.glGenTextures(1,txt,0);
   GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,txt[0]);
   GLES20.glTextParameterf(... set min filter to GL_LINEAR );
   GLES20.glTextParameterf(... set mag filter to GL_LINEAR );
   GLES20.glTextParameteri(... set wrap_s to GL_CLAMP_TO_EDGE );
   GLES20.glTextParameteri(... set wrap_t to GL_CLAMP_TO_EDGE );
   

Pay attention that texture type is not GL_TEXTURE_2D. This is important, since only a GL_TEXTURE_EXTERNAL_OES type is supported by SurfaceTexture object, which will be used in the next step.

2. Setup SurfaceTexture:

   SurfaceTexture surfTex = new SurfaceTeture(txt[0]);
   surfTex.setOnFrameAvailableListener(this); 
   

Above assumes that 'this' is an object that implements 'onFrameAvailable' function.

    public void onFrameAvailable(SurfaceTexture st)
    {
            surfTexNeedUpdate = true;
            // this flag will be read in GL render pipeline
    }

3. Setup camera:

   Camera cam = Camera.open();
   cam.setPreviewTexture(surfTex);
   

This Camera API is deprecated if you target Android 5.0, so if you are, you have to use new CameraDevice API.

4. In your render pipeline, have following block to check if camera has frame available, and update surface texture with it. When surface texture is updated, will fill in GL texture that is linked with it.

   if( surfTexNeedUpdate )
   {
           surfTex.updateTexImage();
           surfTexNeedUpdate = false;
   }
   

5. To bind GL texture which has Camera -> SurfaceTeture link to, just do this in rendering pipe:

   GLES20.glBindTexture(GLES20.GL_TEXTURE_EXTERNAL_OS, txt[0]);
   

Goes without saying, you need to set current active texture.

6. In your GL shader program which will use above texture in it's fragment part, you must have first line:

   #extension GL_OES_EGL_imiage_external : require
   

Above is a must-have.

Texture uniform must be samplerExternalOES type:

    uniform samplerExternalOES u_Texture0;

Reading pixel from it is just like from GL_TEXTURE_2D type, and UV coordinates are in same range (from 0.0 to 1.0):

    vec4 px = texture2D(u_Texture0, v_UV);

7. Once you have your render pipeline ready to render a quad with above texture and shader, just start the camera:

   cam.startPreview();
   

8. You should see quad on your GL screen with live camera feed. Now you just need to grab the image with glReadPixels:

   GLES20.glReadPixels(0,0,width,height,GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, bytes);
   

Above line assumes that your FBO is RGBA, and that bytes is already initialized byte[] array to proper size, and that width and height are size of your FBO.

And voila! You have captured RGBA pixels from camera instead of converting YUV bytes received in onPreviewFrame callback...

You can also use RGB framebuffer object and avoid alpha if you don't need it.

It is important to note that camera will call onFrameAvailable in it's own thread which is not your GL render pipeline thread, thus you should not perform any GL calls in that function.