基於“騰訊雲移動直播”的微信小程序直播技術開發與實現

2020年1月初，騰訊公司高級副總裁張小龍說，微信的發佈內容應該各式各樣，如文字、圖片、視頻等，不僅是是現在的圖文。張小龍的講話之後，微信直播應用的開發成為技術熱點。但是，微信推出的看點直播限制太多，不能滿足大量小眾客戶的需求，開發自己獨有的小程序直播成為很多商家的需求。本文將圍繞微信小程序藉助“騰訊雲移動直播”平臺，開發嵌入在微信小程序中的直播應用的技術方案進行簡單闡述，希望能對技術開發者提供啟發和幫助。

開發之前需要了解各種限制條件，並準備實現的工具。藉助“騰訊雲移動直播”開發微信直播小程序，需要了解騰訊雲直播拉流推流的限制條件。下圖為藉助騰訊雲在微信小程序中實現直播行業的限制，也就是擁有哪些許可在可以在微信小程序中插入直播應用。

騰訊雲與微信小程序公眾平臺對開發者許可做了嚴格的限制

滿足行業要求，通過一系列審核之後，在微信小程序公眾號後臺開發設置中，打開“實時播放音視頻流”，“實時錄製音視頻流”選項。就可以就行開發了。

微信小程序直播是通過小程序內組件和標籤來實現的。在觀眾端前端使用 <live-pusher> 和 <live-player>就行推流和拉流。/<live-player>/<live-pusher>

基於騰訊雲移動直播的微信小程序直播架構設計

上面，我們已經按照要求，準備了基本的開發條件。下面我們進行的技術架構設計。系統的技術架構包括系統的角色和系統的用例視圖、設計視圖、實現視圖、進程視圖、分佈視圖等各個層面描述的視圖，為了簡要期間，我們只列出基本的要點，不全面展示各個視圖和要點。

系統的角色主要包括：觀眾、主播、騰訊雲直播平臺、直播管理平臺幾個發麵。其中，騰訊雲處於拉流和推流的中轉站。

基於騰訊雲移動直播的架構方案

主播通過手機、攝像頭將數據採集，經過一定的算法，打包成一定格式的文件，通過RTMP協議推送到服務器，服務器進行兩個方面的技術操作。一方面是，通過直播轉碼推送到直播源站，通過CDN分發到觀眾端，觀眾端通過拉流解壓縮流媒體數據包進行觀看；另一方面，主播在播放中，可以同時和觀眾互動，以及視頻同步的錄製。直播推流拉流就是這樣的大概過程，在設計好基本的框架之後，我們就可以著手進行開發了。

拉流端、推流端、轉碼平臺的設計與實現

因為我們開發是微信小程序直播，所以觀眾端，是在微信小程序中實現的。也就是拉流是通過小程序進行的。我們先看一一個DEMO。

騰信雲移動直播提供的DEMO，我們可以在此基礎上開發

騰訊雲和微信公眾平臺提供了小程序端開發的demo，我們可以充分利用開放的demo進行設計和開發。我們知道，小程序之類的輕應用是基於nodejs框架開發的，微信小程序建構了自己的開發框架，並提供了開發的接口，我們可以按照微信公眾平臺提供的開發接口進行定義開發。

<code><view>  //定義一個video box  相當於HTML5中的DIV
    <live-player>        wx:for="{{player}}"
        id="player_{{index}}"
        mode="RTC"
        object-fit="fillCrop"
        class="lazy" data-original="{{item.playUrl}}" 
        autoplay='true'
        bindstatechange="onPlay">
   /<live-player>
 /<view>/<code>

因為要引入組件，所以按照微信小程序的開發，需要在配置文件中進行說明，詳細的開發包，可以參照騰訊雲官方提供的demo，本文只做示例性的說明。例如，在分包內引入直播組件“live-player-plugin” 代碼包，項目根目錄的 app.json 引用，示例代碼如下：

