欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现炫酷的网络直播弹幕功能

程序员文章站 2024-03-01 22:00:16
现在网络直播越来越火,网络主播也逐渐成为一种新兴职业,对于网络直播,弹幕功能是必须要有的,如下图: 首先来分析一下,这个弹幕功能是怎么实现的,首先在最下面肯定是一...

现在网络直播越来越火,网络主播也逐渐成为一种新兴职业,对于网络直播,弹幕功能是必须要有的,如下图:

Android实现炫酷的网络直播弹幕功能

首先来分析一下,这个弹幕功能是怎么实现的,首先在最下面肯定是一个游戏界面view,然后游戏界面上有弹幕view,弹幕的view必须要做成完全透明的,这样即使覆盖在游戏界面的上方也不会影响到游戏的正常观看,只有当有人发弹幕消息时,再将消息绘制到弹幕的view上面就可以了,下方肯定还有有操作界面view,可以让用户来发弹幕和送礼物的功能,原理示意图如下所示:

Android实现炫酷的网络直播弹幕功能

参照原理图,下面一步一步来实现这个功能。

实现视频的播放

activity_main.xml

<relativelayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:id="@+id/activity_main" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:background="#000"> 
 
  <videoview 
    android:id="@+id/video_view" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_centerinparent="true"/> 
</relativelayout> 

mainactivity.java

package com.jackie.bombscreen; 
 
import android.os.build; 
import android.os.bundle; 
import android.os.environment; 
import android.support.v7.app.appcompatactivity; 
import android.view.view; 
import android.widget.videoview; 
 
public class mainactivity extends appcompatactivity { 
  @override 
  protected void oncreate(bundle savedinstancestate) { 
    super.oncreate(savedinstancestate); 
    setcontentview(r.layout.activity_main); 
    videoview videoview = (videoview) findviewbyid(r.id.video_view); 
    videoview.setvideopath(environment.getexternalstoragedirectory() + "/xiaoxingyun.mp4"); 
    videoview.start(); 
  } 
   
  @override 
  public void onwindowfocuschanged(boolean hasfocus) { 
    super.onwindowfocuschanged(hasfocus); 
    if (hasfocus && build.version.sdk_int >= 19) { 
      view decorview = getwindow().getdecorview(); 
      decorview.setsystemuivisibility( 
          view.system_ui_flag_layout_stable 
              | view.system_ui_flag_layout_hide_navigation 
              | view.system_ui_flag_layout_fullscreen 
              | view.system_ui_flag_hide_navigation 
              | view.system_ui_flag_fullscreen 
              | view.system_ui_flag_immersive_sticky); 
    } 
  } 
} 

最后别忘了设置androidmainfest.xml

Android实现炫酷的网络直播弹幕功能

效果如下:

Android实现炫酷的网络直播弹幕功能

实现弹幕的效果

接下来我们开始实现弹幕效果。弹幕其实也就是一个自定义的view,它的上面可以显示类似于跑马灯的文字效果。观众们发表的评论都会在弹幕上显示出来,但又会很快地移出屏幕,既可以起到互动的作用,同时又不会影响视频的正常观看。

我们可以自己来编写这样的一个自定义view,当然也可以直接使用网上现成的开源项目。那么为了能够简单快速地实现弹幕效果,这里我就准备直接使用由哔哩哔哩开源的弹幕效果库danmakuflamemaster。

danmakuflamemaster库的项目主页地址是:https://github.com/bilibili/danmakuflamemaster

添加build.gradle依赖

compile 'com.github.ctiao:danmakuflamemaster:0.5.3'

<?xml version="1.0" encoding="utf-8"?> 
<relativelayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:id="@+id/activity_main" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:background="#000"> 
 
  <videoview 
    android:id="@+id/video_view" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_centerinparent="true"/> 
 
  <master.flame.danmaku.ui.widget.danmakuview 
    android:id="@+id/danmaku_view" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 
</relativelayout> 

修改mainactivity.java

package com.jackie.bombscreen; 
 
import android.graphics.color; 
import android.os.build; 
import android.os.bundle; 
import android.os.environment; 
import android.support.v7.app.appcompatactivity; 
import android.view.view; 
import android.widget.videoview; 
 
