web直播+聊天室功能（阿里云播放器和即时通信IM聊天、消息自动滚动）

左边为视频直播，右边为聊天
解决问题：
1、直播的时候，播放器可以点击，并且可以暂停，解决办法是在播放器上加一次遮罩
2、tim聊天功能要注册阿里云的账号，下载自己的sdk和js插件
3、直播功能下载阿里云的prismplayer播放器插件
4、消息自动滚动var scrollDiv = document.getElementById('demo');
scrollDiv.scrollTop = scrollDiv.scrollHeight;

聊天功能文档：
https://cloud.tencent.com/document/product/269/1498

https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/SDK.html

视频播放器文档
https://help.aliyun.com/document_detail/125570.html

直播的html界面代码

<div class="site"><!--site_top--><div class="site_big_box"><!--site_left直播播放器界面--><div class="site_left"><div class="site_left_video"><div id="playercontainer" class="prism-player" style="float:left;z-index:1000;"></div><div class="slide_right"></div><div class="slide_left"></div></div><!--还没有直播或直播完毕时的界面--><div class="live_over"><div class="live_overbox" data-role="live_overbox"><h1><?php echo $this->resource->TITLE?></h1><h4><?php echo $userCache->getUsername($resource->USERID); ?></h4><h2 class="id-starttime"><span data-time="time"></span></h2><div data-role="tips" style="display:none;margin-top: 30px;font-size: 20px;">老师暂时离开，请耐心等待...</div><div class="live_over_layer"></div></div></div><!--还没有直播或直播完毕时的界面--></div>//遮罩层<div class="videolayer" style="width: 78%;height:100%;position: absolute;
        left: 0;top:0;z-index: 999999;"></div><!--site_left--><!--site_right聊天--><div class="site_right"><ul class="right_tab"><li class="active">讨论</li></ul><div class="talk talk1" style="display:block">//显示聊天的地方<div class="talk_news" id="demo"></div><!--发言--><div class="message" style="display:flex"><div class="box" style="width:65%;margin:0 10px 0 20px"><input type="text" id="msginput"/></div><div class="button"><button id="btnSubmit" style="width:60px">发送</button></div></div><!--发言--></div><!--用户列表start--><div class="talk talk2" id="userlist_panel"></div><!--用户列表end--></div><!--site_right--><div class="clear"></div><button id="joinChat" style="width:60px">进入</button></div>
</div>

阿里直播插件引用

<script type="text/javascript" src="//g.alicdn.com/de/prismplayer/1.5.5/prism-min.js"></script>

播放器js

