技术联盟

Android SurfaceTexture和GLSurfaceView做Camera预览

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,并实现了两个接口

  1. <span style=“font-family:Comic Sans MS;font-size:18px;”>package org.yanzi.camera.preview;
  2. import javax.microedition.khronos.egl.EGLConfig;
  3. import javax.microedition.khronos.opengles.GL10;
  4. import org.yanzi.camera.CameraInterface;
  5. import android.content.Context;
  6. import android.graphics.SurfaceTexture;
  7. import android.opengl.GLES11Ext;
  8. import android.opengl.GLES20;
  9. import android.opengl.GLSurfaceView;
  10. import android.opengl.GLSurfaceView.Renderer;
  11. import android.util.AttributeSet;
  12. import android.util.Log;
  13. public class CameraGLSurfaceView extends GLSurfaceView implements Renderer, SurfaceTexture.OnFrameAvailableListener {
  14.     private static final String TAG = “yanzi”;
  15.     Context mContext;
  16.     SurfaceTexture mSurface;
  17.     int mTextureID = –1;
  18.     DirectDrawer mDirectDrawer;
  19.     public CameraGLSurfaceView(Context context, AttributeSet attrs) {
  20.         super(context, attrs);
  21.         // TODO Auto-generated constructor stub
  22.         mContext = context;
  23.         setEGLContextClientVersion(2);
  24.         setRenderer(this);
  25.         setRenderMode(RENDERMODE_WHEN_DIRTY);
  26.     }
  27.     @Override
  28.     public void onSurfaceCreated(GL10 gl, EGLConfig config) {
  29.         // TODO Auto-generated method stub
  30.         Log.i(TAG, “onSurfaceCreated…”);
  31.         mTextureID = createTextureID();
  32.         mSurface = new SurfaceTexture(mTextureID);
  33.         mSurface.setOnFrameAvailableListener(this);
  34.         mDirectDrawer = new DirectDrawer(mTextureID);
  35.         CameraInterface.getInstance().doOpenCamera(null);
  36.     }
  37.     @Override
  38.     public void onSurfaceChanged(GL10 gl, int width, int height) {
  39.         // TODO Auto-generated method stub
  40.         Log.i(TAG, “onSurfaceChanged…”);
  41.         GLES20.glViewport(00, width, height);
  42.         if(!CameraInterface.getInstance().isPreviewing()){
  43.             CameraInterface.getInstance().doStartPreview(mSurface, 1.33f);
  44.         }
  45.     }
  46.     @Override
  47.     public void onDrawFrame(GL10 gl) {
  48.         // TODO Auto-generated method stub
  49.         Log.i(TAG, “onDrawFrame…”);
  50.         GLES20.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
  51.         GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
  52.         mSurface.updateTexImage();
  53.         float[] mtx = new float[16];
  54.         mSurface.getTransformMatrix(mtx);
  55.         mDirectDrawer.draw(mtx);
  56.     }
  57.     @Override
  58.     public void onPause() {
  59.         // TODO Auto-generated method stub
  60.         super.onPause();
  61.         CameraInterface.getInstance().doStopCamera();
  62.     }
  63.     private int createTextureID()
  64.     {
  65.         int[] texture = new int[1];
  66.         GLES20.glGenTextures(1, texture, 0);
  67.         GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, texture[0]);
  68.         GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
  69.                 GL10.GL_TEXTURE_MIN_FILTER,GL10.GL_LINEAR);
  70.         GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
  71.                 GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
  72.         GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
  73.                 GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE);
  74.         GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
  75.                 GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE);
  76.         return texture[0];
  77.     }
  78.     public SurfaceTexture _getSurfaceTexture(){
  79.         return mSurface;
  80.     }
  81.     @Override
  82.     public void onFrameAvailable(SurfaceTexture surfaceTexture) {
  83.         // TODO Auto-generated method stub
  84.         Log.i(TAG, “onFrameAvailable…”);
  85.         this.requestRender();
  86.     }
  87. }
  88. </span>