import java.util.random; 
 
import master.flame.danmaku.controller.drawhandler; 
import master.flame.danmaku.danmaku.model.basedanmaku; 
import master.flame.danmaku.danmaku.model.danmakutimer; 
import master.flame.danmaku.danmaku.model.idanmakus; 
import master.flame.danmaku.danmaku.model.android.danmakucontext; 
import master.flame.danmaku.danmaku.model.android.danmakus; 
import master.flame.danmaku.danmaku.parser.basedanmakuparser; 
import master.flame.danmaku.ui.widget.danmakuview; 
 
public class mainactivity extends appcompatactivity { 
  private boolean misshowdanmaku; 
  private danmakuview mdanmakuview; 
  private danmakucontext mdanmakucontext; 
 
  private basedanmakuparser parser = new basedanmakuparser() { 
    @override 
    protected idanmakus parse() { 
      return new danmakus(); 
    } 
  }; 
 
  @override 
  protected void oncreate(bundle savedinstancestate) { 
    super.oncreate(savedinstancestate); 
    setcontentview(r.layout.activity_main); 
    videoview videoview = (videoview) findviewbyid(r.id.video_view); 
    videoview.setvideopath(environment.getexternalstoragedirectory() + "/xiaoxingyun.mp4"); 
    videoview.start(); 
 
    mdanmakuview = (danmakuview) findviewbyid(r.id.danmaku_view); 
    mdanmakuview.enabledanmakudrawingcache(true); 
    mdanmakuview.setcallback(new drawhandler.callback() { 
      @override 
      public void prepared() { 
        misshowdanmaku = true; 
        mdanmakuview.start(); 
        generatesomedanmaku(); 
      } 
 
      @override 
      public void updatetimer(danmakutimer timer) { 
 
      } 
 
      @override 
      public void danmakushown(basedanmaku danmaku) { 
 
      } 
 
      @override 
      public void drawingfinished() { 
 
      } 
    }); 
 
    mdanmakucontext = danmakucontext.create(); 
    mdanmakuview.prepare(parser, mdanmakucontext); 
  } 
 
  /** 
   * 向弹幕view中添加一条弹幕 
   * @param content    弹幕的具体内容 
   * @param withborder  弹幕是否有边框 
   */ 
  private void adddanmaku(string content, boolean withborder) { 
    basedanmaku danmaku = mdanmakucontext.mdanmakufactory.createdanmaku(basedanmaku.type_scroll_rl); 
    danmaku.text = content; 
    danmaku.padding = 5; 
    danmaku.textsize = sp2px(20); 
    danmaku.textcolor = color.white; 
    danmaku.settime(mdanmakuview.getcurrenttime()); 
    if (withborder) { 
      danmaku.bordercolor = color.green; 
    } 
    mdanmakuview.adddanmaku(danmaku); 
  } 
 
  /** 
   * 随机生成一些弹幕内容以供测试 
   */ 
  private void generatesomedanmaku() { 
    new thread(new runnable() { 
      @override 
      public void run() { 
        while(misshowdanmaku) { 
          int time = new random().nextint(300); 
          string content = "" + time + time; 
          adddanmaku(content, false); 
          try { 
            thread.sleep(time); 
          } catch (interruptedexception e) { 
            e.printstacktrace(); 
          } 
        } 
      } 
    }).start(); 
  } 
 
  /** 
   * sp转px的方法。 
   */ 
  public int sp2px(float spvalue) { 
    final float fontscale = getresources().getdisplaymetrics().scaleddensity; 
    return (int) (spvalue * fontscale + 0.5f); 
  } 
 
  @override 
  protected void onpause() { 
    super.onpause(); 
    if (mdanmakuview != null && mdanmakuview.isprepared()) { 
      mdanmakuview.pause(); 
    } 
  } 
 
  @override 
  protected void onresume() { 
    super.onresume(); 
    if (mdanmakuview != null && mdanmakuview.isprepared() && mdanmakuview.ispaused()) { 
      mdanmakuview.resume(); 
    } 
  } 
 
  @override 
  protected void ondestroy() { 
    super.ondestroy(); 
    misshowdanmaku = false; 
    if (mdanmakuview != null) { 
      mdanmakuview.release(); 
      mdanmakuview = null; 
    } 
  } 
   
