在线视频会议应用是基于浏览器的能力 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 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。