微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Android多种方式实现相机圆形预览的示例代码

分类：Android作者：编程之家AI导航网

效果图如下：

Android多种方式实现相机圆形预览的示例代码


一、为预览控件设置圆角

为控件设置ViewOutlineProvider

public RoundTextureView(Context context,AttributeSet attrs) {
  super(context,attrs);
  setoutlineProvider(new ViewOutlineProvider() {
    @Override
    public void getoutline(View view,Outline outline) {
      Rect rect = new Rect(0,view.getMeasuredWidth(),view.getMeasuredHeight());
      outline.setRoundRect(rect,radius);
    }
  });
  setClipToOutline(true);
}

在需要时修改圆角值并更新

public void seTradius(int radius) {
  this.radius = radius;
}

public void turnRound() {
  invalidateOutline();
}

即可根据设置的圆角值更新控件显示的圆角大小。当控件为正方形，且圆角值为边长的一半，显示的就是圆形。

二、实现正方形预览

1. 设备支持1:1预览尺寸

首先介绍一种简单但是局限性较大的实现方式：将相机预览尺寸和预览控件的大小都调整为1:1。
一般Android设备都支持多种预览尺寸，以Samsung Tab S3为例

在使用Camera API时，其支持的预览尺寸如下：

2019-08-02 13:16:08.669 16407-16407/com.wsy.glcamerademo I/CameraHelper: supportedPreviewSize: 1920x1080
2019-08-02 13:16:08.669 16407-16407/com.wsy.glcamerademo I/CameraHelper: supportedPreviewSize: 1280x720
2019-08-02 13:16:08.669 16407-16407/com.wsy.glcamerademo I/CameraHelper: supportedPreviewSize: 1440x1080
2019-08-02 13:16:08.669 16407-16407/com.wsy.glcamerademo I/CameraHelper: supportedPreviewSize: 1088x1088
2019-08-02 13:16:08.670 16407-16407/com.wsy.glcamerademo I/CameraHelper: supportedPreviewSize: 1056x864
2019-08-02 13:16:08.670 16407-16407/com.wsy.glcamerademo I/CameraHelper: supportedPreviewSize: 960x720
2019-08-02 13:16:08.670 16407-16407/com.wsy.glcamerademo I/CameraHelper: supportedPreviewSize: 720x480
2019-08-02 13:16:08.670 16407-16407/com.wsy.glcamerademo I/CameraHelper: supportedPreviewSize: 640x480
2019-08-02 13:16:08.670 16407-16407/com.wsy.glcamerademo I/CameraHelper: supportedPreviewSize: 352x288
2019-08-02 13:16:08.670 16407-16407/com.wsy.glcamerademo I/CameraHelper: supportedPreviewSize: 320x240
2019-08-02 13:16:08.670 16407-16407/com.wsy.glcamerademo I/CameraHelper: supportedPreviewSize: 176x144

其中1:1的预览尺寸为：1088x1088。

在使用Camera2 API时，其支持的预览尺寸（其实也包含了PictureSize）如下：

2019-08-02 13:19:24.980 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 4128x3096
2019-08-02 13:19:24.980 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 4128x2322
2019-08-02 13:19:24.980 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 3264x2448
2019-08-02 13:19:24.980 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 3264x1836
2019-08-02 13:19:24.980 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 3024x3024
2019-08-02 13:19:24.980 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 2976x2976
2019-08-02 13:19:24.980 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 2880x2160
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 2592x1944
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 2560x1920
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 2560x1440
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 2560x1080
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 2160x2160
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 2048x1536
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 2048x1152
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 1936x1936
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 1920x1080
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 1440x1080
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 1280x960
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 1280x720
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 960x720
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 720x480
2019-08-02 13:19:24.981 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 640x480
2019-08-02 13:19:24.982 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 320x240
2019-08-02 13:19:24.982 16768-16768/com.wsy.glcamerademo I/Camera2Helper: getBestSupportedSize: 176x144

