微信小程式+騰訊雲直播的實時音影片實戰筆記
- 2021 年 9 月 22 日
- 筆記
歡迎訪問我的GitHub
//github.com/zq2599/blog_demos
內容：所有原創文章分類匯總及配套源碼，涉及Java、Docker、Kubernetes、DevOPS等；
本篇概覽
- 前段時間因為工作關係接觸了微信小程式的實時音影片播放，這裡將過程詳細記錄下來，作為今後的參考；
- 整體方案上，我這邊用OBS推流到騰訊雲，再用小程式的live-player組件從騰訊雲拉流播放，架構圖如下：
- 本篇內容就是上圖中的所有操作，從配置OBS推流開始，到騰訊雲直播服務配置，再到小程式的運行全部打通；
重要前提（主體是企業的小程式、一個可用域名）
本次實戰需要五個重要前提，請確保已經滿足，否則難以成功：
- 小程式的主體必須是企業，因為只有企業類型才能打開以下開關，個人類型是無法打開的：
- 小程式的服務類目必須在live-player支援的範圍內，我這裡的工具-影片服務是範圍內的，如下圖紅框，具體範圍請參考：//developers.weixin.qq.com/miniprogram/dev/component/live-player.html
- 有個可用的域名，我這裡是zq2599.com，是在阿里雲申請的；
- 在騰訊雲註冊一個帳號；
- 有個可用的電腦和攝影機，我這裡是windows台式機+羅技C270i攝影機；
- 上述前提條件準備完畢後，接下來開始逐步操作，從推流開始；
OBS推流設置
- 本章節的目標是完成影片源的推流配置，影片源內容是windows電腦上的USB攝影機，為了檢查小程式播放有多大延時，還要在影片內容中貼一層當前時間，效果如下圖所示，左上角的時間是一直在動的：
-
下載windows版本的OBS並安裝，我這裡的版本是26.1.1，鏈接：//cdn-fastly.obsproject.com/downloads/OBS-Studio-26.1.1-Full-Installer-x64.exe
-
打開OBS，添加攝影機：來源 -> + -> 影片採集設備 -> 選擇要用的攝影機，如下圖：
- 如果攝影機正常，預覽頁面應該可見攝影機拍攝的內容：
- 在預覽頁面上點擊右鍵，選擇調整輸出大小(到源大小)：
- 為了在小程式中檢查延時有多少，咱們給影片內容貼上時間浮層，再增加一個來源，類型是瀏覽器，如下圖：
- 選擇新建，起名時間貼片：
- 進入設置頁面後，將url欄位設置為：//naozhong.net.cn/shijian/
- 此時網站內容會佔滿預覽頁面，如下圖，其實我們需要的只是這個網頁的時間，螢幕其他部分該用來顯示攝影機內容，所以接下來我們要裁剪這個網站的內容：
- 在時間貼片上點擊右鍵：變換 -> 編輯變換：
- 設置參數如下圖紅框2所示，就可以得到紅框3中的效果：
- 至此，影片源設置就完成了，暫時先不推流，等騰訊雲設置完成；
騰訊雲直播推流設置
-
前面的章節咱們準備好了影片源，現在要找個媒體伺服器推流，這裡我用的是騰訊雲的雲直播服務，為新用戶贈送了20G的流量，操作簡單、文檔也詳細；
-
推流域名無需新建，騰訊雲已經準備好一個了，如下圖紅框，請確保是已啟用狀態：
- 點擊上圖紅框中的內容，進入推流域名的配置頁面，如下圖，填寫紅框4中的過期時間，再在紅框5中填好名稱，點擊生成推流地址按鈕就會生成紅框6中的地址了：
-
上圖紅框6中的推流地址，將其分為兩段，前半段是rtmp://138824.livepush.myqcloud.com/live/，後半段是demo?txSecret=af840445fb899f88772916454ea15338&txTime=60A21EF1，接下來我們配置OBS推流地址就會用到；
-
打開OBS，點擊下圖紅框中的設置按鈕：
- 在推流的設置頁面上，服務選擇”自定義”，伺服器填寫推流地址的前半段，串流密鑰填寫推流地址的後半段，然後點擊右下角的”確定”：
- 此時設置已完成，可以向騰訊雲推流，點擊下圖紅框中的開始推流即開始：
- 如果您希望最終展示的時候盡量低延時，可以對OBS的輸出做一些調整，這裡給出我的配置情況作為參考：
- 此時在騰訊雲頁面上看到流已經推上來了，如下圖：
- 點擊上圖紅的紅框5，可以在瀏覽器上預覽推上來的流，如下圖，可見存在兩秒的延時：
- 至此，推流設置全部完成，接下是播放相關設置；
騰訊雲直播播放設置
- 當影片流推送到騰訊雲後，還需要配置好播放地址才能在小程式上播放，如下圖，增加一個域名，類型是播放域名，域名欄位請填寫您自己擁有的合法域名：
- 在您自己的域名解析配置頁面做配置(例如我的域名解析是在阿里雲上做的)，以我這裡為例，騰訊雲上配置的是www.zq2599.com，那麼域名解析地址就是www.zq2599.com.tlivecdn.com，可見是增加了後綴.tlivecdn.com，作為參考，在阿里雲上的配置如下圖：
- 域名配置完畢後，可以根據播放域名生成播放地址了，操作如下圖所示，在紅框5位置填寫的流名稱和推流域名的要一致，再點擊紅框6中的按鈕，就能生成各種協議的播放地址，咱們選用下圖紅框7所示的RTMP協議地址：
小程式開發
-
首先請下載和安裝小程式IDE，我這裡是1.05版本，地址：//dldir1.qq.com/WechatWebDev/release/p-ae42ee2cde4d42ee80ac60b35f183a99/wechat_devtools_1.05.2105100_x64.exe
-
小程式IDE安裝好後請打開，介面效果如下：
- 瀏覽器訪問：//developers.weixin.qq.com/miniprogram/dev/component/live-player.html ，點擊下圖紅框3中的鏈接，會自動往小程式IDE中導入實時音影片播放的demo工程：
- 如下圖，此時會進入小程式IDE的導入配置頁面，請在紅框位置填入您自己的小程式APPID，最後點擊右下角的導入按鈕：
- 導入demo後，打開index.wxml，修改live-player標籤的src屬性的值，改為騰訊雲上給出的播放地址：
- 接下來，先點擊下圖紅框中的編譯按鈕，再點擊綠框中的預覽按鈕:
- 此時頁面上會彈出一個二維碼，掏出手機掃描此碼，就會在手機上打開這個小程式了，小程式介面如下圖：
- 點擊播放按鈕後，開始顯示攝影機的影片，整個流程都走通了，將手機和電腦上的OBS放在一起拍照，即可了解延時情況，如下圖，我這裡是一秒左右，效果還是不錯的：
- 如果您不使用騰訊雲推拉流的時候，最好將兩個域名服務都禁用，以免因為大意導致流量被耗掉，操作如下圖紅框所示：
- 至此，微信小程式+騰訊雲直播的實時音影片實戰就完成了，如果您正在尋找低延時的小程式播放方案，希望本文能給您一些參考；
你不孤單，欣宸原創一路相伴
歡迎關注公眾號：程式設計師欣宸
微信搜索「程式設計師欣宸」，我是欣宸，期待與您一同暢遊Java世界…
//github.com/zq2599/blog_demos
