手把手教你構建一個音視訊小程式

騰訊雲加社群發表於2018-10-18

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

本文由騰訊視訊雲終端團隊發表於雲+社群專欄

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

通過微信公眾平臺授權登入騰訊雲

開啟 微信公眾平臺 註冊並登入小程式,按如下步驟操作:

  1. 單擊左側選單欄中的【設定】。
  2. 單擊右側 Tab 欄中的【開發者工具】。
  3. 單擊【騰訊雲】,進入騰訊雲工具頁面,單擊【開通】。
  4. 使用小程式繫結的微信掃碼即可將小程式授權給騰訊雲,開通之後會自動進去騰訊雲微信小程式控制臺,顯示開發環境已開通,此時可以進行後續操作。

注意:

此時通過小程式開發者工具檢視騰訊雲狀態並不會顯示已開通,已開通狀態會在第一次部署開發環境之後才會同步到微信開發者工具上。

img
進入微信公眾平臺後臺

img
開通騰訊雲

img
騰訊雲微信小程式控制臺

免費開通騰訊雲服務

1 開通直播服務

1.1 申請開通視訊直播服務

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

img

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

1.2 配置直播碼

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

img

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

1.3 獲取直播服務配置資訊

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

img

2. 開通雲通訊服務

2.1 申請開通雲通訊服務

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

img

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

img

點選確定按鈕,之後就可以在應用列表中看到剛剛新增的專案了,如下圖所示:

img

2.2 配置獨立模式

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

img

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

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

img

從驗證方式中下載公私鑰,解壓出來將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"
複製程式碼

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

下載並安裝最新版本的微信開發者工具,使用小程式繫結的微訊號掃碼登入開發者工具。

img
微信開發者工具

四、下載 Demo

訪問 SDK+Demo,獲取小程式 Demo 和後臺原始碼。

五、上傳和部署程式碼

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

注意:

目錄請選擇 RTMPRoom 根目錄。包含有 project.config.json,請不要只選擇 wxlite 目錄!

img
上傳程式碼

img
開發者工具

  1. 開啟 Demo 程式碼中

    server
    複製程式碼

    目錄下的

    config.js
    複製程式碼

    檔案,將其中的

    bizid
    複製程式碼

    pushSecretKey
    複製程式碼

    APIKey
    複製程式碼

    sdkAppID
    複製程式碼

    accountType
    複製程式碼

    administrator
    複製程式碼

    privateKey
    複製程式碼

    配置成上述直播服務及雲通訊服務裡生成的值,並

    儲存

    img
    修改 MySQL 密碼

  2. 點選介面右上角的【騰訊雲】圖示,在下拉的選單欄中選擇【上傳測試程式碼】。

img
上傳按鈕

  1. 選擇【模組上傳】並勾選全部選項,然後勾選【部署後自動安裝依賴】,點選【確定】開始上傳程式碼。

    img
    選擇模組

    img
    上傳成功

  2. 上傳程式碼完成之後,點選右上角的【詳情】按鈕,接著選擇【騰訊雲狀態】即可看到騰訊雲自動分配給你的開發環境域名:

img
檢視開發域名

  1. 完整複製(包括

    https://
    複製程式碼

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

    wxlite/config.js
    複製程式碼

    檔案,將複製的域名填入

    url
    複製程式碼

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

    img
    修改客戶端配置

  2. 在模擬器中編譯執行點選多人音視訊進入,在右側的console裡面可以看到登入成功的log表示配置成功。

img
登入測試

常見問題 FAQ

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

問答

如何搭建小程式音視訊?

相關閱讀

教你1天搭建自己的“微視”

心隨手動,驅動短視訊熱潮的引擎

打通小程式音視訊和webRTC

【每日課程推薦】機器學習實戰!快速入門線上廣告業務及CTR相應知識

此文已由作者授權騰訊雲+社群釋出,更多原文請點選

搜尋關注公眾號「雲加社群」,第一時間獲取技術乾貨,關注後回覆1024 送你一份技術課程大禮包!

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

相關文章