关于这个类进行简单说明:

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内容绘制到屏幕上

  1. <span style=“font-family:Comic Sans MS;font-size:18px;”>package org.yanzi.camera.preview;
  2. import java.nio.ByteBuffer;
  3. import java.nio.ByteOrder;
  4. import java.nio.FloatBuffer;
  5. import java.nio.ShortBuffer;
  6. import android.opengl.GLES11Ext;
  7. import android.opengl.GLES20;
  8. import android.opengl.Matrix;
  9. public class DirectDrawer {
  10.     private final String vertexShaderCode =
  11.             “attribute vec4 vPosition;” +
  12.             “attribute vec2 inputTextureCoordinate;” +
  13.             “varying vec2 textureCoordinate;” +
  14.             “void main()” +
  15.             “{“+
  16.                 “gl_Position = vPosition;”+
  17.                 “textureCoordinate = inputTextureCoordinate;” +
  18.             “}”;
  19.     private final String fragmentShaderCode =
  20.             “#extension GL_OES_EGL_image_external : require\n”+
  21.             “precision mediump float;” +
  22.             “varying vec2 textureCoordinate;\n” +
  23.             “uniform samplerExternalOES s_texture;\n” +
  24.             “void main() {“ +
  25.             ”  gl_FragColor = texture2D( s_texture, textureCoordinate );\n” +
  26.             “}”;
  27.     private FloatBuffer vertexBuffer, textureVerticesBuffer;
  28.     private ShortBuffer drawListBuffer;
  29.     private final int mProgram;
  30.     private int mPositionHandle;
  31.     private int mTextureCoordHandle;
  32.     private short drawOrder[] = { 012023 }; // order to draw vertices
  33.     // number of coordinates per vertex in this array
  34.     private static final int COORDS_PER_VERTEX = 2;
  35.     private final int vertexStride = COORDS_PER_VERTEX * 4// 4 bytes per vertex
  36.     static float squareCoords[] = {
  37.        –1.0f,  1.0f,
  38.        –1.0f, –1.0f,
  39.         1.0f, –1.0f,
  40.         1.0f,  1.0f,
  41.     };
  42.     static float textureVertices[] = {
  43.         0.0f, 1.0f,
  44.         1.0f, 1.0f,
  45.         1.0f, 0.0f,
  46.         0.0f, 0.0f,
  47.     };
  48.     private int texture;
  49.     public DirectDrawer(int texture)
  50.     {
  51.         this.texture = texture;
  52.         // initialize vertex byte buffer for shape coordinates
  53.         ByteBuffer bb = ByteBuffer.allocateDirect(squareCoords.length * 4);
  54.         bb.order(ByteOrder.nativeOrder());
  55.         vertexBuffer = bb.asFloatBuffer();
  56.         vertexBuffer.put(squareCoords);
  57.         vertexBuffer.position(0);
  58.         // initialize byte buffer for the draw list
  59.         ByteBuffer dlb = ByteBuffer.allocateDirect(drawOrder.length * 2);
  60.         dlb.order(ByteOrder.nativeOrder());
  61.         drawListBuffer = dlb.asShortBuffer();
  62.         drawListBuffer.put(drawOrder);
  63.         drawListBuffer.position(0);
  64.         ByteBuffer bb2 = ByteBuffer.allocateDirect(textureVertices.length * 4);
  65.         bb2.order(ByteOrder.nativeOrder());
  66.         textureVerticesBuffer = bb2.asFloatBuffer();
  67.         textureVerticesBuffer.put(textureVertices);
  68.         textureVerticesBuffer.position(0);
  69.         int vertexShader    = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
  70.         int fragmentShader  = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);
  71.         mProgram = GLES20.glCreateProgram();             // create empty OpenGL ES Program
  72.         GLES20.glAttachShader(mProgram, vertexShader);   // add the vertex shader to program
  73.         GLES20.glAttachShader(mProgram, fragmentShader); // add the fragment shader to program
  74.         GLES20.glLinkProgram(mProgram);                  // creates OpenGL ES program executables
  75.     }
  76.     public void draw(float[] mtx)
  77.     {
  78.         GLES20.glUseProgram(mProgram);
  79.         GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
  80.         GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, texture);
  81.         // get handle to vertex shader’s vPosition member
  82.         mPositionHandle = GLES20.glGetAttribLocation(mProgram, “vPosition”);
  83.         // Enable a handle to the triangle vertices
  84.         GLES20.glEnableVertexAttribArray(mPositionHandle);
  85.         // Prepare the <insert shape here> coordinate data
  86.         GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, vertexBuffer);
  87.         mTextureCoordHandle = GLES20.glGetAttribLocation(mProgram, “inputTextureCoordinate”);
  88.         GLES20.glEnableVertexAttribArray(mTextureCoordHandle);
  89. //        textureVerticesBuffer.clear();
  90. //        textureVerticesBuffer.put( transformTextureCoordinates( textureVertices, mtx ));
  91. //        textureVerticesBuffer.position(0);
  92.         GLES20.glVertexAttribPointer(mTextureCoordHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, textureVerticesBuffer);
  93.         GLES20.glDrawElements(GLES20.GL_TRIANGLES, drawOrder.length, GLES20.GL_UNSIGNED_SHORT, drawListBuffer);
  94.         // Disable vertex array
  95.         GLES20.glDisableVertexAttribArray(mPositionHandle);
  96.         GLES20.glDisableVertexAttribArray(mTextureCoordHandle);
  97.     }
  98.     private  int loadShader(int type, String shaderCode){
  99.         // create a vertex shader type (GLES20.GL_VERTEX_SHADER)
  100.         // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
  101.         int shader = GLES20.glCreateShader(type);
  102.         // add the source code to the shader and compile it
  103.         GLES20.glShaderSource(shader, shaderCode);
  104.         GLES20.glCompileShader(shader);
  105.         return shader;
  106.     }
  107.     private float[] transformTextureCoordinates( float[] coords, float[] matrix)
  108.     {
  109.        float[] result = new float[ coords.length ];
  110.        float[] vt = new float[4];
  111.        for ( int i = 0 ; i < coords.length ; i += 2 ) {
  112.            float[] v = { coords[i], coords[i+1], 0 , 1  };
  113.            Matrix.multiplyMV(vt, 0, matrix, 0, v, 0);
  114.            result[i] = vt[0];
  115.            result[i+1] = vt[1];
  116.        }
  117.        return result;
  118.     }
  119. }
  120. </span>

