小程序模板網(wǎng)

手把手教你搭建小程序音視頻

發(fā)布時間:2018-07-20 08:40 所屬欄目:小程序開發(fā)教程

歡迎大家前往騰訊云+社區(qū),獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~

本文由騰訊視頻云終端團(tuán)隊 發(fā)表于云+社區(qū)專欄

 

Demo 體驗(yàn)

升級微信到最新版本,發(fā)現(xiàn)頁卡 => 小程序 => 搜索“騰訊視頻云”,即可打開小程序Demo:

 

 

 

注冊小程序并開通相關(guān)接口

出于政策和合規(guī)的考慮,微信暫時沒有放開所有小程序?qū)?<live-pusher> 和 <live-player> 標(biāo)簽的支持:

個人賬號和企業(yè)賬號的小程序暫時只開放如下表格中的類目:

主類目子類目 【社交】直播【教育】在線教育【醫(yī)療】互聯(lián)網(wǎng)醫(yī)院,公立醫(yī)院【政務(wù)民生】所有二級類目【金融】基金、信托、保險、銀行、證券/期貨、非金融機(jī)構(gòu)自營小額貸款、征信業(yè)務(wù)、消費(fèi)金融

打開微信公眾平臺 注冊并登錄小程序,并在小程序管理后臺的<font color='red'> “設(shè)置 - 接口設(shè)置” </font>中自助開通該組件權(quán)限,如下圖所示:

 

 

注意:如果以上設(shè)置都正確,但小程序依然不能正常工作,可能是微信內(nèi)部的緩存沒更新,請刪除小程序并重啟微信后,再進(jìn)行嘗試。

安裝微信小程序開發(fā)工具

下載并安裝最新版本的微信開發(fā)者工具,使用小程序綁定的微信號掃碼登錄開發(fā)者工具。

 

 

獲取Demo源碼并調(diào)試

  • step1: 訪問SDK + Demo,獲取小程序 Demo 源碼。
  • step2: 打開安裝的微信開發(fā)者工具,點(diǎn)擊【小程序項目】按鈕。
  • step3: 輸入小程序 AppID,項目目錄選擇上一步下載下來的代碼目錄( 注意: 目錄請選擇 根目錄 ,根目錄包含有 project.config.json 文件,請不要只選擇 wxlite 目錄?。?,點(diǎn)擊確定創(chuàng)建小程序項目。
  • step4: 再次點(diǎn)擊【確定】進(jìn)入開發(fā)者工具。
  • step5: 請使用手機(jī)進(jìn)行測試,直接掃描開發(fā)者工具預(yù)覽生成的二維碼進(jìn)入。
  • step6: <font color='red'>開啟調(diào)試模式</font>,體驗(yàn)和調(diào)試內(nèi)部功能。開啟調(diào)試可以跳過把這些域名加入小程序白名單的工作。

 

 

Demo訪問的測試地址

Demo小程序會訪問如下表格中的測試服務(wù)器地址,這些服務(wù)器使用的云服務(wù)是我們?yōu)榇蠹姨峁┑囊粋€體驗(yàn)賬號,平時很多客戶都會在上面做測試。如果您希望使用自己的后臺服務(wù)器,以免被其他客戶打擾,請關(guān)注文檔后一節(jié)內(nèi)容:

  • <live-room> 和 <rtc-room> 相關(guān)demo需要訪問如下地址:

  • <webrtc-room> 相關(guān)demo需要訪問如下地址:

搭建自己的賬號和后臺服務(wù)器

這部分我們將介紹如何將Demo默認(rèn)的測試用服務(wù)器地址,換成您自己的服務(wù)器,這樣一來,您就可以使用自己的騰訊云賬號實(shí)現(xiàn)上述功能,同時也便于您進(jìn)行二次開發(fā)。

1. 搭建 <webrtc-room> 的服務(wù)器

1.1 這個服務(wù)器能做什么?

  • 點(diǎn)擊demo里的互動課堂 <webrtc-room> 功能,您會看到一個房間列表,這個房間列表是怎么實(shí)現(xiàn)的呢?
  • 在看到視頻房間列表以后,如果你要創(chuàng)建一個視頻房間,或者進(jìn)入一個其他人建好的視頻房間,就需要為 所對應(yīng)的幾個屬性( sdkAppID 、 userID 、 userSig 、 roomID 和 privateMapKey )傳遞合法的參數(shù)值,這幾個參數(shù)值怎么獲取呢?

1.2 這個服務(wù)器要怎么搭建?

  • 下載 webrtc_server ,這是一份 java 版本的實(shí)現(xiàn),根據(jù) README.md 中的說明就可以了解怎么使用這份源碼。

1.3 服務(wù)器建好了我怎么用?

  • 小程序 源碼中,將 wxlite/config.js 文件中的 webrtcServerUrl 修改成:https://您自己的域名/webrtc/weapp/webrtc_room
  • 小程序?qū)崿F(xiàn) WebRTC 能力肯定是為了跟 Chrome 瀏覽器進(jìn)行視頻通話,瀏覽器端的源代碼可以點(diǎn)擊 Chrome(src) 下載到,將 component/WebRTCRoom.js 文件中的 serverDomain 修改成:https://您自己的域名/webrtc/weapp/webrtc_room

2. 搭建 <live-room> 和 <rtc-room> 的服務(wù)器

2.1 這個服務(wù)器能做什么?

  • (用于直播連麥)和 (用于視頻通話)都是基于騰訊云 LVB 和 IM 兩個基礎(chǔ)服務(wù)實(shí)現(xiàn)的擴(kuò)展功能,需要一個叫做 RoomService 的后臺組件配合才能運(yùn)行。

2.2 這個服務(wù)器要怎么搭建?

  • 下載 RoomService 的 java 版本源代碼,根據(jù) README.md 中的說明就可以了解怎么使用這份源碼。

2.3 服務(wù)器建好了我怎么用?

  • 小程序 源碼中,將 wxlite/config.js 文件中的 serverUrl 和 roomServiceUrl 修改成:https://您自己的域名/roomservice/
  • 小程序如果使用 <live-room> 和 <rtc-room> 兩個標(biāo)簽,在 PC 端就不能用 Chrome 瀏覽器配對了,需要改用WebEXE 混合解決方案。將 GitHub(WebEXE) 源碼中 liveroom.html、double.html文件中的 RoomServerDomain 修改成:https://您自己的域名/roomservice/

3. Wafer 零成本服務(wù)器部署方案 (Node.js)

如果您是一位資深的 Web 前端工程師,暫時找不到合適的服務(wù)器,但又想快速擁有自己的調(diào)試后臺,可以使用騰訊云的 Wafer 功能進(jìn)行零成本的一鍵部署方案(Wafer 只支持 Node.js 語言的后臺代碼)



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24646.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