其中1:1的预览尺寸为：3024x3024、2976x2976、2160x2160、1936x1936。
只要我们选择1:1的预览尺寸，再将预览控件设置为正方形，即可实现正方形预览；
再通过设置预览控件的圆角为边长的一半，即可实现圆形预览。2. 设备不支持1:1预览尺寸的情况

选择1:1预览尺寸的缺陷分析

分辨率局限性
上述说到，我们可以选择1:1的预览尺寸进行预览，但是局限性较高，
可选择范围都很小。如果相机不支持1:1的预览尺寸，这个方案就不可行了。

资源消耗
以Samsung tab S3为例，该设备使用Camera2 API时，支持的正方形预览尺寸都很大，在进行图像处理等操作时将占用较多系统资源。

处理不支持1:1预览尺寸的情况

添加一个1:1尺寸的ViewGroup
将TextureView放入ViewGroup
设置TextureView的margin值以达到显示中心正方形区域的效果

Android多种方式实现相机圆形预览的示例代码


示意图

示例代码

//将预览控件和预览尺寸比例保持一致，避免拉伸
{
  FrameLayout.LayoutParams textureViewLayoutParams = (FrameLayout.LayoutParams) textureView.getLayoutParams();
  int newHeight = 0;
  int newWidth = textureViewLayoutParams.width;
  //横屏
  if (displayOrientation % 180 == 0) {
    newHeight = textureViewLayoutParams.width * previewSize.height / previewSize.width;
  }
  //竖屏
  else {
    newHeight = textureViewLayoutParams.width * previewSize.width / previewSize.height;
  }
  ////当不是正方形预览的情况下，添加一层ViewGroup限制View的显示区域
  if (newHeight != textureViewLayoutParams.height) {
    insertFrameLayout = new RoundFrameLayout(CoverByParentCameraActivity.this);
    int sideLength = Math.min(newWidth,newHeight);
    FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(sideLength,sideLength);
    insertFrameLayout.setLayoutParams(layoutParams);
    FrameLayout parentView = (FrameLayout) textureView.getParent();
    parentView.removeView(textureView);
    parentView.addView(insertFrameLayout);

    insertFrameLayout.addView(textureView);
    FrameLayout.LayoutParams newTextureViewLayoutParams = new FrameLayout.LayoutParams(newWidth,newHeight);
    //横屏
    if (displayOrientation % 180 == 0) {
      newTextureViewLayoutParams.leftMargin = ((newHeight - newWidth) / 2);
    }
    //竖屏
    else {
      newTextureViewLayoutParams.topMargin = -(newHeight - newWidth) / 2;
    }
    textureView.setLayoutParams(newTextureViewLayoutParams);
  }
}

三、使用GLSurfaceView进行自定义程度更高的预览

使用上面的方法操作已经可完成正方形和圆形预览，但是仅适用于原生相机，当我们的数据源并非是原生相机的情况时如何进行圆形预览？接下来介绍使用GLSurfaceView显示NV21的方案，完全是自己实现预览数据的绘制。

1. GLSurfaceView使用流程

Android多种方式实现相机圆形预览的示例代码


OpenGL渲染YUV数据流程

其中的重点是渲染器（Renderer）的编写，Renderer的介绍如下：

/**
 * A generic renderer interface.
 * <p>
 * The renderer is responsible for making OpenGL calls to render a frame.
 * <p>
 * GLSurfaceView clients typically create their own classes that implement
 * this interface,and then call {@link GLSurfaceView#setRenderer} to
 * register the renderer with the GLSurfaceView.
 * <p>
 *
 * <div class="special reference">
 * <h3>Developer Guides</h3>
 * <p>For more information about how to use OpenGL,read the
 * <a href="{@docRoot}guide/topics/graphics/opengl.html" rel="external nofollow" >OpenGL</a> developer guide.</p>
 * </div>
 *
 * <h3>Threading</h3>
 * The renderer will be called on a separate thread,so that rendering
 * performance is decoupled from the UI thread. Clients typically need to
 * communicate with the renderer from the UI thread,because that's where
 * input events are received. Clients can communicate using any of the
 * standard Java techniques for cross-thread communication,or they can
 * use the {@link GLSurfaceView#queueEvent(Runnable)} convenience method.
 * <p>
 * <h3>EGL Context Lost</h3>
 * There are situations where the EGL rendering context will be lost. This
 * typically happens when device wakes up after going to sleep. When
 * the EGL context is lost,all OpenGL resources (such as textures) that are
 * associated with that context will be automatically deleted. In order to
 * keep rendering correctly,a renderer must recreate any lost resources
 * that it still needs. The {@link #onSurfaceCreated(GL10,EGLConfig)} method
 * is a convenient place to do this.
 *
 *
 * @see #setRenderer(Renderer)
 */
