学习之路|基于exoplayer播放器的高斯模糊视频滤镜 exoplayer|滤镜|视频滤镜|播放器

最近项目需求，视频滤镜要用高斯模糊。奈何网上全是图片高斯模糊，且模糊的强度不够，效果并不是自己需要的。
于是，打算自己写一个。
exoPlayer播放器自带滤镜，所以用这个播放器来做。
滤镜的话，用到的是OpenGL来写（不会OpenGL，东拼西凑的）
先看效果吧

文章图片

文章图片

另外，暴露出4个参数，供需求用

radius	偏移量
blurX	X轴方向偏移次数
blurY	Y轴方向偏移次数
trans	亮度

原理大概是：
将原图层亮度调为原来的 trans倍(trans为自定义参数，默认0.005)，然后copy一层X轴方向偏移，copy一层Y轴偏移，偏移量为radius。
画个图解释一下

文章图片

【学习之路|基于exoplayer播放器的高斯模糊视频滤镜】然后图层多了，就可以达到高斯模糊的效果。

下面粘贴部分源代码
1.关键代码，滤镜

#GaussianBlurEffect #extension GL_OES_EGL_image_external : require precision mediump float; varying vec2 vTextureCoord; uniform samplerExternalOES sTexture; const float resolution=1024.0; const float radius = radius; vec2 dir = vec2(1.0,1.0); void main() { vec4 sum = vec4(0.0); vec2 tc = vTextureCoord; float blur = radius/resolution; float hstep = dir.x; float vstep = dir.y; int x = blurX; int y = blurY; for(int i = x; i > 0; i--){ for(int j = y; j > 0; j--){ sum = texture2D(sTexture, vec2(tc.x + float(i)*blur*hstep, tc.y + float(j)*blur*vstep)) *trans; sum = texture2D(sTexture, vec2(tc.x - float(i)*blur*hstep, tc.y + float(j)*blur*vstep)) *trans; sum = texture2D(sTexture, vec2(tc.x - float(i)*blur*hstep, tc.y - float(j)*blur*vstep)) *trans; sum = texture2D(sTexture, vec2(tc.x + float(i)*blur*hstep, tc.y - float(j)*blur*vstep)) *trans; } } vec4 cc= texture2D(sTexture,vTextureCoord ); gl_FragColor =vec4(sum.rgb, cc.a); }

代码中的radius, blurX, blurY, trans 对象，已在上面说明，可以改成固定值
顺手贴一段，无效果的滤镜代码用作参考对比

#NoEffect #extension GL_OES_EGL_image_external : require precision mediump float; varying vec2 vTextureCoord; uniform samplerExternalOES sTexture; void main() { gl_FragColor = texture2D(sTexture, vTextureCoord); }

然后通过OpenGL和Java绑定(具体绑定方法，不赘述，可以直接看Demo)

GLES20.glCreateProgram(); //创建 GLES20.glAttachShader(program, vertexShader); GLES20.glAttachShader(program, pixelShader);

exoPlayer是用textureView来显示视频，所以应该在xml文件中，加上textureView. (ImageView是一个开始播放的按钮)

然后是MainActivity的初始化，适当做了注释。后面没注释的，主要都是Activity生命周期播放器的操作

public class MainActivity extends AppCompatActivity {private View videoPlayerView; //播放器播放按钮Viewprivate TextureView textureView; //纹理播放视频用private SimpleExoPlayer player; //播放器private Handler mainHandler; private boolean isPlayer = false; private EGLUtils mEglUtils; //EGL工具类 private GLFramebuffer mFramebuffer; //滤镜代码，以及绑定和绘制的方法private String uri = "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); videoPlayerView = findViewById(R.id.video_player); mainHandler = new Handler(); textureView = findViewById(R.id.texture_view); textureView.setSurfaceTextureListener(new TextureView.SurfaceTextureListener() { @Override public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) { //初始化SurfaceTexture, 准备就绪 init(new Surface(surface),uri); }@Override public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) { //SurfaceTexture改变大小时调用 }@Override public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) { //SurfaceTexture摧毁时调用 return false; }@Override public void onSurfaceTextureUpdated(SurfaceTexture surface) { //SurfaceTexture更新时调用 } }); } public void init(Surface surface,String uri){ //Uri url = Uri.parse(Environment.getExternalStorageDirectory().getAbsolutePath() +"/HMSDK/video/1531383835814.mp4"); //本地指定视频 Uri url = Uri.parse(uri); //网络视频地址 DefaultBandwidthMeter bandwidthMeter = new DefaultBandwidthMeter(); TrackSelection.Factory videoTrackSelectionFactory = new AdaptiveTrackSelection.Factory(bandwidthMeter); TrackSelector trackSelector = new DefaultTrackSelector(videoTrackSelectionFactory); player = ExoPlayerFactory.newSimpleInstance(this, trackSelector); DataSource.Factory dataSourceFactory = new DefaultDataSourceFactory(this, Util.getUserAgent(this, "ExoPlayerTime"), bandwidthMeter); MediaSource videoSource = new ExtractorMediaSource.Factory(dataSourceFactory).createMediaSource(url, mainHandler,null); player.addVideoTiemListener(new VideoTimeListener() { @Override public Surface onSurface(Surface surface,int width,int height) { mEglUtils = new EGLUtils(); mEglUtils.initEGL(surface); mFramebuffer = new GLFramebuffer(); //滤镜对象 mFramebuffer.initFramebuffer(textureView.getWidth(), textureView.getHeight(), width, height); return new Surface(mFramebuffer.getSurfaceTexture()); }@Override public void onVideoTimeChanged(long time) {//每一帧调用一次 mFramebuffer.drawFrame(); mEglUtils.swap(); }@Override public void onRelease() { if(mEglUtils != null){ mEglUtils.release(); }} }); player.setVideoSurface(surface); player.prepare(videoSource); }public void playVideo(View view){ if(player.getContentPosition() >= player.getDuration()){ player.seekTo(0); } player.setPlayWhenReady(true); videoPlayerView.setVisibility(View.INVISIBLE); isPlayEnd(); } private Handler seekBarHandler = new Handler(){ @Override public void handleMessage(Message msg) { super.handleMessage(msg); if(player.getPlayWhenReady() && player.getContentPosition() < player.getDuration()){ isPlayEnd(); }else{ if(!isPlayer){ player.setPlayWhenReady(false); videoPlayerView.setVisibility(View.VISIBLE); } } } }; private void isPlayEnd(){ seekBarHandler.removeMessages(100); Message message = seekBarHandler.obtainMessage(); message.what = 100; seekBarHandler.sendMessageDelayed(message,100); }@Override protected void onResume() { super.onResume(); if(player != null){ if(isPlayer){ player.setPlayWhenReady(true); isPlayer = false; isPlayEnd(); } } }@Override protected void onPause() { super.onPause(); if(player != null){ if(player.getPlayWhenReady()){ player.setPlayWhenReady(false); isPlayer = true; }} }@Override protected void onDestroy() { super.onDestroy(); if(player != null){ player.stop(); player.release(); player = null; } } }

xml文件中那个src
复制到drawable文件夹中

当然，别忘了在AndroidManifest.xml中，添加网络权限

另外，我整合了aar文件。如果不愿意自己写，也可以用aar文件，直接用就行。点击直接前往。
源码打包：地址；看心情传github