三、有了上面两个类就完成95%的工作,可以将GLSurfaceView看成是有生命周期的。在onPause里进行关闭Camera,在Activity里复写两个方法:

  1. <span style=“font-family:Comic Sans MS;font-size:18px;”>    @Override
  2.     protected void onResume() {
  3.         // TODO Auto-generated method stub
  4.         super.onResume();
  5.         glSurfaceView.bringToFront();
  6.     }
  7.     @Override
  8.     protected void onPause() {
  9.         // TODO Auto-generated method stub
  10.         super.onPause();
  11.         glSurfaceView.onPause();
  12.     }</span>

这个glSurfaceView.bringToFront();其实不写也中。在布局里写入自定义的GLSurfaceView就ok了:

  1. <span style=“font-family:Comic Sans MS;font-size:18px;”>    <FrameLayout
  2.         android:layout_width=“wrap_content”
  3.         android:layout_height=“wrap_content” >
  4.         <org.yanzi.camera.preview.CameraGLSurfaceView
  5.             android:id=“@+id/camera_textureview”
  6.             android:layout_width=“0dip”
  7.             android:layout_height=“0dip” />
  8.     </FrameLayout></span>

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、参考链接里有,有人为了解决问题,给出了下面三段代码:

@Override
public 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

转自:

http://blog.csdn.net/yanzi1225627/article/details/33339965

Share this:

码字很辛苦,转载请注明来自技术联盟《Android SurfaceTexture和GLSurfaceView做Camera预览》

评论