用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

小程序直播總結

Rolan 2020-6-15 00:33

內嵌騰訊直播H5:騰訊直播已改名NOW直播,小程序接入工具文檔無法找到小程序原生實現:小程序對直播和websocket都進行了比較好的封裝,通過live-pusherlive-player組件和websocket API即可實現直播互動功能接入小程 ...

  • 內嵌騰訊直播H5:騰訊直播已改名NOW直播,小程序接入工具文檔無法找到
  • 小程序原生實現:小程序對直播和 websocket 都進行了比較好的封裝,通過 live-pusher live-player 組件和 websocket API 即可實現直播互動功能
  • 接入小程序直播插件實現:小程序直播,是微信提供給小程序開發者的直播組件。

二、小程序原生實現直播功能流程

微信小程序從 1.7 開始,為開發者提供了兩個新接口, <live-pusher> 和 <live-player> ,可以在小程序上實現單向的直播功能。通過與技術的結合,比如 WebRTC ,開發者們還可以進一步在小程序直播的基礎上實現連麥功能

首先由于微信對小程序直播功能類目有限制,限定了特定類目的小程序使用

另外需要注意的兩點:

  • 個人號無法申請使用直播功能;
  • 社交類目開通直播功能需要相關視頻許可和文網文資質許可;
  • 所以小程序開通直播的業務,要根據產品的目的和場景去申請對應的類目。

在小程序管理后臺,「開發」-「接口設置」中自助開通對應的權限,如下圖所示:

微信小程序原生實現直播功能流程如上圖所示,錄制端小程序通過 [live-pusher] 組件對手機和麥克風的數據進行采集和編碼推流到服務器,服務器端對數據進行加工處理并分發給多個客戶端,播放端小程序通過 [live-player] 組件從云端拉流并進行實時無差異的解碼和渲染,從而實現直播小程序完整互動功能

1. 推流 API 調用流程圖

2. 拉流 API 調用流程圖

三、小程序直播實現過程

微信小程序中的推拉流功能,需要用到微信提供的 live-player live-pusher 標簽

3.1 live-player

live-player 是微信提供的支持實時音視頻播放的組件, 官方介紹詳見組件介紹 。

創建 live-player 的演示源碼如下

<live-player
    autoplay
    wx:if="{{item.playUrl}}"
    id="{{item.streamID}}"
    mode="RTC"
    object-fit="fillCrop"
    min-cache="0.1"
    max-cache="0.3"
    src="{{item.playUrl}}"
    debug="{{pushConfig.showLog}}"
    bindstatechange="onPlayStateChange"
    bindnetstatus="onPlayNetStateChange"
    binderror="error">
    <cover-view class='character' style='padding: 0 5px;'>{{item.streamID}}</cover-view>
</live-player>

請注意

  • live 模式主要用于直播類場景,比如賽事直播、在線教育、遠程培訓等等。該模式下,小程序內部的模塊會優先保證觀看體驗的流暢,通過調整 min-cache 和 max-cache 屬性,您可以調節觀眾(播放)端所感受到的時間延遲的大小,文檔下面會詳細介紹這兩個參數
  • RTC 則主要用于雙向視頻通話或多人視頻通話場景,比如金融開會、在線客服、車險定損、培訓會議 等等。在此模式下,對 min-cache 和 max-cache 的設置不會起作用,因為小程序內部會自動將延遲控制在一個很低的水平( 500ms 左右)。

3.2 live-pusher

live-pusher 是微信提供的支持實時音視頻錄制的組件, 官方介紹詳見:組件介紹

創建 live-pusher 的演示源碼如下

<live-pusher
    wx:if="{{pushUrl}}"
    id="video-livePusher"
    mode="RTC"
    url="{{pushUrl}}"
    min-bitrate="{{pushConfig.minBitrate}}"
    max-bitrate="{{pushConfig.maxBitrate}}"
    aspect="{{pushConfig.aspect}}"
    beauty="{{pushConfig.isBeauty}}"
    muted="{{pushConfig.isMute}}"
    background-mute="true"
    debug="{{pushConfig.showLog}}"
    bindstatechange="onPushStateChange"
    bindnetstatus="onPushNetStateChange">
    <cover-view class='character' style='padding: 0 5px;'>{{isPublishing ? "我(" + publishStreamID + ")": ""}}</cover-view>
