歡迎訪問我的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

總結

以上是生活随笔為你收集整理的微信小程序+腾讯云直播的实时音视频实战笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。