微信小程序之直播功能使用詳解

前言

小程序直播功能,分爲使用官方自帶的直播組件( live-player-plugin ,無需二次開發,開箱即用),另一種就是使用自己服務器的流,自定義直播組件(live-playerlive-pusher),這裏主要講述,第一種的使用

一、準備

第一要了解是否滿足 直播開通條件

直播開通條件

基本滿足開頭直播條件的功能裏會有直播,然後去申請開通一下就行了

在這裏插入圖片描述

創建直播間

在這裏插入圖片描述

這個直播碼就是主播開啓直播的入口,主播掃碼就可以進入

基本信息

點擊後選擇手機直播

在這裏插入圖片描述

推流直播

小程序直播-推流直播操作

創建時需要覈實身份 同時開播時間必須在12小時內 第一次開通需要人臉識別驗證

在這裏插入圖片描述

樣式配置

在這裏插入圖片描述
在這裏插入圖片描述

二、開發使用

引入插件

原生引入在app.jison

1. 主包引入

    "plugins": {
        "live-player-plugin": {
            "version": "1.0.13", // 注意填寫該直播組件最新版本號,微信開發者工具調試時可獲取最新版本號(複製時請去掉註釋)
            "provider": "wx2b03c6e691cd7370" // 必須填該直播組件appid,該示例值即爲直播組件appid(複製時請去掉註釋)
        }
    }

2. 分包引入

    "subpackages": [
        {
            "plugins": {
                "live-player-plugin": {
                    "version": "1.0.13", // 注意該直播組件最新版本號,微信開發者工具調試時可獲取最新版本號(複製時請去掉註釋)
                    "provider": "wx2b03c6e691cd7370" // 必須填該直播組件appid,該示例值即爲直播組件appid(複製時請去掉註釋)
                }
            }
        }
    ]

進入直播

配置完成,我們其實就搞定了,那麼如何進入直播間?

並不需要在頁面寫組件,而是直接跳轉到官方給定的路徑上,就進入直播間了,

    let roomId = [直播房間id] // 填寫具體的房間號,可通過下面【獲取直播房間列表】 API 獲取
    let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 開發者在直播間頁面路徑上攜帶自定義參數(如示例中的path和pid參數),後續可以在分享卡片鏈接和跳轉至商詳頁時獲取,詳見【獲取自定義參數】、【直播間到商詳頁面攜帶參數】章節(上限600個字符,超過部分會被截斷)
    wx.navigateTo({
        url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
    })
    // 其中wx2b03c6e691cd7370是直播組件appid不能修改

詳細請看文檔

(直播使用)[https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html]

這裏主要說明下文檔沒有的

第一就是,這個直播組件微信開發者工具是進入不了的,但是可以真機調試,和體驗版都能使用和觀測,通過分享進入只能正式發佈後可測試,因爲分享進入的是正式版,而正式版需要發佈。

如果想前端自己搞搞玩,也可以,這個直播房間id roomId 是從 0 、1、2這種順序按照創建排序下去的,所以自己玩可以寫死 (第一個創建的默認是0 還是1,忘記了自己試試就好啦),然後寫個跳轉就能進入直播間了, pid是示例的自定義參數,

三、關於訂閱

就是這個房間id的,每個房間直播完就等於關閉,如果開通回放,是可以回放的,所以每場直播都有自己的直播房間id,你訂閱都屬於一次性訂閱,不存在長期訂閱,該功能還未實現, 下面是文檔

  1. 【訂閱】組件(注:若要使用該組件,需在主包引入直播組件)

功能解釋:用戶進入直播間內,可對一場未開播的直播進行單次訂閱,開播時直播組件會自動下發開播提醒給用戶,無需開發者額外開發

組件使用:如果需要在直播組件頁以外小程序其他頁面也有同樣的開播提醒的功能,可以引入【訂閱】組件 subscribe(開播前纔會顯示,直播開始後自動消失該組件);需在 page 頁面(如 home 頁面)的 home.json 引用訂閱組件,可通過 stopPropagation 屬性控制是否阻止事件冒泡(默認不阻止事件冒泡,stopPropagation 爲 false)。

示例代碼如下:

    {
        "usingComponents": {
            "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"
        }
    }

然後便可在 home.wxml 裏使用訂閱組件,其中直播房間 id 可通過;房間 id 可通過下面【獲取直播房間列表】 API 獲取

    <subscribe room-id="[直播房間id]"></subscribe>
  1. 【獲取直播狀態】接口(注:若要使用該接口,需在主包引入直播組件)

  2. 有樣式問題

修改樣式

.subscribe--live-player-subscribe__btn{
  width: 200rpx !important;
  height: 21px !important;
  line-height: 21px !important;
  font-weight: 200;
  font-size: 20rpx !important;
  text-align: center;
  background: #fff!important;
  color: #2d79ab!important;
  border-radius: 4px;
  pointer-events: auto;
  margin: 0 auto;
}

四、自定義自播

第一種可以通過騰訊雲官網,解決方案中 雲直播微信小程序實時音頻企業直播

第二種就是 通過小程序的組件 live-playerlive-pusher

這裏有篇示例文章可以看看使用

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章