Camera 预览之SurfaceView、TextureView、GLSurfaceView（三）

今天介绍下GLSurfaceView如何使用。GLSurfaceView的包名是android.opengl，由此可以它是opengl的一个类，它也可以预览camera，而且在预览camera上有比SurfaceView独特的优势，可以做到数据和显示的分离，比如在没有屏幕的设备照样可以开预览实时直播。下面要介绍的这个例子是获取camera预览数据编码为视频流。但这篇文章只介绍如何使用GLSurfaceView去预览，关于获取预览数据编码视频流后续会介绍。

import javax.microedition.khronos.egl.EGLConfig;

import javax.microedition.khronos.opengles.GL10;

import android.content.Context;

import android.graphics.SurfaceTexture;

import android.opengl.GLES11Ext;

import android.opengl.GLES20;

import android.opengl.GLSurfaceView;

import android.opengl.GLSurfaceView.Renderer;

import android.util.AttributeSet;

import android.util.Log;

public class MyGLSurfaceView extends GLSurfaceView implements

                                    Renderer, SurfaceTexture.OnFrameAvailableListener {

    private static final String TAG = "MyGLSurfaceView";

    private Context mContext;

    private SurfaceTexture mSurface;

    private int mTextureID = -1;

    private CameraDrawer mCameraDrawer;

    

    public CameraGLSurfaceView(Context context, AttributeSet attrs) {

        super(context, attrs);

        // TODO Auto-generated constructor stub

        mContext = context;

        setEGLContextClientVersion(2);

        setRenderer(this);

        setRenderMode(RENDERMODE_WHEN_DIRTY);

    }

    

    @Override

    public void onSurfaceCreated(GL10 gl, EGLConfig config) {

        // TODO Auto-generated method stub

        Log.i(TAG, "onSurfaceCreated...");

        mTextureID = createTextureID();

        mSurface = new SurfaceTexture(mTextureID);

        mSurface.setOnFrameAvailableListener(this);

        mCameraDrawer = new CameraDrawer(mTe
4000
xtureID);

        CameraWrapper.getInstance().doOpenCamera(null);

    }

    @Override

    public void onSurfaceChanged(GL10 gl, int width, int height) {

        // TODO Auto-generated method stub

        Log.i(TAG, "onSurfaceChanged..." + width + "/" + height);

        GLES20.glViewport(0, 0, width, height);

        if(!CameraWrapper.getInstance().isPreviewing()){

            CameraWrapper.getInstance().doStartPreview(mSurface);

        }

    }

    

    @Override

    public void onDrawFrame(GL10 gl) {

        // TODO Auto-generated method stub

        Log.i(TAG, "onDrawFrame...");

        GLES20.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);

        mSurface.updateTexImage();

        float[] mtx = new float[16];

        mSurface.getTransformMatrix(mtx);

        mCameraDrawer.drawSelf(mtx);

    }

    

    @Override

    public void onPause() {

        // TODO Auto-generated method stub

        super.onPause();

        CameraWrapper.getInstance().doStopCamera();

    }

    

    private int createTextureID() {

        int[] texture = new int[1];

        GLES20.glGenTextures(1, texture, 0);

        GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, texture[0]);

        GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,

                GL10.GL_TEXTURE_MIN_FILTER,GL10.GL_LINEAR);        

        GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,

                GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);

        GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,

                GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE);

        GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,

                GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE);

        return texture[0];

    }

    

    public SurfaceTexture getSurfaceTexture() {

        return mSurface;

    }

    

    @Override

    public void onFrameAvailable(SurfaceTexture surfaceTexture) {

        // TODO Auto-generated method stub

        Log.i(TAG, "onFrameAvailable...");

        this.requestRender();

    }

}

MyGLSurfaceView继承至GLSurfaceView，并实现Render接口，看下构造函数中的实现：

1、setEGLContextClientVersion 设置opengl的版本，这个必须要设置，如果不设置系统就不知道使用哪个版本的api来渲染，界面上就什么都不会显示。

