admin管理员组文章数量:1666073
基于uniapp + vue 实现仿斗鱼虎牙腾讯云移动直播应用实践,实现以下功能
1: 用户登陆
2: 房间管理
3: 房间聊天
4: 直播美颜
5: Svga礼物动画
6: 一对一连麦观众
项目开发环境
IDE:HbuilderX 3.0+
开发框架:uniapp + vue2.x + sass
运行平台:Android、IOS
环境要求:window7+,macOS 10.12.6+, node 10.14.5+
效果演示
目录
1. 从0开始配置工程
目录
1. 从0开始配置工程项目
1.1 获取Demo工程并且导入到HbuilderX中
1.2 试用云端插件并且导入到Demo工程中
1.2.1 导入MLVB依赖的TXIM Smart
1.3 配置测试用的腾讯云UserId + UserSig
1.4 打包自定义基座,并且使用自定义基座进行开发调试
2. 了解仿微信App应用的设计与改造
2.1 界面布局的设计与定制化开发
2.2 修改测试UserId + UserSig与设置cdnUrl
2.3 创建直播间与开启相机预览推流
2.4 监听事件实现收发聊天文本消息
3. 主播美颜的实现
3.1 获取美颜管理对象以初始化美颜实例
3.2 设置美颜参数
3.3 高级版本美颜的获取
4. 一对一主播观众连麦的实现
4.1 连麦流程的探究与实践
4.2 主动发起连麦 + 连麦业务处理
4.3 主动断开连麦 + 退出连麦状态
5. 观众送礼的实现
5.1 试用云端Svga插件并且导入到Demo工程中
5.2 初始化Svga与加载Svga
1. 从0开始配置工程
1.1 获取Demo工程并且导入到HbuilderX中
1.2 试用云端插件并且导入到Demo工程中
1.2.1 导入MLVB依赖的TXIM Smart
1.3 配置测试用的腾讯云UserId + UserSig
1.4 打包自定义基座,并且使用自定义基座进行开发调试
2. 了解仿微信App应用的设计与改造
2.1 界面布局的设计与定制化开发
2.2 修改测试UserId + UserSig与设置cdnUrl
2.3 创建直播间与开启相机预览推流
2.4 监听事件实现收发聊天文本消息
3. 主播美颜的实现
3.1 获取美颜管理对象以初始化美颜实例
3.2 设置美颜参数
3.3 高级版本美颜的获取
4. 一对一主播观众连麦的实现
4.1 连麦流程的探究与实践
4.2 主动发起连麦 + 连麦业务处理
4.3 主动断开连麦 + 退出连麦状态
5. 观众送礼的实现
参考文档资源:
uniapp 腾讯云MLVB原生插件文档:智密-腾讯云移动直播(MLVB) · 语雀https://www.yuque/zhimikeji/rnbgvg
uniapp Svga原生插件文档:智密-Svga礼物特效播放插件-直播礼物特效 - DCloud 插件市场https://ext.dcloud/plugin?id=6076
腾讯云 MLVB 原生SDK文档:移动直播 SDK - 文档中心 - 腾讯云https://cloud.tencent/document/product/454
uniapp 腾讯云MLVB原生插件地址:腾讯云移动直播-直播带货连麦与PK(付费版)-智密科技 - DCloud 插件市场https://ext.dcloud/plugin?id=4729
uniapp 腾讯云TXIM Smart原生插件地址:智密腾讯云即时通讯TXIM Smart版本-智密科技 - DCloud 插件市场https://ext.dcloud/plugin?id=5906
uniapp Svga原生插件地址:智密-Svga礼物特效播放插件-直播礼物特效-智密科技 - DCloud 插件市场https://ext.dcloud/plugin?id=6076
1. 从0开始配置工程项目
1.1 获取Demo工程并且导入到HbuilderX中
获取Demo工程工程可以通过插件页面获取,插件页面地址如下
腾讯云移动直播-直播带货连麦与PK-智密科技 - DCloud 插件市场
获取方式很简单,通过点击导入示例项目的按钮导入工程即可,具体如下:
在完成工程导入之后,我们还需要对项目进行一些调整,双击打开manifest.json(根目录下),选择“基础配置”,点击重新获取AppId,否则将有可能出现打包自定义基座时报错AppId不属于该账户的问题。
1.2 试用云端插件并且导入到Demo工程中
打开uniapp 腾讯云TXIM原生插件地址:腾讯云移动直播-直播带货连麦与PK智密科技 - DCloud 插件市场https://ext.dcloud/plugin?id=4729 点击试用,选择我们刚刚重新获取之后的AppId,为该AppId申请免费试用插件。
确定申请完成之后,我们回到HbuilderX中,打开manifest.json(根目录下),点击App原生插件配置,导入云端插件。
确定显示如图所示(如果需要Svga插件的,则需要再多1个对应的云端插件)之后,开始下一步
1.2.1 导入MLVB依赖的TXIM Smart
mlvb底层依赖于txim,因此我们需要引入TXIM Smart(定价仅0.01元),导入的过程参考上面流程
txim smart插件链接:智密腾讯云即时通讯TXIM Smart版本-智密科技 - DCloud 插件市场https://ext.dcloud/plugin?id=5906
1.3 配置测试用的腾讯云UserId + UserSig
腾讯云系列的SDK均采用userId + UserSig的方式做用户登陆,一般情况下我们是通过后端返回的方式获取,但是这里我们显然还没有接入后端,因此我们需要自己生成多个测试使用的UserId + UserSig,一般五个即可,生成之后我们替换到Demo中便可以看到效果。
ÿ
版权声明:本文标题:【手把手教程】uniapp + vue 从0搭建仿斗鱼虎牙直播App:腾讯云MLVB移动直播实践连麦PK+带货 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1730063916a1221204.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论