基於exoplayer播放器的高斯模糊視訊濾鏡
阿新 • • 發佈：2018-12-20
最近專案需求，視訊濾鏡要用高斯模糊。奈何網上全是圖片高斯模糊，且模糊的強度不夠，效果並不是自己需要的。
於是，打算自己寫一個。
exoPlayer播放器自帶濾鏡，所以用這個播放器來做。
濾鏡的話，用到的是OpenGL來寫（不會OpenGL，東拼西湊的）
先看效果吧
另外，暴露出4個引數，供需求用
| radius | 偏移量 |
| blurX | X軸方向偏移次數 |
| blurY | Y軸方向偏移次數 |
| trans | 亮度 |
原理大概是：
將原圖層亮度調為原來的 trans倍(trans為自定義引數，預設0.005)，然後copy一層X軸方向偏移，copy一層Y軸偏移，偏移量為radius。
畫個圖解釋一下
然後圖層多了，就可以達到高斯模糊的效果。
下面貼上部分原始碼
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是一個開始播放的按鈕)
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.hyq.hm.openglexo.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextureView
android:id="@+id/texture_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/video_player"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:src="@drawable/ic_play"
android:onClick="playVideo"
/>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>然後是MainActivity的初始化，適當做了註釋。後面沒註釋的，主要都是Activity生命週期 播放器的操作
public class MainActivity extends AppCompatActivity {
private View videoPlayerView;//播放器 播放按鈕View
private 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資料夾中
<vector android:height="24dp" android:viewportHeight="1024.0"
android:viewportWidth="1024.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#d81e06" android:pathData="M512,0C230.4,0 0,230.4 0,512c0,281.6 230.4,512 512,512 117.8,0 227.8,-38.4 320,-110.1 10.2,-7.7 12.8,-23 5.1,-35.8 -7.7,-10.2 -23,-12.8 -35.8,-5.1C719.4,939.5 617,972.8 512,972.8 256,972.8 51.2,768 51.2,512 51.2,256 256,51.2 512,51.2 768,51.2 972.8,256 972.8,512c0,87 -25.6,171.5 -69.1,243.2 -7.7,12.8 -2.6,28.2 7.7,33.3 12.8,7.7 28.2,2.6 33.3,-7.7 51.2,-79.4 76.8,-174.1 76.8,-271.4C1024,230.4 793.6,0 512,0z"/>
<path android:fillColor="#d81e06" android:pathData="M714.2,458.2c-17.9,-15.4 -245.8,-222.7 -245.8,-222.7 -10.2,-10.2 -25.6,-7.7 -35.8,2.6 -5.1,5.1 -7.7,12.8 -7.7,17.9 0,0 0,0 0,0 0,0 0,499.2 0,512 0,15.4 10.2,25.6 25.6,25.6 5.1,0 12.8,-2.6 15.4,-7.7 2.6,-2.6 217.6,-186.9 240.6,-207.4 23,-20.5 33.3,-38.4 33.3,-64C742.4,491.5 732.2,473.6 714.2,458.2zM681,535c-7.7,5.1 -204.8,176.6 -204.8,176.6l0,-399.4c0,0 186.9,166.4 202.2,181.8C696.3,512 698.9,519.7 681,535z"/>
</vector>
當然，別忘了在AndroidManifest.xml中，新增網路許可權
<uses-permission android:name="android.permission.INTERNET" />另外，我整合了aar檔案。如果不願意自己寫，也可以用aar檔案，直接用就行。點選直接前往。
原始碼打包：地址；看心情傳github