public interface Renderer {
  /**
   * Called when the surface is created or recreated.
   * <p>
   * Called when the rendering thread
   * starts and whenever the EGL context is lost. The EGL context will typically
   * be lost when the Android device awakes after going to sleep.
   * <p>
   * Since this method is called at the beginning of rendering,as well as
   * every time the EGL context is lost,this method is a convenient place to put
   * code to create resources that need to be created when the rendering
   * starts,and that need to be recreated when the EGL context is lost.
   * Textures are an example of a resource that you might want to create
   * here.
   * <p>
   * Note that when the EGL context is lost,all OpenGL resources associated
   * with that context will be automatically deleted. You do not need to call
   * the corresponding "glDelete" methods such as glDeleteTextures to
   * manually delete these lost resources.
   * <p>
   * @param gl the GL interface. Use <code>instanceof</code> to
   * test if the interface supports GL11 or higher interfaces.
   * @param config the EGLConfig of the created surface. Can be used
   * to create matching pbuffers.
   */
  void onSurfaceCreated(GL10 gl,EGLConfig config);

  /**
   * Called when the surface changed size.
   * <p>
   * Called after the surface is created and whenever
   * the OpenGL ES surface size changes.
   * <p>
   * Typically you will set your viewport here. If your camera
   * is fixed then you Could also set your projection matrix here:
   * <pre class="prettyprint">
   * void onSurfaceChanged(GL10 gl,int width,int height) {
   *   gl.glViewport(0,width,height);
   *   // for a fixed camera,set the projection too
   *   float ratio = (float) width / height;
   *   gl.glMatrixMode(GL10.GL_PROJECTION);
   *   gl.glLoadIdentity();
   *   gl.glFrustumf(-ratio,ratio,-1,1,10);
   * }
   * </pre>
   * @param gl the GL interface. Use <code>instanceof</code> to
   * test if the interface supports GL11 or higher interfaces.
   * @param width
   * @param height
   */
  void onSurfaceChanged(GL10 gl,int height);

  /**
   * Called to draw the current frame.
   * <p>
   * This method is responsible for drawing the current frame.
   * <p>
   * The implementation of this method typically looks like this:
   * <pre class="prettyprint">
   * void onDrawFrame(GL10 gl) {
   *   gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
   *   //... other gl calls to render the scene ...
   * }
   * </pre>
   * @param gl the GL interface. Use <code>instanceof</code> to
   * test if the interface supports GL11 or higher interfaces.
   */
  void onDrawFrame(GL10 gl);
}

void onSurfaceCreated(GL10 gl,EGLConfig config)
在Surface创建或重建的情况下回调

void onSurfaceChanged(GL10 gl,int height)
在Surface的大小发生变化的情况下回调

void onDrawFrame(GL10 gl)
在这里实现绘制操作。当我们设置的renderMode为RENDERMODE_CONTINUOUSLY时，该函数将不断地执行；
当我们设置的renderMode为RENDERMODE_WHEN_DIRTY时，将只在创建完成和调用requestRender后才执行。一般我们选择RENDERMODE_WHEN_DIRTY渲染模式，避免过度绘制。

一般情况下，我们会自己实现一个Renderer，然后为GLSurfaceView设置Renderer，可以说，Renderer的编写是整个流程的核心步骤。以下是在void onSurfaceCreated(GL10 gl,EGLConfig config)进行的初始化操作和在void onDrawFrame(GL10 gl)进行的绘制操作的流程图：

