Building a Lightweight PWA Meeting App with Vanilla JavaScript and WebRTC

使用原生 JavaScript 和 WebRTC 构建轻量级 PWA 会议应用

I recently built a small meeting application for our community’s internal discussions. The goal wasn’t to replace Google Meet or Zoom. It was to build something lightweight that solved exactly what we needed. 我最近为社区的内部讨论构建了一个小型会议应用程序。我的目标并不是要取代 Google Meet 或 Zoom，而是要构建一个轻量级的工具，专门解决我们的实际需求。

Stack: HTML, CSS, JavaScript, WebRTC, Progressive Web App, Render (for hosting). 技术栈： HTML、CSS、JavaScript、WebRTC、渐进式 Web 应用 (PWA) 以及 Render（用于托管）。

Why Vanilla JavaScript? I wanted to understand WebRTC without a framework hiding the implementation details. Working directly with browser APIs made debugging easier and helped me understand peer connections much better. 为什么选择原生 JavaScript？ 我希望在没有框架隐藏实现细节的情况下理解 WebRTC。直接使用浏览器 API 让调试变得更容易，也让我对点对点连接（peer connections）有了更深入的理解。

Why Mesh Topology? Our meetings usually have only a few participants. A mesh network lets every participant connect directly to everyone else, which keeps the architecture simple for small groups. 为什么选择网状拓扑（Mesh Topology）？ 我们的会议通常只有少数参与者。网状网络允许每个参与者直接与其他所有人连接，这使得小型群组的架构保持简洁。

Features:

Peer-to-peer video calls
Audio mute and unmute
Background changer
Installable as a PWA
Responsive interface 功能：
点对点视频通话
音频静音与取消静音
背景切换
可作为 PWA 安装
响应式界面

Biggest Takeaway: Building real tools teaches concepts much faster than tutorials. This project helped me understand WebRTC, media streams, browser APIs, and Progressive Web Apps while creating something our community could actually use. If you’re learning WebRTC, I’d recommend building a small internal tool before trying to create a full video conferencing platform. 最大收获： 构建真实的工具比阅读教程能更快地掌握概念。这个项目不仅让我理解了 WebRTC、媒体流、浏览器 API 和 PWA，还让我创造出了社区真正能用到的东西。如果你正在学习 WebRTC，我建议你在尝试创建完整的视频会议平台之前，先动手构建一个小型的内部工具。