webrtc android端接入滤镜和水印的坑

这阶段完成基于webrtc接入滤镜和水印功能：

首先我们来分析一下webrtc渲染模块，前面我们分析了webrtc视频数据底层之旅，由于公司代码在内网开发，所以博客主要记录自己的笔记；对于webrtc渲染模块，Android从SurfaceViewRender.java说起，SurfaceViewRender继承自SurfaceView,他实现了VideoRender.callbacks和VideoSink两个接口，这两个接口是用于底层数据的回调，SurfaceViewRender初始化中创建SurfaceEglRender.java，SurfaceEglRender.java继承与EglRender.java，那么重点来了，这个EglRender.java做了哪些工作呢？

1.EglRender.java创建了opengl渲染的egl环境，数据通过onFrame(VideoFrame frame)传到EglRender.java，然后将frame赋值给pendingFrame，在renderFrameOnRenderThread中进行绘制

2.绘制是通过RendererCommon.GlDrawer接口实现，此接口实现了三个绘制模式，OES,RGB,YUV.如果是纹理，则调用OES，是yuv数据，则采用YUV类型，GlRectDrawer类实现了此接口，这里webrtc默认有一套vert shader 和 frag shader,用静态 类Shader进行管理，如果对opengl和shader语法不熟悉的可以参考我之前的博客，这样，我们就把webrtc自带的渲染流程分析完了

那么如何添加滤镜和水印呢？

    我采用的方案是开源的GPUImage库，基础细节和webrtc自带的一致，但是如何添加滤镜，水印，美颜，这里我用到了帧缓冲区原理，按照顺序，先绘制camera或者解码的数据，用到MagicCameraInputFilter,然后添加滤镜Filter,最后绘制水印，这样的流程很好理解。GPUImage也提供了帧缓冲区的管理类，MagicBaseGroupFilter.java，想必思路大家已经很清晰了，编码模块原理类似

那么我现在来说说我接入遇到的坑:

1.本地渲染：  webrtc自带的shader初始化在drawoes或者drawyuv中生成然后绘制，我创建gpuimage渲染器时候，在主线程中创建，绘制在drawoes或者drawyuv始终绘制黑屏，通过对于egl shader以及所有状态属性都一样后发现opengl的创建和绘制需要在同一线程中调用

2.硬编码器：如果你对webrtc的帧率控制和质量控制有了解的话，你会发现编码器的质量，也就是宽高度会发生变化，这样编码器就会根据宽高的不同进行销毁并重新创建，所以对于编码器，你需要保存滤镜和水印的状态，在initEncodeInternal()初始化，release()释放，同时编码器的调用是从native调用的，注意opengl线程的问题

3.大小屏渲染模式问题：大小渲染模式分为fitxy,centercrop,centerinside,这三种模式是对矩阵的计算，webrtc本身自带了一种计算投影矩阵的方式，在EglRender.java中对drawMatrix进行变换，当然，webrtc只有一种centercrop模式，第一种方案，我在此基础上添加了其他两种，发现当模式相同，渲染正常，模式不同，渲染会相互影响；第二种方案：我通过改变GlRectDrawer.java的顶点坐标和纹理坐标进行改变，和第一种方式有同样的问题；第三种方案：我通过数据的宽高和渲染控件的比例进行计算，计算出不同模式下渲染的区域，此种方法无影响

4.水印的坑：我这边的需求要求是一个自定的水印，也就是说水印可以为任意自定义的控件，我把水印分析为一个图，也是一个纹理，接入过程中，这个纹理是需要和渲染的宽高进行缩放重合，编码器的纹理需要和视频实际宽高缩放重合，所以对于渲染控件的不同，需要对纹理进行缩放，且要按照渲染和编码的标准进行缩放之后在转为纹理；

当然还有其他方面的坑，总结：1.opengl渲染线程问题  2.帧缓冲区  3.矩阵的运算 4.自定义控件的布局的计算与layout等

希望大家给大家参考。