Android多种方式实现相机圆形预览的示例代码


渲染YUV数据的Renderer

2. 具体实现

坐标系介绍

Android多种方式实现相机圆形预览的示例代码


Android View坐标系

Android多种方式实现相机圆形预览的示例代码


OpenGL世界坐标系

如图所示，和Android的View坐标系不同，OpenGL的坐标系是笛卡尔坐标系。
Android View的坐标系以左上角为原点，向右x递增，向下y递增；
而OpenGL坐标系以中心为原点，向右x递增，向上y递增。

着色器编写

/**
 * 顶点着色器
 */
private static String VERTEX_SHADER =
    "  attribute vec4 attr_position;\n" +
        "  attribute vec2 attr_tc;\n" +
        "  varying vec2 tc;\n" +
        "  void main() {\n" +
        "    gl_Position = attr_position;\n" +
        "    tc = attr_tc;\n" +
        "  }";

/**
 * 片段着色器
 */
private static String FRAG_SHADER =
    "  varying vec2 tc;\n" +
        "  uniform sampler2D ySampler;\n" +
        "  uniform sampler2D uSampler;\n" +
        "  uniform sampler2D vSampler;\n" +
        "  const mat3 convertMat = mat3( 1.0,1.0,-0.001,-0.3441,1.772,1.402,-0.7141,-0.58060);\n" +
        "  void main()\n" +
        "  {\n" +
        "    vec3 yuv;\n" +
        "    yuv.x = texture2D(ySampler,tc).r;\n" +
        "    yuv.y = texture2D(uSampler,tc).r - 0.5;\n" +
        "    yuv.z = texture2D(vSampler,tc).r - 0.5;\n" +
        "    gl_FragColor = vec4(convertMat * yuv,1.0);\n" +
        "  }";

内建变量解释

gl_Position

VERTEX_SHADER代码里的gl_Position代表绘制的空间坐标。由于我们是二维绘制，所以直接传入OpenGL二维坐标系的左下(-1,-1)、右下(1,-1)、左上(-1,1)、右上(1,1)，也就是{-1,1}

gl_FragColor

FRAG_SHADER代码里的gl_FragColor代表单个片元的颜色

其他变量解释

ySampler、uSampler、vSampler

分别代表Y、U、V纹理采样器

convertMat

根据以下公式：

R = Y + 1.402 (V - 128)
G = Y - 0.34414 (U - 128) - 0.71414 (V - 128)
B = Y + 1.772 (U - 128)

我们可得到一个YUV转RGB的矩阵

1.0,-0.344,1.77,1.403,-0.714,0

部分类型、函数的解释

vec3、vec4

分别代表三维向量、四维向量。

vec4 texture2D(sampler2D sampler,vec2 coord)

以指定的矩阵将采样器的图像纹理转换为颜色值；如：
texture2D(ySampler,tc).r获取到的是Y数据，
texture2D(uSampler,tc).r获取到的是U数据，
texture2D(vSampler,tc).r获取到的是V数据。

在Java代码中进行初始化

根据图像宽高创建Y、U、V对应的ByteBuffer纹理数据；
根据是否镜像显示、旋转角度选择对应的转换矩阵；

