请先自行了解这环信再来看这文章,可以根据真

2019-09-21 22:01栏目:大奖888官网登录
TAG:

对弹幕作用主要使用环信来促成的,读者只怕对环信这些东西很目生,请先活动理解那环信再来看那小说。

简介

这是一款低仿映客直播的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.艾特聊天室成员的完成

请我们看文书档案看WebIM这些模块,环信官方网站也提供了小程序的demo,建议读者先活动下载个demo。,明白环信的基本功能能。

截图

图片 1

图片 2

图片 3

图片 4

图片 5

图片 6

图片 7

图片 8

图片 9

图片 10

环信小程序demo下载地址:

下载

demo apk下载

弹幕功能主如若行使了聊天室来实现的。为何要选用聊天室呢?因为聊天室里上线便会自行接收聊天室的新闻,下线不会去接受聊天室里面包车型地铁音讯,同期也会自动退出聊天室。环信聊天室最多能够扶助五千人同有时候在线。

马上伊始

那首先要创制贰个闲谈,关于怎么注册环信的帐号、创造应用就不提了,笔者是个很low很low的大四狗,同一时间也很懒。

step1

图谋干活

ucloud直播平台注册并开通直播服务,创制一个直播频道,获取推流地址和拉流地址,下载直播SDK或然用项目中已经接入的SDK

环信IM平台注册并成立一个APP,配置相应的参数,获取APP的key和其他新闻

1、聊天室的创设:

step2

将取获得的推流和拉流地址分别接入到品种中,也得以依附实际项目,通过后台去创制直播,获取直播推流地址来倡导直播,获取拉流地址来播音直播

紧接环信IM的账号音信

