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