简介

这是一款低仿映客直播的Android直播聊天应用,本项目通过使用ucloud的直播平台提供的sdk进行推流和拉流,使用环信IM来作为用户系统的管理直播聊天室中消息收发、发送礼物、弹幕、私信等功能。本项目旨在借用第三方直播平台提供的sdk方案快速搭建一款类似映客直播的安卓APP,项目中主要内容是抽取了聊天室的一个基类、和一些自定义view(视频点赞、礼物动画、弹幕动画、消息输入编辑工具栏等),更多关于接入直播的涉及的内容可自行阅读ucloud提供的直播方案,项目重点在于界面UI的模仿与实现。项目中没有真正提供一个后台去支持,发起直播没有真正去推流的,可以根据真正的环境去接入推流地址,观看直播,不是真正的直播地址,只是添加了一个点播地址进行播放,也是可以根据实际环境接入拉流地址的。另外一个仿映客直播的Android直播聊天应用基于七牛直播平台的可以查看这里jjdxm_pililive

项目地址:http://www.github.com/jjdxmashl/jjdxm_ucloudlive

特性

1.仿映客部分UI 2.发起直播 3.观看主播直播 4.直播平台方案之一的简单实现参考 5.直播聊天室技术点实现案例参考 6.艾特聊天室成员的实现

截图

下载

demo apk下载

快速开始

step1

准备工作

ucloud直播平台注册并开通直播服务,创建一个直播频道,获取推流地址和拉流地址,下载直播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

项目地址:http://www.github.com/jjdxmashl/jjdxm_ucloudlive