<!doctype html><html><head>    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"/>    <title>IM-DEMO</title>        <!--引入jQuery脚本-->    <script type='text/javascript' src='jquery-2.1.1.min.js'></script>        <!--环信引入相关脚本-->    <script type='text/javascript' src='webim.config.js'></script>    <script type='text/javascript' src='strophe.js'></script>    <script type='text/javascript' src='websdk-1.1.2.js'></script>    <script type="text/javascript"  src='websdk.shim.js'></script></head><body>    <input type="text" id="username" placeholder="帐号"/>    <input type="text" id="password" placeholder="密码"/>    <input type="button" onclick="login()" value="登录" >    <br>    <input type="button" onclick="addGroup()" value="加群" >    <br>    <input type="text" id="msg" placeholder="请发送消息" >    <br>    <input type="button" id="send" value="发送" onclick="sendRoomText()">    <br>    <input type="button" value="获取聊天室信息" onclick="queryRooms()">    <br>    <input type="button" value="创建聊天室" onclick="createRoom()">    <br>    <input type="button" value="获得token" onclick="getIMToken()">    <br>    </body><script>        var conn = new WebIM.connection({            https: WebIM.config.https,            url: WebIM.config.xmppURL,            isAutoLogin: WebIM.config.isAutoLogin,            isMultiLoginSessions: WebIM.config.isMultiLoginSessions        });        conn.listen({    onOpened: function ( message ) {          //连接成功回调        // 如果isAutoLogin设置为false,那么必须手动设置上线,否则无法收消息        // 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true        // 则无需调用conn.setPresence();                 },      onClosed: function ( message ) {},         //连接关闭回调    onTextMessage: function ( message ) {alert;},    //收到文本消息    onEmojiMessage: function ( message ) {},   //收到表情消息    onPictureMessage: function ( message ) {}, //收到图片消息    onCmdMessage: function ( message ) {},     //收到命令消息    onAudioMessage: function ( message ) {},   //收到音频消息    onLocationMessage: function ( message ) {},//收到位置消息    onFileMessage: function ( message ) {},    //收到文件消息    onVideoMessage: function  {        var node = document.getElementById('privateVideo');        var option = {            url: message.url,            headers: {              'Accept': 'audio/mp4'            },            onFileDownloadComplete: function  {                var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);                node.src = objectURL;            },            onFileDownloadError: function () {                console.log('File down load error.')            }        };        WebIM.utils.download.call(conn, option);    },   //收到视频消息    onPresence: function ( message ) {},       //收到联系人订阅请求、处理群组、聊天室被踢解散等消息    onRoster: function ( message ) {},         //处理好友申请    onInviteMessage: function ( message ) {alert;},  //处理群组邀请    onOnline: function () {},                  //本机网络连接成功    onOffline: function () {},                 //本机网络掉线    onError: function ( message ) {},          //失败回调    onBlacklistUpdate: function  {       //黑名单变动        // 查询黑名单,将好友拉黑,将好友从黑名单移除都会回调这个函数,list则是黑名单现有的所有好友信息        console.log;    }});conn.listen({  onPresence: function ( message ) {    handlePresence;  }});  var handlePresence = function  {        if(e.type == 'joinChatRoomSuccess'){        alert("加入成功");    }    if(e.type == 'deleteGroupChat'){        alert("聊天室被删除");    }    if(e.type == 'joinChatRoomFailed'){        alert("加入失败");    }};    </script><script>        //登录    function login(){            var user = $("#username").val();        var pwd = $("#password").val();                var options = {             apiUrl: WebIM.config.apiURL,            user: user,            pwd: pwd,            appKey: WebIM.config.appkey        };        conn.open;        alert("登录成功")        queryRooms();    }    function addGroup(){        var username =$('#username').val()        var option = {            list: [username],            roomId: '1484378873553'            };        conn.addGroupMembers;        alert('加入成功');    }    var token = "";        //获取环信tokenfunction getIMToken(){    //三个参数缺一不可    var formdata = {        "grant_type":"client_credentials",        "client_id":"YXA6mdMuYMSEEeaJ0UPWrFAEEA",          "client_secret":"YXA6JFc9RMgIf_ONr15XvknutQm8nQE"      }              $.ajax({          type:"post",          headers:{"Content-Type":"application/json"},          url:"http://a1.easemob.com/1165161218178005/test/token",          data:JSON.stringify,          dataType:"json",          success:function{            token=data.access_token;            alert;          }      });    }            //建立聊天室    function createRoom(){        var option = {        "name":"testRoom", //聊天室名称,此属性为必须的        "description":"server create chatroom", //聊天室描述,此属性为必须的        "maxusers":500, //聊天室成员最大数,值为数值类型,默认值200,最大值5000,此属性为可选的        "owner":"c11", //聊天室的管理员,此属性为必须的        //"members":["jma2","jma3"] //聊天室成员,此属性为可选的,但是如果加了此项,数组元素至少一个(注:群主jma1不需要写入到members里面)        }                getIMToken();        alert;        $.ajax({            type:"post",            headers:{"Authorization":"Bearer "+token},            url:"http://a1.easemob.com/1165161218178005/test/chatrooms",            dataType:"json",            data:JSON.stringify,            success:function{                console.log;            }      })    }    // 列出所有聊天室,支持分页查询function queryRooms(){    var option = {        apiUrl: 'https://a1.easemob.com',        pagenum: 1,                                 // 页数        pagesize: 20,                               // 每页个数        success: function  {            console.log;                                list=JSON.stringify;    //        解析json格式数据变成js                    alert('聊天室列表:'+list);        },        error: function () {            console.log('List chat room error');            alert("错误");        }    };    conn.getChatRooms;}function sendRoomText(){var id = conn.getUniqueId();         // 生成本地消息id    var msg = new WebIM.message('txt', id); // 创建文本消息    var content = $("#msg").val();    var option = {        msg: content,          // 消息内容        to: '277817528464441880',               // 接收消息对象        roomType: true,        chatType: 'chatRoom',        success: function () {            console.log('send room text success');        },        fail: function () {            console.log('send room text failed');        }    };    msg.set;    msg.setGroup('groupchat');    conn.send;}</script></html>

更加多操作

那是自家原先学习时写的demo,那时候猎取token花的岁月比较多。所以在此间希望大家不要走弯路。

弹幕布局(相当于飘屏)使用

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)

2、接下去正是怎么改代码了,将法定提供的小程序demo,转移到自身的连串上。作者恐怕依据自个儿搬砖的硕果吧。

录制点赞动画布局(贝塞尔曲线动画)

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;
        }
    });

链接: 密码:mnp8

条状礼物布局动画

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);

1、在小程序里环信参与聊天室战败。

聊天室布局

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

这是三个小白的小说,小白的求学之路。

版权声明:本文由大奖888-www.88pt88.com-大奖888官网登录发布于大奖888官网登录,转载请注明出处:请先自行了解这环信再来看这文章,可以根据真