歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~
Demo 體驗
升級微信到最新版本，發現頁卡 => 小程式 => 搜尋“騰訊視訊雲”，即可開啟小程式Demo：
| 功能項 | 小程式元件 | PC端體驗頁面 | 依賴的雲服務 | 功能描述 |
|---|---|---|---|---|
| 手機直播 |  |
N/A | 直播+雲通訊 | 演示基於小程式的個人直播解決方案 |
| PC 直播 | |
|
直播+雲通訊 | 演示課堂直播和學生互動的相關功能（需要 PC 端配合） |
| 雙人通話 | |
|
直播+雲通訊 | 演示雙人視訊通話功能，可用於線上客服 |
| 多人通話 | |
N/A | 直播+雲通訊 | 演示多人視訊通話功能，可用於臨時會議 |
| WebRTC | |
|
實時音視訊 | 演示小程式和 Chrome 瀏覽器的互通能力 |
| RTMP推流 | |
N/A | 直播 | 演示基礎的 RTMP 推流功能 |
| 直播播放器 | |
N/A | 直播 | 演示基於 RTMP 和 FLV 協議的直播播放功能 |
註冊小程式並開通相關介面
出於政策和合規的考慮，微信暫時沒有放開所有小程式對 和 標籤的支援：
個人賬號和企業賬號的小程式暫時只開放如下表格中的類目：
| 主類目 | 子類目 |
|---|---|
| 【社交】 | 直播 |
| 【教育】 | 線上教育 |
| 【醫療】 | 網際網路醫院，公立醫院 |
| 【政務民生】 | 所有二級類目 |
| 【金融】 | 基金、信託、保險、銀行、證券/期貨、非金融機構自營小額貸款、徵信業務、消費金融 |
開啟 微信公眾平臺 註冊並登入小程式，並在小程式管理後臺的 “設定 - 介面設定” 中自助開通該元件許可權，如下圖所示：
注意：如果以上設定都正確，但小程式依然不能正常工作，可能是微信內部的快取沒更新，請刪除小程式並重啟微信後，再進行嘗試。
安裝微信小程式開發工具
下載並安裝最新版本的微信開發者工具，使用小程式繫結的微訊號掃碼登入開發者工具。
獲取Demo原始碼並除錯
- step1: 訪問 SDK + Demo，獲取小程式 Demo 原始碼。
- step2: 開啟安裝的微信開發者工具，點選【小程式專案】按鈕。
- step3: 輸入小程式 AppID，專案目錄選擇上一步下載下來的程式碼目錄（ 注意： 目錄請選擇根目錄，根目錄包含有
project.config.json檔案，請不要只選擇wxlite目錄！），點選確定建立小程式專案。 - step4: 再次點選【確定】進入開發者工具。
- step5: 請使用手機進行測試，直接掃描開發者工具預覽生成的二維碼進入。
- step6: 開啟除錯模式，體驗和除錯內部功能。開啟除錯可以跳過把這些域名加入小程式白名單的工作。
Demo訪問的測試地址
Demo小程式會訪問如下表格中的測試伺服器地址，這些伺服器使用的雲服務是我們為大家提供的一個體驗賬號，平時很多客戶都會在上面做測試。如果您希望使用自己的後臺伺服器，以免被其他客戶打擾，請關注文件後一節內容：
- 和 相關demo需要訪問如下地址：
| URL | 對應的伺服器地址 | 伺服器的功能描述 |
|---|---|---|
https://webim.tim.qq.com |
IM雲通訊後臺服務地址 | 用於支援小程式裡面的一些訊息通訊功能 |
https://room.qcloud.com |
RoomService後臺服務地址 | RoomService 是用於支撐 |
- 相關demo需要訪問如下地址：
| URL | 對應的伺服器地址 | 伺服器的功能描述 |
|---|---|---|
https://webim.tim.qq.com |
IM雲通訊後臺服務地址 | 用於支援小程式裡面的一些訊息通訊功能 |
https://yun.tim.qq.com/v4/ openim/jsonvideoapp |
WebRTC測試後臺 | 用於請求進入 |
https://xzb.qcloud.com/webrtc/ weapp/webrtc_room |
WebRTC房間列表後臺 | 一個簡單的房間列表功能，方便Demo的測試和使用。 |
搭建自己的賬號和後臺伺服器
這部分我們將介紹如何將Demo預設的測試用伺服器地址，換成您自己的伺服器，這樣一來，您就可以使用自己的騰訊雲賬號實現上述功能，同時也便於您進行二次開發。
1. 搭建 的伺服器
1.1 這個伺服器能做什麼？
- 點選demo裡的互動課堂 功能，您會看到一個房間列表，這個房間列表是怎麼實現的呢？
- 在看到視訊房間列表以後，如果你要建立一個視訊房間，或者進入一個其他人建好的視訊房間，就需要為 所對應的幾個屬性（
sdkAppID、userID、userSig、roomID和privateMapKey）傳遞合法的引數值，這幾個引數值怎麼獲取呢？
1.2 這個伺服器要怎麼搭建？
- 下載 webrtc_server ，這是一份 java 版本的實現，根據 README.md 中的說明就可以瞭解怎麼使用這份原始碼。
1.3 伺服器建好了我怎麼用？
- 小程式 原始碼中，將
wxlite/config.js檔案中的webrtcServerUrl修改成：https://您自己的域名/webrtc/weapp/webrtc_room - 小程式實現 WebRTC 能力肯定是為了跟 Chrome 瀏覽器進行視訊通話，瀏覽器端的原始碼可以點選 Chrome(src) 下載到，將
component/WebRTCRoom.js檔案中的serverDomain修改成：https://您自己的域名/webrtc/weapp/webrtc_room
2. 搭建 和 的伺服器
2.1 這個伺服器能做什麼？
2.2 這個伺服器要怎麼搭建？
- 下載 RoomService 的 java 版本原始碼，根據 README.md 中的說明就可以瞭解怎麼使用這份原始碼。
2.3 伺服器建好了我怎麼用？
- 小程式 原始碼中，將
wxlite/config.js檔案中的serverUrl和roomServiceUrl修改成：https://您自己的域名/roomservice/ - 小程式如果使用 和 兩個標籤，在 PC 端就不能用 Chrome 瀏覽器配對了，需要改用 WebEXE 混合解決方案。將 GitHub(WebEXE) 原始碼中 liveroom.html、double.html檔案中的
RoomServerDomain修改成:https://您自己的域名/roomservice/
3. Wafer 零成本伺服器部署方案 （Node.js）
如果您是一位資深的 Web 前端工程師，暫時找不到合適的伺服器，但又想快速擁有自己的除錯後臺，可以使用騰訊雲的 Wafer 功能進行零成本的一鍵部署方案（Wafer 只支援 Node.js 語言的後臺程式碼），您需要你做的只是：
- step1: 下載 小程式 原始碼。
- step2: 根據一鍵部署指引完成部署。
- step3: 將 GitHub(WebEXE) 原始碼中 liveroom.html、double.html檔案中的
RoomServerDomain修改成:https://您自己的域名/roomservice/
問答
相關閱讀
此文已由作者授權騰訊雲+社群釋出，原文連結：https://cloud.tencent.com/developer/article/1153619?fromSource=waitui
歡迎大家前往騰訊雲+社群或關注雲加社群微信公眾號（QcloudCommunity），第一時間獲取更多海量技術實踐乾貨哦~
海量技術實踐經驗，盡在雲加社群！