適用讀者:
- 對微信小程序已經有基本的瞭解。 例如：小程序賬號申請、 常用組件、小程序開發工具
- 對nodejs已經有基本的瞭解。
- 對微信小程序流媒體/實時音視頻組件感興趣的童鞋。
- 對小魚易聯/小魚在家，聲網的微信小程序內部實現感興趣的童鞋。
- 小程序實時音視頻的底層傳輸協議問題（TCP，UDP，QUIC）
如果您不滿足上面所述，這篇文章應該不適合您。
好吧， 正文開始：
微信小程序提供了倆個組件live-pusher以及live-player，但是因爲官方文檔過於簡略，以至於很多人難以上手。而且在集成過程中有些問題，微信官方也逃避不回答。所以本文就幫助大家解決這個問題，我寫了一個開源的小栗子放在Github，方便大家自己測試。
Github地址在這裏， 有詳細的readme文檔幫助大家如何使用
本倉庫包括的內容
- 使用開源組件搭建本地的RTMP服務給小程序使用
- 小程序live-pusher/live-player如何使用
- 使用網頁播放小程序推的視頻流
- 關於騰訊雲實時流媒體服務
第1步：開源組件搭建本地的RTMP服務
命令行進入文件夾 Node-Media-Server, 執行
npm install
node index.js
程序默認將在1935端口提供RTMP服務, 8000端口提供HTTP流服務
程序使用第三方開源MIT協議組件 Node-Media-Server
第2步：小程序live-pusher/live-player如何使用
開始之前你需要在微信開放平臺註冊小程序開發賬號, 並申請小程序接口實時音視頻流權限 這一步很重要, 不完成這一步無法進行後面的開發.
個人賬號是可以申請此類接口權限的.
當小程序賬號註冊完成以及申請實時音視頻流權限之後.
獲取appid, 並使用微信開發者工具導入項目, 選擇 client 文件夾, 然後點擊 真機調試, 使用手機微信調試RTMP視頻流. 記住要先開啓本地的RTMP服務哦, 至於IP地址配置會在小程序頁面有提示的.
第3步：使用網頁播放小程序推的視頻流
前面兩步都完成的情況下, 可以在網頁上測試一下小程序推的視頻流. 命令行進入 web-client 文件夾, 然後命令行執行如下命令 :
// 如果你的npm已經全局安裝了http-server
http-server -p 8080
// 否則
npm install
npx http-server -p 8080
然後瀏覽器打開 http://localhost:8080, 根據網頁的提示填寫拉取流的名稱, 然後點擊開始按鈕, 如果不出意外你可以看到小程序推上來的視頻流.
網頁測試截圖
總結：聊一聊關於騰訊雲實時流媒體服務
有些同學如果關心騰訊雲實時流媒體服務怎麼用的話, 可以進入騰訊雲申請直播服務即可, 騰訊雲有免費的20GB流量 供大家測試使用。（結尾有鏈接）至於具體的使用方法與上面的例子是一樣的, 從騰訊雲網頁獲取推流/拉流的地址就可以測試了。
如果你深入測試會發現騰訊雲的速度比較快, 那是因爲：騰訊雲的RTMP服務是私有的 UDP + RTMP 協議, 傳輸層使用UDP協議在實時視頻中可以將延時控制在 400ms左右。實際測試過程中發現，騰訊雲使用的傳輸層協議是Google的QUIC協議， QUIC協議是基於UDP的提供了一整套擁塞控制等方案的傳輸層協議。
而我們自己搭建的RTMP服務是基於 TCP 傳輸的, 我在測試過程中發現寬帶情況, 好的4G, 5G下, 基於TCP傳輸協議的實時視頻的延時大概在1秒鐘左右. 但是對於WIFI等網絡波動大的情況下大概會有2秒的延時。
那你就想問, 我們把自己的RTMP服務改成UDP傳輸不好嗎?
不行。在微信小程序環境只有騰訊雲自家的RTMP服務才能使用UDP傳輸層協議，其它的企業和個人要麼使用騰訊雲的服務，要麼使用自己搭建的基於TCP的服務。
你說坑不坑， 騰訊實在是坑啊！大家都知道實時音視頻場景，UDP傳輸是最佳實踐！你這是捆綁銷售自己的服務啊。
然後我測試了微信小程序環境其它家的產品：
- 聲網(agora) 實時音視頻 基於TCP傳輸
- 阿里雲 - 實時音視頻 基於TCP傳輸
- 百度雲 - 實時音視頻 基於TCP傳輸
數據真實可靠, 都是我測試或者從他們工程師那裏詢問得知的。騰訊粑粑再一次靠着
但其實使用TCP的實時視頻服務沒那麼糟糕, 在好的4G情況下
1秒鐘的延時用戶完全是可以接受的，當然如果老闆沒辦法接受，那就只能使用騰訊雲了。
本人親測, 小魚易聯產品使用的就是騰訊雲的直播服務.
那麼微信小程序live-pusher可以獲取到原始的媒體數據流嗎？
問這個問題的人基本都做過HTML5 webrtc相關的開發工作，確實在HTML5裏面，Javascript有能力通過瀏覽器的API獲取到原始的媒體數據流，然後開發者可以對原始的數據流進行編碼，轉碼，壓縮，美顏等預處理。但是在小程序環境，微信不允許！
以上所述都是截止於 2019年3月5日 , 後面微信小程序的策略發生變動我會第一時間更新。
逃~~~
鏈接
- Node-Media-Server
- 騰訊雲直播服務, 免費20GB流量登錄 - 騰訊雲console.cloud.tencent.com
騰訊雲直播服務, 免費20GB流量
- 小程序live-pusher/player小栗子Github源碼地址
一些配置截圖AJLoveChina/wechat-pusher-player一些配置截圖
小程序開發接口設置
小程序頁面ip地址配置
關於微信小程序實時視頻有什麼問題可以和我交流, https://zhuanlan.zhihu.com/p/58342507