public void init(boolean isMirror,int rotateDegree,int frameWidth,int frameHeight) {
if (this.frameWidth == frameWidth
    && this.frameHeight == frameHeight
    && this.rotateDegree == rotateDegree
    && this.isMirror == isMirror) {
  return;
}
dataInput = false;
this.frameWidth = frameWidth;
this.frameHeight = frameHeight;
this.rotateDegree = rotateDegree;
this.isMirror = isMirror;
yArray = new byte[this.frameWidth * this.frameHeight];
uArray = new byte[this.frameWidth * this.frameHeight / 4];
vArray = new byte[this.frameWidth * this.frameHeight / 4];

int yFrameSize = this.frameHeight * this.frameWidth;
int uvFrameSize = yFrameSize >> 2;
yBuf = ByteBuffer.allocateDirect(yFrameSize);
yBuf.order(ByteOrder.nativeOrder()).position(0);

uBuf = ByteBuffer.allocateDirect(uvFrameSize);
uBuf.order(ByteOrder.nativeOrder()).position(0);

vBuf = ByteBuffer.allocateDirect(uvFrameSize);
vBuf.order(ByteOrder.nativeOrder()).position(0);
// 顶点坐标
squareVertices = ByteBuffer
    .allocateDirect(glutil.SQUARE_VERTICES.length * FLOAT_SIZE_BYTES)
    .order(ByteOrder.nativeOrder())
    .asFloatBuffer();
squareVertices.put(glutil.SQUARE_VERTICES).position(0);
//纹理坐标
if (isMirror) {
  switch (rotateDegree) {
    case 0:
      coordVertice = glutil.MIRROR_COORD_VERTICES;
      break;
    case 90:
      coordVertice = glutil.ROTATE_90_MIRROR_COORD_VERTICES;
      break;
    case 180:
      coordVertice = glutil.ROTATE_180_MIRROR_COORD_VERTICES;
      break;
    case 270:
      coordVertice = glutil.ROTATE_270_MIRROR_COORD_VERTICES;
      break;
    default:
      break;
  }
} else {
  switch (rotateDegree) {
    case 0:
      coordVertice = glutil.COORD_VERTICES;
      break;
    case 90:
      coordVertice = glutil.ROTATE_90_COORD_VERTICES;
      break;
    case 180:
      coordVertice = glutil.ROTATE_180_COORD_VERTICES;
      break;
    case 270:
      coordVertice = glutil.ROTATE_270_COORD_VERTICES;
      break;
    default:
      break;
  }
}
coordVertices = ByteBuffer.allocateDirect(coordVertice.length * FLOAT_SIZE_BYTES).order(ByteOrder.nativeOrder()).asFloatBuffer();
coordVertices.put(coordVertice).position(0);
}

在Surface创建完成时进行Renderer初始化

  private void initRenderer() {
  rendererReady = false;
  createGLProgram();

  //启用纹理
  GLES20.glEnable(GLES20.GL_TEXTURE_2D);
  //创建纹理
  createTexture(frameWidth,frameHeight,GLES20.GL_luminance,yTexture);
  createTexture(frameWidth / 2,frameHeight / 2,uTexture);
  createTexture(frameWidth / 2,vTexture);

  rendererReady = true;
}

其中createGLProgram用于创建OpenGL Program并关联着色器代码中的变量

 private void createGLProgram() {
 int programHandleMain = glutil.createShaderProgram();
 if (programHandleMain != -1) {
   // 使用着色器程序
   GLES20.gluseProgram(programHandleMain);
   // 获取顶点着色器变量
   int glPosition = GLES20.glGetAttribLocation(programHandleMain,"attr_position");
   int textureCoord = GLES20.glGetAttribLocation(programHandleMain,"attr_tc");

   // 获取片段着色器变量
   int ySampler = GLES20.glGetUniformlocation(programHandleMain,"ySampler");
   int uSampler = GLES20.glGetUniformlocation(programHandleMain,"uSampler");
   int vSampler = GLES20.glGetUniformlocation(programHandleMain,"vSampler");

   //给变量赋值
   /**
    * GLES20.GL_TEXTURE0 和 ySampler 绑定
    * GLES20.GL_TEXTURE1 和 uSampler 绑定
    * GLES20.GL_TEXTURE2 和 vSampler 绑定
    *
    * 也就是说 gluniform1i的第二个参数代表图层序号
    */
   GLES20.gluniform1i(ySampler,0);
   GLES20.gluniform1i(uSampler,1);
   GLES20.gluniform1i(vSampler,2);

   GLES20.glEnabLevertexAttribArray(glPosition);
   GLES20.glEnabLevertexAttribArray(textureCoord);

   /**
    * 设置Vertex Shader数据
    */
   squareVertices.position(0);
   GLES20.glVertexAttribPointer(glPosition,glutil.COUNT_PER_SQUARE_VERTICE,GLES20.GL_FLOAT,false,8,squareVertices);
   coordVertices.position(0);
   GLES20.glVertexAttribPointer(textureCoord,glutil.COUNT_PER_COORD_VERTICES,coordVertices);
 }
}

