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

36次阅读

共计 8088 个字符，预计需要花费 21 分钟才能阅读完成。

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

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

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

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

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

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

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

腾讯云系列的 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

在打包之前，咱们须要装置依赖，这里须要开发者装置 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 开发而言没有区别。

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

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

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

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

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

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

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

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

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

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 = false
mlvb.muteLocalAudio(mute)

mlvb.switchCamera()

let enable = true
mlvb.enableTorch(enable)

聊天文本音讯的收发在框架内很简略，只须要监听文本音讯，发送文本音讯 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
  })
})

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

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

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

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

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

连麦的图示如下：

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

在这里底层曾经封装好了，这里只须要执行一个发动连麦的 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 的第一个办法为申请连麦的起因，如非必要无需填写。

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

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

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

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 利用市场搜寻智密找到同款插件

正文完

javascript

发表至： javascript

2021-12-18

0

前端技术演进（三）：前端安全

关于javascript:reduce方法求和求乘积数组中每个元素出现的次数去重二维和多维数组转为一维数组

关于javascript:排名前十的-10-大顶级前端开源项目1534K-Star

JS-ajax请求后又刷新页面的问题原因解决

关于总结:工作与生活平衡的2021年

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

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

Just My Socks（注册教程内含优惠码）

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

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

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）