玩轉Android Camera開發(三):國內首發---使用GLSurfaceView預覽Camera 基礎拍照demo

標籤：版本號碼   glenable   request   處理   protect   .net   number   sha   detail   

GLSurfaceView是OpenGL中的一個類，也是能夠預覽Camera的，並且在預覽Camera上有其獨到之處。

獨到之處在哪？當使用Surfaceview無能為力、痛不欲生時就僅僅有使用GLSurfaceView了。它能夠真正做到讓Camera的資料和顯示分離，所以搞明確了這個，像Camera僅僅開預覽不顯示這都是小菜，妥妥的。

Android4.0的內建Camera原始碼是用SurfaceView預覽的。但到了4.2就換成了GLSurfaceView來預覽。

現在到了4.4又用了自家的TextureView。所以從中能夠窺探出新增TextureView的用意。

雖說Android4.2的Camera原始碼是用GLSurfaceView預覽的，可是進行了大量的封裝又封裝的。由於是OpenGL小白，真是看的不知所云。

俺滴要求不高，僅僅想弄個可拍照的摸清GLSurfaceView在預覽Camera上的使用流程。經過一番百度一無所獲。後來翻出去Google一大圈也沒發現可用的。

倒是非常多人都在用GLSurfaceView和Surfaceview同一時候預覽Camera，Surfaceview用來預覽資料，在上面又鋪了一層GLSurfaceView繪製一些資訊。無奈自己摸索，整出來的是能拍照也能得到資料。可是介面上不是一塊白板就是一塊黑板啥都不顯示。後來在stackoverflow最終找到了一個可用的連結。哈哈。蒼天啊。最終柳暗花明了！參考此連結，自己又改改摸索了一天才徹底搞定。之所以費這麼多時間是不明確OpenGL ES2.0的繪製基本流程，跟簡單的OpenGL的繪製還是稍有區別。

以下上原始碼:

一、CameraGLSurfaceView.java 此類繼承GLSurfaceView，並實現了兩個介面

