微信小程序接入直播
? 作者：kerwin
微信小程序開發(fā)如火如荼，很多公司都構建了自己的小程序。對于一些有產品的公司， 他們對于自己的小程序有直播需求，希望通過小程序直播獲得流量變現(xiàn)。本文章就此需求，跟大家聊聊如何在自己的小程序加入直播功能。
一.小程序配置
小程序雖然提供了直播組件（后面會有介紹），但是直播組件暫只針對國內主體部分類目的小程序開放（https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html），需要先通過類目審核，再在小程序管理后臺，「開發(fā)」-「接口設置」中自助開通該組件權限。具體流程如下：
1.添加/更改服務類目
注意 ：添加類目（小程序必須經過企業(yè)認證），可能需要提供資質證明，比如添加在線視頻課程的類目需要的資質如下
2.開通實時播放/錄制音視頻流
二.云直播服務器
直播功能除了小程序端的支持，也需要服務器（推拉流服務器）支持，我們自己搭建的成本過高，所以本文基于騰訊云直播來實現(xiàn)。
1.云直播申請
- 注冊 騰訊云賬號，并完成 實名認證。
- 進入 騰訊云直播服務開通頁，勾選同意《騰訊云服務協(xié)議》，并單擊 申請開通 即可開通云直播服務。
說明：
云直播服務申請開通成功后，會贈送20GB國內播放流量免費體驗使用。為避免贈送流量用完后自動扣費，導致欠費無法使用云直播服務，建議您根據實際業(yè)務需求， 購買相應規(guī)格的套餐包。
2.云直播配置
使用云直播服務，至少需要2個域名，一個作為推流域名，一個作為播放域名，推流和播放不能使用相同的域名。
2-1添加域名
-
準備自有域名，并完成域名備案。
-
登錄云直播控制臺，進入域名管理，單擊添加域名
- 云直播默認提供測試域名
xxxx.livepush.myqcloud.com，您可通過該域名進行推流測試，但不建議您在正式業(yè)務中使用這個域名作為推流域名。 - 域名添加成功后，您可通過 域名管理 的域名列表查看域名信息。若您需要對已添加成功的域名進行管理，請參見 域名管理。
3. 域名添加成功后，系統(tǒng)會為您自動分配一個 CNAME 域名（以.tlivecdn.com或.tlivepush.com為后綴）。CNAME 域名不能直接訪問，您需要在域名服務提供商處完成 CNAME 配置，配置生效后即可享受云直播服務。
2-2獲取推流地址
選擇 直播工具箱 > 地址生成器。進入地址生成器頁面，并進行如下配置：
-
選擇生成類型：推流域名。
-
選擇您在域名管理中已添加的推流域名。
-
填寫 AppName，默認為
live。 -
填寫自定義的流名稱 StreamName，例如：
liveteststream。 -
選擇地址過期時間，例如：
2021-05-31 23:59:59。 -
單擊 生成地址 即可生成推流地址。
2-3獲取播放地址
選擇 直播工具箱 > 地址生成器獲取播放地址，在該頁面進行如下配置：
- 選擇生成類型：播放域名。
- 選擇您在域名管理中已添加的播放域名。
- 填寫 AppName，默認為
live。 - 填寫與推流地址相同的 StreamName，播放地址 StreamName 要與推流地址 StreamName 一致才能播放對應的流。
- 選擇地址過期時間，例如：
2021-05-31 23:59:59。 - 單擊 生成地址 即可生成播放地址。
保存播放地址與推流地址，給后面的小程序組件使用。
三.組件介紹
1.live-pusher
https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html
實時音視頻錄制需要用戶授權 scope.camera、scope.record。
<live-pusher url="https://domain/push_stream" mode="RTC" autopush bindstatechange="statechange" style="width: 300px; height: 225px;" />
Page({
statechange(e) {
console.log('live-pusher code:', e.detail.code)
}
})
2.live-player
https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
實時音視頻播放
<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />
Page({
statechange(e) {
console.log('live-player code:', e.detail.code)
},
error(e) {
console.error('live-player error:', e.detail.errMsg)
}
})
四.代碼實現(xiàn)
1.頁面結構
home.wxml
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<button type="primary" bindtap="handleTapOwner">我是主播</button>
<button bindtap="handleTapPlayer">我是觀眾</button>
home.js
handleTapOwner(){
wx.navigateTo({
url: '/pages/owner/owner',
})
},
handleTapPlayer(){
wx.navigateTo({
url: '/pages/player/player',
})
},
owner.wxml(主播)
<text>我是主播頁面</text>
<live-pusher url="填之前保存的推流域名" mode="RTC" autopush bindstatechange="statechange" style="width: 100vw; height: 100vh;" beauty="9" whiteness="9"/>
player.wxml(觀眾)
<text>我是觀眾頁面</text>
<live-player src="填之前保存的播放域名" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 100vw; height: 100vh" object-fit="fillCrop" id="player"/>
把域名替換成自己申請的播放和推流域名
在手機預覽效果如下 （必須兩個微信號測試）
- 如果手機支持分屏功能，登錄兩個微信號，分別打開主播和觀眾頁面
- 如果有兩部手機，登錄兩個微信號，分別打開主播和觀眾頁面
2.離線檢測
如果主播不在線， 進去看到就是黑屏，我們可以通過云直播返回code來判斷，主播是否正在直播，如果不在直播可以提示用戶，主播已經下線。
code:-2301 網絡斷連，且經多次重連搶救無效，更多重試請自行重啟播放
player.js文章來源：http://www.zghlxwxcb.cn/news/detail-486802.html
onLoad: function (options) {
this.player = wx.createLivePlayerContext("player")
},
statechange(evt){
console.log(evt.detail.code)
switch(evt.detail.code){
case -2301: //網絡斷連，且經多次重連搶救無效，更多重試請自行重啟播放
wx.showModal({
content:"主播暫時離開了",
success:(res)=>{
if(res.confirm){
//重新連接播放地址
this.player.play()
}else{
wx.navigateBack()
}
}
})
}
},
ess:(res)=>{
if(res.confirm){
//重新連接播放地址
this.player.play()
}else{
wx.navigateBack()
}
}
})
}
},文章來源地址http://www.zghlxwxcb.cn/news/detail-486802.html
好了，紙上得來終覺淺，小伙伴快試試吧！
到了這里，關于微信小程序接入直播的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
