关于javascript:手把手教程uniapp-vue-从0搭建仿斗鱼虎牙直播App腾讯云MLVB移动直播实践连麦PK带货

基于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+

成果演示

教程目录

参考文档资源：
uniapp 腾讯云MLVB原生插件文档：https://www.yuque.com/zhimike...
uniapp Svga原生插件文档：https://ext.dcloud.net.cn/plu...
腾讯云 MLVB 原生SDK文档：https://cloud.tencent.com/doc...
uniapp 腾讯云MLVB原生插件地址：https://ext.dcloud.net.cn/plu...
uniapp 腾讯云TXIM Smart原生插件地址：https://ext.dcloud.net.cn/plu...
uniapp Svga原生插件地址：https://ext.dcloud.net.cn/plu...

1. 从0开始配置工程项目

1.1 获取Demo工程并且导入到HbuilderX中

获取Demo工程工程能够通过插件页面获取，插件页面地址如下
https://ext.dcloud.net.cn/plu...
获取形式很简略，通过点击导入示例我的项目的按钮导入工程即可，具体如下：

在实现工程导入之后，咱们还须要对我的项目进行一些调整，双击关上manifest.json(根目录下)，抉择“根底配置”，点击从新获取AppId，否则将有可能呈现打包自定义基座时报错AppId不属于该账户的问题。

1.2 试用云端插件并且导入到Demo工程中

关上uniapp 腾讯云TXIM原生插件地址：https://ext.dcloud.net.cn/plu... 点击试用，抉择咱们刚刚从新获取之后的AppId，为该AppId申请收费试用插件。

确定申请实现之后，咱们回到HbuilderX中，关上manifest.json(根目录下)，点击App原生插件配置，导入云端插件。

确定显示如图所示（如果须要Svga插件的，则须要再多1个对应的云端插件）之后，开始下一步

1.2.1 导入MLVB依赖的TXIM Smart

mlvb底层依赖于txim，因而咱们须要引入TXIM Smart(定价仅0.01元)，导入的过程参考下面流程
txim smart插件链接：https://ext.dcloud.net.cn/plu...

1.3 配置测试用的腾讯云UserId + UserSig

腾讯云系列的SDK均采纳userId + UserSig的形式做用户登陆，个别状况下咱们是通过后端返回的形式获取，然而这里咱们显然还没有接入后端，因而咱们须要本人生成多个测试应用的UserId + UserSig，个别五个即可，生成之后咱们替换到Demo中便能够看到成果。
（先确保曾经登陆腾讯云并且创立了利用，创立利用参考官网文档：https://cloud.tencent.com/doc...）
腾讯云IM控制台：https://console.cloud.tencent...
关上腾讯云IM控制台后点击对应的利用进入治理，在这里咱们须要先记录一下SDKAppID，如下图所示咱们的SDKAppID是1400521882。

失去SDKAppID之后，咱们点击【辅助工具】，点击【UserSig生成&校验】，在这里咱们通过腾讯云IM控制台的辅助工具来失去所需的UserId + UserSIg，留神这里生成的有效期是180天，请在有效期内实现测试。

反复操作，这样咱们就失去了5组UserID + UserSig，以及SDKAppID，数据如下：

