歡迎訪問我的GitHub

https://github.com/zq2599/blog_demos

內(nèi)容：所有原創(chuàng)文章分類匯總及配套源碼，涉及Java、Docker、Kubernetes、DevOPS等；

本篇概覽

前段時間因為工作關(guān)系接觸了微信小程序的實時音視頻播放，這里將過程詳細記錄下來，作為今后的參考；
整體方案上，我這邊用OBS推流到騰訊云，再用小程序的live-player組件從騰訊云拉流播放，架構(gòu)圖如下：

本篇內(nèi)容就是上圖中的所有操作，從配置OBS推流開始，到騰訊云直播服務(wù)配置，再到小程序的運行全部打通；

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

本次實戰(zhàn)需要五個重要前提，請確保已經(jīng)滿足，否則難以成功：

小程序的主體必須是企業(yè)，因為只有企業(yè)類型才能打開以下開關(guān)，個人類型是無法打開的：

小程序的服務(wù)類目必須在live-player支持的范圍內(nèi)，我這里的工具-視頻服務(wù)是范圍內(nèi)的，如下圖紅框，具體范圍請參考：https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

有個可用的域名，我這里是zq2599.com，是在阿里云申請的；
在騰訊云注冊一個帳號；
有個可用的電腦和攝像頭，我這里是windows臺式機+羅技C270i攝像頭；

上述前提條件準(zhǔn)備完畢后，接下來開始逐步操作，從推流開始；

OBS推流設(shè)置

本章節(jié)的目標(biāo)是完成視頻源的推流配置，視頻源內(nèi)容是windows電腦上的USB攝像頭，為了檢查小程序播放有多大延時，還要在視頻內(nèi)容中貼一層當(dāng)前時間，效果如下圖所示，左上角的時間是一直在動的：

下載windows版本的OBS并安裝，我這里的版本是26.1.1，鏈接：https://cdn-fastly.obsproject.com/downloads/OBS-Studio-26.1.1-Full-Installer-x64.exe

打開OBS，添加攝像頭：來源 -> + -> 視頻采集設(shè)備 -> 選擇要用的攝像頭，如下圖：

如果攝像頭正常，預(yù)覽頁面應(yīng)該可見攝像頭拍攝的內(nèi)容：

在預(yù)覽頁面上點擊右鍵，選擇調(diào)整輸出大小(到源大小)：

為了在小程序中檢查延時有多少，咱們給視頻內(nèi)容貼上時間浮層，再增加一個來源，類型是瀏覽器，如下圖：

選擇新建，起名時間貼片：

進入設(shè)置頁面后，將url字段設(shè)置為：https://naozhong.net.cn/shijian/

此時網(wǎng)站內(nèi)容會占滿預(yù)覽頁面，如下圖，其實我們需要的只是這個網(wǎng)頁的時間，屏幕其他部分該用來顯示攝像頭內(nèi)容，所以接下來我們要裁剪這個網(wǎng)站的內(nèi)容：

在時間貼片上點擊右鍵：變換 -> 編輯變換：

設(shè)置參數(shù)如下圖紅框2所示，就可以得到紅框3中的效果：

至此，視頻源設(shè)置就完成了，暫時先不推流，等騰訊云設(shè)置完成；

騰訊云直播推流設(shè)置

前面的章節(jié)咱們準(zhǔn)備好了視頻源，現(xiàn)在要找個媒體服務(wù)器推流，這里我用的是騰訊云的云直播服務(wù)，為新用戶贈送了20G的流量，操作簡單、文檔也詳細；

瀏覽器打開：https://console.cloud.tencent.com/live/livestat

推流域名無需新建，騰訊云已經(jīng)準(zhǔn)備好一個了，如下圖紅框，請確保是已啟用狀態(tài)：

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

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

打開OBS，點擊下圖紅框中的設(shè)置按鈕：

在推流的設(shè)置頁面上，服務(wù)選擇"自定義"，服務(wù)器填寫推流地址的前半段，串流密鑰填寫推流地址的后半段，然后點擊右下角的"確定"：

此時設(shè)置已完成，可以向騰訊云推流，點擊下圖紅框中的開始推流即開始：

如果您希望最終展示的時候盡量低延時，可以對OBS的輸出做一些調(diào)整，這里給出我的配置情況作為參考：

此時在騰訊云頁面上看到流已經(jīng)推上來了，如下圖：

點擊上圖紅的紅框5，可以在瀏覽器上預(yù)覽推上來的流，如下圖，可見存在兩秒的延時：

至此，推流設(shè)置全部完成，接下是播放相關(guān)設(shè)置；

騰訊云直播播放設(shè)置

當(dāng)視頻流推送到騰訊云后，還需要配置好播放地址才能在小程序上播放，如下圖，增加一個域名，類型是播放域名，域名字段請?zhí)顚懩约簱碛械暮戏ㄓ蛎?/p>

在您自己的域名解析配置頁面做配置(例如我的域名解析是在阿里云上做的)，以我這里為例，騰訊云上配置的是www.zq2599.com，那么域名解析地址就是www.zq2599.com.tlivecdn.com，可見是增加了后綴.tlivecdn.com，作為參考，在阿里云上的配置如下圖：

域名配置完畢后，可以根據(jù)播放域名生成播放地址了，操作如下圖所示，在紅框5位置填寫的流名稱和推流域名的要一致，再點擊紅框6中的按鈕，就能生成各種協(xié)議的播放地址，咱們選用下圖紅框7所示的RTMP協(xié)議地址：

小程序開發(fā)

首先請下載和安裝小程序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中導(dǎo)入實時音視頻播放的demo工程：

如下圖，此時會進入小程序IDE的導(dǎo)入配置頁面，請在紅框位置填入您自己的小程序APPID，最后點擊右下角的導(dǎo)入按鈕：

導(dǎo)入demo后，打開index.wxml，修改live-player標(biāo)簽的src屬性的值，改為騰訊云上給出的播放地址：

接下來，先點擊下圖紅框中的編譯按鈕，再點擊綠框中的預(yù)覽按鈕:

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

點擊播放按鈕后，開始顯示攝像頭的視頻，整個流程都走通了，將手機和電腦上的OBS放在一起拍照，即可了解延時情況，如下圖，我這里是一秒左右，效果還是不錯的：

如果您不使用騰訊云推拉流的時候，最好將兩個域名服務(wù)都禁用，以免因為大意導(dǎo)致流量被耗掉，操作如下圖紅框所示：

至此，微信小程序+騰訊云直播的實時音視頻實戰(zhàn)就完成了，如果您正在尋找低延時的小程序播放方案，希望本文能給您一些參考；

你不孤單，欣宸原創(chuàng)一路相伴

Java系列
Spring系列
Docker系列
kubernetes系列
數(shù)據(jù)庫+中間件系列
DevOps系列

歡迎關(guān)注公眾號：程序員欣宸

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。