其中createTexture用于根据宽高和格式创建纹理

 private void createTexture(int width,int height,int format,int[] textureId) {
   //创建纹理
   GLES20.glGenTextures(1,textureId,0);
   //绑定纹理
   GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,textureId[0]);
   /**
    * {@link GLES20#GL_TEXTURE_WRAP_S}代表左右方向的纹理环绕模式
    * {@link GLES20#GL_TEXTURE_WRAP_T}代表上下方向的纹理环绕模式
    *
    * {@link GLES20#GL_REPEAT}：重复
    * {@link GLES20#GL_MIRRORED_REPEAT}：镜像重复
    * {@link GLES20#GL_CLAMP_TO_EDGE}：忽略边框截取
    *
    * 例如我们使用{@link GLES20#GL_REPEAT}：
    *
    *       squareVertices      coordVertices
    *       -1.0f,-1.0f,1.0f,*       1.0f,0.0f,->     和textureView预览相同
    *       -1.0f,1.0f        0.0f,0.0f
    *
    *       squareVertices      coordVertices
    *       -1.0f,2.0f,->     和textureView预览相比，分割成了4 块相同的预览（左下，右下，左上，右上）
    *       -1.0f,0.0f
    */
   GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_REPEAT);
   GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_WRAP_T,GLES20.GL_REPEAT);
   /**
    * {@link GLES20#GL_TEXTURE_MIN_FILTER}代表所显示的纹理比加载进来的纹理小时的情况
    * {@link GLES20#GL_TEXTURE_MAG_FILTER}代表所显示的纹理比加载进来的纹理大时的情况
    *
    * {@link GLES20#GL_NEAREST}：使用纹理中坐标最接近的一个像素的颜色作为需要绘制的像素颜色
    * {@link GLES20#GL_LINEAR}：使用纹理中坐标最接近的若干个颜色，通过加权平均算法得到需要绘制的像素颜色
    */
   GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_MIN_FILTER,GLES20.GL_NEAREST);
   GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_MAG_FILTER,GLES20.GL_LINEAR);
   GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D,format,height,GLES20.GL_UNSIGNED_BYTE,null);
 }

在Java代码中调用绘制

在数据源获取到时裁剪并传入帧数据

@Override
 public void onPreview(final byte[] nv21,Camera camera) {
 //裁剪指定的图像区域
 ImageUtil.cropNV21(nv21,this.squareNV21,previewSize.width,previewSize.height,cropRect);
 //刷新GLSurfaceView
 roundCameraGLSurfaceView.refreshFrameNV21(this.squareNV21);
}

NV21数据裁剪代码

/**
* 裁剪NV21数据
*
* @param originNV21 原始的NV21数据
* @param cropNV21  裁剪结果NV21数据，需要预先分配内存
* @param width   原始数据的宽度
* @param height   原始数据的高度
* @param left    原始数据被裁剪的区域的左边界
* @param top    原始数据被裁剪的区域的上边界
* @param right   原始数据被裁剪的区域的右边界
* @param bottom   原始数据被裁剪的区域的下边界
*/
 public static void cropNV21(byte[] originNV21,byte[] cropNV21,int left,int top,int right,int bottom) {
 int halfWidth = width / 2;
 int cropImageWidth = right - left;
 int cropImageHeight = bottom - top;

 //原数据Y左上
 int originalYLinestart = top * width;
 int targetYIndex = 0;

 //原数据UV左上
 int originalUVLinestart = width * height + top * halfWidth;

 //目标数据的UV起始值
 int targetUVIndex = cropImageWidth * cropImageHeight;

 for (int i = top; i < bottom; i++) {
   System.arraycopy(originNV21,originalYLinestart + left,cropNV21,targetYIndex,cropImageWidth);
   originalYLinestart += width;
   targetYIndex += cropImageWidth;
   if ((i & 1) == 0) {
     System.arraycopy(originNV21,originalUVLinestart + left,targetUVIndex,cropImageWidth);
     originalUVLinestart += width;
     targetUVIndex += cropImageWidth;
   }
 }
}

