基于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+
效果演示
目录
目录
2.2 修改测试UserId + UserSig与设置cdnUrl
2.2 修改测试UserId + UserSig与设置cdnUrl
参考文档资源:
uniapp 腾讯云MLVB原生插件文档:智密-腾讯云移动直播(MLVB) · 语雀https://www.yuque.com/zhimikeji/rnbgvg
uniapp Svga原生插件文档:智密-Svga礼物特效播放插件-直播礼物特效 - DCloud 插件市场https://ext.dcloud.net.cn/plugin?id=6076
腾讯云 MLVB 原生SDK文档:移动直播 SDK - 文档中心 - 腾讯云https://cloud.tencent.com/document/product/454
uniapp 腾讯云MLVB原生插件地址:腾讯云移动直播-直播带货连麦与PK(付费版)-智密科技 - DCloud 插件市场https://ext.dcloud.net.cn/plugin?id=4729
uniapp 腾讯云TXIM Smart原生插件地址:智密腾讯云即时通讯TXIM Smart版本-智密科技 - DCloud 插件市场https://ext.dcloud.net.cn/plugin?id=5906
uniapp Svga原生插件地址:智密-Svga礼物特效播放插件-直播礼物特效-智密科技 - DCloud 插件市场https://ext.dcloud.net.cn/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.net.cn/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.net.cn/plugin?id=5906
1.3 配置测试用的腾讯云UserId + UserSig
腾讯云系列的SDK均采用userId + UserSig的方式做用户登陆,一般情况下我们是通过后端返回的方式获取,但是这里我们显然还没有接入后端,因此我们需要自己生成多个测试使用的UserId + UserSig,一般五个即可,生成之后我们替换到Demo中便可以看到效果。
ÿ