主播端
使用plus.video.LivePusher H5+原生方法 或者 live-pusher组件,我的项目使用的plus LivePusher实现,主Webview创建LivePusher,创建背景透明子Webview,实现直播上层渲染所有操作方法,包括商品上屏下屏、聊天、优惠券、直播设置等等操作全部在子页面中。
观看端
一、小程序使用live-player组件播放,直播流使用rtmp协议;
二、App使用video组件,聊天、商品等同样是创建的子Webview,静态hybrid方式,外链vue.js渲染数据,与主页面数据通信参考:https://ask.dcloud.net.cn/article/39086;
直播流使用rtmp协议;
三、H5端使用B站直播解决方案,flv.js方式播放直播源,最终为video播放,可以直接在npm上找相应的库,比如vue-flv-player,直播流使用httpflv协议;
H5直播存在很多兼容问题,flv流协议仅支持pc、安卓非微信浏览器,最终改用HLS协议(m3u8),流切片方式,延迟较高10-20s,但是能兼容安卓 ios 微信浏览器,使用video.js库。(浏览器播放需要注意浏览器不允许用户打开直接播放有声视频,所以先设置静音,提示用户操作开启声音)
长连接通信主播端、H5端使用signalR,小程序、App使用wx.connectSocket封装,实现与signalR一样的方法条件编译引入即可;
直播相关知识参考:https://www.cnblogs.com/saysmy/p/7851911.html
7 个评论
要回复文章请先登录或注册
无名之辈4133
3***@qq.com
奥特曼
优服科技
五叶神 (作者)
五叶神 (作者)
稳定点行不行