</live-pusher>

請注意:

  • SD、HD 和 FHD 主要用于直播類場景,比如賽事直播、在線教育、遠程培訓等等。SD、HD 和 FHD 分別對應三種默認的清晰度。該模式下,小程序會更加注重清晰度和觀看的流暢性,不會過分強調低延遲,也不會為了延遲犧牲畫質和流暢性
  • RTC 則主要用于雙向視頻通話或多人視頻通話場景,比如金融開會、在線客服、車險定損、培訓會議 等等。該模式下,小程序會更加注重降低點到點的時延,也會優先保證聲音的質量,在必要的時候會對畫面清晰度和畫面的流暢性進行一定的縮水

3.3 服務端的選擇

由于自己搭 rtmp (例如 Nginx rtmp )成本較高,技術實現難度大,考慮云服務商提供的視頻直播服務產品,生成推流地址和播放地址,目前市面上主流的云直播產品有:騰訊云、阿里云、七牛云等。

各平臺均提供內容接入與分發和分布式實時視頻處理技術,每個平臺提供的功能大同小異但各有千秋,平均費用大概 20-30元/100G,100G流量可以滿足100人同時在線直播4小時

接下來選擇騰訊云直播進行接入體驗

  1. 申請騰訊云賬號,開通云直播權限,它會贈送20gb流量給你 超出需要自己花錢。開通流程請參考下面的文檔: https://cloud.tencent.com/document/product/454/12517
  2. 域名管理,在這里面會看到兩個域名 一個是推流域名 一個是播放域名,域名可以用自己的 (建議配置自己的域名,2019/2/26上線查看時發現贈送的播放域名已失效)。具體看下面的文檔 https://cloud.tencent.com/document/product/267/20381

由于騰訊云不再贈送播放域名,所以需要租用或者使用自己的域名生成播放地址,自己的播放域名不能直接訪問,需要完成CNAME配置

  1. 最后,小程序直播組件API接入

第一步: <live-pusher> 推流(數據包實時上傳)示例代碼:

使用 <live-pusher> 發布流,這里使用的參數 min-bitrate="200" 最小碼率 max-bitrate="400" 最大碼率 mode="RTC" RTC模式,加入房間之后我們需要調用 publish 返回一個 rtmp 推流地址

<live-pusher
  autopush
  min-bitrate="200"
  max-bitrate="400"
  mode="RTC"
  url="{{publishPath}}">
</live-pusher>

先使用 wx.createLivePusherContext 創建 LivePusherContext ,再使用 setData 設置好 publishPath 之后發布

// index.js

Page({
  data: {
    publishPath: undefined,
  },
  publish() {
  // joinRoom 之后調用
  // 創建 LivePusherContext
  const pushContext = wx.createLivePusherContext()
  const path = session.publish()
  this.setData(
    { publishPath: path },
    () => {
      pushContext.start({
          success: () => {
            console.log('推流成功')
          },
          fail: () => {
            console.log('推流開始失敗')
          }
        })
    })
  }
})

第二步: <live-player> 播放(數據包實時下載)示例代碼:

使用 <live-player> 訂閱流,加入房間之后我們可以調用 subscribe 返回一個 rtmp 拉流地址。 下面我們使用了 wx:for 遍歷 data.subscribeList 渲染一個訂閱的列表

<live-player
  autoplay
  wx:key="{{item.key}}"
  wx:for="{{subscribeList}}"
  min-cache="0.2"
  max-cache="0.8"
  src="{{item.url}}"
  mode="RTC">
</live-player>
鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: poetries 來自: poetries
  • longkun 2020-6-21 17:07
    專業微信小程序開發 app定制 歡迎各行老板來電 tel;13635483717同v
  • w評估公司86 2020-6-18 17:00
    新手駕到,幫助很大,好評加贊。。。
梦幻单人赚钱方法 黑龙江36选7开奖官网 苏州炒股配资 北京pk10官网开奖记录 香港最快开奖现场直播结果 为什么股票下跌 河南快三走势图一定牛 白银买跌怎么赚钱 上海快3全天计划 神火股份股票股吧 3d试机号今天开机号表