直播软件开发

直播软件开发

4
评论

在微信小程序里实现聊天室 聊天室 小程序

Tolazy 发表了文章 • 800 次浏览 • 2019-04-19 17:49 • 来自相关话题

第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
下载环信 小程序demo+sdkgit clone https://github.com/easemob/webim-weixin-xcx创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明



集成
登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改


在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用


修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室


然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉然后在roomlist.wxml 修改对应的 变量绑定名称





demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面


Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了





就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx 查看全部
第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
  1. 下载环信 小程序demo+sdk
    git clone https://github.com/easemob/webim-weixin-xcx
  2. 创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明
    ml.png

集成
  1. 登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改
    login.png
  2. 在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用
    tz.png
  3. 修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室
    getroom.png
    然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉
  4. 然后在roomlist.wxml 修改对应的 变量绑定名称
    listui.png
    list.png
  5. demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面
    joinrom.png
    Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧
  6. 到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了
    send.png
    chat.png
    就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx

13
回复

收集基于环信SDK开发的开源项目 开源项目

xiaoyan2015 回复了问题 • 13 人关注 • 15377 次浏览 • 2019-03-14 13:52 • 来自相关话题

4
评论

【开源项目】全国首个开源直播小程序源码

beyond 发表了文章 • 26497 次浏览 • 2018-07-20 17:30 • 来自相关话题

今天你看直播了吗?拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 





作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载


小程序直播demo_2018-06-21.zip







直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 




2、导入源码:将附件的源码解压直接导入 







环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]




填写对相关信息进行注册





注册成功后进行登录




注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用




输入应用名称等信息
 





创建成功后点击应用进入





需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量




3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Tokencurl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'返回格式{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址curl -X POST -H "Authorization: Bearer [管理员Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"成功返回格式:{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户





点击注册IM用户





填写用户信息





创建用户的过程同样也可以通过REST API形式进行curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'
注:应用必须为开放注册





将注册的用户添加为主播curl -X POST -H "Authorization: [管理员Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'返回结果示例:{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播





点击新建房间





填写房间信息




创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件





修改appkey为自己应用的appkey





打开pages/live/index.js修改房间默认拉流地址及直播间房间号





四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:curl -X GET -H "Authorization: Bearer [用户Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]
响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。 查看全部
今天你看直播了吗?
拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 
微信图片_20180725162426.jpg


作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载



预览图.jpg

直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 
Catch9A07(07-20-17-38-30).jpg

2、导入源码:将附件的源码解压直接导入 


Catch1C69(07-20-17-38-30).jpg


环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]
1.png

填写对相关信息进行注册

2.png

注册成功后进行登录
3.png

注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用
4.png

输入应用名称等信息
 

5.png

创建成功后点击应用进入

6.png

需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量
7.png