  @override 
  public void onwindowfocuschanged(boolean hasfocus) { 
    super.onwindowfocuschanged(hasfocus); 
    if (hasfocus && build.version.sdk_int >= 19) { 
      view decorview = getwindow().getdecorview(); 
      decorview.setsystemuivisibility( 
          view.system_ui_flag_layout_stable 
              | view.system_ui_flag_layout_hide_navigation 
              | view.system_ui_flag_layout_fullscreen 
              | view.system_ui_flag_hide_navigation 
              | view.system_ui_flag_fullscreen 
              | view.system_ui_flag_immersive_sticky); 
    } 
  } 
} 

效果图如下:

Android实现炫酷的网络直播弹幕功能

加入操作界面

<?xml version="1.0" encoding="utf-8"?> 
<relativelayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:id="@+id/activity_main" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:background="#000"> 
 
  <videoview 
    android:id="@+id/video_view" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_centerinparent="true"/> 
 
  <master.flame.danmaku.ui.widget.danmakuview 
    android:id="@+id/danmaku_view" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 
 
  <linearlayout 
    android:id="@+id/operation_layout" 
    android:layout_width="match_parent" 
    android:layout_height="50dp" 
    android:layout_alignparentbottom="true" 
    android:background="#fff" 
    android:visibility="gone"> 
 
    <edittext 
      android:id="@+id/edit_text" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" /> 
 
    <button 
      android:id="@+id/send" 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:text="send" /> 
  </linearlayout> 
</relativelayout> 
package com.jackie.bombscreen; 
 
import android.graphics.color; 
import android.os.build; 
import android.os.bundle; 
import android.os.environment; 
import android.support.v7.app.appcompatactivity; 
import android.text.textutils; 
import android.view.view; 
import android.widget.button; 
import android.widget.edittext; 
import android.widget.linearlayout; 
import android.widget.videoview; 
 
import java.util.random; 
 
import master.flame.danmaku.controller.drawhandler; 
import master.flame.danmaku.danmaku.model.basedanmaku; 
import master.flame.danmaku.danmaku.model.danmakutimer; 
import master.flame.danmaku.danmaku.model.idanmakus; 
import master.flame.danmaku.danmaku.model.android.danmakucontext; 
import master.flame.danmaku.danmaku.model.android.danmakus; 
import master.flame.danmaku.danmaku.parser.basedanmakuparser; 
import master.flame.danmaku.ui.widget.danmakuview; 
 
public class mainactivity extends appcompatactivity { 
  private boolean misshowdanmaku; 
  private danmakuview mdanmakuview; 
  private danmakucontext mdanmakucontext; 
 
  private basedanmakuparser parser = new basedanmakuparser() { 
    @override 
    protected idanmakus parse() { 
      return new danmakus(); 
    } 
  }; 
 
  @override 
  protected void oncreate(bundle savedinstancestate) { 
    super.oncreate(savedinstancestate); 
    setcontentview(r.layout.activity_main); 
    videoview videoview = (videoview) findviewbyid(r.id.video_view); 
    videoview.setvideopath(environment.getexternalstoragedirectory() + "/xiaoxingyun.mp4"); 
    videoview.start(); 
 
    mdanmakuview = (danmakuview) findviewbyid(r.id.danmaku_view); 
    mdanmakuview.enabledanmakudrawingcache(true); 
    mdanmakuview.setcallback(new drawhandler.callback() { 
      @override 
      public void prepared() { 
        misshowdanmaku = true; 
        mdanmakuview.start(); 
        generatesomedanmaku(); 
      } 
 
      @override 
      public void updatetimer(danmakutimer timer) { 
 
      } 
 
      @override 
      public void danmakushown(basedanmaku danmaku) { 
 
      } 
 
      @override 
      public void drawingfinished() { 
 
      } 
    }); 
 
    mdanmakucontext = danmakucontext.create(); 
    mdanmakuview.prepare(parser, mdanmakucontext); 
 
    final linearlayout operationlayout = (linearlayout) findviewbyid(r.id.operation_layout); 
    final button send = (button) findviewbyid(r.id.send); 
    final edittext edittext = (edittext) findviewbyid(r.id.edit_text); 
    mdanmakuview.setonclicklistener(new view.onclicklistener() { 
      @override 
      public void onclick(view view) { 
        if (operationlayout.getvisibility() == view.gone) { 
          operationlayout.setvisibility(view.visible); 
        } else { 
          operationlayout.setvisibility(view.gone); 
        } 
      } 
    }); 
     
    send.setonclicklistener(new view.onclicklistener() { 
      @override 
      public void onclick(view view) { 
        string content = edittext.gettext().tostring(); 
        if (!textutils.isempty(content)) { 
          adddanmaku(content, true); 
          edittext.settext(""); 
        } 
      } 
    }); 
 
    getwindow().getdecorview().setonsystemuivisibilitychangelistener (new view.onsystemuivisibilitychangelistener() { 
      @override 
      public void onsystemuivisibilitychange(int visibility) { 
        if (visibility == view.system_ui_flag_visible) { 
          onwindowfocuschanged(true); 
        } 
      } 
    }); 
  } 
 
