Project 32, Media and real-time
Video Call App
Video chat that goes straight from one browser to the other. Test it with two tabs on this computer, or send a code to a friend to connect two devices.
- Main API
- WebRTC
- Signaling
- Copy and paste or tabs
- Dependencies
- None
- Your browser
- Checking
Call
Camera off
Your camera
Waiting for the other side
0kbps-resolution-fps-round trip
Connect
Turn on the camera here, then open this page in a second tab and turn on the camera there. Click Call in either tab.
Person A: create an offer and send the code to person B.
Then paste B's answer code:
Person B: paste A's offer code and send back the answer.
How it works
- Get mediagetUserMedia turns on the camera and microphone and shows your own video.
- Swap descriptionsOne side makes an offer, the other an answer. They reach each other through a tab channel or through codes you copy.
- Connect directlyICE finds a network path, then audio and video flow peer to peer with no server in the middle.
const pc = new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.l.google.com:19302" }] });
stream.getTracks().forEach((t) => pc.addTrack(t, stream));
pc.ontrack = (e) => (remoteVideo.srcObject = e.streams[0]);
// Caller
await pc.setLocalDescription(await pc.createOffer());
send(pc.localDescription); // any channel: tabs, codes, WebSocket...
// Callee
await pc.setRemoteDescription(offer);
await pc.setLocalDescription(await pc.createAnswer());
send(pc.localDescription);