教你從0到1搭建小程序音視頻

時間 2020-01-27

標籤搭建程序音視頻简体版

原文原文鏈接

歡迎你們前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~html

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

Demo 體驗

升級微信到最新版本，發現頁卡 => 小程序 => 搜索「騰訊視頻雲」，便可打開小程序Demo：前端

功能項	PC端體驗頁面	依賴的雲服務	功能描述
手機直播	N/A	直播+雲通信	演示基於小程序的我的直播解決方案
PC 直播		直播+雲通信	演示課堂直播和學生互動的相關功能（須要 PC 端配合）
雙人通話		直播+雲通信	演示雙人視頻通話功能，可用於在線客服
多人通話	N/A	直播+雲通信	演示多人視頻通話功能，可用於臨時會議
WebRTC		實時音視頻	演示小程序和 Chrome 瀏覽器的互通能力
RTMP推流	N/A	直播	演示基礎的 RTMP 推流功能
直播播放器	N/A	直播	演示基於 RTMP 和 FLV 協議的直播播放功能

註冊小程序並開通相關接口

出於政策和合規的考慮，微信暫時沒有放開全部小程序對 <live-pusher> 和 <live-player> 標籤的支持：java

我的帳號和企業帳號的小程序暫時只開放以下表格中的類目：git

主類目	子類目
【社交】	直播
【教育】	在線教育
【醫療】	互聯網醫院，公立醫院
【政務民生】	全部二級類目
【金融】	基金、信託、保險、銀行、證券/期貨、非金融機構自營小額貸款、徵信業務、消費金融

打開微信公衆平臺註冊並登陸小程序，並在小程序管理後臺的<font color='red'> 「設置 - 接口設置」 </font>中自助開通該組件權限，以下圖所示：github

注意：若是以上設置都正確，但小程序依然不能正常工做，多是微信內部的緩存沒更新，請刪除小程序並重啓微信後，再進行嘗試。

安裝微信小程序開發工具

下載並安裝最新版本的微信開發者工具，使用小程序綁定的微信號掃碼登陸開發者工具。web

<img style="border:0; max-width:100%; height:auto; box-sizing:content-box; box-shadow: 0px 0px 0px #ccc; margin: 0px 0px 0px 0px;" src="https://main.qcloudimg.com/ra...; />json

獲取Demo源碼並調試

step1: 訪問 SDK + Demo，獲取小程序 Demo 源碼。
step2: 打開安裝的微信開發者工具，點擊【小程序項目】按鈕。
step3: 輸入小程序 AppID，項目目錄選擇上一步下載下來的代碼目錄（ 注意： 目錄請選擇根目錄，根目錄包含有 project.config.json文件，請不要只選擇 wxlite 目錄！），點擊肯定建立小程序項目。
step4: 再次點擊【肯定】進入開發者工具。
step5: 請使用手機進行測試，直接掃描開發者工具預覽生成的二維碼進入。
step6: <font color='red'>開啓調試模式</font>，體驗和調試內部功能。開啓調試能夠跳過把這些域名加入小程序白名單的工做。

<img style="border:0; max-width:100%; height:auto; box-sizing:content-box; box-shadow: 0px 0px 0px #ccc; margin: 0px 0px 0px 0px;" src="https://main.qcloudimg.com/ra...; />小程序

Demo訪問的測試地址

Demo小程序會訪問以下表格中的測試服務器地址，這些服務器使用的雲服務是咱們爲你們提供的一個體驗帳號，平時不少客戶都會在上面作測試。若是您但願使用本身的後臺服務器，以避免被其餘客戶打擾，請關注文檔後一節內容：微信小程序

<live-room> 和 <rtc-room> 相關demo須要訪問以下地址：

URL	對應的服務器地址	服務器的功能描述
`https://webim.tim.qq.com`	IM雲通信後臺服務地址	用於支持小程序裏面的一些消息通信功能
`https://room.qcloud.com`	RoomService後臺服務地址	RoomService 是用於支撐（視頻通話）和 [](https://mp.weixin.qq.com/) （直播連麥）的房間管理邏輯

<webrtc-room> 相關demo須要訪問以下地址：

URL	對應的服務器地址	服務器的功能描述
`https://webim.tim.qq.com`	IM雲通信後臺服務地址	用於支持小程序裏面的一些消息通信功能
`https://yun.tim.qq.com/v4/` `openim/jsonvideoapp`	WebRTC測試後臺	用於請求進入所需的 userSig 和 privateMapKey
`https://xzb.qcloud.com/webrtc/` `weapp/webrtc_room`	WebRTC房間列表後臺	一個簡單的房間列表功能，方便Demo的測試和使用。

搭建本身的帳號和後臺服務器

這部分咱們將介紹如何將Demo默認的測試用服務器地址，換成您本身的服務器，這樣一來，您就可使用本身的騰訊雲帳號實現上述功能，同時也便於您進行二次開發。瀏覽器

1. 搭建 <webrtc-room> 的服務器

1.1 這個服務器能作什麼？

點擊demo裏的互動課堂 <webrtc-room> 功能，您會看到一個房間列表，這個房間列表是怎麼實現的呢？
在看到視頻房間列表之後，若是你要建立一個視頻房間，或者進入一個其餘人建好的視頻房間，就須要爲 [](https://cloud.tencent.com/doc... 所對應的幾個屬性（sdkAppID、userID、userSig、roomID 和 privateMapKey）傳遞合法的參數值，這幾個參數值怎麼獲取呢？

1.2 這個服務器要怎麼搭建？

下載 webrtc_server ，這是一份 java 版本的實現，根據 README.md 中的說明就能夠了解怎麼使用這份源碼。

1.3 服務器建好了我怎麼用？

小程序源碼中，將 wxlite/config.js 文件中的 webrtcServerUrl 修改爲：https://您本身的域名/webrtc/w...
小程序實現 WebRTC 能力確定是爲了跟 Chrome 瀏覽器進行視頻通話，瀏覽器端的源代碼能夠點擊 Chrome(src) 下載到，將 component/WebRTCRoom.js 文件中的serverDomain修改爲：https://您本身的域名/webrtc/w...

2. 搭建 <live-room> 和 <rtc-room> 的服務器

2.1 這個服務器能作什麼？

[](https://cloud.tencent.com/doc... （用於直播連麥）和 [](https://cloud.tencent.com/doc... （用於視頻通話）都是基於騰訊雲 LVB 和 IM 兩個基礎服務實現的擴展功能，須要一個叫作 RoomService 的後臺組件配合才能運行。

2.2 這個服務器要怎麼搭建？

下載 RoomService 的 java 版本源代碼，根據 README.md 中的說明就能夠了解怎麼使用這份源碼。

2.3 服務器建好了我怎麼用？

小程序源碼中，將 wxlite/config.js 文件中的 serverUrl和 roomServiceUrl 修改爲：https://您本身的域名/roomserv...
小程序若是使用 <live-room> 和 <rtc-room> 兩個標籤，在 PC 端就不能用 Chrome 瀏覽器配對了，須要改用 WebEXE 混合解決方案。將 GitHub(WebEXE) 源碼中 liveroom.html、double.html文件中的RoomServerDomain修改爲:https://您本身的域名/roomserv...