3分鐘入門微信小程序直播

效果預覽

開發環境搭建

安裝微信開發者工具

  相對於之前微信之前的產品來講。小程序在發佈之初就面向開發者開放微信開發者工具。使開發者更加方便的開發和調試小程序。咱們從官網下載安裝。
官網下載地址。如今只支持windows和mac。安裝完成以後咱們就可使用建立小程序了。

建立初始工程

  打開微信微信開發者工具,選擇項目目錄。注意這裏的項目目錄最好是空文件夾或者當前目錄下面沒有package.json文件。而後輸入appid和項目名稱。appid能夠在官網申請

點擊肯定就會生成小程序項目。

直播功能實現

開通直播接口

  注意如今直播對於的接口只對如下類目開放。

若是你發現你在接口設置顯示沒有開通。則須要修改小程序的服務類目。修改完成以後。須要再次回到接口設置裏面。開啓實時播放音視頻流對於接口權限。

直播組件

  文檔地址 小程序直播主要是會用到2個組件:

live-player:實時音視頻播放

live-pusher:實時音視頻錄製

每一個組件都對應一個api。能夠根據上述文檔查看。並且微信也提供了測試的demo咱們能夠直接拿來運行。
我這裏只是把小程序官網提供直播相關的的demo組裝在一塊兒。

申請騰訊雲直播

  咱們已經根據文檔搭建出來了直播小程序的demo。可是咱們要怎麼才能真正在本身的程序裏面看到一個手機推流,另一個手機觀看呢？這裏方案有不少。本身搭建也能夠。使用阿里雲的直播也能夠。我這裏用了一個最簡單的方法。直接利用騰訊雲的雲直播平臺。首先開通騰訊云云直播。而後點擊推流生成器

而後複製上面的推流地址和播放地址到小程序裏面。

#推流地址修改
pages/player/player.wxml裏面的url
#播放地址修改
pages/pusher/pusher.wxml裏面的url

修改對應的地方替換。這樣就能夠實現咱們上面gif動畫裏面的效果啦。
demo地址