簡介

這是一款低仿映客直播的Android直播聊天應用，本專案通過使用七牛的直播平臺提供的sdk進行推流和拉流，使用環信IM來作為使用者系統的管理直播聊天室中訊息收發、傳送禮物、彈幕、私信等功能。本專案旨在借用第三方直播平臺提供的sdk方案快速搭建一款類似映客直播的安卓APP，專案中主要內容是抽取了聊天室的一個基類、和一些自定義view（視訊點贊、禮物動畫、彈幕動畫、訊息輸入編輯工具欄等），更多關於接入直播的涉及的內容可自行閱讀ucloud提供的直播方案，專案重點在於介面UI的模仿與實現。專案中沒有真正提供一個後臺去支援，發起直播沒有真正去推流的，可以根據真正的環境去接入推流地址，觀看直播，不是真正的直播地址，只是添加了一個點播地址進行播放，也是可以根據實際環境接入拉流地址的。另外一個仿映客直播的Android直播聊天應用基於ucloud直播平臺的可以檢視這裡

特性

1.仿映客部分UI
2.發起直播
3.觀看主播直播
4.直播平臺方案之一的簡單實現參考
5.直播聊天室技術點實現案例參考
6.艾特聊天室成員的實現

截圖

Download

快速開始

step1

準備工作

七牛直播平臺註冊並開通直播服務，建立一個直播頻道，獲取推流地址和拉流地址，下載直播SDK或者用專案中已經接入的SDK

環信IM平臺註冊並建立一個APP，配置相應的引數，獲取APP的key和其他資訊

step2

將獲取到的推流和拉流地址分別接入到專案中，也可以根據實際專案，通過後臺去建立直播，獲取直播推流地址來發起直播，獲取拉流地址來播放直播

接入環信IM的賬號資訊

更多操作

彈幕布局（相當於飄屏）使用

BarrageLayout

預設彈幕是兩條通道，通過佇列去管理，在父類佈局中設定彈幕的區域程式碼如下：

<!--彈幕布局-->
<com.dou361.live.ui.widget.BarrageLayout
    android:id="@+id/barrage_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@id/message_view"
 

    android:layout_marginBottom="10dp"/>

子類佈局設定如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_marginBottom="4dp"
    >
    <RelativeLayout
        android:id="@+id/container1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <RelativeLayout
        android:layout_marginTop="4dp"
        android:id="@+id/container2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

新增一條彈幕的時候可以呼叫一下方法：

@BindView(R.id.barrage_layout)
BarrageLayout barrageLayout;

/**
 * 彈幕內容，彈幕暱稱
 */
barrageLayout.addBarrage(String msgContent, String username)

視訊點贊動畫布局（貝塞爾曲線動畫）

BezierEvaluator
PeriscopeLayout

在佈局中設定視訊點選區域如下：

<!--視訊點贊佈局-->
<com.dou361.live.ui.widget.PeriscopeLayout
    android:id="@+id/periscope_layout"
    android:layout_width="150dp"
    android:layout_height="190dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="42dp"/>

一般預設觸控到螢幕就觸發一次點贊，所以設定根佈局的觸控監聽就好了，注意這裡不能設定點選事件，否則會把子類的點選事件給攔截了，程式碼如下：

@BindView(R.id.root_layout)
View root_layout;
@BindView(R.id.periscope_layout)
PeriscopeLayout periscopeLayout;

root_layout.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            //根佈局點贊
            periscopeLayout.addHeart();
            return false;
        }
    });

條狀禮物佈局動畫

GiftLayout
LiveLeftGiftView
條狀禮物佈局，預設設定兩條通道來進行顯示動畫，多次的動畫加入到佇列中，每載入完一條動畫就從佇列中繼續獲取，在父類佈局中設定如下：

<!--禮物佈局-->
<com.dou361.live.ui.widget.GiftLayout
    android:id="@+id/gift_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_marginBottom="5dp"/>

子類佈局設定如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_marginBottom="4dp"
              android:orientation="vertical">

    <!--禮物動畫-->
    <com.dou361.live.ui.widget.LiveLeftGiftView
        android:id="@+id/left_gift_view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:visibility="invisible"/>

    <!--禮物動畫-->
    <com.dou361.live.ui.widget.LiveLeftGiftView
        android:id="@+id/left_gift_view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:visibility="invisible"/>
</LinearLayout>

發起禮物動畫程式碼如下：

@BindView(R.id.gift_layout)
GiftLayout giftLayout;

/**
 * 禮物內容，禮物暱稱
 */
giftLayout.showLeftGiftVeiw(Activity activity, String name, String url)

艾特某人的功能

一個能識別@xxxx標誌從而整塊選擇與刪除的輸入框控制元件，艾特內容組成一塊，刪除整個，新增整個
MentionEditText
在佈局中設定如下：

<com.dou361.live.ui.widget.MentionEditText
        android:id="@+id/edit_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="說點什麼吧..."
        android:layout_weight="1"
        android:maxLines="3"
        android:minHeight="36dp"
        android:paddingLeft="3dp"
        android:paddingRight="1dp"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:textSize="18sp"
        android:background="#fff"
        />

程式碼中設定如下：

/**
 * 編輯框
 */
MentionEditText editText;

/**輸入框文字輸入監聽*/
editText.setMentionTextColor(Color.RED); //optional, set highlight color of mention string
editText.setPattern("@[\\u4e00-\\u9fa5\\w\\-]+"); //optional, set regularExpression

獲取艾特的集合內容

/**這裡是@的集合*/
List<String> temp = editText.getMentionList(true);

聊天室佈局

RoomMessagesView

聊天室佈局設定如下：

<!--房間聊天佈局-->
<com.dou361.live.ui.widget.RoomMessagesView
    android:id="@+id/message_view"
    android:layout_width="match_parent"
    android:layout_height="170dp"
    android:layout_alignParentBottom="true"
    android:visibility="invisible"/>

可以自行修改傳入訊息集合的Bean