{ id: '10001', sign: 'eJwtzF0LgjAYBeD-suuQd5tbInRjGF2kGa3upU17G8owkyL6782Py-MczvkSdTgHg*lITFgAZDVl1KbtscKJKQDQpXhqWzqHmsQ0BAgjSSnMjXk77Ix3IQTzi1l7bEaTXvlaRnx5wXr8rS6FKur0w4fH8XXS21zyJL1fG9btVCttn6Aubb6-ZdmG-P6UADBd' },{ id: '10002', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgZGUInilOzEgoLMFCUrQxMDAxMLM0NDA4hMakVBZlEqUNzU1NQIqAMiWpKZCxIzA4oam5sbWEJNyUwHmlvh7e*X52VhWelqnpJtmh9WGZZi6OxvmBRmll0eox9u4Znk4pNvnm*WkesYaqtUCwC*HDA6' },{ id: '10003', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgbGUInilOzEgoLMFCUrQxMDAxMLM0NDA4hMakVBZlEqUNzU1NQIqAMiWpKZCxIzA4oam5sbGUFNyUwHWZceo5-sGuzt7p-pGaNfWpUT6F0Q5OrqX2js5Z6aWRkUkuqSl1Xk6ePs6BaVbqtUCwDxBzDx' },{ id: '10004', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgYmUInilOzEgoLMFCUrQxOgqIWZoaEBRCa1oiCzKBUobmpqagTUAREtycwFiZkBRY3NzY2NoaZkpgPNdXb1TvMMSk0xSw33ci5N83YJCnKr8vfyMshIdUqO0S-PdUvL94r0NCitski3VaoFAL*XMJM_' },{ id: '10005', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgamUInilOzEgoLMFCUrQxOgqJGhhYURRCa1oiCzKBUobmpqagTUAREtycwFiZkZm5kaG1oaGkJNyUwHmluVm1fkUxCaWFjqllGYEqOfWxQSFlkWblmQ7JTqHpQcllZk7Jvo6ZZrFuUUaKtUCwD1lzGr' },const SDKAppID = 1400521882

1.4 打包自定义基座，并且应用自定义基座进行开发调试

在打包之前，咱们须要装置依赖，这里须要开发者装置nodejs运行环境，以及装置hbuilderx scss编译插件，没有装置的开发者请依照以下链接装置对应的环境。

nodejs官方网站：https://nodejs.org/zh-cn/
nodejs中文网：http://nodejs.cn
scss/sass编译插件：https://ext.dcloud.net.cn/plu...

装置实现之后，开发者能够在hbuilderx中关上终端，输出以下命令实现依赖装置。

因为uniapp框架限度问题，应用原生插件必须先打包自定义基座，而后通过自定义基座开发调试。这里咱们先演示安卓如何打包自定义基座并且应用自定义基座进行开发（IOS操作流程统一，证书须要应用开发证书或者企业证书，不能应用公布证书）

留神：这里提醒的报错无关紧要，因为TXIM Smart的确不存在这些性能，只是应用的为同一个JSSDK而已，对于App开发而言没有区别。

2. 理解仿微信App利用的设计与革新

2.1 界面布局的设计与定制化开发

对于挪动直播利用来说，Demo依据UI性能的不同设打算将页面划分为3个大块，多个组件，具体下：

通过将UI组件与业务逻辑拆散的形式，升高了业务与UI整体的耦合度，使得须要定制化开发UI的时候只批改UI组件即可，升高开发成本。
对于业务界面而言，分为3个界面，别离如下：

login.nvue - 登录界面，用于登录腾讯云账号
homepage.nvue - 抉择登录的账号角色
pusher.nvue - 主播界面，进行创立房间，聊天，美颜配置，连麦治理等操作
liveroom.nvue - 直播间，观众所见的画面
这里须要留神的地点，因为这里均用到了自定义控件，因而直播间，开播等界面都须要应用nvue

对于开发者如何进行革新与调试，次要分为2种场景：

更换主题配色与格调。这种状况下次要批改组件内的图标与色彩即可，对于业务界面局部则依据需要批改即可。
更换界面排版格调。这种状况下次要批改组件内的图标与排版地位即可，对于改变较大的局部须要依据排版的要求，调整liveroomLayout（比方新增slot等操作）。

2.2 批改测试UserId + UserSig与设置cdnUrl

在demo工程中内置的测试UserId与UserSig存在过期的状况，在下面的操作中咱们配置了属于咱们测试的UserId和UserSig，在这里咱们需改为咱们下面配置的UserId和UserSig，这样能够不便咱们开发调试App，当然同时咱们也须要批改SDKAppID，否则将会报错提醒UserId匹配不上该SDKAppID的谬误。
批改工作很简略，咱们只须要批改2处中央，如下图标记：

留神：批改之后咱们不须要从新打包自定义基座，然而最好重新启动调试，因为uniapp的编译机制，有时候会导致局部安卓设施并不会刷新同步额定引入的js文件，从而呈现一些调试开发上的意外“惊喜”

在观众端播放视频的时候，咱们须要配置本人的曾经备案了的cdnUrl，具体域名配置的流程参考以下链接：
https://cloud.tencent.com/doc...
假如咱们曾经配置完了自定义域名，那么咱们还须要在main.js中批改sdk配置。

