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