var console = console || { log: function (msg) {} };
// 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
WEB_SOCKET_SWF_LOCATION = "/swf/WebSocketMain.swf";
// 开启flash的websocket debug
WEB_SOCKET_DEBUG = true;//重点获取liveurl 里的数据，另外添加了一个变量liveplaystatus，判断直播推流时是否暂停
var baseConfig = {'loginStatus' : '<?php echo $loginStatus;?>','livestatus' : '<?php echo $resource['STATUS'] ;?>','liveurl' : '<?php echo $resource['LIVEURL'] ;?>','sayflag' : '','user_id' : '<?php echo @$authuser->USERID?>','user_name' : '<?php echo @$authuser->USERNAME?>','client_id' : '','client_name' : '<?php echo @$authuser->USERNAME?>','room_id' : '<?php echo $this->resource->LIVEID?>','admin_id' : '<?php echo $this->resource->USERID?>','chat_msg_startpage' : '1','chat_msg_loadall' : false,'join_time' : '<?php echo @$this->JOINTIME?>','liveplaystatus':true //直播暂停
};function Live(config){return new Live.fn.init(config);
};
Live.fn = Live.prototype;Live.fn.init = function(){// 初始化播放器this.player = new prismplayer({id: "playercontainer", // 容器idsource: baseConfig.liveurl,// 视频地址autoplay: false,    //自动播放：否width: "100%",       // 播放器宽度height: "89%"      // 播放器高度});this.mask = $('.live_over');$('#playercontainer').hide();   // 这里先让它为show，本来是hide
};Live.fn.refresh = function(){_live = this;$.get('/shared/livestream/liveinfo/' + baseConfig.room_id, function(data){var d = data.data;baseConfig.livestatus = d.STATUS;baseConfig.liveurl = d.LIVEURL;baseConfig.sayflag = d.SAYFLAG;_live.init();_live.start();});
};
//直播开始时的状态判断。
Live.fn.start = function(){if ( baseConfig.livestatus == '10' || baseConfig.liveplaystatus == false) {if (baseConfig.livestatus == '01'){// 初始化播放器this.player = new prismplayer({id: "playercontainer", // 容器idsource: baseConfig.liveurl,// 视频地址autoplay: false,    //自动播放：否width: "100%",       // 播放器宽度height: "89%"      // 播放器高度});this.mask = $('.live_over');$('#playercontainer').show();var mPlayer = this.player;console.log(mPlayer);setTimeout(function(){mPlayer.play();},2000);this.mask.hide();}else{$('#playercontainer').show();var mPlayer = this.player;console.log(mPlayer);setTimeout(function(){mPlayer.play();},2000);this.mask.hide();}}
};Live.fn.stop = function(){this.player.stop();$('#playercontainer').hide();this.mask.show();$('.id-starttime').html('直播已结束，课后可以在班级直播列表观看回看，谢谢！');$('.id-starttime').addClass('liveh1_over');this.mask.html('<h2 class="liveh1_over">直播已结束，课后可以在班级直播列表观看回看，谢谢！</h2>');baseConfig.livestatus = '90';
};Live.fn.pause = function(){try {this.player.stop();} catch(e){}$('#playercontainer').hide();this.mask.show();$('.id-starttime').html('直播暂停');$('.id-starttime').addClass('liveh1_stop');this.mask.html('<h2 class="liveh1_stop">老师暂时离开，请耐心等待...</h2>');console.log('播放器暂停pause');
};Live.fn.init.prototype = Live.fn;if ( baseConfig.loginStatus == '1' ) {var live = new Live();live.start();
} else {// doShowLoginPanel();$('.layui-layer-setwin').hide();
}var face_map = {'[微笑]': 'weixiao.gif','[撇嘴]': 'pizui.gif','[色]': 'se.gif','[发呆]': 'fadai.gif','[得意]': 'deyi.gif','[流泪]': 'liulei.gif','[害羞]': 'haixiu.gif','[闭嘴]': 'bizui.gif','[睡觉]': 'shuijiao.gif','[大哭]': 'daku.gif','[尴尬]': 'gangga.gif','[大怒]': 'danu.gif','[调皮]': 'tiaopi.gif','[呲牙]': 'ciya.gif','[惊讶]': 'jingya.gif','[难过]': 'nanguo.gif','[酷]': 'ku.gif','[冷汗]': 'lenghan.gif','[抓狂]': 'zhuakuang.gif','[吐]': 'tu.gif','[偷笑]': 'touxiao.gif','[可爱]': 'keai.gif','[白眼]': 'baiyan.gif','[傲慢]': 'aoman.gif','[饥饿]': 'er.gif','[困]': 'kun.gif','[惊恐]': 'jingkong.gif','[流汗]': 'liuhan.gif','[憨笑]': 'haha.gif','[大兵]': 'dabing.gif','[奋斗]': 'fendou.gif','[咒骂]': 'ma.gif','[疑问]': 'wen.gif','[嘘]': 'xu.gif','[晕]': 'yun.gif','[折磨]': 'zhemo.gif','[衰]': 'shuai.gif','[骷髅]': 'kulou.gif','[敲打]': 'da.gif','[再见]': 'zaijian.gif','[擦汗]': 'cahan.gif','[挖鼻]': 'wabi.gif','[鼓掌]': 'guzhang.gif','[糗大了]': 'qioudale.gif','[坏笑]': 'huaixiao.gif','[左哼哼]': 'zuohengheng.gif','[右哼哼]': 'youhengheng.gif','[哈欠]': 'haqian.gif','[鄙视]': 'bishi.gif','[委屈]': 'weiqu.gif','[哭了]': 'ku.gif','[快哭了]': 'kuaikule.gif','[阴险]': 'yinxian.gif','[亲亲]': 'qinqin.gif','[亲吻]': 'kiss.gif','[吓]': 'xia.gif','[可怜]': 'kelian.gif','[菜刀]': 'caidao.gif','[西瓜]': 'xigua.gif','[啤酒]': 'pijiu.gif','[篮球]': 'lanqiu.gif','[乒乓]': 'pingpang.gif','[咖啡]': 'kafei.gif','[饭]': 'fan.gif','[猪头]': 'zhutou.gif','[玫瑰]': 'hua.gif','[凋谢]': 'diaoxie.gif','[爱心]': 'love.gif','[心碎]': 'xinsui.gif','[蛋糕]': 'dangao.gif','[闪电]': 'shandian.gif','[地雷]': 'zhadan.gif','[刀]': 'dao.gif','[足球]': 'qiu.gif','[虫]': 'chong.gif','[便便]': 'dabian.gif','[月亮]': 'yueliang.gif','[太阳]': 'taiyang.gif','[礼物]': 'liwu.gif','[拥抱]': 'yongbao.gif','[强]': 'qiang.gif','[弱]': 'ruo.gif','[握手]': 'woshou.gif','[胜利]': 'shengli.gif','[佩服]': 'peifu.gif','[勾引]': 'gouyin.gif','[拳头]': 'quantou.gif','[差劲]': 'chajin.gif','[干杯]': 'cheer.gif','[NO]': 'no.gif','[OK]': 'ok.gif','[给力]': 'geili.gif','[飞吻]': 'feiwen.gif','[跳跳]': 'tiao.gif','[发抖]': 'fadou.gif','[怄火]': 'dajiao.gif','[转圈]': 'zhuanquan.gif','[磕头]': 'ketou.gif','[回头]': 'huitou.gif','[跳绳]': 'tiaosheng.gif','[挥手]': 'huishou.gif','[激动]': 'jidong.gif','[街舞]': 'tiaowu.gif','[献吻]': 'xianwen.gif','[左太极]': 'youtaiji.gif','[右太极]': 'zuotaiji.gif'
};//表情
var face_replace = function(content){content = content.replace(/\[.+?\]/g,function(a,b){if ( face_map[a] ) {return '<img src="/static/shared/images/face/' + face_map[a] + '" alt="' + a + '" />';}else{return a;}});return content;
};$(function(){/*点击箭头收缩右侧*/$(".slide_right").click(function(){$(".site_right").css("width","0%");$(".site_left").css("width","100%");$(this).hide();$(".slide_left").fadeIn(300);$(".message").hide();});$(".slide_left").click(function(){$(this).hide();$(".slide_right").fadeIn(300);$(".site_right").css("width","22%");$(".site_left").css("width","78%");$(".message").show();});
});

阿里聊天的插件引用

<script src="/static/shared/js/chat/tim-js.js"></script>
<script src="/static/shared/js/chat/cos-js-sdk-v5.min.js"></script>
<!-- 生成登录密码 -->
<script src="/static/shared/js/chat/GenerateTestUserSig.js"></script>
<script src="/static/shared/js/chat/lib-generate-test-usersig.min.js"></script>

聊天js

参考阿里聊天的api文档的步骤来

var options = {SDKAppID: <?php echo $SDKAppID; ?> // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
var groupmemberStr = '<?php echo $groupmember; ?>';
var groupmemberObj =  JSON.parse(groupmemberStr); //由JSON字符串转换为JSON对象// 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
var tim = TIM.create(options);// 设置 SDK 日志输出级别，详细分级请参见 setLogLevel 接口的说明
tim.setLogLevel(1); // 普通级别，日志量较多，接入时建议使用// 注册 COS SDK 插件
tim.registerPlugin({'cos-js-sdk': COS});// 接下来可以通过 tim 进行事件绑定和构建 IM 应用
// 登录
var promise = tim.login({userID: '<?php echo $authuser->USERID;?>', userSig: '<?php echo $usersig;?>' });promise.then(function(imResponse) {console.log("登录成功："); console.log(imResponse.data); // 登录成功// 入群tim.joinGroup({ groupID: '<?php echo $resource->GROUPID;?>', type: TIM.TYPES.GRP_AVCHATROOM });promise.then(function(imResponse) {console.log(imResponse.data.actionStatus);}).catch(function(imError){console.warn('joinGroup error:', imError); // 申请加群失败的相关信息});
}).catch(function(imError) {console.warn('login error:', imError); // 登录失败的相关信息
});promise.then(function(imResponse) {// 发送成功console.log("发送消息成功："); console.log(imResponse);}).catch(function(imError) {// 发送失败console.warn('sendMessage error:', imError);
});// 监听ready 状态时触发登录
tim.on(TIM.EVENT.SDK_READY, function(event){var nowtime = getNowTime();// 发送登录直播间消息var msgdatas = {'action':"join","data":{'optime' : nowtime,'userid' : baseConfig.user_id,'username' : baseConfig.user_name}}//阿里聊天 数据模板var message = tim.createCustomMessage({to: '<?php echo $this->resource->GROUPID?>',conversationType: TIM.TYPES.CONV_GROUP,payload: {data: JSON.stringify(msgdatas),description: '',extension: ''}});var htmls = "";htmls += '<div style="color:#999">"'+ msgdatas.data.username+ '"进入了直播间</div>';$('.talk_news').append(htmls);//发送消息tim.sendMessage(message);});// 监听消息接收
tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event) {var data = event.data[0];console.log(data);var username = '';var content = '';if(groupmemberObj[data.from] != undefined){username = groupmemberObj[data.from];}else{username = '游客';}if(data.payload.text != undefined){chathtml(username,data.payload.text);}else if(data.payload.data != undefined){var msgData =  JSON.parse(data.payload.data);// console.log(msgData);switch(msgData.action){case 'join':var htmls = "";htmls += '<div style="color:#999">"'+ msgData.data.username+ '"进入了直播间</div>';$('.talk_news').append(htmls);break;case 'quit':var htmls = "";htmls += '<div style="color:#999">"'+ msgData.data.username+ '"退出了直播间</div>';$('.talk_news').append(htmls);break;case 'setnospeaking':$('#btnSubmit').css({'background':"#999"}); $("#msginput").attr("disabled",true);$('#btnSubmit').attr("disabled",true);var htmls = "";htmls += '<div style="color:#999">禁言中</div>';$('.talk_news').append(htmls);break;case 'setspeaking':$('#btnSubmit').css({'background':"#16A0E8"});$("#msginput").attr("disabled",false);$('#btnSubmit').attr("disabled",false);var htmls = "";htmls += '<div style="color:#999">取消禁言</div>';$('.talk_news').append(htmls);break;case 'startlive':console.log('暂停直播开始');                 if(baseConfig.livestatus = '01'){console.log(11111111111111111111);$.ajax({url : "/shared/classlivestream/getliveurl",method : 'POST',data : {id : baseConfig.room_id},success : function(res){baseConfig.liveurl = res.data.LIVEURL;baseConfig.liveplaystatus = false;console.log(5555555555555555555555555555);live.start();},error : function(res){  }});}else{console.log(444444444444444444444);baseConfig.livestatus = '10';baseConfig.liveplaystatus = false;live.start();}break;case 'pauselive':console.log('直播暂停了');live.pause();    break;case 'stoplive':live.stop();break;default:break;}}
});function say(){var content = $("#msginput").val();message = tim.createTextMessage({to: '<?php echo $this->resource->GROUPID?>',conversationType: TIM.TYPES.CONV_GROUP,payload: {text: content}});tim.sendMessage(message);
}//发送聊天scrollDiv.scrollTop = scrollDiv.scrollHeight;
$("#btnSubmit").click(function(){var _inputval = $('#msginput').val();if(_inputval != ' '){say();chathtml(baseConfig.user_name,message.payload.text);}var scrollDiv = document.getElementById('demo');scrollDiv.scrollTop = scrollDiv.scrollHeight;
});//聊天消息模板
function chathtml(client_name,msg){var html = "";html += '<div><span style="color:orangered">'+ client_name +'</span>：'+ msg +'</div>';$('.talk_news').append(html);$("#msginput").val(' ');}//键盘快捷键操作
$('#msginput').bind('keypress',function(event){if ( event.keyCode == "13" ) {var _inputval = $('#msginput').val();if(_inputval != ' '){say();chathtml(baseConfig.user_name,message.payload.text);}var scrollDiv = document.getElementById('demo');scrollDiv.scrollTop = scrollDiv.scrollHeight; }
});

web直播+聊天室功能（阿里云播放器和即时通信IM聊天、消息自动滚动）相关推荐

阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载. ...
php++仿网页版微信,vue+web端仿微信网页版聊天室功能
一.项目介绍基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
python udp 直播_[Python] socket发送UDP广播实现聊天室功能
原博文 2018-11-24 12:33 − 一.说明本文主要使用socket.socket发送UDP广播来实现聊天室功能. 重点难点:理解UDP通讯流程.多线程.UDP广播收发等. 测试环境:Wi ...
APP开发者如何来实现视频聊天室功能
这是一个新型的互联网业态,直播社交业务所带来的"钱景"正吸引越来越多的玩家进入这一行业.无论是专注秀场直播的YY,网易BoBo,还是提供手机直播的爆款应用Meerkat.在2015 ...
h5阿里云播放器常规使用
阿里云播放器: 引入js和css <script type="text/javascript" charset="utf-8" src="htt ...
在vue项目中使用阿里云播放器
在官方文档中分为HTML5和Flash两种播放模式我用的是html5的播放模式,下面是阿里云官方文档阿里云播放器的使用说明_视频点播-阿里云帮助中心首先在index.html文件中引入 <l ...
安卓集成腾讯即时通信IM完成聊天室功能
安卓集成腾讯即时通信IM完成聊天室功能没有效果图的文章都是扯淡 **请将下面的MainActivity的代码复制到源码里面,替换掉源码的MainActivity.class** 话不多说,下来上代码 ...
LayIM 3.9.1与ASP.NET SignalR实现Web聊天室快速入门（五）之使用RabbitMQ缓存消息
前言本系列文章特点:使用ASP.NET SignalR和LayIM快速入门对接,实现一对一聊天,群聊,添加聊天群组,查找聊天记录等功能.源代码不包含LayIM的源代码,因为官方并没开源属于收费资源, ...
说到比心源码，不如讲讲比心源码实现聊天室功能该怎么做？
说到比心源码,不如讲讲比心源码实现聊天室功能该怎么做? 比心源码是"比心陪玩源码"的简称,在比心源码中,聊天室功能是很重要的模块,它能够促进用户流通,加速社交,本文就来讲讲如何实现 ...