2.3 创立直播间与开启相机预览推流

首先咱们在创立直播间之前，咱们须要开启相机的本地预览，开启相机预览咱们须要先获取用户的相机麦克风权限，具体获取形式如下：

import mlvb from '../tx-jssdk/mlvb-jssdk'mlvb.checkPermissions(ret => {  if (ret.code !== 0) {    return  }  // 这里获取到了相机麦克风权限})

获取到相机麦克风权限之后，咱们就能够开始开启本地相机预览了。具体代码如下：

import mlvb from '../tx-jssdk/mlvb-jssdk'let frontCamera = true // true = 是用前置摄像机 false = 应用后置摄像机mlvb.startLocalPreview(frontCamera)

开启本地相机预览之后，主播做好了美颜配置等操作之后，就能够开始创立直播间，依据腾讯云官网举荐，最好是应用userid作为直播间id，确保直播间id的唯一性，也不便底层治理数据（底层都是间接依据userid确定推拉流streamid的），创立完直播间之后底层将会主动推流用户视频流，开发者不须要自行推拉流。代码如下：

let userId = '' // userId传入以后登录用户的userId即可mlvb.createRoom(userId, {}, res => {    // 创立房间后果的回调})

创立直播间实现之后，观众就能够退出房间啦，当然开发者后续也能够操作直播的一些配置，比方切换摄像头，静音麦克风

let mute = falsemlvb.muteLocalAudio(mute)mlvb.switchCamera()let enable = truemlvb.enableTorch(enable)

2.4 监听事件实现收发聊天文本音讯

聊天文本音讯的收发在框架内很简略，只须要监听文本音讯，发送文本音讯2个api即可，具体如下：

mlvb.setListener(this.mlvbroomListener)// 以下的办法写在methods内mlvbroomListener (e) {  let { type, code, data } = e  switch (type) {    case 'onRecvRoomTextMsg':      // 收到文本音讯      this.onRecvRoomTextMsg(data)      break  }}onRecvRoomTextMsg (data) {  this.chatLogs.push({    nick: data.userName || data.senderID,    message: data.message,    payload: data  })}

mlvb.sendRoomTextMsg(text, res => {  if (res.code !== 0) {    console.error(res)    this.toast('发送失败')    return  }  console.log(res)  this.chatLogs.push({    nick: res.data.userName || res.data.userID,    message: res.data.message,    payload: res  })})

3. 主播美颜的实现

3.1 获取美颜治理对象以初始化美颜实例

从当初开始，底层jssdk会主动初始化美颜实例，咱们无需关怀，对于局部状况下呈现的无奈失常初始化美颜实例的，咱们能够通过以下api手动初始化

const BeautyManager = mlvb.getBeautyManager() // 外部主动实现获取与初始化的操作

3.2 设置美颜参数

美颜局部的Api须要参考腾讯云官网文档：https://cloud.tencent.com/doc...
通过美颜治理，您能够应用以下性能：
● 设置”美颜格调”、”美白”、“红润”、“大眼”、“瘦脸”、“V脸”、“下巴”、“短脸”、“小鼻”、“亮眼”、“白牙”、“祛眼袋”、“祛皱纹”、“祛法令纹”等美容成果。
● 调整“发际线”、“眼间距”、“眼角”、“嘴形”、“鼻翼”、“鼻子地位”、“嘴唇厚度”、“脸型”。
● 设置人脸挂件（素材）等动态效果。
● 增加美妆。
● 进行手势辨认。
目前只有以下3个api是收费版本能够随便调用的

const beauty = mlvb.getBeautyManager()let beautyLevel = 9beauty.setBeautyLevel(beautyLevel) // 0 - 9 主动美颜let whitenessLevel = 9beauty.setWhitenessLevel(whitenessLevel) // 0 - 9 主动美白let ruddyLevel = 9beauty.setRuddyLevel(ruddyLevel) // 0 - 9 主动红润

3.3 高级版本美颜的获取

对于高级版本的美颜，腾讯官网是免费的，须要参考以下链接形容：https://cloud.tencent.com/doc...
购买企业版美颜请返回腾讯官网购买：https://buy.cloud.tencent.com...
购买了高级版本的美颜之后将能够反对所有的美颜Api，包含收费版本，SDK外部曾经预置了这些美颜特效的调用接口，开发者能够间接调用。

4. 一对一主播观众连麦的实现

4.1 连麦流程的探索与实际

连麦的图示如下：

在这里sdk底层次要还是将用户的视频流进行混流和信令操作。这里开发者个别不须要操作非凡的接口，然而这里须要留神3个点。
1: 主播必须以userid为惟一id的创立userid，否则可能导致混流失败
2: 观众必须以主播userid为惟一id进入房间，否则可能导致混流失败
3: 对应的mlvb利用必须开启云测转推的性能，具体参考https://cloud.tencent.com/doc...

4.2 被动发动连麦 + 连麦业务解决

在这里底层曾经封装好了，这里只须要执行一个发动连麦的api而后期待反馈事件即可，代码如下：

// 先获取相机权限mlvb.checkPermissions(({ code }) => {  if (code !== 0) {    return  }  uni.showLoading()  mlvb.requestJoinAnchor('', ret => {    uni.hideLoading()    console.log(ret)    let { type, code, data } = ret    switch (type) {      case 'onAccept':        this.toast('对方承受了你的连麦')        this.playOpt.muted = false        this.playOpt.frontCamera = true        mlvb.startLocalPreview(this.playOpt.frontCamera)        mlvb.joinAnchor(ret => {          console.log(ret)          if (ret.code === 0) {            this.playOpt.inLinkMic = true          }        })        break      default:        // 对否回绝了你的连麦        break    }  })})

mlvb.requestJoinAnchor的第一个办法为申请连麦的起因，如非必要无需填写。

4.3 被动断开连麦 + 退出连麦状态

对主播而言，主播的操作为被动断开连麦，观众的操作为退出连麦状态，当初咱们别离展现一下具体的代码

主播被动断开连麦
```
mlvb.kickoutJoinAnchor(this.currentLinkmicUserID)this.currentLinkmicUserID = ''
```
断开连麦胜利之后，观众会收到onKickoutJoinAnchor事件，这是主播断开连麦的事件，开发者能够自行处理断开连麦之后的业务逻辑。
观众退出断开连麦状态
```
this.playOpt.inLinkMic = falsemlvb.quitJoinAnchor(ret => {  console.log(ret)})
```
观众退出连麦状态之后，主播会收到onAnchorExit事件，请留神，该事件代表的是一个推流端断开，因而不论是连麦断开还是跨房间PK断开，都是会收到该事件的，开发者能够依据业务需要解决逻辑。

5. 观众送礼的实现

5.1 试用云端Svga插件并且导入到Demo工程中

观众送礼咱们须要用到svga插件，插件链接：https://ext.dcloud.net.cn/plu...
因为操作过程与后面试用mlvb的流程统一，因而咱们不再赘叙，开发者请参考1.2的流程关上插件链接进行试用与配置。

5.2 初始化Svga与加载Svga

Svga提供了一个自定义控件用于实现svga文件的播放显示，因而咱们须要在template中插入svga的自定义控件。

<svga_player_view  ref="svgaPlayerView"  class="room-tx-view"></svga_player_view>

对于加载svga，咱们倡议开发者封装成为以下的办法再去应用，然而须要留神一点，svga最好应用本地门路，网络门路可能存在加载速度的问题。

function playSvga(url) {    if (!url) {    return  }  let svgaPlayerView = this.$refs.svgaPlayerView  svgaPlayerView.setSVGACallback(res => {})  svgaPlayerView.decodeFromURL(url, function(res) {    // 必须等到onComplete之后才代表svga文件解析实现，才能够播放    if (res.type == "onComplete") {      svgaPlayerView.stopAnimation()      svgaPlayerView.setLoops(1) // 是否反复播放      svgaPlayerView.startAnimation()    }  })}

到这里地位咱们的一个根底功能完善的仿斗鱼虎牙挪动直播app就利用uniapp搭建实现啦，如果有趣味能够间接在uni-app利用市场搜寻智密找到同款插件