Real-Time Video Calls Tutorial

Learn to build video calling with OddSockets WebSocket signaling and WebRTC

Setup Your API Key

Get your free API key to start building with real-time video calling

Option 1: Get API Key

Get API Key

Option 2: Enter Manually

Already have an API key? Enter it below to start the tutorial

Experience the video calling features without an API key

Connecting...

Tutorial Video Room

Real-time video calling with OddSockets

1 participants

00:00

You (Tutorial User)

Welcome to OddSockets Video Calls!

This tutorial demonstrates real-time video calling capabilities.

✅ WebRTC video/audio streaming
✅ WebSocket signaling
✅ Multi-participant support
✅ Real-time chat integration
✅ Media controls (mute/video toggle)

Chat

Chat with other participants during the video call!

Step 1: Setup API Key

Configure your OddSockets API key to enable real-time video calling.

Step 2: Initialize Video Client

Create OddSockets client and request camera/microphone access.

const client = new OddSocketsClient({
  apiKey: 'your-api-key',
  debug: true
});

// Request media access
const stream = await navigator.mediaDevices
  .getUserMedia({
    video: { width: 1280, height: 720 },
    audio: { echoCancellation: true }
  });

Step 3: WebSocket Signaling

Use WebSocket channels for video call signaling.

// Subscribe to video signaling
await client.subscribe('video-room', (message) => {
  switch (message.type) {
    case 'call-joined':
      handleUserJoined(message);
      break;
    case 'call-left':
      handleUserLeft(message);
      break;
  }
});

Step 4: WebRTC Peer Connections

Establish direct peer-to-peer video connections.

// Create peer connection
const peerConnection = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});

// Add local stream
localStream.getTracks().forEach(track => {
  peerConnection.addTrack(track, localStream);
});

Step 5: Handle Remote Streams

Display remote participant video streams.

peerConnection.ontrack = (event) => {
  const remoteStream = event.streams[0];
  const videoElement = document.createElement('video');
  videoElement.srcObject = remoteStream;
  videoElement.autoplay = true;
  videoGrid.appendChild(videoElement);
};

Step 6: Media Controls

Implement mute, video toggle, and screen sharing.

// Toggle mute
function toggleMute() {
  const audioTrack = localStream.getAudioTracks()[0];
  audioTrack.enabled = !audioTrack.enabled;
  
  // Notify other participants
  client.publish('video-room', {
    type: 'media-state',
    isMuted: !audioTrack.enabled
  });
}

Setup Your API Key

Option 1: Get API Key

Option 2: Enter Manually

Tutorial Video Room

Welcome to OddSockets Video Calls!

Chat

Session Information

Video Call Settings

Complete Tutorial Code

Connecting...

Connection Error