1. 程式人生 > >微信小程式實時音視訊開發記錄

微信小程式實時音視訊開發記錄

    以前做過一個簡單的小程式,但是到現在回想怎麼開發小程式,竟然一點也想不起來,鑑於學過的東西老是忘掉毛病,現在借專案需要小程式音視訊功能,記錄一下小程式開發步驟和小程式視訊音視訊功能的使用。

    由於完全不記得小程式開發步驟和程式碼結構,只有重頭開始學習,我首先閱讀了官網基礎教程,看完官網基礎教程,基本上對可以進行小程式開發了。現在我來說說我的理解,要進行小程式開發的第一步就是在小程式申請官網申請一個小程式,我申請的是個人小程式(分個人和企業),注意一個郵箱只能申請一個小程式,需要實名認證,一個人最多隻能申請5個小程式。小程式申請成功後,我們可以拿到小程式的AppID,這個是我們小程式開發的唯一識別碼,同時在小程式開發設定裡面可以設定小程式開發者許可權,用微訊號管理的,可以設定哪些人具有開發許可權,哪些人具有體驗許可權等等。小程式申請成功並配置後,我們下載微信小程式開發工具,開發工具下載地址:

微信小程式開發工具,就可以進行微信小程式開發了。

    安裝好開發工具,開啟我們輸入剛才建立的小程式AppID,選好原始碼放置目錄,然後我們就可以建立一個自帶模板小程式,然後來看看程式碼結構。小程式程式碼是按Page來組織的,一個個介面就是一個個Page。小程式程式碼一般有下面幾個字尾檔案組成,分別是:.js,.json,.wxml,.wxss。js負責資料和邏輯程式碼,json負責一些屬性設定,wxml則是介面佈局程式碼,wxss是介面的樣式格式。在原始碼根目錄下,app.js註冊APP,並監聽APP一些基本事件,比如onLaunch;app.json中首先記錄一個個Page,其中第一個Page為初始化Page,同是也還配置一些全域性的屬性;app.wxss全域性樣式風格。這些在全域性的設定可以在單個page裡面被覆蓋。每一個頁面都有.js,.json,.wxml,.wxss四個檔案,wxml通過bind函式將介面事件與js函式關聯,通過{{}}來與js的資料成員關聯,通過class來關聯對應的wxss風格。時間驅動有兩種,一種是監聽系統時間,比如OnLaunch,OnShow等,另一種就是元件bind事件,這樣整個程式轉起來了。至此,看懂小程式程式碼,甚至自己開發也沒有多大問題了。

    開發過程中,可以點選工具上編譯,然後能在工具自帶的模擬器上預覽小程式,你也可以點選預覽按鈕,工具會打包小程式並生成二維碼,然後用有體驗許可權的微信賬號,掃描二維碼,即可真機體驗小程式開發版。

    現在來看看看小程式視訊方面的能力。元件video支援網路點播,協議支援http和hls協議;元件live-player支援直播播放,只支援rtmp協議;live-pusher直播推流,目前只支援rtmp協議;通過自定義元件rtc_room組合live-player和live-pusher可以顯示雙人或多人視訊會議;通過自定義標籤webrtc_room可以實現小程式和Chrome webrtc視訊互通。在RTC模式下,rtmp推流至騰訊雲,騰訊雲採用udp加速,解決rtmp延時大的問題,進而實現了雙向通話,與Chrome互通是騰訊雲做了一層rtmp和rtp協議的互轉。

    可以搜尋騰訊視訊雲小程式進行點播和直播的體驗,也可以到騰訊視訊雲小程式demo原始碼下載其原始碼,注意live-player和live-pusher只對企業小程式開發,個人小程式無權使用。