天天看點

動手搭建第一個小程式音視訊Demo

騰訊雲提供了全套技術文檔和源碼來幫助您快速建構一個音視訊小程式,但是再好的源碼和文檔也有學習成本,為了盡快的能調試起來,我們還提供了一個免費的一鍵部署服務:您隻需輕點幾下滑鼠,就可以在自己的賬号下獲得一個音視訊小程式,同時附送一台擁有獨立域名的測試伺服器,讓您可以在 5 分鐘内快速建構出自己的測試環境。

歡迎大家前往雲+社群,擷取更多騰訊海量技術實踐幹貨哦~

作者:小程式音視訊産品經理

通過微信公衆平台授權登入騰訊雲

打開 微信公衆平台 注冊并登入小程式,按如下步驟操作:

  1. 單擊左側菜單欄中的【設定】。
  2. 單擊右側 Tab 欄中的【開發者工具】。
  3. 單擊【騰訊雲】,進入騰訊雲工具頁面,單擊【開通】。
  4. 使用小程式綁定的微信掃碼即可将小程式授權給騰訊雲,開通之後會自動進去騰訊雲微信小程式控制台,顯示開發環境已開通,此時可以進行後續操作。
注意:此時通過小程式開發者工具檢視騰訊雲狀态并不會顯示已開通,已開通狀态會在第一次部署開發環境之後才會同步到微信開發者工具上。
動手搭建第一個小程式音視訊Demo

進入微信公衆平台背景

動手搭建第一個小程式音視訊Demo

開通騰訊雲

動手搭建第一個小程式音視訊Demo

騰訊雲微信小程式控制台

免費開通騰訊雲服務

1 開通直播服務

1.1 申請開通視訊直播服務

進入 直播管理控制台,如果服務還沒有開通,則會有如下提示:

動手搭建第一個小程式音視訊Demo

點選申請開通,之後會進入騰訊雲人工稽核階段,稽核通過後即可開通。

1.2 配置直播碼

