線上視訊會議應用是基于浏覽器的能力 WebRTC 以及 騰訊雲開發 CloudBase 能力建構而成的應用. 在雲開發的助力下, 一個複雜的線上會議應用, 一個人一兩天即可完成.
雲開發CloudBase開通，參加：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
應用體驗位址: Online Meeting Powered by Tencent Cloudbase
項目源碼位址: Github
注: 應用僅供示範之用, 目前僅支援兩人視訊會議, 功能還不夠完善, 還有許多可完善之處. 建立會議後可将會議位址發給他人, 或者在本機另起一浏覽器視窗(未避免資料混亂, 可開隐私模式視窗, 或使用另一個浏覽器)打開會議位址 來體驗
可以線上一鍵部署或通過本地部署的方式，來獨立部署一個自己的線上視訊會議應用
隻需要點選下方按鈕，跳轉到騰訊雲控制台，即可在雲端一鍵安裝一個線上視訊會議應用
修改 .env 檔案中的 <code>ENV_ID</code> 的值 <code>tcb-demo-10cf5b</code> 修改為自己的環境 ID
指令行 cd 到本目錄中, 執行 <code>npm run deploy</code> 即可
本應用用到的能力、工具、架構有:
CloudBase Framework 用于項目基礎目錄結構生成, 一鍵部署
Simple Peer 流行的 WebRTC 庫
雲開發-雲函數, 包括雲函數的定時調用
雲開發-資料庫
雲開發-靜态網站托管
React
Ant design
如果你不清楚項目開發的基本指令, 可閱讀本項目使用的模版的 readme.md
WebRTC 即 Web 實時通信技術, 由一系列浏覽器 API 組成, 包括 navigator.getUserMedia**, MediaStream, RTC相關的全局對象
WebRTC 是一種 P2P 的通信技術, 浏覽器之間可以對等連接配接. 但浏覽器之間需要通過一個信令伺服器來交換信令後方可建立連接配接
浏覽器的信令資訊的擷取需要一個 ICE 伺服器, 一般預設會使用谷歌的公共伺服器
雲開發（CloudBase）是雲端一體化的後端雲服務 ，采用 serverless 架構，免去了應用建構中繁瑣的伺服器搭建和運維。同時雲開發提供的靜态托管、指令行工具（CLI）、Flutter SDK 等能力降低了應用開發的門檻。使用雲開發可以建構完整的小程式/小遊戲、H5、Web、移動 App 等應用。
CloudBase Framework 是雲開發官方出品的開源前後端一體化部署工具，無需改動代碼，實作前後端一鍵托管部署，支援常見的架構和語言，支援自動識别并部署。不僅可以部署應用前後端到 Serverless，還可以擴充更多後端能力。
Github 位址： https://github.com/TencentCloudBase/cloudbase-framework
整個應用的建構, 從項目初始化到最終可以一鍵部署, 共分為 6 個部分. 為友善讀者查閱，主要的代碼實作分了 6 次送出, 下述說明中會列出每一步對應的送出 commit.
在進行操作之前, 請確定已經注冊騰訊雲賬戶
WebRTC 需要浏覽器支援, 隻有現代浏覽器才支援, 建議使用 Chrome、Firefox 來體驗, 具體相容性可檢視 caniuse
由于安全政策限制, WebRTC 僅支援 https 協定網站; 其為友善本地開發, 也支援 http 的 <code>localhost</code> 及 <code>127.0.0.1</code> (不限端口), 不支援其他自定義的本機域名、IP
WebRTC 并不具備穿透内網功能, 測試體驗時, 確定雙方機器都處于公網之中并能通路雲開發相關域名
初始化項目結構
首先需要全局安裝 Cloudbase CLI
使用以下指令來使用雲開發的 react 應用模版建立一個 React 雲開發項目
引入 UI 庫 ant-design
增加 landing 頁, 用于檢測 WebRTC 能力以及判斷使用者是否授予攝像頭及麥克風通路權限
landing 頁面核心代碼 <code>meeting-simple/src/landing/index.js</code>
增加 Video-window 頁, 用于支援視訊畫面顯示
Video-window 核心代碼 <code>meeting-simple/src/meeting/video-window/index.js</code>
工具方法的核心實作<code>meeting-simple/src/utils.js</code>，檢測是否支援 WebRTC、
本步驟對應的 git commit
浏覽器端調用雲開發能力需要借助官方 npm 包 tcb-js-sdk, 官方文檔
因為視訊會議應用無需注冊, 即需要匿名使用雲開發能力, 調用能力前, 需要在雲開發 登入授權 中開啟 「匿名登入」
使用雲開發能力(不論是在浏覽器端、Node 端或其他端)調用資料庫時, 操作端 collection 必須存在, 否則會報錯. 是以在本步驟應當提前進入雲開發資料庫控制台 建立視訊會議使用的 collection <code>meeting-simple</code>
使用 JS sdk 調用雲開發能力時, 需保證調用的域名已加入雲開發WEB 安全域名中, 以避免調用時出現跨域問題. 即本地開發使用的域名應增加進 WEB 安全域名 中.
增加 「建立會議」界面
增加雲開發能力調用子產品 「api.js」, 添加 建立會議方法(通過雲開發 js sdk 連接配接資料庫建立記錄)
建立會議的前端 API 核心代碼 <code>meeting-simple/src/meeting/api.js</code>
增加 「加入會議」界面
在 「api.js」中增加方法(直接調用雲開發資料庫能力)擷取會議資訊、加入會議
擷取會議資訊和加入會議的前端 API 的核心代碼 <code>meeting-simple/src/meeting/api.js</code>
注:
資料庫需要設定成公開通路, 否則匿名使用者無法查詢到相關資訊: 進入資料庫找到對應 collection, 切換至 「權限設定」, 選擇 「所有使用者可讀，僅建立者及管理者可寫」并儲存
增加 simple-peer 來管理 WebRTC 用戶端
增加雲函數 「更新 ticket」(用于更新 WebRTC 用戶端的連接配接資訊)并手動部署雲函數, 增加對會議記錄對監聽(即使用資料庫的實時推送能力)
用于更新 WebRTC 用戶端的連接配接資訊的雲函數的核心代碼 <code>meeting-simple/cloudfunctions/update-ticket-meeting-simple/index.js</code>
更新票據和監聽會議資訊變更的前端 API 核心代碼 meeting-simple/src/meeting/api.js
優化會議資訊的擷取提升體驗
監聽資料庫變化亦需要将資料庫設定為公開通路, 即上述第三步中的注意事項 2 所述
匿名使用者無法修改其他匿名使用者建立的記錄. 根據資料庫安全政策, 雖同為匿名使用者, 但不同用戶端的匿名使用者标志不一樣, 故不能操作他人的記錄. 而雲函數有用管理者級别的資料庫操作權限, 故 「更新 ticket」功能采用了雲函數來編寫
将會議密碼分表存儲
修改“加入會議”的前端 API 核心代碼 <code>meeting-simple/src/meeting/api.js</code>
負責加入會議時進行密碼校驗的雲函數的核心代碼 <code>meeting-simple/cloudfunctions/join-meeting-meeting-simple/index.js</code>
資料庫 collection 定期清理舊的無用記錄
清理資料的雲函數的核心實作<code>meeting-simple/cloudfunctions/autoclear-meeting-meeting-simple/index.js</code>
定期清理資料庫使用了雲函數的定時觸發器
增加靜态部署功能, 使用了 website 插件
增加部署雲函數功能, 包括雲函數定時調用的設定, 使用了function 插件
增加資料 collection 的建立, 包括 collection 通路權限的設定, 使用了 database 插件
在 <code>meeting-simple/.env</code> 檔案中聲明環境變量資訊
在 <code>meeting-simple/cloudbaserc.json</code> 檔案中聲明靜态資源、雲函數和資料庫等各個資源的建構和部署資訊
執行 ClouBase Framework 的一鍵部署指令
更多 CloudBase Framework 插件可閱讀CloudBase Framework 官方文檔
在本次實戰案例裡面，我們通過了解了 WebRTC 的基本使用，通過線上會議系統的實戰了解了基于雲開發開發一個應用的完整流程，學會使用了資料庫實時推送能力的使用、匿名使用者使用資料庫的安全政策問題及雲函數定時調用功能，掌握了使用 CloudBase Framework 一鍵部署前後端應用這一工具來快速傳遞。
🚀 CloudBase Framework 是雲開發開源的雲原生前後端一體化部署工具，支援主流前後端架構，前後端一鍵托管部署在雲端一體化平台，支援支援小程式、Web、Flutter、後端服務等多個平台。
Github 開源位址：https://github.com/TencentCloudBase/cloudbase-framework
歡迎給 CloudBase Framework 一個 🌟 star
歡迎大家參與 CloudBase Framework 的開發工作，成為我們的貢獻者，我們将會在雲開發社群展示貢獻者的作品和資訊，同時也會有驚喜獎勵。
您可以選擇如下的貢獻方式：
貢獻技術文章：https://github.com/TencentCloudBase/cloudbase-framework/tree/master/community/posts
貢獻應用：https://github.com/TencentCloudBase/cloudbase-framework/blob/master/doc/app.md
貢獻代碼，送出 Pull Request
回報 bug，送出 Issue
在技術會議上發表技術演講
CloudBase Framework 的發展離不開社群的積極貢獻，這是我們的核心貢獻者清單，再次感謝大家的貢獻：https://github.com/TencentCloudBase/cloudbase-framework#contributors-
雲開發（Tencent CloudBase，TCB）是騰訊雲提供的雲原生一體化開發環境和工具平台，為開發者提供高可用、自動彈性擴縮的後端雲服務，包含計算、存儲、托管等serverless化能力，可用于雲端一體化開發多種端應用（小程式，公衆号，Web 應用，Flutter 用戶端等），幫助開發者統一建構和管理後端服務和雲資源，避免了應用開發過程中繁瑣的伺服器搭建及運維，開發者可以專注于業務邏輯的實作，開發門檻更低，效率更高。