传给GLSurafceView并刷新帧数据

/**
* 传入NV21刷新帧
*
* @param data NV21数据
*/
public void refreshFrameNV21(byte[] data) {
 if (rendererReady) {
   yBuf.clear();
   uBuf.clear();
   vBuf.clear();
   putNV21(data,frameWidth,frameHeight);
   dataInput = true;
   requestRender();
 }
}

其中putNV21用于将NV21中的Y、U、V数据分别取出

/**
* 将NV21数据的Y、U、V分量取出
*
* @param src  nv21帧数据
* @param width 宽度
* @param height 高度
*/
private void putNV21(byte[] src,int height) {

 int ySize = width * height;
 int frameSize = ySize * 3 / 2;

 //取分量y值
 System.arraycopy(src,yArray,ySize);

 int k = 0;

 //取分量uv值
 int index = ySize;
 while (index < frameSize) {
   vArray[k] = src[index++];
   uArray[k++] = src[index++];
 }
 yBuf.put(yArray).position(0);
 uBuf.put(uArray).position(0);
 vBuf.put(vArray).position(0);
}

在执行requestRender后，onDrawFrame函数将被回调，在其中进行三个纹理的数据绑定并绘制

   @Override
   public void onDrawFrame(GL10 gl) {
   // 分别对每个纹理做激活、绑定、设置数据操作
   if (dataInput) {
     //y
     GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
     GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,yTexture[0]);
     GLES20.glTexSubImage2D(GLES20.GL_TEXTURE_2D,yBuf);

     //u
     GLES20.glActiveTexture(GLES20.GL_TEXTURE1);
     GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,uTexture[0]);
     GLES20.glTexSubImage2D(GLES20.GL_TEXTURE_2D,frameWidth >> 1,frameHeight >> 1,uBuf);

     //v
     GLES20.glActiveTexture(GLES20.GL_TEXTURE2);
     GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,vTexture[0]);
     GLES20.glTexSubImage2D(GLES20.GL_TEXTURE_2D,vBuf);
     //在数据绑定完成后进行绘制
     GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP,4);
   }
 }

即可完成绘制。

四、加一层边框

有时候需求并不仅仅是圆形预览这么简单，我们可能还要为相机预览加一层边框

Android多种方式实现相机圆形预览的示例代码


边框效果

一样的思路，我们动态地修改边框值，并进行重绘。
边框自定义view中的相关代码如下：

@Override
protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  if (paint == null) {
    paint = new Paint();
    paint.setStyle(Paint.Style.stroke);
    paint.setAntiAlias(true);
    SweepGradient sweepGradient = new SweepGradient(((float) getWidth() / 2),((float) getHeight() / 2),new int[]{Color.GREEN,Color.CYAN,Color.BLUE,Color.GREEN},null);
    paint.setShader(sweepGradient);
  }
  drawBorder(canvas,6);
}

private void drawBorder(Canvas canvas,int rectThickness) {
  if (canvas == null) {
    return;
  }
  paint.setstrokeWidth(rectThickness);
  Path drawPath = new Path();
  drawPath.addRoundRect(new RectF(0,getWidth(),getHeight()),radius,Path.Direction.CW);
  canvas.drawPath(drawPath,paint);
}

public void turnRound() {
  invalidate();
}

public void seTradius(int radius) {
  this.radius = radius;
}

五、完整Demo代码：

https://github.com/wangshengyang1996/GLCameraDemo

使用Camera API和Camera2 API并选择最接近正方形的预览尺寸
使用Camera API并为其动态添加一层父控件，达到正方形预览的效果
使用Camera API获取预览数据，使用OpenGL的方式进行显示最后，给大家推荐一个好用的Android免费离线人脸识别的sdk，可以和本文实现技术的完美结合： https://ai.arcsoft.com.cn/product/arcface.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

