微信小程序+騰訊雲直播的實時音視頻實戰筆記

歡迎訪問個人GitHub

https://github.com/zq2599/blog_demos

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

本篇概覽

• 前段時間由於工做關係接觸了微信小程序的實時音視頻播放，這裏將過程詳細記錄下來，做爲從此的參考；
• 總體方案上，我這邊用OBS推流到騰訊雲，再用小程序的<font color="blue">live-player</font>組件從騰訊雲拉流播放，架構圖以下：

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

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

本次實戰須要五個重要前提，請確保已經知足，<font color="red">不然難以成功</font>：

1. 小程序的主體必須是<font color="blue">企業</font>，由於只有企業類型才能打開如下開關，我的類型是沒法打開的：

2. 小程序的服務類目必須在live-player支持的範圍內，我這裏的<font color="blue">工具-視頻服務</font>是範圍內的，以下圖紅框，具體範圍請參考：https://developers.weixin.qq....

3. 有個可用的域名，我這裏是<font color="blue">zq2599.com</font>，是在阿里雲申請的；
4. 在騰訊雲註冊一個賬號；
5. 有個可用的電腦和攝像頭，我這裏是windows臺式機+羅技C270i攝像頭；
6. 上述前提條件準備完畢後，接下來開始逐步操做，從推流開始；

7. OBS推流設置

8. 本章節的目標是完成視頻源的推流配置，視頻源內容是windows電腦上的USB攝像頭，爲了檢查小程序播放有多大延時，還要在視頻內容中貼一層當前時間，效果以下圖所示，左上角的時間是一直在動的：

• 下載windows版本的OBS並安裝，我這裏的版本是<font color="blue">26.1.1</font>，連接：https://cdn-fastly.obsproject...
• 打開OBS，添加攝像頭：來源 -> + -> 視頻採集設備 -> 選擇要用的攝像頭，以下圖：

• 若是攝像頭正常，預覽頁面應該可見攝像頭拍攝的內容：

• 在預覽頁面上點擊右鍵，選擇<font color="red">調整輸出大小(到源大小)</font>：

• 爲了在小程序中檢查延時有多少，我們給視頻內容貼上時間浮層，再增長一個來源，類型是<font color="blue">瀏覽器</font>，以下圖：

• 選擇<font color="blue">新建</font>，起名<font color="red">時間貼片</font>：

• 進入設置頁面後，將url字段設置爲：https://naozhong.net.cn/shijian/

• 此時網站內容會佔滿預覽頁面，以下圖，其實咱們須要的只是這個網頁的時間，屏幕其餘部分該用來顯示攝像頭內容，因此接下來咱們要裁剪這個網站的內容：

• 在<font color="blue">時間貼片</font>上點擊右鍵：變換 -> 編輯變換：

• 設置參數以下圖紅框2所示，就能夠獲得紅框3中的效果：

• 至此，視頻源設置就完成了，暫時先不推流，等騰訊雲設置完成；

騰訊雲直播推流設置

• 前面的章節我們準備好了視頻源，如今要找個媒體服務器推流，這裏我用的是騰訊雲的雲直播服務，爲新用戶贈送了20G的流量，操做簡單、文檔也詳細；
• 瀏覽器打開：https://console.cloud.tencent...
• 推流域名無需新建，騰訊雲已經準備好一個了，以下圖紅框，請確保是<font color="blue">已啓用</font>狀態：

• 點擊上圖紅框中的內容，進入推流域名的配置頁面，以下圖，填寫紅框4中的過時時間，再在紅框5中填好名稱，點擊<font color="blue">生成推流地址</font>按鈕就會生成紅框6中的地址了：

• 上圖紅框6中的推流地址，將其分爲兩段，前半段是<font color="blue">rtmp://138824.livepush.myqcloud.com/live/</font>，後半段是<font color="red">demo?txSecret=af840445fb899f88772916454ea15338&txTime=60A21EF1</font>，接下來咱們配置OBS推流地址就會用到；
• 打開OBS，點擊下圖紅框中的<font color="red">設置</font>按鈕：

• 在<font color="red">推流</font>的設置頁面上，服務選擇"自定義"，服務器填寫推流地址的前半段，串流密鑰填寫推流地址的後半段，而後點擊右下角的"肯定"：

• 此時設置已完成，能夠向騰訊雲推流，點擊下圖紅框中的<font color="blue">開始推流</font>即開始：

• 若是您但願最終展現的時候儘可能低延時，能夠對OBS的輸出作一些調整，這裏給出個人配置狀況做爲參考：

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

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

• 至此，推流設置所有完成，接下是播放相關設置；

騰訊雲直播播放設置

• 當視頻流推送到騰訊雲後，還須要配置好播放地址才能在小程序上播放，以下圖，增長一個域名，類型是<font color="blue">播放域名</font>，域名字段請填寫您本身擁有的合法域名：

• 在您本身的域名解析配置頁面作配置(例如個人域名解析是在阿里雲上作的)，以我這裏爲例，騰訊雲上配置的是<font color="blue">www.zq2599.com</font>，那麼域名解析地址就是<font color="red">www.zq2599.com.tlivecdn.com</font>，可見是增長了後綴<font color="blue">.tlivecdn.com</font>，做爲參考，在阿里雲上的配置以下圖：

• 域名配置完畢後，能夠根據播放域名生成播放地址了，操做以下圖所示，在紅框5位置填寫的流名稱和推流域名的要一致，再點擊紅框6中的按鈕，就能生成各類協議的播放地址，我們選用下圖紅框7所示的RTMP協議地址：

小程序開發

• 首先請下載和安裝小程序IDE，我這裏是1.05版本，地址：https://dldir1.qq.com/WechatW...
• 小程序IDE安裝好後請打開，界面效果以下：

• 瀏覽器訪問：https://developers.weixin.qq.... ，點擊下圖紅框3中的連接，會自動往小程序IDE中導入實時音視頻播放的demo工程：

• 以下圖，此時會進入小程序IDE的導入配置頁面，請在紅框位置填入您本身的小程序APPID，最後點擊右下角的<font color="blue">導入</font>按鈕：

• 導入demo後，打開<font color="blue">index.wxml</font>，修改live-player標籤的<font color="red">src</font>屬性的值，改成騰訊雲上給出的播放地址：

• 接下來，先點擊下圖紅框中的<font color="red">編譯</font>按鈕，再點擊<font color="green">綠框</font>中的預覽按鈕:

• 此時頁面上會彈出一個二維碼，掏出手機掃描此碼，就會在手機上打開這個小程序了，小程序界面以下圖：

• 點擊播放按鈕後，開始顯示攝像頭的視頻，整個流程都走通了，將手機和電腦上的OBS放在一塊兒拍照，便可瞭解延時狀況，以下圖，我這裏是一秒左右，效果仍是不錯的：

• 若是您不使用騰訊雲推拉流的時候，最好將兩個域名服務都禁用，以避免由於大意致使流量被耗掉，操做以下圖紅框所示：

• 至此，微信小程序+騰訊雲直播的實時音視頻實戰就完成了，若是您正在尋找低延時的小程序播放方案，但願本文能給您一些參考；

你不孤單，欣宸原創一路相伴

1. Java系列
2. Spring系列
3. Docker系列
4. kubernetes系列
5. 數據庫+中間件系列
6. DevOps系列

歡迎關注公衆號：程序員欣宸

微信搜索「程序員欣宸」，我是欣宸，期待與您一同暢遊Java世界...
https://github.com/zq2599/blog_demos