package org.yanzi.camera.preview;import javax.microedition.khronos.egl.EGLConfig;import javax.microedition.khronos.opengles.GL10;import org.yanzi.camera.CameraInterface;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 CameraGLSurfaceView extends GLSurfaceView implements Renderer, SurfaceTexture.OnFrameAvailableListener {private static final String TAG = "yanzi";Context mContext;SurfaceTexture mSurface;int mTextureID = -1;DirectDrawer mDirectDrawer;public CameraGLSurfaceView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stubmContext = context;setEGLContextClientVersion(2);setRenderer(this);setRenderMode(RENDERMODE_WHEN_DIRTY);}@Overridepublic void onSurfaceCreated(GL10 gl, EGLConfig config) {// TODO Auto-generated method stubLog.i(TAG, "onSurfaceCreated...");mTextureID = createTextureID();mSurface = new SurfaceTexture(mTextureID);mSurface.setOnFrameAvailableListener(this);mDirectDrawer = new DirectDrawer(mTextureID);CameraInterface.getInstance().doOpenCamera(null);}@Overridepublic void onSurfaceChanged(GL10 gl, int width, int height) {// TODO Auto-generated method stubLog.i(TAG, "onSurfaceChanged...");GLES20.glViewport(0, 0, width, height);if(!CameraInterface.getInstance().isPreviewing()){CameraInterface.getInstance().doStartPreview(mSurface, 1.33f);}}@Overridepublic void onDrawFrame(GL10 gl) {// TODO Auto-generated method stubLog.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);mDirectDrawer.draw(mtx);}@Overridepublic void onPause() {// TODO Auto-generated method stubsuper.onPause();CameraInterface.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;}@Overridepublic void onFrameAvailable(SurfaceTexture surfaceTexture) {// TODO Auto-generated method stubLog.i(TAG, "onFrameAvailable...");this.requestRender();}}

關於這個類進行簡單說明:

1、Renderer這個介面裡有三個回調: onSurfaceCreated() onSurfaceChanged() onDrawFrame(),在onSurfaceCreated裡設定了GLSurfaceView的版本號碼: setEGLContextClientVersion(2); 假設沒這個設定是啥都畫不出來了，由於Android支援OpenGL ES1.1和2.0及最新的3.0，並且版本號碼間區別非常大。不告訴他版本號碼他不知道用哪個版本號碼的api渲染。

在設定setRenderer(this);後，再設定它的模式為RENDERMODE_WHEN_DIRTY。這個也非常關鍵，看api：

When renderMode is RENDERMODE_CONTINUOUSLY, the renderer is called repeatedly to re-render the scene. When renderMode is RENDERMODE_WHEN_DIRTY, the renderer only rendered when the surface is created, or when requestRender is called. Defaults to RENDERMODE_CONTINUOUSLY.

Using RENDERMODE_WHEN_DIRTY can improve battery life and overall system performance by allowing the GPU and CPU to idle when the view does not need to be updated. 

大意是RENDERMODE_CONTINUOUSLY模式就會一直Render，假設設定成RENDERMODE_WHEN_DIRTY。就是當有資料時才rendered或者主動調用了GLSurfaceView的requestRender.預設是連續模式，非常顯然Camera適合髒模式，一秒30幀，當有資料來時再渲染。

2、正因是RENDERMODE_WHEN_DIRTY所以就要告訴GLSurfaceView什麼時候Render，也就是啥時候進到onDrawFrame()這個函數裡。SurfaceTexture.OnFrameAvailableListener這個介面就幹了這麼一件事，當有資料上來後會進到

public void onFrameAvailable(SurfaceTexture surfaceTexture) {
// TODO Auto-generated method stub
Log.i(TAG, "onFrameAvailable...");
this.requestRender();
}

這裡，然後運行requestRender()。

3、網上有一些OpenGL ES的示範範例是在Activity裡實現了SurfaceTexture.OnFrameAvailableListener此介面，事實上這個無所謂。

不管是被誰實現。關鍵看在回調裡幹了什麼事。

4、與TextureView裡對照可知，TextureView預覽時由於實現了SurfaceTextureListener會自己主動建立SurfaceTexture。但在GLSurfaceView裡則要手動建立同一時候綁定一個紋理ID。

5、本文在onSurfaceCreated()裡開啟Camera，在onSurfaceChanged()裡開啟預覽，預設1.33的比例。

原因是相比前兩種預覽，此處SurfaceTexture建立須要一定時間。假設想要開預覽時由Activity發起，則要GLSurfaceView利用Handler將建立的SurfaceTexture傳遞給Activity。

二、DirectDrawer.java 此類非常關鍵，負責將SurfaceTexture內容繪製到螢幕上

package org.yanzi.camera.preview;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 DirectDrawer {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 DirectDrawer(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 draw(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);        //        textureVerticesBuffer.clear();//        textureVerticesBuffer.put( transformTextureCoordinates( textureVertices, mtx ));//        textureVerticesBuffer.position(0);        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;    }}

三、有了上面兩個類就完畢95%的工作，能夠將GLSurfaceView看成是有生命週期的。在onPause裡進行關閉Camera。在Activity裡複寫兩個方法:

@Overrideprotected void onResume() {// TODO Auto-generated method stubsuper.onResume();glSurfaceView.bringToFront();}@Overrideprotected void onPause() {// TODO Auto-generated method stubsuper.onPause();glSurfaceView.onPause();}

這個glSurfaceView.bringToFront();事實上不寫也中。

在布局裡寫入自己定義的GLSurfaceView就ok了:

    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content" >        <org.yanzi.camera.preview.CameraGLSurfaceView            android:id="@+id/camera_textureview"            android:layout_width="0dip"            android:layout_height="0dip" />    </FrameLayout>

CameraActivity裡僅僅負責UI部分，CameraGLSurfaceView負責開Camera、預覽。並調用DirectDrawer裡的draw()進行繪製。其它代碼就不上了。

注意事項:

1、在onDrawFrame()裡，假設不調用mDirectDrawer.draw(mtx);是啥都顯示不出來的！！。這是GLSurfaceView的特別之處。

為啥呢？由於GLSurfaceView不是Android親生的，而Surfaceview和TextureView是。所以得自己依照OpenGL ES的流程畫。

2、到底mDirectDrawer.draw(mtx)裡在哪擷取的Buffer眼下雜家還麼看太明確。貌似麼有請求buffer。而是依據GLSurfaceView裡建立的SurfaceTexture之前，產生的有個紋理ID。這個紋理ID一方面跟SurfaceTexture是綁定在一起的，還有一方面跟DirectDrawer綁定，而SurfaceTexture作渲染載體。

3、參考連結裡有,有人為瞭解決這個問題，給出了以下三段代碼:

@Overridepublic void onDrawFrame(GL10 gl){    float[] mtx = new float[16];    mSurface.updateTexImage();    mSurface.getTransformMatrix(mtx);        mDirectVideo.draw(mtx);}

 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; }

textureVerticesBuffer.clear();textureVerticesBuffer.put( transformTextureCoordinates( textureVertices, mtx ));textureVerticesBuffer.position(0);

我已經把代碼都融入到了此demo，僅僅只是在draw()方法裡麼有使用。

原因是使用之後。得到的預覽畫面反而是變形的。而不用的話是ok的。上面的代碼是得到SurfaceTexture的變換矩陣：mSurface.getTransformMatrix

然後將此矩陣傳遞給draw()。在draw的時候對textureVerticesBuffer作一個變化，然後再畫。

是未加這個矩陣變換效果時:

為使用了變換矩陣，劃片扭曲的還真說不上來咋扭曲的。但足以說明OpenGL ES在渲染效果上的強大，就是設定了個矩陣。不用一幀幀處理，就能得到不一樣顯示效果。

-----------------------------本文系原創。轉載請註明作者yanzi1225627

版本號碼號:PlayCamera_V3.0.0[2014-6-22].zip

CSDN下載連結:http://download.csdn.net/detail/yanzi1225627/7547263

百度雲端硬碟:

附個OpenGL ES簡明教程：http://www.apkbus.com/android-20427-1-1.html

玩轉Android Camera開發(三):國內首發---使用GLSurfaceView預覽Camera 基礎拍照demo