  /** 
   * 向弹幕view中添加一条弹幕 
   * @param content    弹幕的具体内容 
   * @param withborder  弹幕是否有边框 
   */ 
  private void adddanmaku(string content, boolean withborder) { 
    basedanmaku danmaku = mdanmakucontext.mdanmakufactory.createdanmaku(basedanmaku.type_scroll_rl); 
    danmaku.text = content; 
    danmaku.padding = 5; 
    danmaku.textsize = sp2px(20); 
    danmaku.textcolor = color.white; 
    danmaku.settime(mdanmakuview.getcurrenttime()); 
    if (withborder) { 
      danmaku.bordercolor = color.green; 
    } 
    mdanmakuview.adddanmaku(danmaku); 
  } 
 
  /** 
   * 随机生成一些弹幕内容以供测试 
   */ 
  private void generatesomedanmaku() { 
    new thread(new runnable() { 
      @override 
      public void run() { 
        while(misshowdanmaku) { 
          int time = new random().nextint(300); 
          string content = "" + time + time; 
          adddanmaku(content, false); 
          try { 
            thread.sleep(time); 
          } catch (interruptedexception e) { 
            e.printstacktrace(); 
          } 
        } 
      } 
    }).start(); 
  } 
 
  /** 
   * sp转px的方法。 
   */ 
  public int sp2px(float spvalue) { 
    final float fontscale = getresources().getdisplaymetrics().scaleddensity; 
    return (int) (spvalue * fontscale + 0.5f); 
  } 
 
  @override 
  protected void onpause() { 
    super.onpause(); 
    if (mdanmakuview != null && mdanmakuview.isprepared()) { 
      mdanmakuview.pause(); 
    } 
  } 
 
  @override 
  protected void onresume() { 
    super.onresume(); 
    if (mdanmakuview != null && mdanmakuview.isprepared() && mdanmakuview.ispaused()) { 
      mdanmakuview.resume(); 
    } 
  } 
 
  @override 
  protected void ondestroy() { 
    super.ondestroy(); 
    misshowdanmaku = false; 
    if (mdanmakuview != null) { 
      mdanmakuview.release(); 
      mdanmakuview = null; 
    } 
  } 
 
 
  @override 
  public void onwindowfocuschanged(boolean hasfocus) { 
    super.onwindowfocuschanged(hasfocus); 
    if (hasfocus && build.version.sdk_int >= 19) { 
      view decorview = getwindow().getdecorview(); 
      decorview.setsystemuivisibility( 
          view.system_ui_flag_layout_stable 
              | view.system_ui_flag_layout_hide_navigation 
              | view.system_ui_flag_layout_fullscreen 
              | view.system_ui_flag_hide_navigation 
              | view.system_ui_flag_fullscreen 
              | view.system_ui_flag_immersive_sticky); 
    } 
  } 
} 

效果图如下:

Android实现炫酷的网络直播弹幕功能

自己发的弹幕有绿色边框,很容易区分。

基本上实现了弹幕的功能,当然,里面的知识点还有很多,这只是最基本的功能。有时间的话,建议学学danmakuflamemaster,里面还有很多炫酷的功能。

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