Android

相关推荐

Android 性能优化——之控件的优化
Android性能优化——之控件的优化 前面讲了图像的优化，接下来分享一下控件的性能优化，这里主要是面向自定义View的优化。 1、首先先说一下我们在自定义View中可能会犯的3个错误： 1）UselesscallstoonDraw()：我们知道调用View.invalidate()会触发Vi...
android TextView描边
前言 上一篇已经讲了如何实现textView中粗字体效果，里面主要重写了onDraw方法。 这一边讲一个进阶功能，实现textView的描边效果。 上效果图。 上代码： 原理讲解： 效果实现思路是：因为系统api只给paint设置strokewidth方法，却没有提供设置描边的色值的方法，而且我们通
GreenDao教程1
最近项目重构，涉及到了数据库和文件下载，发现GreenDao这个框架还是不错的。直接面向对象的，可以通过对对象的操作，实现数据的存储。 但是官网上的API是在不敢恭维，文档写的很糙，看了半天，才搞懂一系列的流程。在此进行一下纪念。免得那天需要修改的时候，一脸懵逼。直接上干货 官网地址：http://
WebView加载页面的两种方式——网络页面和本地页面
WebView加载页面的两种方式 一、加载网络页面 加载网络页面，是最简单的一种方式，只需要传入http的URL就可以，实现WebView加载网络页面 代码如下图： 二、加载本地页面 1、加载assets目录下的HTML页面： 加载assets目录的页面，大多数可以用来做页面数据的存储打包，这样可以
Android 全局使用第三方字体
给APP全局设置字体主要分为两个方面来介绍 一、给原生界面设置第三方字体 1、准备工作-下载第三方字体：传送门 将文件放入工程assets目录下。（一般个人习惯单独命名一个文件夹放字体文件，也可直接放入根目录，但记得改引用路径） 2、代码实现 a、自定义application，将第三方的字体，替换当
Android中粗字体
前言 最近UI大牛出了一版新的效果图，按照IOS的效果做的，页面里面有普通字体、中粗字体、加粗字体。对于IOS的小伙伴，分分钟搞定，但是对于Android开发的我，瞬间懵逼了。WTF！ 安卓只有粗和不粗呀，哪有中粗这回事。硬着头皮做出来一版之后，看到UI嫌弃的表情。深深的刺痛了我的完美心。说啥也要搞
TabLayout基本使用
前言 Tablayout继承自HorizontalScrollView，可以用作顶部标签效果、底部导航栏效果。一般多与ViewPager一起使用。 想直接了解如何实现短下滑效果的请看：TabLayout的高级用法 首先上几个效果图。 图： 使用方法 下面我们来看如何使用， 第一步，先在gradle引
AndroidStudio 各种异常情况处理大法
最近使用AndroidStudio出现了.java文件，显示为xml文件等问题，通过各种采坑之后，发现删除本地的缓存文件这个方法最管用，差不多可以根治95%的莫名其妙的问题。解决办法如下； 先将AS关闭，然后找到你电脑的目录C:\Users\用户名\.AndroidStudio3.5\system\
Android文件各种存储路径的比较
1、File cacheDir = context.getCacheDir(); 应用内部存储空间（数据文件私有）文件存储到这个路径下，不需要申请权限，当应用被卸载的时候，目录下的文件会被删除。 需要注意的是，这个文件的目录和应用的存储位置有关， 当应用被移动到外部存储设备的时候，文件的绝对路径也是
汉诺塔问题
汉诺塔问题 最近面试题遇到过汉诺塔的问题，当时竟然懵逼了，不会了！！大学研究的问题竟然都忘光了，于是抓紧捡起来。然而在网上看了看博客，发现非递归算法还真挺多。下面总结了一下。 一、递归算法 1、递归算法优缺点：递归算法算是最易于理解也是最容易实现的，但是对内存的消耗也是巨大的，因为递归需要系统堆栈来
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native