基於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.1 獲取Demo工程並且導入到HbuilderX中
- 1.2 試用雲端插件並且導入到Demo工程中
- 1.2.1 試用TXIM Smart插件並且導入到Demo工程中
- 1.3 配置測試用的騰訊雲UserId + UserSig
- 1.4 打包自定義基座，並且使用自定義基座進行開發調試
2. 了解移動直播應用的設計與改造
- 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
參考文檔資源：
uniapp 騰訊雲MLVB原生插件文檔：https://www.yuque.com/zhimikeji/rnbgvg
uniapp Svga原生插件文檔：https://ext.dcloud.net.cn/plugin?id=6076
騰訊雲 MLVB 原生SDK文檔：https://cloud.tencent.com/document/product/454
uniapp 騰訊雲MLVB原生插件地址：https://ext.dcloud.net.cn/plugin?id=4729
uniapp 騰訊雲TXIM Smart原生插件地址：https://ext.dcloud.net.cn/plugin?id=5906
uniapp Svga原生插件地址：https://ext.dcloud.net.cn/plugin?id=6076
1. 從0開始配置工程項目
1.1 獲取Demo工程並且導入到HbuilderX中
獲取Demo工程工程可以通過插件頁面獲取，插件頁面地址如下
https://ext.dcloud.net.cn/plugin?id=4729
獲取方式很簡單，通過點擊導入示例項目的按鈕導入工程即可，具體如下
在完成工程導入之后，我們還需要對項目進行一些調整，雙擊打開manifest.json(根目錄下)，選擇“基礎配置”，點擊重新獲取AppId，否則將有可能出現打包自定義基座時報錯AppId不屬於該賬戶的問題。
1.2 試用雲端插件並且導入到Demo工程中
打開uniapp 騰訊雲TXIM原生插件地址：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插件鏈接：https://ext.dcloud.net.cn/plugin?id=5906
1.3 配置測試用的騰訊雲UserId + UserSig
騰訊雲系列的SDK均采用userId + UserSig的方式做用戶登陸，一般情況下我們是通過后端返回的方式獲取，但是這里我們顯然還沒有接入后端，因此我們需要自己生成多個測試使用的UserId + UserSig，一般五個即可，生成之后我們替換到Demo中便可以看到效果。
（先確保已經登陸騰訊雲並且創建了應用，創建應用參考官方文檔：https://cloud.tencent.com/document/product/269/32577）
騰訊雲IM控制台：https://console.cloud.tencent.com/im
打開騰訊雲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/plugin?id=2046
安裝完成之后，開發者可以在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/document/product/267/40935
假設我們已經配置完了自定義域名，那么我們還需要在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 = false mlvb.muteLocalAudio(mute) mlvb.switchCamera() let enable = true mlvb.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/document/product/454/39379
通過美顏管理，您可以使用以下功能：
- 設置”美顏風格”、”美白”、“紅潤”、“大眼”、“瘦臉”、“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 自動紅潤
3.3 高級版本美顏的獲取
對於高級版本的美顏，騰訊官方是收費的，需要參考以下鏈接描述：https://cloud.tencent.com/document/product/454/34750#.E4.BC.81.E4.B8.9A.E7.89.88-license
購買企業版美顏請前往騰訊官方購買：https://buy.cloud.tencent.com/vcube?sdk-version=2&function-module=LIVE
購買了高級版本的美顏之后將可以支持所有的美顏Api，包括免費版本，SDK內部已經預置了這些美顏特效的調用接口，開發者可以直接調用
4. 一對一主播觀眾連麥的實現
4.1 連麥流程的探究與實踐
連麥的圖示如下：
在這里sdk底層主要還是將用戶的視頻流進行混流和信令操作。這里開發者一般不需要操作特殊的接口，但是這里需要注意3個點。
1: 主播 必須以userid為唯一id的創建userid，否則可能導致混流失敗
2: 觀眾 必須以主播userid為唯一id進入房間，否則可能導致混流失敗
3: 對應的mlvb應用必須開啟雲測轉推的功能，具體參考https://cloud.tencent.com/document/product/267/32833
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 = false mlvb.quitJoinAnchor(ret => { console.log(ret) })
觀眾退出連麥狀態之后，主播會收到onAnchorExit事件，請注意，該事件代表的是一個推流端斷開，因此不管是連麥斷開還是跨房間PK斷開，都是會收到該事件的，開發者可以根據業務需求處理邏輯。
5. 觀眾送禮的實現
5.1 試用雲端Svga插件並且導入到Demo工程中
觀眾送禮我們需要用到svga插件，插件鏈接：https://ext.dcloud.net.cn/plugin?id=6076
由於操作過程與前面試用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應用市場搜索智密找到同款插件