3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Token
curl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'
返回格式
{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址
curl -X POST -H "Authorization: Bearer [管理员Token]"  " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"
成功返回格式:
{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户

8.png

点击注册IM用户

9.png

填写用户信息

10.png

创建用户的过程同样也可以通过REST API形式进行
curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'

注:应用必须为开放注册

11.png

将注册的用户添加为主播
curl -X POST -H "Authorization: [管理员Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'
返回结果示例:
{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播

12.png

点击新建房间

13.png

填写房间信息
14.png

创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件

15.png

修改appkey为自己应用的appkey

16.png

打开pages/live/index.js修改房间默认拉流地址及直播间房间号

17.png

四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:
curl -X GET -H "Authorization: Bearer  [用户Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]

响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:
curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"
响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。
19
评论

【新手快速入门】集成环信常见问题+解决方案汇总

dujiepeng 发表了文章 • 21984 次浏览 • 2017-05-22 15:51 • 来自相关话题

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
Android sdk 的两种导入方式环信3.0SDK集成小米推送教程EaseUI库中V4、v7包冲突解决方案Android EaseUI里的百度地图替换为高德地图android扩展消息(名片集成)关于会话列表的置顶聊天java.lang.UnsatisfiedLinkError: 的问题android 端 app 后台被杀死收不到消息的解决方案
昵称头像篇
android中如何显示开发者服务器上的昵称和头像 Android中显示头像(接上一篇文章看)环信(Android)设置头像和昵称的方法(最简单暴力的基于环信demo的集成)IOS中如何显示开发者服务器上的昵称和头像【环信公开课第12期视频回放】-所有关于环信IM昵称头像的问题听这课就够了
 
直播篇
一言不合你就搞个直播APP
 
客服集成
IM-SDK和客服SDK并存开发指南—Android篇IM-SDK和客服SDK并存开发指南—iOS篇
 
开源项目
Android简版demoios简版demo凡信2.0:超仿微信的开源项目 凡信3.0:携直播和红包而来高仿微信:Github 3,515 Star方圆十里:环信编程大赛冠军项目泛聊:定一个小目标写一个QQSlack聊天机器人:一天时间做一个聊天机器人TV视频通话:在电视上视频通话视频通话:Android手机视频通话酷信:ios高仿微信公众号助手:与订阅用户聊天沟通
 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
  查看全部
   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇

 
Android篇

昵称头像篇

 
直播篇
  1. 一言不合你就搞个直播APP

 
客服集成
  1. IM-SDK和客服SDK并存开发指南—Android篇
  2. IM-SDK和客服SDK并存开发指南—iOS篇

 
开源项目

 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
 
0
评论

据直播软件开发者们说,关于卡顿,直播系统源码尽力了 直播 直播软件开发 直播系统源码

QQ1449701271 发表了文章 • 79 次浏览 • 2019-05-14 14:13 • 来自相关话题

直播app软件制作、开发完毕后,搭建到服务器上就可以开始运营了,在运营一段时间后,直播平台的客服们最常被问及的问题是:客服小姐姐,为什么我这边看直播会卡顿呀?这时候,客服人员一边会把该问题反馈上去,一边查看下同类问题的反馈量,再根据情况进行回复。


直播卡顿是一件非常常见的事,在网络环境差、源码有BUG、服务器带宽不足、在线人数大导致服务器配置吃紧等情况下都会产生。
当然,直播软件开发者也会在开发直播系统源码时尽量降低直播卡顿的频率,比如:

1、 使用系统官方提供的开源代码编写原生系统,保障系统层面上的优势,原生系统在所有系统开发方式中,是交互性、用户体验感最好的一种开发方式。

2、 使用H.264、H.265等编码方式,降低带宽占用率

3、 默认使用硬编硬解的编解码方式,降低对手机CPU的占用率

4、 使用RTMP流媒体传输协议,保障直播传输速度。

总之,我们先假设直播软件开发者们已经很尽力的开发软件了,直播系统源码本身并没有BUG,开发人员也并非新手或仍坚持使用技术落后的开发方式进行软件开发的团队。在这种情况下,都有什么常见的导致直播卡顿的原因呢?
1、 网络环境差

先说网络环境差这个硬伤,回到开头,客服人员在接到用户反馈“直播卡顿”后,会主动查询是否有其他用户反馈同类问题,如果集中于某一区域有大量用户反应同类问题,可能是当地CDN分发网络出现问题,或由于天气原因导致的网络问题。

而如果反映用户聚集于同一直播间,则可能是主播方面网络的原因。

2、 服务器配置差

我们都知道在某些大主播开播时,由于一瞬间涌入直播间的人数过多而导致直播间进不去的情况是很常见的,在同一时刻,做同一操作的用户量大于服务器所能够承受的并发数,这种情况会使直播间产生卡顿。
用户方网络环境差的情况,或许能够因这份文件的下发而被解决。

5月8日,工信部在官网发布《两部门关于开展深入推进宽带网络提速降费 支撑经济高质量发展2019专项行动的通知》。通知要求:

1、 开展“双G双提”,100M及以上宽带用户比例提升至80%,4G用户渗透率力争提升至80%;

2、 开展“同网同速”,推动我国行政村4G和光纤覆盖率双双超过98%,实现农村宽带网络接入能力和速率基本达到城市同等水平;

3、 开展“精准降费”,推动基础电信企业面向全国建档立卡贫困户给予最大折扣基础通信资费优惠

长期以来,带宽网速“降价提速”的通知不断下达,三大网络运营商也在随之作出响应,农村网络基站覆盖率低、网络环境差的情况是长期存在的,但从一次比一次详尽严谨的通知来看,逐步建成更优质的网络环境,是一件有计划、有实施可能性的事。
本文到此结束,更多与直播软件开发、直播系统源码相关的行业资讯和分析会在以后逐渐放出,敬请期待,需要的朋友请关注我。

声明:文章为原创内容,转载请注明原文链接及作者 查看全部
直播app软件制作、开发完毕后,搭建到服务器上就可以开始运营了,在运营一段时间后,直播平台的客服们最常被问及的问题是:客服小姐姐,为什么我这边看直播会卡顿呀?这时候,客服人员一边会把该问题反馈上去,一边查看下同类问题的反馈量,再根据情况进行回复。


直播卡顿是一件非常常见的事,在网络环境差、源码有BUG、服务器带宽不足、在线人数大导致服务器配置吃紧等情况下都会产生。
当然,直播软件开发者也会在开发直播系统源码时尽量降低直播卡顿的频率,比如:

1、 使用系统官方提供的开源代码编写原生系统,保障系统层面上的优势,原生系统在所有系统开发方式中,是交互性、用户体验感最好的一种开发方式。

2、 使用H.264、H.265等编码方式,降低带宽占用率

3、 默认使用硬编硬解的编解码方式,降低对手机CPU的占用率

4、 使用RTMP流媒体传输协议,保障直播传输速度。

总之,我们先假设直播软件开发者们已经很尽力的开发软件了,直播系统源码本身并没有BUG,开发人员也并非新手或仍坚持使用技术落后的开发方式进行软件开发的团队。在这种情况下,都有什么常见的导致直播卡顿的原因呢?
1、 网络环境差

先说网络环境差这个硬伤,回到开头,客服人员在接到用户反馈“直播卡顿”后,会主动查询是否有其他用户反馈同类问题,如果集中于某一区域有大量用户反应同类问题,可能是当地CDN分发网络出现问题,或由于天气原因导致的网络问题。

而如果反映用户聚集于同一直播间,则可能是主播方面网络的原因。

2、 服务器配置差

我们都知道在某些大主播开播时,由于一瞬间涌入直播间的人数过多而导致直播间进不去的情况是很常见的,在同一时刻,做同一操作的用户量大于服务器所能够承受的并发数,这种情况会使直播间产生卡顿。
用户方网络环境差的情况,或许能够因这份文件的下发而被解决。

5月8日,工信部在官网发布《两部门关于开展深入推进宽带网络提速降费 支撑经济高质量发展2019专项行动的通知》。通知要求:

1、 开展“双G双提”,100M及以上宽带用户比例提升至80%,4G用户渗透率力争提升至80%;

2、 开展“同网同速”,推动我国行政村4G和光纤覆盖率双双超过98%,实现农村宽带网络接入能力和速率基本达到城市同等水平;

3、 开展“精准降费”,推动基础电信企业面向全国建档立卡贫困户给予最大折扣基础通信资费优惠

长期以来,带宽网速“降价提速”的通知不断下达,三大网络运营商也在随之作出响应,农村网络基站覆盖率低、网络环境差的情况是长期存在的,但从一次比一次详尽严谨的通知来看,逐步建成更优质的网络环境,是一件有计划、有实施可能性的事。
本文到此结束,更多与直播软件开发、直播系统源码相关的行业资讯和分析会在以后逐渐放出,敬请期待,需要的朋友请关注我。

声明:文章为原创内容,转载请注明原文链接及作者
0
评论

找优质的直播软件开发公司不用担心系统架构问题 直播平台开发 直播 直播系统 直播软件开发

q2466131704 发表了文章 • 132 次浏览 • 2019-04-28 09:22 • 来自相关话题

文章标题中提到的系统架构问题,在直播软件开发过程中也是非常重要的一部分。为什么这么说呢?我们举个简单的例子,一个施工队盖楼肯定先要把整体的框架用钢筋扎好,然后再进行下一步的工作。开发直播软件也是一样,先把整体的架构设计好罗列出来,再把其中的功能挨个添加进去。
目前市面上的直播软件开发公司都有专人负责系统架构的设计和实现,他们会根据用户需求进行调整,以满足各种应用场景,在这里给大家分享三种常见的直播架构。
1.简单的直播架构
在已有的CDN基础上,再自行搭建一个信令服务器,这样就可以完成服务层的搭建工作了。用户向信令服务器发送共享音视频指令后,再通过相机或摄像头采集数据,编码之后通过直播中常用的RTMP协议将这个流推到CDN。然后接收端向信令服务器发送指令,获取音视频流的名称,再从CDN中拉取该流,经过解码之后渲染在屏幕上,用户就可以观看直播了。建议:在选择CDN服务商时可以选择多家进行对比,比如阿里云和腾讯云等都是国内比较大的服务商。当然,也可以把这件事情交给直播软件开发公司,由他们联系长期合作的服务商提供服务。




2.实时交互的直播架构
为了满足直播交互性强的特性,在设计架构时需要增加自有网络。在音视频数据上传到自有网络之后,还需要通过专门的服务将数据流转成RTMP流推到CDN,对于大多数不参与实时互动的用户来说,他们可以从CDN获取音视频数据了。这种架构既能满足直播用户的实时互动需求,也可以满足其他用户只观看直播不互动的需求,在直播软件开发项目中也是比较常见的一种架构设计。




3.解决高并发的直播架构
可能大家经常看到“直播”“高并发”这些词汇出现,但是对于直播中的高并发并不了解。我们可以这样理解,如果只有1w人观看直播,不是同时进入直播间就没问题,但如果这1w人是在同一时刻进入直播间,如果在直播软件开发过程中没考虑到并发量的问题,那么服务器就会直接崩溃,导致无法观看。所以说,为了解决直播的高负载和并发问题,需要增加资源管理服务器,从而实时监控各个服务的资源情况。




绝大多数人都认为开发直播软件并不需要找专业的开发公司,但实际上来看,找专业的直播软件开发公司还是非常必要的,就像文章中系统架构、CDN服务商和高并发等问题,都可以交给他们负责。比起自己从设计直播架构开始来说,要好多了。希望本篇文章能给大家提供一定的帮助。
本文声明原创,转载请注明出处及链接。 查看全部
文章标题中提到的系统架构问题,在直播软件开发过程中也是非常重要的一部分。为什么这么说呢?我们举个简单的例子,一个施工队盖楼肯定先要把整体的框架用钢筋扎好,然后再进行下一步的工作。开发直播软件也是一样,先把整体的架构设计好罗列出来,再把其中的功能挨个添加进去。
目前市面上的直播软件开发公司都有专人负责系统架构的设计和实现,他们会根据用户需求进行调整,以满足各种应用场景,在这里给大家分享三种常见的直播架构。
1.简单的直播架构
在已有的CDN基础上,再自行搭建一个信令服务器,这样就可以完成服务层的搭建工作了。用户向信令服务器发送共享音视频指令后,再通过相机或摄像头采集数据,编码之后通过直播中常用的RTMP协议将这个流推到CDN。然后接收端向信令服务器发送指令,获取音视频流的名称,再从CDN中拉取该流,经过解码之后渲染在屏幕上,用户就可以观看直播了。建议:在选择CDN服务商时可以选择多家进行对比,比如阿里云和腾讯云等都是国内比较大的服务商。当然,也可以把这件事情交给直播软件开发公司,由他们联系长期合作的服务商提供服务。
1.jpg

2.实时交互的直播架构
为了满足直播交互性强的特性,在设计架构时需要增加自有网络。在音视频数据上传到自有网络之后,还需要通过专门的服务将数据流转成RTMP流推到CDN,对于大多数不参与实时互动的用户来说,他们可以从CDN获取音视频数据了。这种架构既能满足直播用户的实时互动需求,也可以满足其他用户只观看直播不互动的需求,在直播软件开发项目中也是比较常见的一种架构设计。
2.jpg

3.解决高并发的直播架构
可能大家经常看到“直播”“高并发”这些词汇出现,但是对于直播中的高并发并不了解。我们可以这样理解,如果只有1w人观看直播,不是同时进入直播间就没问题,但如果这1w人是在同一时刻进入直播间,如果在直播软件开发过程中没考虑到并发量的问题,那么服务器就会直接崩溃,导致无法观看。所以说,为了解决直播的高负载和并发问题,需要增加资源管理服务器,从而实时监控各个服务的资源情况。
3.jpg

绝大多数人都认为开发直播软件并不需要找专业的开发公司,但实际上来看,找专业的直播软件开发公司还是非常必要的,就像文章中系统架构、CDN服务商和高并发等问题,都可以交给他们负责。比起自己从设计直播架构开始来说,要好多了。希望本篇文章能给大家提供一定的帮助。
本文声明原创,转载请注明出处及链接。
0
评论

直播软件开发业务需要考虑自适应的问题吗? 直播平台开发 直播 直播软件开发

q2466131704 发表了文章 • 139 次浏览 • 2019-04-27 09:28 • 来自相关话题

大家虽然经常观看直播,但是实际上对直播的流程并不是非常了解。视频直播的流程可以简单分为:采集、处理、编码和封装、推流(到服务器)、分发、播放。其中,在直播软件开发中需要注意的就是推流端的实现问题,如果流推不出去,用户就无法正常观看直播。目前市面上有很多服务商,购买源码时还需要看看他们的程序在自适应方面做的好不好。
1.帧率和码率的自适应
如果直播推流出现了问题,最容易出现的一个问题就是卡顿。假如我们在观看直播时网络环境较差,那么就可以将帧率或者是码率降低一点,音视频流就可以正常推出去。在码率自适应的时候,是可以直接反馈到编码器的,然后动态调整自己的码率,使得传出来的视频码率下降,而帧率的控制相对来说比较简单,在此就不多作赘述了。
2.软硬自适应
大部分人反馈比较多的就是,在观看直播的时候手机会出现发热现象,其实这就涉及到了在直播软件开发过程中,软硬编码的方式选择问题。比如硬件编码,它的优点就是不会导致手机发热,但是音视频比较南通不,而且兼容性不太好。软件编码的话,码率低并且画质好,它也是导致手机发热的“罪魁祸首”。
3.算法自适应
对于推流端来说,它最主要的任务就是将更好的直播画质给推出来,要想使得直播画质变得更好,可以采用H.265编码,举个简单的例子就是,H.264能推出来480P的画质,那么经过H.265之后就能推出来720P的画质。在直播这种交互性强的应用场景,直播画质是否清晰也是评价软件是否优质的标准之一。不仅是主播,现在大多数用户对于画质方面的要求非常严格,假如说用户花钱观看一个主播,但是始终无法看到高清状态下的主播,用户的产品体验就会变得非常糟糕,直播平台就有可能会流失掉一个用户。所以说,选择适合直播应用场景的编码标准也是非常重要的。

在直播应用场景中,自适应并不算是非常复杂的问题。如果想要购买一套程序,但是又不确定程序的质量应该怎么办呢?是否需要考虑自适应的问题呢?事实上,现在的直播软件开发商在购买程序之前,会先提供产品演示供我们下载体验,如果觉得可以再进行下一步的开发或者购买流程,当然这只是针对正规商家,其他渠道来源的程序是否稳定我们就无从得知了。最后,还是建议大家从正规渠道购买程序吧,这样不仅质量有保证,还更加省心。
本文声明原创,转载请注明出处。 查看全部
大家虽然经常观看直播,但是实际上对直播的流程并不是非常了解。视频直播的流程可以简单分为:采集、处理、编码和封装、推流(到服务器)、分发、播放。其中,在直播软件开发中需要注意的就是推流端的实现问题,如果流推不出去,用户就无法正常观看直播。目前市面上有很多服务商,购买源码时还需要看看他们的程序在自适应方面做的好不好。
1.帧率和码率的自适应
如果直播推流出现了问题,最容易出现的一个问题就是卡顿。假如我们在观看直播时网络环境较差,那么就可以将帧率或者是码率降低一点,音视频流就可以正常推出去。在码率自适应的时候,是可以直接反馈到编码器的,然后动态调整自己的码率,使得传出来的视频码率下降,而帧率的控制相对来说比较简单,在此就不多作赘述了。
2.软硬自适应
大部分人反馈比较多的就是,在观看直播的时候手机会出现发热现象,其实这就涉及到了在直播软件开发过程中,软硬编码的方式选择问题。比如硬件编码,它的优点就是不会导致手机发热,但是音视频比较南通不,而且兼容性不太好。软件编码的话,码率低并且画质好,它也是导致手机发热的“罪魁祸首”。
3.算法自适应
对于推流端来说,它最主要的任务就是将更好的直播画质给推出来,要想使得直播画质变得更好,可以采用H.265编码,举个简单的例子就是,H.264能推出来480P的画质,那么经过H.265之后就能推出来720P的画质。在直播这种交互性强的应用场景,直播画质是否清晰也是评价软件是否优质的标准之一。不仅是主播,现在大多数用户对于画质方面的要求非常严格,假如说用户花钱观看一个主播,但是始终无法看到高清状态下的主播,用户的产品体验就会变得非常糟糕,直播平台就有可能会流失掉一个用户。所以说,选择适合直播应用场景的编码标准也是非常重要的。

在直播应用场景中,自适应并不算是非常复杂的问题。如果想要购买一套程序,但是又不确定程序的质量应该怎么办呢?是否需要考虑自适应的问题呢?事实上,现在的直播软件开发商在购买程序之前,会先提供产品演示供我们下载体验,如果觉得可以再进行下一步的开发或者购买流程,当然这只是针对正规商家,其他渠道来源的程序是否稳定我们就无从得知了。最后,还是建议大家从正规渠道购买程序吧,这样不仅质量有保证,还更加省心。
本文声明原创,转载请注明出处。
0
评论

初试直播软件开发项目需要了解后台开发语言吗? 直播平台开发 直播软件开发 直播

q2466131704 发表了文章 • 167 次浏览 • 2019-04-25 14:51 • 来自相关话题

刷论坛的时候看到有位朋友发帖,大概意思就是自己想尝试直播软件开发项目,简单说就是做个直播软件,但发现有后台有两种不同的开发语言:java和php,所以才发帖求助帮他解答两个后台之间的区别。那么实际上,java后台和php后台到底有什么区别呢?
1.两种编程语言有什么区别?
先来说一下php,它最大的特点就是非常迅速,甚至都可以不用框架去写一个功能,只需要几行代码就能搞定了。但java就不一样了,它需要先想一下用怎样的框架,然后再选择配置各种数据库、过滤器等。




2.java和php在技术层面有何区别?
php汲取了java和c以及perl等语言的所有优点,专注于互联网领域,在web领域几乎没有语言可以和php相比。而java只是面向对象开发,虽然功能强、分支多,但它所具备的优势往往也是它的劣势。
3.java和php在市场份额方面有何区别?
Java的语言相对比较老,经过了多年时间的发展,在C/S和B/S领域占据一定的地位,但是随着社会需求的不断变化,java的市场在逐渐减少。而php的市场份额只需要看web领域就足够了,因为web领域php的市场超过了80%,剩下的就是向asp、C#、python等,大部分企业都在使用php,Facebook和新浪微博也在使用php。相比较之下,php的市场份额比java要多。




4.哪一种更适合直播软件开发业务?
对于开发直播软件来讲,我们需要考虑到一个问题花费,这是大多数人都十分关注的。Java后台虽然稳定性、承载量等方面都比php要好,但是java后台开发起来费用高、开发周期长、后期的维护成本也很高,所以对于一些启动资金有限的人来说并不划算,但并不代表java后台就不能适用于直播业务。相比之下,php后台不但开发周期短,而且也不需要过高的费开发用,目前大多数软件开发公司都默认是php后台。需要避免的误区就是,java后台和php后台两种都可以选择,只不过php后台从各方面来看的话性价比更高一些。
以上就是java后台和php后台的区别,在此只作参考。对于初试直播软件开发项目的朋友来说,如果实在不知道选择哪种后台的话,不妨把这个棘手的问题交给开发商,让他们帮你制定相对应的直播解决方案,当然,选择正规的官方公司才是最靠谱的。如果大家对直播业务感兴趣,可以在下方与我互动。
本文声明原创,转载请注明出处。 查看全部
刷论坛的时候看到有位朋友发帖,大概意思就是自己想尝试直播软件开发项目,简单说就是做个直播软件,但发现有后台有两种不同的开发语言:java和php,所以才发帖求助帮他解答两个后台之间的区别。那么实际上,java后台和php后台到底有什么区别呢?
1.两种编程语言有什么区别?
先来说一下php,它最大的特点就是非常迅速,甚至都可以不用框架去写一个功能,只需要几行代码就能搞定了。但java就不一样了,它需要先想一下用怎样的框架,然后再选择配置各种数据库、过滤器等。
20160112174716_24356.jpg

2.java和php在技术层面有何区别?
php汲取了java和c以及perl等语言的所有优点,专注于互联网领域,在web领域几乎没有语言可以和php相比。而java只是面向对象开发,虽然功能强、分支多,但它所具备的优势往往也是它的劣势。
3.java和php在市场份额方面有何区别?
Java的语言相对比较老,经过了多年时间的发展,在C/S和B/S领域占据一定的地位,但是随着社会需求的不断变化,java的市场在逐渐减少。而php的市场份额只需要看web领域就足够了,因为web领域php的市场超过了80%,剩下的就是向asp、C#、python等,大部分企业都在使用php,Facebook和新浪微博也在使用php。相比较之下,php的市场份额比java要多。
t01515cca18405c61d9.jpg

4.哪一种更适合直播软件开发业务?
对于开发直播软件来讲,我们需要考虑到一个问题花费,这是大多数人都十分关注的。Java后台虽然稳定性、承载量等方面都比php要好,但是java后台开发起来费用高、开发周期长、后期的维护成本也很高,所以对于一些启动资金有限的人来说并不划算,但并不代表java后台就不能适用于直播业务。相比之下,php后台不但开发周期短,而且也不需要过高的费开发用,目前大多数软件开发公司都默认是php后台。需要避免的误区就是,java后台和php后台两种都可以选择,只不过php后台从各方面来看的话性价比更高一些。
以上就是java后台和php后台的区别,在此只作参考。对于初试直播软件开发项目的朋友来说,如果实在不知道选择哪种后台的话,不妨把这个棘手的问题交给开发商,让他们帮你制定相对应的直播解决方案,当然,选择正规的官方公司才是最靠谱的。如果大家对直播业务感兴趣,可以在下方与我互动。
本文声明原创,转载请注明出处。
4
评论

在微信小程序里实现聊天室 聊天室 小程序

Tolazy 发表了文章 • 800 次浏览 • 2019-04-19 17:49 • 来自相关话题

第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
下载环信 小程序demo+sdkgit clone https://github.com/easemob/webim-weixin-xcx创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明



集成
登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改


在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用


修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室


然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉然后在roomlist.wxml 修改对应的 变量绑定名称





demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面


Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了





就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx 查看全部
第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
  1. 下载环信 小程序demo+sdk
    git clone https://github.com/easemob/webim-weixin-xcx
  2. 创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明
    ml.png

集成
  1. 登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改
    login.png
  2. 在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用
    tz.png
  3. 修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室
    getroom.png
    然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉
  4. 然后在roomlist.wxml 修改对应的 变量绑定名称
    listui.png
    list.png
  5. demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面
    joinrom.png
    Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧
  6. 到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了
    send.png
    chat.png
    就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx

4
评论

【开源项目】全国首个开源直播小程序源码

beyond 发表了文章 • 26497 次浏览 • 2018-07-20 17:30 • 来自相关话题

今天你看直播了吗?拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 





作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载


小程序直播demo_2018-06-21.zip







直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 




2、导入源码:将附件的源码解压直接导入 







环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]




填写对相关信息进行注册





注册成功后进行登录




注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用




输入应用名称等信息
 





创建成功后点击应用进入





需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量




3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Tokencurl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'返回格式{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址curl -X POST -H "Authorization: Bearer [管理员Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"成功返回格式:{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户





点击注册IM用户





填写用户信息





创建用户的过程同样也可以通过REST API形式进行curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'
注:应用必须为开放注册





将注册的用户添加为主播curl -X POST -H "Authorization: [管理员Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'返回结果示例:{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播





点击新建房间





填写房间信息




创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件





修改appkey为自己应用的appkey





打开pages/live/index.js修改房间默认拉流地址及直播间房间号





四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:curl -X GET -H "Authorization: Bearer [用户Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]
响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。 查看全部
今天你看直播了吗?
拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 
微信图片_20180725162426.jpg


作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载



预览图.jpg

直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 
Catch9A07(07-20-17-38-30).jpg

2、导入源码:将附件的源码解压直接导入 


Catch1C69(07-20-17-38-30).jpg


环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]
1.png

填写对相关信息进行注册

2.png

注册成功后进行登录
3.png

注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用
4.png

输入应用名称等信息
 

5.png

创建成功后点击应用进入

6.png

需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量
7.png

3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Token
curl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'
返回格式
{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址
curl -X POST -H "Authorization: Bearer [管理员Token]"  " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"
成功返回格式:
{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户

8.png

点击注册IM用户

9.png

填写用户信息

10.png

创建用户的过程同样也可以通过REST API形式进行
curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'

注:应用必须为开放注册

11.png

将注册的用户添加为主播
curl -X POST -H "Authorization: [管理员Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'
返回结果示例:
{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播

12.png

点击新建房间

13.png

填写房间信息
14.png

创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件

15.png

修改appkey为自己应用的appkey

16.png

打开pages/live/index.js修改房间默认拉流地址及直播间房间号

17.png

四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:
curl -X GET -H "Authorization: Bearer  [用户Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]

响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:
curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"
响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。
19
评论

【新手快速入门】集成环信常见问题+解决方案汇总

dujiepeng 发表了文章 • 21984 次浏览 • 2017-05-22 15:51 • 来自相关话题

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
Android sdk 的两种导入方式环信3.0SDK集成小米推送教程EaseUI库中V4、v7包冲突解决方案Android EaseUI里的百度地图替换为高德地图android扩展消息(名片集成)关于会话列表的置顶聊天java.lang.UnsatisfiedLinkError: 的问题android 端 app 后台被杀死收不到消息的解决方案
昵称头像篇
android中如何显示开发者服务器上的昵称和头像 Android中显示头像(接上一篇文章看)环信(Android)设置头像和昵称的方法(最简单暴力的基于环信demo的集成)IOS中如何显示开发者服务器上的昵称和头像【环信公开课第12期视频回放】-所有关于环信IM昵称头像的问题听这课就够了
 
直播篇
一言不合你就搞个直播APP
 
客服集成
IM-SDK和客服SDK并存开发指南—Android篇IM-SDK和客服SDK并存开发指南—iOS篇
 
开源项目
Android简版demoios简版demo凡信2.0:超仿微信的开源项目 凡信3.0:携直播和红包而来高仿微信:Github 3,515 Star方圆十里:环信编程大赛冠军项目泛聊:定一个小目标写一个QQSlack聊天机器人:一天时间做一个聊天机器人TV视频通话:在电视上视频通话视频通话:Android手机视频通话酷信:ios高仿微信公众号助手:与订阅用户聊天沟通
 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
  查看全部
   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇

 
Android篇

昵称头像篇

 
直播篇
  1. 一言不合你就搞个直播APP

 
客服集成
  1. IM-SDK和客服SDK并存开发指南—Android篇
  2. IM-SDK和客服SDK并存开发指南—iOS篇

 
开源项目

 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
 
13
回复

收集基于环信SDK开发的开源项目 开源项目

xiaoyan2015 回复了问题 • 13 人关注 • 15377 次浏览 • 2019-03-14 13:52 • 来自相关话题

4
评论

在微信小程序里实现聊天室 聊天室 小程序

Tolazy 发表了文章 • 800 次浏览 • 2019-04-19 17:49 • 来自相关话题

第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
下载环信 小程序demo+sdkgit clone https://github.com/easemob/webim-weixin-xcx创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明



集成
登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改


在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用


修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室


然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉然后在roomlist.wxml 修改对应的 变量绑定名称





demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面


Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了





就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx 查看全部
第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
  1. 下载环信 小程序demo+sdk
    git clone https://github.com/easemob/webim-weixin-xcx
  2. 创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明
    ml.png

集成
  1. 登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改
    login.png
  2. 在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用
    tz.png
  3. 修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室
    getroom.png
    然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉
  4. 然后在roomlist.wxml 修改对应的 变量绑定名称
    listui.png
    list.png
  5. demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面
    joinrom.png
    Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧
  6. 到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了
    send.png
    chat.png
    就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx

13
回复

收集基于环信SDK开发的开源项目 开源项目

回复

xiaoyan2015 回复了问题 • 13 人关注 • 15377 次浏览 • 2019-03-14 13:52 • 来自相关话题

4
评论

【开源项目】全国首个开源直播小程序源码

beyond 发表了文章 • 26497 次浏览 • 2018-07-20 17:30 • 来自相关话题

今天你看直播了吗?拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 





作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载


小程序直播demo_2018-06-21.zip







直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 




2、导入源码:将附件的源码解压直接导入 







环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]




填写对相关信息进行注册





注册成功后进行登录




注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用




输入应用名称等信息
 





创建成功后点击应用进入





需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量




3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Tokencurl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'返回格式{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址curl -X POST -H "Authorization: Bearer [管理员Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"成功返回格式:{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户





点击注册IM用户





填写用户信息





创建用户的过程同样也可以通过REST API形式进行curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'
注:应用必须为开放注册





将注册的用户添加为主播curl -X POST -H "Authorization: [管理员Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'返回结果示例:{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播





点击新建房间





填写房间信息




创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件





修改appkey为自己应用的appkey





打开pages/live/index.js修改房间默认拉流地址及直播间房间号





四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:curl -X GET -H "Authorization: Bearer [用户Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]
响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。 查看全部
今天你看直播了吗?
拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 
微信图片_20180725162426.jpg


作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载



预览图.jpg

直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 
Catch9A07(07-20-17-38-30).jpg

2、导入源码:将附件的源码解压直接导入 


Catch1C69(07-20-17-38-30).jpg


环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]
1.png

填写对相关信息进行注册

2.png

注册成功后进行登录
3.png

注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用
4.png

输入应用名称等信息
 

5.png

创建成功后点击应用进入

6.png

需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量
7.png

3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Token
curl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'
返回格式
{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址
curl -X POST -H "Authorization: Bearer [管理员Token]"  " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"
成功返回格式:
{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户

8.png

点击注册IM用户

9.png

填写用户信息

10.png

创建用户的过程同样也可以通过REST API形式进行
curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'

注:应用必须为开放注册

11.png

将注册的用户添加为主播
curl -X POST -H "Authorization: [管理员Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'
返回结果示例:
{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播

12.png

点击新建房间

13.png

填写房间信息
14.png

创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件

15.png

修改appkey为自己应用的appkey

16.png

打开pages/live/index.js修改房间默认拉流地址及直播间房间号

17.png

四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:
curl -X GET -H "Authorization: Bearer  [用户Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]

响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:
curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"
响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。
19
评论

【新手快速入门】集成环信常见问题+解决方案汇总

dujiepeng 发表了文章 • 21984 次浏览 • 2017-05-22 15:51 • 来自相关话题

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
Android sdk 的两种导入方式环信3.0SDK集成小米推送教程EaseUI库中V4、v7包冲突解决方案Android EaseUI里的百度地图替换为高德地图android扩展消息(名片集成)关于会话列表的置顶聊天java.lang.UnsatisfiedLinkError: 的问题android 端 app 后台被杀死收不到消息的解决方案
昵称头像篇
android中如何显示开发者服务器上的昵称和头像 Android中显示头像(接上一篇文章看)环信(Android)设置头像和昵称的方法(最简单暴力的基于环信demo的集成)IOS中如何显示开发者服务器上的昵称和头像【环信公开课第12期视频回放】-所有关于环信IM昵称头像的问题听这课就够了
 
直播篇
一言不合你就搞个直播APP
 
客服集成
IM-SDK和客服SDK并存开发指南—Android篇IM-SDK和客服SDK并存开发指南—iOS篇
 
开源项目
Android简版demoios简版demo凡信2.0:超仿微信的开源项目 凡信3.0:携直播和红包而来高仿微信:Github 3,515 Star方圆十里:环信编程大赛冠军项目泛聊:定一个小目标写一个QQSlack聊天机器人:一天时间做一个聊天机器人TV视频通话:在电视上视频通话视频通话:Android手机视频通话酷信:ios高仿微信公众号助手:与订阅用户聊天沟通
 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
  查看全部
   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇

 
Android篇

昵称头像篇

 
直播篇
  1. 一言不合你就搞个直播APP

 
客服集成
  1. IM-SDK和客服SDK并存开发指南—Android篇
  2. IM-SDK和客服SDK并存开发指南—iOS篇

 
开源项目

 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
 
0
评论

据直播软件开发者们说,关于卡顿,直播系统源码尽力了 直播 直播软件开发 直播系统源码

QQ1449701271 发表了文章 • 79 次浏览 • 2019-05-14 14:13 • 来自相关话题

直播app软件制作、开发完毕后,搭建到服务器上就可以开始运营了,在运营一段时间后,直播平台的客服们最常被问及的问题是:客服小姐姐,为什么我这边看直播会卡顿呀?这时候,客服人员一边会把该问题反馈上去,一边查看下同类问题的反馈量,再根据情况进行回复。


直播卡顿是一件非常常见的事,在网络环境差、源码有BUG、服务器带宽不足、在线人数大导致服务器配置吃紧等情况下都会产生。
当然,直播软件开发者也会在开发直播系统源码时尽量降低直播卡顿的频率,比如:

1、 使用系统官方提供的开源代码编写原生系统,保障系统层面上的优势,原生系统在所有系统开发方式中,是交互性、用户体验感最好的一种开发方式。

2、 使用H.264、H.265等编码方式,降低带宽占用率

3、 默认使用硬编硬解的编解码方式,降低对手机CPU的占用率

4、 使用RTMP流媒体传输协议,保障直播传输速度。

总之,我们先假设直播软件开发者们已经很尽力的开发软件了,直播系统源码本身并没有BUG,开发人员也并非新手或仍坚持使用技术落后的开发方式进行软件开发的团队。在这种情况下,都有什么常见的导致直播卡顿的原因呢?
1、 网络环境差

先说网络环境差这个硬伤,回到开头,客服人员在接到用户反馈“直播卡顿”后,会主动查询是否有其他用户反馈同类问题,如果集中于某一区域有大量用户反应同类问题,可能是当地CDN分发网络出现问题,或由于天气原因导致的网络问题。

而如果反映用户聚集于同一直播间,则可能是主播方面网络的原因。

2、 服务器配置差

我们都知道在某些大主播开播时,由于一瞬间涌入直播间的人数过多而导致直播间进不去的情况是很常见的,在同一时刻,做同一操作的用户量大于服务器所能够承受的并发数,这种情况会使直播间产生卡顿。
用户方网络环境差的情况,或许能够因这份文件的下发而被解决。

5月8日,工信部在官网发布《两部门关于开展深入推进宽带网络提速降费 支撑经济高质量发展2019专项行动的通知》。通知要求:

1、 开展“双G双提”,100M及以上宽带用户比例提升至80%,4G用户渗透率力争提升至80%;

2、 开展“同网同速”,推动我国行政村4G和光纤覆盖率双双超过98%,实现农村宽带网络接入能力和速率基本达到城市同等水平;

3、 开展“精准降费”,推动基础电信企业面向全国建档立卡贫困户给予最大折扣基础通信资费优惠

长期以来,带宽网速“降价提速”的通知不断下达,三大网络运营商也在随之作出响应,农村网络基站覆盖率低、网络环境差的情况是长期存在的,但从一次比一次详尽严谨的通知来看,逐步建成更优质的网络环境,是一件有计划、有实施可能性的事。
本文到此结束,更多与直播软件开发、直播系统源码相关的行业资讯和分析会在以后逐渐放出,敬请期待,需要的朋友请关注我。

声明:文章为原创内容,转载请注明原文链接及作者 查看全部
直播app软件制作、开发完毕后,搭建到服务器上就可以开始运营了,在运营一段时间后,直播平台的客服们最常被问及的问题是:客服小姐姐,为什么我这边看直播会卡顿呀?这时候,客服人员一边会把该问题反馈上去,一边查看下同类问题的反馈量,再根据情况进行回复。


直播卡顿是一件非常常见的事,在网络环境差、源码有BUG、服务器带宽不足、在线人数大导致服务器配置吃紧等情况下都会产生。
当然,直播软件开发者也会在开发直播系统源码时尽量降低直播卡顿的频率,比如:

1、 使用系统官方提供的开源代码编写原生系统,保障系统层面上的优势,原生系统在所有系统开发方式中,是交互性、用户体验感最好的一种开发方式。

2、 使用H.264、H.265等编码方式,降低带宽占用率

3、 默认使用硬编硬解的编解码方式,降低对手机CPU的占用率

4、 使用RTMP流媒体传输协议,保障直播传输速度。

总之,我们先假设直播软件开发者们已经很尽力的开发软件了,直播系统源码本身并没有BUG,开发人员也并非新手或仍坚持使用技术落后的开发方式进行软件开发的团队。在这种情况下,都有什么常见的导致直播卡顿的原因呢?
1、 网络环境差

先说网络环境差这个硬伤,回到开头,客服人员在接到用户反馈“直播卡顿”后,会主动查询是否有其他用户反馈同类问题,如果集中于某一区域有大量用户反应同类问题,可能是当地CDN分发网络出现问题,或由于天气原因导致的网络问题。

而如果反映用户聚集于同一直播间,则可能是主播方面网络的原因。

2、 服务器配置差

我们都知道在某些大主播开播时,由于一瞬间涌入直播间的人数过多而导致直播间进不去的情况是很常见的,在同一时刻,做同一操作的用户量大于服务器所能够承受的并发数,这种情况会使直播间产生卡顿。
用户方网络环境差的情况,或许能够因这份文件的下发而被解决。

5月8日,工信部在官网发布《两部门关于开展深入推进宽带网络提速降费 支撑经济高质量发展2019专项行动的通知》。通知要求:

1、 开展“双G双提”,100M及以上宽带用户比例提升至80%,4G用户渗透率力争提升至80%;

2、 开展“同网同速”,推动我国行政村4G和光纤覆盖率双双超过98%,实现农村宽带网络接入能力和速率基本达到城市同等水平;

3、 开展“精准降费”,推动基础电信企业面向全国建档立卡贫困户给予最大折扣基础通信资费优惠

长期以来,带宽网速“降价提速”的通知不断下达,三大网络运营商也在随之作出响应,农村网络基站覆盖率低、网络环境差的情况是长期存在的,但从一次比一次详尽严谨的通知来看,逐步建成更优质的网络环境,是一件有计划、有实施可能性的事。
本文到此结束,更多与直播软件开发、直播系统源码相关的行业资讯和分析会在以后逐渐放出,敬请期待,需要的朋友请关注我。

声明:文章为原创内容,转载请注明原文链接及作者
0
评论

找优质的直播软件开发公司不用担心系统架构问题 直播平台开发 直播 直播系统 直播软件开发

q2466131704 发表了文章 • 132 次浏览 • 2019-04-28 09:22 • 来自相关话题

文章标题中提到的系统架构问题,在直播软件开发过程中也是非常重要的一部分。为什么这么说呢?我们举个简单的例子,一个施工队盖楼肯定先要把整体的框架用钢筋扎好,然后再进行下一步的工作。开发直播软件也是一样,先把整体的架构设计好罗列出来,再把其中的功能挨个添加进去。
目前市面上的直播软件开发公司都有专人负责系统架构的设计和实现,他们会根据用户需求进行调整,以满足各种应用场景,在这里给大家分享三种常见的直播架构。
1.简单的直播架构
在已有的CDN基础上,再自行搭建一个信令服务器,这样就可以完成服务层的搭建工作了。用户向信令服务器发送共享音视频指令后,再通过相机或摄像头采集数据,编码之后通过直播中常用的RTMP协议将这个流推到CDN。然后接收端向信令服务器发送指令,获取音视频流的名称,再从CDN中拉取该流,经过解码之后渲染在屏幕上,用户就可以观看直播了。建议:在选择CDN服务商时可以选择多家进行对比,比如阿里云和腾讯云等都是国内比较大的服务商。当然,也可以把这件事情交给直播软件开发公司,由他们联系长期合作的服务商提供服务。




2.实时交互的直播架构
为了满足直播交互性强的特性,在设计架构时需要增加自有网络。在音视频数据上传到自有网络之后,还需要通过专门的服务将数据流转成RTMP流推到CDN,对于大多数不参与实时互动的用户来说,他们可以从CDN获取音视频数据了。这种架构既能满足直播用户的实时互动需求,也可以满足其他用户只观看直播不互动的需求,在直播软件开发项目中也是比较常见的一种架构设计。




3.解决高并发的直播架构
可能大家经常看到“直播”“高并发”这些词汇出现,但是对于直播中的高并发并不了解。我们可以这样理解,如果只有1w人观看直播,不是同时进入直播间就没问题,但如果这1w人是在同一时刻进入直播间,如果在直播软件开发过程中没考虑到并发量的问题,那么服务器就会直接崩溃,导致无法观看。所以说,为了解决直播的高负载和并发问题,需要增加资源管理服务器,从而实时监控各个服务的资源情况。




绝大多数人都认为开发直播软件并不需要找专业的开发公司,但实际上来看,找专业的直播软件开发公司还是非常必要的,就像文章中系统架构、CDN服务商和高并发等问题,都可以交给他们负责。比起自己从设计直播架构开始来说,要好多了。希望本篇文章能给大家提供一定的帮助。
本文声明原创,转载请注明出处及链接。 查看全部
文章标题中提到的系统架构问题,在直播软件开发过程中也是非常重要的一部分。为什么这么说呢?我们举个简单的例子,一个施工队盖楼肯定先要把整体的框架用钢筋扎好,然后再进行下一步的工作。开发直播软件也是一样,先把整体的架构设计好罗列出来,再把其中的功能挨个添加进去。
目前市面上的直播软件开发公司都有专人负责系统架构的设计和实现,他们会根据用户需求进行调整,以满足各种应用场景,在这里给大家分享三种常见的直播架构。
1.简单的直播架构
在已有的CDN基础上,再自行搭建一个信令服务器,这样就可以完成服务层的搭建工作了。用户向信令服务器发送共享音视频指令后,再通过相机或摄像头采集数据,编码之后通过直播中常用的RTMP协议将这个流推到CDN。然后接收端向信令服务器发送指令,获取音视频流的名称,再从CDN中拉取该流,经过解码之后渲染在屏幕上,用户就可以观看直播了。建议:在选择CDN服务商时可以选择多家进行对比,比如阿里云和腾讯云等都是国内比较大的服务商。当然,也可以把这件事情交给直播软件开发公司,由他们联系长期合作的服务商提供服务。
1.jpg

2.实时交互的直播架构
为了满足直播交互性强的特性,在设计架构时需要增加自有网络。在音视频数据上传到自有网络之后,还需要通过专门的服务将数据流转成RTMP流推到CDN,对于大多数不参与实时互动的用户来说,他们可以从CDN获取音视频数据了。这种架构既能满足直播用户的实时互动需求,也可以满足其他用户只观看直播不互动的需求,在直播软件开发项目中也是比较常见的一种架构设计。
2.jpg

3.解决高并发的直播架构
可能大家经常看到“直播”“高并发”这些词汇出现,但是对于直播中的高并发并不了解。我们可以这样理解,如果只有1w人观看直播,不是同时进入直播间就没问题,但如果这1w人是在同一时刻进入直播间,如果在直播软件开发过程中没考虑到并发量的问题,那么服务器就会直接崩溃,导致无法观看。所以说,为了解决直播的高负载和并发问题,需要增加资源管理服务器,从而实时监控各个服务的资源情况。
3.jpg

绝大多数人都认为开发直播软件并不需要找专业的开发公司,但实际上来看,找专业的直播软件开发公司还是非常必要的,就像文章中系统架构、CDN服务商和高并发等问题,都可以交给他们负责。比起自己从设计直播架构开始来说,要好多了。希望本篇文章能给大家提供一定的帮助。
本文声明原创,转载请注明出处及链接。
0
评论

直播软件开发业务需要考虑自适应的问题吗? 直播平台开发 直播 直播软件开发

q2466131704 发表了文章 • 139 次浏览 • 2019-04-27 09:28 • 来自相关话题

大家虽然经常观看直播,但是实际上对直播的流程并不是非常了解。视频直播的流程可以简单分为:采集、处理、编码和封装、推流(到服务器)、分发、播放。其中,在直播软件开发中需要注意的就是推流端的实现问题,如果流推不出去,用户就无法正常观看直播。目前市面上有很多服务商,购买源码时还需要看看他们的程序在自适应方面做的好不好。
1.帧率和码率的自适应
如果直播推流出现了问题,最容易出现的一个问题就是卡顿。假如我们在观看直播时网络环境较差,那么就可以将帧率或者是码率降低一点,音视频流就可以正常推出去。在码率自适应的时候,是可以直接反馈到编码器的,然后动态调整自己的码率,使得传出来的视频码率下降,而帧率的控制相对来说比较简单,在此就不多作赘述了。
2.软硬自适应
大部分人反馈比较多的就是,在观看直播的时候手机会出现发热现象,其实这就涉及到了在直播软件开发过程中,软硬编码的方式选择问题。比如硬件编码,它的优点就是不会导致手机发热,但是音视频比较南通不,而且兼容性不太好。软件编码的话,码率低并且画质好,它也是导致手机发热的“罪魁祸首”。
3.算法自适应
对于推流端来说,它最主要的任务就是将更好的直播画质给推出来,要想使得直播画质变得更好,可以采用H.265编码,举个简单的例子就是,H.264能推出来480P的画质,那么经过H.265之后就能推出来720P的画质。在直播这种交互性强的应用场景,直播画质是否清晰也是评价软件是否优质的标准之一。不仅是主播,现在大多数用户对于画质方面的要求非常严格,假如说用户花钱观看一个主播,但是始终无法看到高清状态下的主播,用户的产品体验就会变得非常糟糕,直播平台就有可能会流失掉一个用户。所以说,选择适合直播应用场景的编码标准也是非常重要的。

在直播应用场景中,自适应并不算是非常复杂的问题。如果想要购买一套程序,但是又不确定程序的质量应该怎么办呢?是否需要考虑自适应的问题呢?事实上,现在的直播软件开发商在购买程序之前,会先提供产品演示供我们下载体验,如果觉得可以再进行下一步的开发或者购买流程,当然这只是针对正规商家,其他渠道来源的程序是否稳定我们就无从得知了。最后,还是建议大家从正规渠道购买程序吧,这样不仅质量有保证,还更加省心。
本文声明原创,转载请注明出处。 查看全部
大家虽然经常观看直播,但是实际上对直播的流程并不是非常了解。视频直播的流程可以简单分为:采集、处理、编码和封装、推流(到服务器)、分发、播放。其中,在直播软件开发中需要注意的就是推流端的实现问题,如果流推不出去,用户就无法正常观看直播。目前市面上有很多服务商,购买源码时还需要看看他们的程序在自适应方面做的好不好。
1.帧率和码率的自适应
如果直播推流出现了问题,最容易出现的一个问题就是卡顿。假如我们在观看直播时网络环境较差,那么就可以将帧率或者是码率降低一点,音视频流就可以正常推出去。在码率自适应的时候,是可以直接反馈到编码器的,然后动态调整自己的码率,使得传出来的视频码率下降,而帧率的控制相对来说比较简单,在此就不多作赘述了。
2.软硬自适应
大部分人反馈比较多的就是,在观看直播的时候手机会出现发热现象,其实这就涉及到了在直播软件开发过程中,软硬编码的方式选择问题。比如硬件编码,它的优点就是不会导致手机发热,但是音视频比较南通不,而且兼容性不太好。软件编码的话,码率低并且画质好,它也是导致手机发热的“罪魁祸首”。
3.算法自适应
对于推流端来说,它最主要的任务就是将更好的直播画质给推出来,要想使得直播画质变得更好,可以采用H.265编码,举个简单的例子就是,H.264能推出来480P的画质,那么经过H.265之后就能推出来720P的画质。在直播这种交互性强的应用场景,直播画质是否清晰也是评价软件是否优质的标准之一。不仅是主播,现在大多数用户对于画质方面的要求非常严格,假如说用户花钱观看一个主播,但是始终无法看到高清状态下的主播,用户的产品体验就会变得非常糟糕,直播平台就有可能会流失掉一个用户。所以说,选择适合直播应用场景的编码标准也是非常重要的。

在直播应用场景中,自适应并不算是非常复杂的问题。如果想要购买一套程序,但是又不确定程序的质量应该怎么办呢?是否需要考虑自适应的问题呢?事实上,现在的直播软件开发商在购买程序之前,会先提供产品演示供我们下载体验,如果觉得可以再进行下一步的开发或者购买流程,当然这只是针对正规商家,其他渠道来源的程序是否稳定我们就无从得知了。最后,还是建议大家从正规渠道购买程序吧,这样不仅质量有保证,还更加省心。
本文声明原创,转载请注明出处。
0
评论

初试直播软件开发项目需要了解后台开发语言吗? 直播平台开发 直播软件开发 直播

q2466131704 发表了文章 • 167 次浏览 • 2019-04-25 14:51 • 来自相关话题

刷论坛的时候看到有位朋友发帖,大概意思就是自己想尝试直播软件开发项目,简单说就是做个直播软件,但发现有后台有两种不同的开发语言:java和php,所以才发帖求助帮他解答两个后台之间的区别。那么实际上,java后台和php后台到底有什么区别呢?
1.两种编程语言有什么区别?
先来说一下php,它最大的特点就是非常迅速,甚至都可以不用框架去写一个功能,只需要几行代码就能搞定了。但java就不一样了,它需要先想一下用怎样的框架,然后再选择配置各种数据库、过滤器等。




2.java和php在技术层面有何区别?
php汲取了java和c以及perl等语言的所有优点,专注于互联网领域,在web领域几乎没有语言可以和php相比。而java只是面向对象开发,虽然功能强、分支多,但它所具备的优势往往也是它的劣势。
3.java和php在市场份额方面有何区别?
Java的语言相对比较老,经过了多年时间的发展,在C/S和B/S领域占据一定的地位,但是随着社会需求的不断变化,java的市场在逐渐减少。而php的市场份额只需要看web领域就足够了,因为web领域php的市场超过了80%,剩下的就是向asp、C#、python等,大部分企业都在使用php,Facebook和新浪微博也在使用php。相比较之下,php的市场份额比java要多。




4.哪一种更适合直播软件开发业务?
对于开发直播软件来讲,我们需要考虑到一个问题花费,这是大多数人都十分关注的。Java后台虽然稳定性、承载量等方面都比php要好,但是java后台开发起来费用高、开发周期长、后期的维护成本也很高,所以对于一些启动资金有限的人来说并不划算,但并不代表java后台就不能适用于直播业务。相比之下,php后台不但开发周期短,而且也不需要过高的费开发用,目前大多数软件开发公司都默认是php后台。需要避免的误区就是,java后台和php后台两种都可以选择,只不过php后台从各方面来看的话性价比更高一些。
以上就是java后台和php后台的区别,在此只作参考。对于初试直播软件开发项目的朋友来说,如果实在不知道选择哪种后台的话,不妨把这个棘手的问题交给开发商,让他们帮你制定相对应的直播解决方案,当然,选择正规的官方公司才是最靠谱的。如果大家对直播业务感兴趣,可以在下方与我互动。
本文声明原创,转载请注明出处。 查看全部
刷论坛的时候看到有位朋友发帖,大概意思就是自己想尝试直播软件开发项目,简单说就是做个直播软件,但发现有后台有两种不同的开发语言:java和php,所以才发帖求助帮他解答两个后台之间的区别。那么实际上,java后台和php后台到底有什么区别呢?
1.两种编程语言有什么区别?
先来说一下php,它最大的特点就是非常迅速,甚至都可以不用框架去写一个功能,只需要几行代码就能搞定了。但java就不一样了,它需要先想一下用怎样的框架,然后再选择配置各种数据库、过滤器等。
20160112174716_24356.jpg

2.java和php在技术层面有何区别?
php汲取了java和c以及perl等语言的所有优点,专注于互联网领域,在web领域几乎没有语言可以和php相比。而java只是面向对象开发,虽然功能强、分支多,但它所具备的优势往往也是它的劣势。
3.java和php在市场份额方面有何区别?
Java的语言相对比较老,经过了多年时间的发展,在C/S和B/S领域占据一定的地位,但是随着社会需求的不断变化,java的市场在逐渐减少。而php的市场份额只需要看web领域就足够了,因为web领域php的市场超过了80%,剩下的就是向asp、C#、python等,大部分企业都在使用php,Facebook和新浪微博也在使用php。相比较之下,php的市场份额比java要多。
t01515cca18405c61d9.jpg

4.哪一种更适合直播软件开发业务?
对于开发直播软件来讲,我们需要考虑到一个问题花费,这是大多数人都十分关注的。Java后台虽然稳定性、承载量等方面都比php要好,但是java后台开发起来费用高、开发周期长、后期的维护成本也很高,所以对于一些启动资金有限的人来说并不划算,但并不代表java后台就不能适用于直播业务。相比之下,php后台不但开发周期短,而且也不需要过高的费开发用,目前大多数软件开发公司都默认是php后台。需要避免的误区就是,java后台和php后台两种都可以选择,只不过php后台从各方面来看的话性价比更高一些。
以上就是java后台和php后台的区别,在此只作参考。对于初试直播软件开发项目的朋友来说,如果实在不知道选择哪种后台的话,不妨把这个棘手的问题交给开发商,让他们帮你制定相对应的直播解决方案,当然,选择正规的官方公司才是最靠谱的。如果大家对直播业务感兴趣,可以在下方与我互动。
本文声明原创,转载请注明出处。