全国首个开源直播小程序源码！免费下载！！！

今天你看直播了吗？

小程序日益普及，用户习惯已经养成，商业直播也从以前的公众号直播升级为小程序直播，小程序直播以公众号微信直播和APP直播更加简洁、流畅、低延时、多入口的众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。
 
作为一名环信生态圈资深开发者，本着对技术的热衷，对环信的眷恋和对党的忠诚，基于环信即时通讯云写了“直播购物小程序”，目前项目源码已全部免费开放，希望对有需求的企业和开发者提供一个思路和参考。

直播购物小程序源码：github地址

直播购物小程序运行预览图 

小程序体验指南（小程序内测名额有限！！！）：

扫码拉您进入直播小程序内测微信群（已有400名小伙伴在这里交流）

环信小程序直播技术文档

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

填写对相关信息进行注册

注册成功后进行登录

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

输入应用名称等信息
 

创建成功后点击应用进入

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

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用户

点击注册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
}

 对小程序直播感兴趣的，可以关注环信公开课，8月8日线上讲解如何搭建小程序直播