Sveltekit Video Chat App

WayneMorganUK

SvelteKit Video Chat App

A production-ready example demonstrating how to build a real-time video chat application with a SvelteKit frontend and a Cloudflare Durable Object backend for signaling.

📋 Overview

This project showcases how to build a real-time video chat application using SvelteKit and Cloudflare Durable Objects. The Durable Object acts as a signaling server to facilitate peer-to-peer WebRTC connections between clients.

What are Durable Objects?

Durable Objects are Cloudflare's solution for building stateful applications. In this project, they are used to manage the state of a chat room, including the participants and the signaling messages required to establish WebRTC connections.

📁 Project Structure

This monorepo consists of two main applications:

Backend: `chat-worker`

A Cloudflare Worker that defines and exposes a Durable Object instance. This service:

Manages the state of video chat rooms.
Handles signaling messages for WebRTC.
Provides API endpoints for the frontend to create and join rooms.

Frontend: `sveltekit-video-chat-app`

A modern SvelteKit application serving as the user interface:

Captures video and audio from the user's device.
Communicates with the Durable Object backend for signaling.
Establishes peer-to-peer WebRTC connections with other users in the room.

🚀 Quick Start

Prerequisites

Node.js 18.0 or higher
pnpm (or npm/yarn)
Wrangler CLI (installed as a dependency)

Installation

Install dependencies across the monorepo:
```
pnpm install
```
Start the development environment:
```
pnpm start
```

This single command:

Starts the Durable Object worker locally using Wrangler.
Automatically launches the SvelteKit development server.
Enables both apps to communicate as if deployed to Cloudflare.

Testing Locally

Once running, open your browser and navigate to:

http://localhost:5173/

You can then create a room and share the link with another user to start a video chat session.

🔗 How It Works

The application uses WebRTC for peer-to-peer video and audio communication. The Cloudflare Durable Object is used as a signaling server to exchange metadata between the clients to establish the connection.

Room Creation: A user creates a room, which creates a new Durable Object instance for that room.
Joining a Room: Other users can join the room by navigating to the room's URL.
Signaling: The clients exchange signaling messages (like SDP offers and answers, and ICE candidates) through the Durable Object to establish a direct peer-to-peer connection.
WebRTC Connection: Once the signaling process is complete, the clients are connected directly to each other, and the video and audio data is streamed peer-to-peer.

TURN/STUN Servers

This application uses WebRTC to establish peer-to-peer video connections. TURN and STUN servers are critical infrastructure components for NAT traversal.

What are STUN and TURN servers?

STUN (Session Traversal Utilities for NAT): Helps clients discover their public IP address and determine the best path for direct peer-to-peer communication. Most connections use STUN when both peers are on standard NAT.
TURN (Traversal Using Relays around NAT): A relay server that forwards media traffic between peers when a direct connection is not possible (e.g., behind symmetric NAT or restrictive firewalls). TURN requires more bandwidth but ensures connectivity in challenging network conditions.

Configuration

The application is configured to use different servers based on the environment:

Development (localhost)

{
  iceServers: [
    { urls: 'stun:stun.cloudflare.com:3478' }
  ]
}

Production

{
  iceServers: [
    {
      urls: 'turn:turn.cloudflare.com:3478?transport=udp',
      username: 'your_username',
      credential: 'your_credential'
    },
    {
      urls: 'turn:turn.cloudflare.com:3478?transport=tcp',
      username: 'your_username',
      credential: 'your_credential'
    },
    {
      urls: 'turns:turn.cloudflare.com:5349?transport=tcp',
      username: 'your_username',
      credential: 'your_credential'
    }
  ]
}

Using Custom TURN/STUN Servers

To use your own TURN/STUN servers, modify the ICE server configuration in src/routes/call/+page.svelte:

env.servers = {
  iceServers: [
    { urls: 'stun:your-stun-server.com:3478' },
    {
      urls: 'turn:your-turn-server.com:3478?transport=udp',
      username: 'your_username',
      credential: 'your_credential'
    }
  ]
};

Recommended TURN/STUN Services

Cloudflare: Free STUN, paid TURN
coturn: Open-source TURN/STUN server you can self-host
AWS: Kinesis Video Streams with TURN capabilities
Twilio: Managed TURN infrastructure
xirsys.com: Reliable TURN/STUN as a service

📦 Deploying to Cloudflare

Ready to go live? Follow these steps:

Deploy Both Applications

Deploy the backend worker first:

cd chat-worker
pnpm run deploy

Then deploy the SvelteKit application:

cd ../sveltekit-video-chat-app
pnpm run deploy

📚 Additional Resources

💡 Key Features

✅ Real-time Video and Audio Chat
✅ Peer-to-Peer Communication with WebRTC
✅ Signaling with Cloudflare Durable Objects
✅ Unified Local Development - Frontend and backend run together locally
✅ Production Ready - Same setup works during development and after deployment
✅ Type Safe - Full TypeScript support in both frontend and backend

🤝 Contributing

Feel free to fork this repository and use it as a starting point for your own Cloudflare + SvelteKit projects!

📖 Credits

This project is based on and inspired by dario-piotrowicz/sveltekit-durable-object-local-usage-example. Special thanks to Dario Piotrowicz for creating an excellent foundation for SvelteKit + Durable Object integration.

📄 License

This project is open source and available under the MIT License.

Top categories