五叶神
五叶神
  • 发布:2021-12-07 09:30
  • 更新:2023-11-04 18:44
  • 阅读:8141

【经验分享】uni-App全端直播解决方案

分类:uni-app

主播端

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

3 关注 分享
小菜啊 DCloud_Android_DQQ HRK

要回复文章请先登录注册

无名之辈4133

无名之辈4133

请问主播端关闭麦克风,不推音频怎么实现,谢谢
2023-11-04 18:44
3***@qq.com

3***@qq.com

回复 奥特曼 :
还做直播app?可以合作下
2023-05-25 17:23
奥特曼

奥特曼

Mark一下. 计划找人做个直播app. 看看有机会合作一下不
2022-05-22 15:27
优服科技

优服科技

live-pusher 有摄像头焦距设置么》??
2022-03-29 17:10
五叶神

五叶神 (作者)

回复 稳定点行不行 :
主要分享解决方案,开发遇到问题可以交流,源码无法提供
2021-12-27 15:26
五叶神

五叶神 (作者)

回复 稳定点行不行 :
没有源码,客户项目
2021-12-27 15:18
稳定点行不行

稳定点行不行

大哥,有项目地址吗
2021-12-25 22:23