直播服務開通後,進入【直播控制台】>【直播碼接入】>【接入配置】(https://console.cloud.tencent.com/live/livecodemanage) 完成相關配置,即可開啟直播碼服務:

動手搭建第一個小程式音視訊Demo

點選【确定接入】按鈕即可。

1.3 擷取直播服務配置資訊

從直播控制台擷取bizid、pushSecretKey,後面配置伺服器會用到:

動手搭建第一個小程式音視訊Demo

2. 開通雲通信服務

2.1 申請開通雲通訊服務

進入雲通訊管理控制台,如果還沒有服務,直接點選直接開通雲通訊按鈕即可。新認證的騰訊雲賬号,雲通訊的應用清單是空的,如下圖:

動手搭建第一個小程式音視訊Demo

點選建立應用接入按鈕建立一個新的應用接入,即您要接入騰訊雲IM通訊服務的App的名字,我們的測試應用名稱叫做“RTMPRoom示範”,如下圖所示:

動手搭建第一個小程式音視訊Demo

點選确定按鈕,之後就可以在應用清單中看到剛剛添加的項目了,如下圖所示:

動手搭建第一個小程式音視訊Demo

2.2 配置獨立模式

上圖的清單中,右側有一個應用配置按鈕,點選這裡進入下一步的配置工作,如下圖所示。

動手搭建第一個小程式音視訊Demo

2.3 擷取雲通訊服務配置資訊

從直播控制台擷取SdkAppid、accountType、privateKey、administrator,後面配置伺服器會用到:

動手搭建第一個小程式音視訊Demo

從驗證方式中下載下傳公私鑰,解壓出來将private_key用文本編輯器打開,如:

-----BEGIN PRIVATE KEY-----
MIGHAgEAsUj5ep7r9TVxTrZiSpXQKhRANCAASuxr7AJGiXRqGpiO7pPrLAchyORc
Y5uWCqVm+QFTn0H+ZcHP93ss3OhgZKh8pq+g7X26dW5fQkiSH1PXG/FY
zbTbMHaWCqVm+QFTn0H+QKhRANCAASuxr7AJGiXRqGpiO7pPr7jTFTmg
-----END PRIVATE KEY-----
      

  

将其轉換成字元串形式如下所示,後面在server配置檔案中使用:

"-----BEGIN PRIVATE KEY-----\r\n"+
"MIGHAgEAsUj5ep7r9TVxTrZiSpXQKhRANCAASuxr7AJGiXRqGpiO7pPrLAchyORc\r\n"+
"Y5uWCqVm+QFTn0H+ZcHP93ss3OhgZKh8pq+g7X26dW5fQkiSH1PXG/FY\r\n"+
"zbTbMHaWCqVm+QFTn0H+QKhRANCAASuxr7AJGiXRqGpiO7pPr7jTFTmg\r\n"+
"-----END PRIVATE KEY-----\r\n"      

三、安裝微信小程式開發工具

下載下傳并安裝最新版本的微信開發者工具,使用小程式綁定的微信号掃碼登入開發者工具。

動手搭建第一個小程式音視訊Demo

微信開發者工具

四、下載下傳 Demo

通路 SDK+Demo,擷取小程式 Demo 和背景源碼。

五、上傳和部署代碼

  1. 打開第三步安裝的微信開發者工具,點選【小程式項目】按鈕。
  2. 輸入小程式 AppID,項目目錄選擇上一步下載下傳下來的代碼目錄,點選确定建立小程式項目。
  3. 再次點選【确定】進入開發者工具。

注意:

目錄請選擇

RTMPRoom

根目錄。包含有

project.config.json

,請不要隻選擇

wxlite

目錄!
動手搭建第一個小程式音視訊Demo

上傳代碼

動手搭建第一個小程式音視訊Demo

開發者工具

1、打開 Demo 代碼中

server

目錄下的

config.js

檔案,将其中的

bizid

pushSecretKey

APIKey

sdkAppID

accountType

administrator

privateKey

配置成上述直播服務及雲通信服務裡生成的值,并儲存。

動手搭建第一個小程式音視訊Demo

修改 MySQL 密碼

2、點選界面右上角的【騰訊雲】圖示,在下拉的菜單欄中選擇【上傳測試代碼】。

動手搭建第一個小程式音視訊Demo

上傳按鈕

 3、選擇【子產品上傳】并勾選全部選項,然後勾選【部署後自動安裝依賴】,點選【确定】開始上傳代碼。

動手搭建第一個小程式音視訊Demo

選擇子產品

動手搭建第一個小程式音視訊Demo

上傳成功

4、上傳代碼完成之後,點選右上角的【詳情】按鈕,接着選擇【騰訊雲狀态】即可看到騰訊雲自動配置設定給你的開發環境域名:

動手搭建第一個小程式音視訊Demo

檢視開發域名

 5、完整複制(包括

https://

)開發環境 request 域名,然後在編輯器中打開

wxlite/config.js

檔案,将複制的域名填入

url

中并儲存,儲存之後編輯器會自動編譯小程式,左邊的模拟器視窗即可實時顯示出用戶端的 Demo:

動手搭建第一個小程式音視訊Demo

修改用戶端配置

6、在模拟器中編譯運作點選多人音視訊進入,在右側的console裡面可以看到登入成功的log表示配置成功。

動手搭建第一個小程式音視訊Demo

登入測試

常見問題 FAQ

1. 運作小程式進入多人音視訊看不到畫面?

  • 請确認使用手機來運作,微信開發者工具内部的模拟器目前還不支援直接運作
  • 請确認小程式基礎庫版本 wx.getSystemInfo 可以查詢到該資訊,1.7.0 以上的基礎庫才支援音視訊能力。
  • 請确認小程式所屬的類目,由于監管要求,并非所有類目的小程式都開發了音視訊能力,已支援的類目請參考 DOC。
  • 如有更多需求,或希望深度合作,可以提工單或客服電話(400-9100-100)聯系我們。

相關閱讀

揭秘微信小程式解決方案:幫助開發者提升效率的利器

微信小程式基于萬象優圖實作圖檔 OCR

基于騰訊雲智能語音的實時語音識别微信小程式的開發

此文已由作者授權雲+社群釋出,轉載請注明原文出處

海量技術實踐經驗,盡在雲加社群!

https://cloud.tencent.com/developer

繼續閱讀