WebRTC DemoOne call, five native apps

A video call app built for Web, Android, iOS, macOS and Windows. Every client speaks the same small protocol, so any of them can call any other, with or without end-to-end encryption. Read how each part works, then build your own.

Quick start

What is this?

Port to a new platform

📞

1:1 calls, peer to peer

A tiny WebSocket server pairs two peers. After that, audio, video and chat go straight between them.

See a call step by step

👥

Group calls through your own SFU

An optional Go server built on Pion forwards everyone's video. The clients still use only standard WebRTC APIs.

Mesh or SFU?

🔒

End-to-end encryption everywhere

The browser encrypts frames byte for byte like the native FrameCryptor, so a Chrome tab and an iPhone can talk encrypted.

Encrypt a frame yourself

🖥️

Screen and file sharing

Switch between camera, screen and a video file without renegotiating, so the call and its encryption keep running.

Switching sources

✨

Backgrounds and face stickers

Blur, pictures, looping videos and stickers that follow your face, from one shared folder, on every platform.

Five pipelines

🧩

Built to be read

Each feature is explained once, then shown on every platform, with links to the exact files.

Compare platforms

See it in action

Recording to add

20 to 30 seconds, about 720p, no sound needed: two devices join the same room, the call connects, one side turns on a background, sends a chat message, then shrinks the call into picture-in-picture. Using two different platforms (for example iPhone and the web) shows that they call each other.

File: docs/public/media/demo.mp4

Pick a platform

Every app does the same things with its own platform's tools. Pick one to see how.

UI: Vue 3, Tailwind CSS, shadcn-vue
WebRTC: The browser's own RTCPeerConnection
Signaling socket: WebSocket
Camera: getUserMedia()
Screen sharing: getDisplayMedia()
Switching sources: RTCRtpSender.replaceTrack()
E2EE: Insertable Streams or RTCRtpScriptTransform, in a worker
Backgrounds and stickers: MediaPipe ImageSegmenter + FaceLandmarker, canvas 2D
Picture-in-picture: Document Picture-in-Picture API, video PiP fallback

Start reading hereuseCall.tsuseGroupCall.tsmedia.tse2ee.ts

Everything about this platform →

Run it in five minutes

cd signaling-server && npm install && npm run dev   # prints the address to use
cd web && npm install && npm run dev                # then open http://localhost:5173 twice

Join the same room ID in both windows and you are in a call. The quick start covers the native apps and the address to give them.

A demo, not a product

This code shows common WebRTC use cases across platforms and gives you working code to start from. Some things a real product needs, like a TURN server, reconnecting and authentication, are left out on purpose. Versions and limitations lists them.