2、setRenderer设置一个渲染器

3、setRenderMode设置渲染模式，支持2中模式，RENDERMODE_CONTINUOUSLY ，这个模式会一直渲染比较耗费资源。RENDERMODE_WHEN_DIRTY Surface创建的时候会去渲染，或是有数据的时候，即调用requestRender，才会去渲染，camera预览比较适合第二种模式。

走完构造，我的画布已经准备好，渲染器也初始化完，如何进行数据渲染呢，接下就该Render接口出场了。

这里实现了3个回掉onSurfaceCreated() onSurfaceChanged() onDrawFrame()

1、onSurfaceCreated里创建了纹理并绑定了一个ID，设置SurfaceTexture Frame Available的一个监听，通知有Render有数据需要渲染。构造mCameraDrawer，CameraDrawer很重要它是负责绘制的数据的一个类，下面会介绍。

2、onSurfaceChanged当Surface有变化的时候开启camera预览

3、onDrawFrame，调用updateTexImage，在画布上绘制当前帧数据。

到这里我们的绘画大师CameraDrawer就要登场了。

import java.nio.ByteBuffer;

import java.nio.ByteOrder;

import java.nio.FloatBuffer;

import java.nio.ShortBuffer;

import android.opengl.GLES11Ext;

import android.opengl.GLES20;

import android.opengl.Matrix;

public class CameraDrawer {

    private final String vertexShaderCode =

            "attribute vec4 vPosition;" +

            "attribute vec2 inputTextureCoordinate;" +

            "varying vec2 textureCoordinate;" +

            "void main()" +

            "{"+

                "gl_Position = vPosition;"+

                "textureCoordinate = inputTextureCoordinate;" +

            "}";

    private final String fragmentShaderCode =

            "#extension GL_OES_EGL_image_external : require\n"+

            "precision mediump float;" +

            "varying vec2 textureCoordinate;\n" +

            "uniform samplerExternalOES s_texture;\n" +

            "void main() {" +

            "  gl_FragColor = texture2D( s_texture, textureCoordinate );\n" +

            "}";

    private FloatBuffer vertexBuffer, textureVerticesBuffer;

    private ShortBuffer drawListBuffer;

    private final int mProgram;

    private int mPositionHandle;

    private int mTextureCoordHandle;

    private short drawOrder[] = { 0, 1, 2, 0, 2, 3 }; // order to draw vertices

    // number of coordinates per vertex in this array

    private static final int COORDS_PER_VERTEX = 2;

    private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex

    static float squareCoords[] = {

       -1.0f,  1.0f,

       -1.0f, -1.0f,

        1.0f, -1.0f,

        1.0f,  1.0f,

    };

    static float textureVertices[] = {

        0.0f, 1.0f,

        1.0f, 1.0f,

        1.0f, 0.0f,

        0.0f, 0.0f,

    };

    private int texture;

    public CameraDrawer(int texture)

    {

        this.texture = texture;

        // initialize vertex byte buffer for shape coordinates

        ByteBuffer bb = ByteBuffer.allocateDirect(squareCoords.length * 4);

        bb.order(ByteOrder.nativeOrder());

        vertexBuffer = bb.asFloatBuffer();

        vertexBuffer.put(squareCoords);

        vertexBuffer.position(0);

        // initialize byte buffer for the draw list

        ByteBuffer dlb = ByteBuffer.allocateDirect(drawOrder.length * 2);

        dlb.order(ByteOrder.nativeOrder());

        drawListBuffer = dlb.asShortBuffer();

        drawListBuffer.put(drawOrder);

        drawListBuffer.position(0);

        ByteBuffer bb2 = ByteBuffer.allocateDirect(textureVertices.length * 4);

        bb2.order(ByteOrder.nativeOrder());

        textureVerticesBuffer = bb2.asFloatBuffer();

        textureVerticesBuffer.put(textureVertices);

        textureVerticesBuffer.position(0);

        int vertexShader    = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);

