效果預覽
開發環境搭建
安裝微信開發者工具
相對於以前微信以前的產品來說。小程序在發布之初就面向開發者開放微信開發者工具。使開發者更加方便的開發和調試小程序。我們從官網下載安裝。
官網下載地址。現在只支持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地址