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, 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值以达到显示中心正方形区域的效果
示意图
示例代码
//将预览控件和预览尺寸比例保持一致,避免拉伸 { 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使用流程
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, 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, 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 width, 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 width, 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)进行的绘制操作的流程图:
渲染yuv数据的renderer
2. 具体实现
坐标系介绍
android view坐标系
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, 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,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, 1.0, 1.0, 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, gles20.gl_luminance, utexture); createtexture(framewidth / 2, frameheight / 2, gles20.gl_luminance, 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, gles20.gl_float, false, 8, 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, * 1.0f, -1.0f, 1.0f, 0.0f, -> 和textureview预览相同 * -1.0f, 1.0f, 0.0f, 1.0f, * 1.0f, 1.0f 0.0f, 0.0f * * squarevertices coordvertices * -1.0f, -1.0f, 2.0f, 2.0f, * 1.0f, -1.0f, 2.0f, 0.0f, -> 和textureview预览相比,分割成了4 块相同的预览(左下,右下,左上,右上) * -1.0f, 1.0f, 0.0f, 2.0f, * 1.0f, 1.0f 0.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, 0, format, width, height, 0, format, 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 width, int height, 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, cropnv21, 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 width, int height) { int ysize = width * height; int framesize = ysize * 3 / 2; //取分量y值 system.arraycopy(src, 0, yarray, 0, 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, 0, 0, 0, framewidth, frameheight, gles20.gl_luminance, gles20.gl_unsigned_byte, ybuf); //u gles20.glactivetexture(gles20.gl_texture1); gles20.glbindtexture(gles20.gl_texture_2d, utexture[0]); gles20.gltexsubimage2d(gles20.gl_texture_2d, 0, 0, 0, framewidth >> 1, frameheight >> 1, gles20.gl_luminance, gles20.gl_unsigned_byte, ubuf); //v gles20.glactivetexture(gles20.gl_texture2); gles20.glbindtexture(gles20.gl_texture_2d, vtexture[0]); gles20.gltexsubimage2d(gles20.gl_texture_2d, 0, 0, 0, framewidth >> 1, frameheight >> 1, gles20.gl_luminance, gles20.gl_unsigned_byte, vbuf); //在数据绑定完成后进行绘制 gles20.gldrawarrays(gles20.gl_triangle_strip, 0, 4); } }
即可完成绘制。
四、加一层边框
有时候需求并不仅仅是圆形预览这么简单,我们可能还要为相机预览加一层边框
边框效果
一样的思路,我们动态地修改边框值,并进行重绘。
边框自定义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.cyan, 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, 0, getwidth(), getheight()), radius, 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,可以和本文实现技术的完美结合:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Flutter学习教程之Route跳转以及数据传递
下一篇: Flutter底部不规则导航的实现过程