📞
1:1 通话，点对点直连
一个很小的 WebSocket 服务器负责让两端配对，之后音频、视频和聊天都在两端之间直接传输。
逐步拆解一次通话
WebRTC Demo一次通话，五个原生应用
一个视频通话应用，覆盖 Web、Android、iOS、macOS 和 Windows。所有客户端都遵循同一套精简的协议，任意两端都能互相通话，端到端加密可开可关。先了解每个部分的原理，再动手实现你自己的客户端。
Skip to content
实际效果
待添加录屏
20 到 30 秒，约 720p，无需声音：两台设备加入同一个房间，通话接通后，一方开启背景，发送一条聊天消息，然后把通话缩小成画中画。用两个不同的平台（比如 iPhone 和 Web）录制，可以展示它们之间能互相通话。
文件: docs/public/media/demo.mp4选择平台
每个应用实现的功能相同，只是用的是各自平台的工具。选一个看看具体怎么做。
- 界面
- Vue 3, Tailwind CSS, shadcn-vue
- WebRTC
- 浏览器自带的 RTCPeerConnection
- 信令 socket
- WebSocket
- 摄像头
- getUserMedia()
- 屏幕共享
- getDisplayMedia()
- 切换视频源
- RTCRtpSender.replaceTrack()
- E2EE
- Insertable Streams 或 RTCRtpScriptTransform，在 worker 中运行
- 背景和贴纸
- MediaPipe ImageSegmenter + FaceLandmarker, canvas 2D
- 画中画
- Document Picture-in-Picture API, video PiP fallback
五分钟跑起来
sh
cd signaling-server && npm install && npm run dev # 会打印出客户端要用的地址
cd web && npm install && npm run dev # 然后打开两个 http://localhost:5173 窗口在两个窗口中输入同一个房间 ID 并加入，通话就建立了。原生应用的运行方法以及要填写的服务器地址，见快速开始。
这是 Demo，不是产品
这份代码用来展示各平台上常见的 WebRTC 用法，并提供一套能跑起来的代码作为起点。真实产品需要的一些东西，比如 TURN 服务器、断线重连和身份认证，都是有意省略的。完整列表见版本与限制。