        int fragmentShader  = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);

        mProgram = GLES20.glCreateProgram();             // create empty OpenGL ES Program

        GLES20.glAttachShader(mProgram, vertexShader);   // add the vertex shader to program

        GLES20.glAttachShader(mProgram, fragmentShader); // add the fragment shader to program

        GLES20.glLinkProgram(mProgram);                  // creates OpenGL ES program executables

    }

    public void drawSelf(float[] mtx)

    {

        GLES20.glUseProgram(mProgram);

        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);

        GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, texture);

        // get handle to vertex shader's vPosition member

        mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");

        // Enable a handle to the triangle vertices

        GLES20.glEnableVertexAttribArray(mPositionHandle);

        // Prepare the <insert shape here> coordinate data

        GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, vertexBuffer);

        mTextureCoordHandle = GLES20.glGetAttribLocation(mProgram, "inputTextureCoordinate");

        GLES20.glEnableVertexAttribArray(mTextureCoordHandle);

        GLES20.glVertexAttribPointer(mTextureCoordHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, textureVerticesBuffer);

        GLES20.glDrawElements(GLES20.GL_TRIANGLES, drawOrder.length, GLES20.GL_UNSIGNED_SHORT, drawListBuffer);

        // Disable vertex array

        GLES20.glDisableVertexAttribArray(mPositionHandle);

        GLES20.glDisableVertexAttribArray(mTextureCoordHandle);

    }

    

    private  int loadShader(int type, String shaderCode){

        // create a vertex shader type (GLES20.GL_VERTEX_SHADER)

        // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)

        int shader = GLES20.glCreateShader(type);

        // add the source code to the shader and compile it

        GLES20.glShaderSource(shader, shaderCode);

        GLES20.glCompileShader(shader);

        return shader;

    }

    

    private float[] transformTextureCoordinates( float[] coords, float[] matrix)

    {          

       float[] result = new float[ coords.length ];        

       float[] vt = new float[4];      

       for ( int i = 0 ; i < coords.length ; i += 2 ) {

           float[] v = { coords[i], coords[i+1], 0 , 1  };

           Matrix.multiplyMV(vt, 0, matrix, 0, v, 0);

           result[i] = vt[0];

           result[i+1] = vt[1];

       }

       return result;

    }

}

通过回调onFrameAvailable，一帧一帧画预览数据。接下来看下Activity部分是怎么使用这view的。和之前介绍的区别在于，之前camera的open和preview都是在activity中完成，现在放在MyGLSurfaceView当中。

public class CameraActivity extends Activity{

    private static final String TAG = "CameraActivity";

    CameraGLSurfaceView glSurfaceView = null;

    float previewRate = -1f;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_camera);

        initUI();

        initViewParams();

        

        shutterBtn.setOnClickListener(new BtnListeners());

    }

    private void initUI(){

        glSurfaceView = (CameraGLSurfaceView)findViewById(R.id.camera_textureview);

    }

    private void initViewParams(){

        LayoutParams params = glSurfaceView.getLayoutParams();

        Point p = DisplayUtil.getScreenMetrics(this);

        params.width = p.x;

        params.height = p.y;

        previewRate = DisplayUtil.getScreenRate(this); //默认全屏的比例预览

        glSurfaceView.setLayoutParams(params);

    }

    

    @Override

    protected void onResume() {

        // TODO Auto-generated method stub

        super.onResume();

        glSurfaceView.bringToFront();

    }

    @Override

    protected void onPause() {

        // TODO Auto-generated method stub

        super.onPause();

        glSurfaceView.onPause();

    }

}

下面是预览截图：



到这camera三种预览方式就分析完毕了，后续我会深入到framework中给大家分析，camera的数据是如何渲染到GLSurfaceView上的。因为上述代码中并没有很明显的对buffer进行的操作。

原创不易，如果您觉得好，可以分享此公众号给你更多的人。