WebRTC DemoMột cuộc gọi, năm app native

App gọi video viết cho Web, Android, iOS, macOS và Windows. Mọi client nói chung một giao thức nhỏ, nên app nào cũng gọi được app nào, có hoặc không có mã hóa đầu cuối (E2EE). Đọc xem từng phần chạy thế nào, rồi tự làm bản của bạn.

Bắt đầu nhanh

Đây là gì?

Port sang nền tảng mới

📞

Gọi 1:1, peer to peer

Một WebSocket server rất nhỏ ghép hai peer với nhau. Sau đó audio, video và chat đi thẳng giữa hai bên.

Xem từng bước của một cuộc gọi

👥

Cuộc gọi nhóm qua SFU của riêng bạn

Một server Go (không bắt buộc) viết trên Pion chuyển tiếp video của mọi người. Client vẫn chỉ dùng API WebRTC chuẩn.

Mesh hay SFU?

🔒

E2EE trên mọi nền tảng

Trình duyệt mã hóa frame giống hệt từng byte với FrameCryptor native, nên một tab Chrome và một chiếc iPhone vẫn gọi mã hóa cho nhau được.

Tự tay mã hóa một frame

🖥️

Chia sẻ màn hình và file

Chuyển qua lại giữa camera, màn hình và file video mà không cần renegotiate, nên cuộc gọi và phần mã hóa vẫn chạy bình thường.

Chuyển nguồn video

✨

Phông nền và sticker trên mặt

Làm mờ, ảnh, video lặp và sticker bám theo khuôn mặt, lấy chung từ một thư mục, trên mọi nền tảng.

Năm pipeline

🧩

Viết ra để đọc

Mỗi tính năng được giải thích một lần, rồi chỉ ra cách làm trên từng nền tảng, kèm link tới đúng file.

So sánh các nền tảng

Xem demo

Video cần quay

Dài 20 đến 30 giây, khoảng 720p, không cần tiếng: hai thiết bị vào cùng một phòng, cuộc gọi kết nối, một bên bật phông nền, gửi một tin nhắn chat, rồi thu cuộc gọi về picture-in-picture. Dùng hai nền tảng khác nhau (ví dụ iPhone và web) để thấy chúng gọi được cho nhau.

File: docs/public/media/demo.mp4

Chọn nền tảng

App nào cũng làm cùng những việc đó, mỗi app dùng công cụ của nền tảng mình. Chọn một nền tảng để xem cách làm.

UI: Vue 3, Tailwind CSS, shadcn-vue
WebRTC: RTCPeerConnection có sẵn của trình duyệt
Socket signaling: WebSocket
Camera: getUserMedia()
Chia sẻ màn hình: getDisplayMedia()
Đổi nguồn video: RTCRtpSender.replaceTrack()
E2EE: Insertable Streams hoặc RTCRtpScriptTransform, chạy trong worker
Background và sticker: MediaPipe ImageSegmenter + FaceLandmarker, canvas 2D
Picture-in-picture: Document Picture-in-Picture API, video PiP fallback

Nên đọc từ đâyuseCall.tsuseGroupCall.tsmedia.tse2ee.ts

Xem chi tiết nền tảng này →

Chạy thử trong năm phút

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

Nhập cùng một room ID ở cả hai cửa sổ là bạn đã ở trong cuộc gọi. Phần bắt đầu nhanh hướng dẫn chạy các app native và địa chỉ cần nhập cho chúng.

Đây là demo, không phải sản phẩm

Code này minh họa các trường hợp dùng WebRTC phổ biến trên nhiều nền tảng, và cho bạn code chạy được để làm điểm xuất phát. Một số thứ sản phẩm thật cần có, như TURN server, tự kết nối lại hay xác thực, được cố ý bỏ ra. Trang Phiên bản và giới hạn liệt kê đầy đủ.