<code>{   "subpackages": [   
  {   "root": "packageA",      
   "pages": [       
     "pages/home/home"       ],      
     "plugins": {        
     "live-player-plugin": {  
       "version": "1.0.0", // 填寫該直播組件最新版本號 
   …………………………// 代碼不完整，刪除細節，開發時參考正式的demo
] }/<code>

觀眾端需要開發的代碼文檔目錄

• 獲取直播狀態接口

直播狀態說明：

• 101直播中：表示主播正常開播

• 102未開始：主播還未開播

• 103已結束：關閉的直播，或系統強制結束的直播

• 104禁播：表示因違規被禁播

• 105暫停中：表示在MP後臺操作暫停了直播

• 106異常：表示主播離開、切後臺、斷網等情況

• 107已過期：表示直播間一直未開播

調用方法：若要調用“獲取直播狀態”接口getLiveStatus，需在小程序頁面頂部引用【直播組件】live-player-plugin，示例代碼如下：

<code>let livePlayer = requirePlugin('live-player-plugin') // 引入獲取直播狀態接口 
// 首次獲取立馬返回直播狀態，往後間隔1分鐘或更慢的頻率去輪詢獲取直播狀態 
const roomId = xxx // 房間id livePlayer.getLiveStatus({ room_id: roomId }) .then(res => {   // 101: 直播中, 102: 未開始, 103: 已結束, 104: 禁播, 105: 暫停中, 106: 異常, 107：已過期 
   const liveStatus = res.liveStatus }) .catch(err => {   console.log(err) })/<code>

• 推流端開發
• 推流可以採用PC端，安卓、iOS等不同的方法。下面以小程序作為推流示例。

<code><view>  
    <live-pusher>          id="pusher"
          mode="RTC"
          url="{{pusher.push_url}}" 
          autopush='true'
          bindstatechange="onPush">
    /<live-pusher>  
 /<view>/<code>

<code><live-pusher>/<code>

<code>Page({
  statechange(e) {
    console.log('live-pusher code:', e.detail.code)
  }
})/<code>

• 平臺端直播間管理，登錄、註冊、回放等功能的實現

直播服務平臺的搭建

我們已經將一個有基本推拉流、聊天互動的小直播運行起來了。但是因為沒有後臺，無法實現賬號註冊登錄、回放列表等功能。所以，我們需要架設一個平臺，將上述功能實現。

這個平臺的是管理平臺，平臺用戶主要是主播和系統運營管理方，平臺要實現域名添加、域名管理、流管理、模板管理、統計分析、日誌管理、導播管理等功能。主播具有註冊直播間管理直播間的功能，平臺具有用戶註冊管理和直播間管理的功能。這是系統級別的要求。

開發這個管理平臺需要系統級別的架構，可以自己進行開發，也可以利用雲平臺現有的功能進行集成。

經過以上步驟，小程序直播基本實現了。不過，如果要實現高級的功能，就要使用高級的功能接口了。比如連麥互動、AI 變臉和掛件、自定義採集和渲染、SDK 指標監控、禁播和流管理等。

編譯測試

經過一系列的開發，我們就要進行編譯測試小程序了。實際上開發和編譯測試是同步進行的，為了更加清晰的邏輯說明，我們將開發和編譯測試分不同的側面進行闡述。編譯測試的步驟如下：

1. 打開微信開發者工具，選擇【小程序】菜單欄，然後單擊新建圖標，選擇【導入項目】或者打開已經存在的項目。

2. 輸入小程序 AppID。

3. 系統生成二維碼，通過手機微信掃碼二維碼登錄小程序開發者工具平臺即可進入。

4.需要注意的是小程序 <live-player> 和 <live-pusher> 標籤需要在手機微信上才能使用，微信開發者工具上無法使用。/<live-pusher>/<live-player>

發佈上線

至此，經過多次編譯測試以後，就可以在後臺提交上線了。利用騰訊雲直播，開發自己的微信小程序直播應用基本邏輯就是這樣的。

閱讀更多 石家莊陀螺科技 的文章

關鍵字: 直播 騰訊 微信