微信小程式+騰訊雲直播的實時音影片實戰筆記

歡迎訪問我的GitHub

github.com/zq2599/blog_demos

內容：所有原創文章分類彙總及配套原始碼，涉及Java、Docker、Kubernetes、DevOPS等；

本篇概覽

• 前段時間因為工作關係接觸了微信小程式的實時音影片播放，這裡將過程詳細記錄下來，作為今後的參考；
• 整體方案上，我這邊用OBS推流到騰訊雲，再用小程式的live-player元件從騰訊雲拉流播放，架構圖如下：

• 本篇內容就是上圖中的所有操作，從配置OBS推流開始，到騰訊雲直播服務配置，再到小程式的執行全部打通；

重要前提（主體是企業的小程式、一個可用域名）

本次實戰需要五個重要前提，請確保已經滿足，否則難以成功：

1. 小程式的主體必須是企業，因為只有企業型別才能開啟以下開關，個人型別是無法開啟的：

2. 小程式的服務類目必須在live-player支援的範圍內，我這裡的工具-影片服務是範圍內的，如下圖紅框，具體範圍請參考：developers.weixin.qq.com/miniprogram/dev/component/live-player.html

3. 有個可用的域名，我這裡是zq2599.com，是在阿里雲申請的；
4. 在騰訊雲註冊一個帳號；
5. 有個可用的電腦和攝像頭，我這裡是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的流量，操作簡單、文件也詳細；

• 瀏覽器開啟：console.cloud.tencent.com/live/livestat

• 推流域名無需新建，騰訊雲已經準備好一個了，如下圖紅框，請確保是已啟用狀態：

• 點選上圖紅框中的內容，進入推流域名的配置頁面，如下圖，填寫紅框4中的過期時間，再在紅框5中填好名稱，點選生成推流地址按鈕就會生成紅框6中的地址了：

• 上圖紅框6中的推流地址，將其分為兩段，前半段是rtmp://138824.livepush.myqcloud.com/live/，後半段是demo?txSecret=af840445fb899f88772916454ea15338&txTime=60A21EF1，接下來我們配置OBS推流地址就會用到；

• 開啟OBS，點選下圖紅框中的設定按鈕：

• 在推流的設定頁面上，服務選擇"自定義"，伺服器填寫推流地址的前半段，串流金鑰填寫推流地址的後半段，然後點選右下角的"確定"：

• 此時設定已完成，可以向騰訊雲推流，點選下圖紅框中的開始推流即開始：

• 如果您希望最終展示的時候儘量低延時，可以對OBS的輸出做一些調整，這裡給出我的配置情況作為參考：

• 此時在騰訊雲頁面上看到流已經推上來了，如下圖：

• 點選上圖紅的紅框5，可以在瀏覽器上預覽推上來的流，如下圖，可見存在兩秒的延時：

• 至此，推流設定全部完成，接下是播放相關設定；

騰訊雲直播播放設定

• 當影片流推送到騰訊雲後，還需要配置好播放地址才能在小程式上播放，如下圖，增加一個域名，型別是播放域名，域名欄位請填寫您自己擁有的合法域名：

• 在您自己的域名解析配置頁面做配置(例如我的域名解析是在阿里雲上做的)，以我這裡為例，騰訊雲上配置的是，那麼域名解析地址就是.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世界…