
手册阅读须知:本手册仅针对JooLunPro旗舰版
JooLun支持版本:V1.0.5
直播功能概述
旧版直播使用微信小程序直播功能,仅支持小程序内观看直播。现在微信关闭了申请直播功能入口,新创建的小程序都无法申请开通直播功能。
所以我们接入了阿里云直播,新旧版直播对比如下
| 平台 | 小程序 | APP | H5 | PC |
|---|---|---|---|---|
| 旧版直播(微信小程序直播) | √ | × | × | × |
| 新版直播(阿里云) | √ | √ | √ | ×(可自行二开接入) |
注意:新版直播必须使用商户端app开播
阿里视频直播配置
[阿里官方文档][https://help.aliyun.com/zh/live/product-overview/what-is-apsaravideo-live]
-
域名配置
-
添加播流域名,并配置CNAME,通过配置向导引导解析域名

-
同理添加推流域名,并配置配置CNAME
-
配置成功

-
关联推流和播流域名
选择播流域名,点击域名配置,选择推流域名-添加推流信息,选择推流域名


-
-
获取鉴权key,以播流为例,同理获得推流鉴权key

-
根据需要配置HTTPS配置
-
播流域名跨域配置:

-
测试可以通过下面两个工具进行,具体参考文档
[OBS推流工具文档][https://help.aliyun.com/zh/live/obs?spm=a2c4g.11186623.0.0.6c0c7641ceSKqw]
-
平台配置
应用名称可自己定义,其余配置在以上阿里直播获取

直播文档说明
本系统使用阿里直播实现了视频直播带货功能,可以新增直播间和直播商品,并进行观看直播和查看直播商品功能。
直播开播和播放
首先在web后台新增好直播配置和直播间才能开播
-
店铺店员在商户端App开播
店铺用户登录商户端App进入直播列表,然后选择直播间进行开播
-
普通用户在商城端观看
普通商城用户打开正在直播的直播间进行观看直播
兼容微信小程序,H5,App端播放
直播说明
- 直播延迟测试在20秒以上,如果想要低延迟,需要支持超低延迟的播放器(具体没测过,需要自行研究),并且购买阿里直播超低延迟套餐。
- 为保证直播间人数正确,同一用户只能进入直播间一次,多次进入会将其他端踢下线。
- 直播内容审核请查看阿里直播内容安全说明(可根据需要开通智能直播审核)
- 直播录制功能:暂无此功能,如需要请自行开发。文档
- 阿里直播常见问题
直播开启
- 开通与购买阿里视频直播
- 在阿里直播官方配置直播域名
- 在商城后台系统添加直播配置信息
- 在商城后台系统新增店铺直播间
- 店铺用户在手机商户端开启直播
- 普通用户在商城端观看直播
开发说明
- 为了保证直播观看效果,直播使用uniapp的nvue原生渲染引擎进行页面开发,nvue开发文档说明 https://uniapp.dcloud.net.cn/tutorial/nvue-outline.html
- 注意事项:nvue只支持部分css
- 为保证直播间人数正确,同一用户只能进入直播间一次,多次进入会将其他端踢下线。
直播间逻辑
- 获取直播间信息判断是否满足 -> 获取推流/播流地址 -> 连接WebSocket -> 消息发送 -> 直播间状态控制(通过WebSocket)
直播和播放流程说明
-
店铺店员在商户端App开播
具体步骤: 获取直播间信息判断是否满足开播条件 -> 获取推流地址 -> 开播 -> 下播 -> 发送弹幕文字
-
普通用户在商城端观看
具体步骤: 获取直播间信息判断是否满足播放条件 -> 获取播流地址 -> 观看 -> 浏览直播商品 -> 发送弹幕文字
直播推流(开播)
必须使用商户 App 端开播, 使用的是uniapp的推流组件live-pusher,文档说明: https://uniapp.dcloud.net.cn/component/live-pusher.html#live-pusher
- 可以设置开播的摄像头(前后摄像头)
- 微信小程序开播说明:理论上支持微信小程序开播,但开播需要获取相应的摄像头和麦克风权限,检查是否开启直播推流开关,以及微信小程序合规审核要求,需要自行测试兼容。
弹幕
使用WebSocket实现,保证弹幕和用户实时性
- 消息对象说明
msgType - 其他消息类型可自行新增支持
0 : 连接心跳
1 : 收到文本消息
{
userType: '', // 用户类型: 0.用户 1.主播
nickName: '',
content: '' // 约定除($LikeMsg$: 点赞消息$JoinLive$: 进入直播间消息)外,其他为普通文本内容,如果要扩展其他消息可以约定: $xxx$ 方式,或和后台约定消息类型msgType扩展
}
2 : 商品讲解
{
explainStatus: '1', // 讲解状态: 0.未讲解 1.讲解中
spuId: '' // 讲解的商品Id
}
3 : 直播状态变更
{
liveStatus: '1' // 直播状态: 1.直播中 2.直播结束 3.直播暂停 -1.违规下线
}
4 : 直播观看人数变更
{
liveUserCount: 0 // 直播观看人数
}
其他
- 阿里直播官方开发文档阿里直播官方开发文档
- 注意:由于端口差异,iOS的App端会没有点赞的冒泡效果动画,但是能发送点赞消息
- 如果直播间的结束时间已经过期,但直播状态不是直播结束状态,那么在主播再次进入 直播间的时,会将主播间的状态修改为直播结束的状态。