SvelteKit + Daily call object (custom) video call demo

This project demonstrates how to build a custom video call with Daily's custom call object mode using SvelteKit.

Note: This demo has not been optimized for large calls. Please review our large meeting guide for more information or contact us for help getting your app production-ready.

Getting set up with Daily

To use this demo, you will need a Daily room to join. You can either add your Daily API to your local environment or you can manually create a room through the Daily dashboard.

In either case, you will first need to create a Daily account. Once you have an account and are logged into the Daily dashboard, do one of the following.

1. Add your Daily API key to your local environment

Clone this repo and rename env.example to .env.local

Add your Daily API key, which can be found on the Daily dashboard developers page. You will also need to add your Daily domain name, found in the top left corner of the dashboard.

VITE_DAILY_API_KEY=<-your-api-key->
VITE_DAILY_DOMAIN=<-your-daily-domain->

Next, follow the local development instructions below.

2. Manually creating a Daily room

Alternatively, you can create a new Daily room through the dashboard and enter the room URL in the app's form.

The room URL will be in the following format:

https://<your-daily-domain>.daily.co/<room-name>

Local development

After cloning this repo, run the following commands from the project's root directory.

npm i
npm run dev

Visit http://localhost:5173 to view the app locally.

Demo features

• Creates new Daily rooms via the app UI
• Accepts existing room URLs
• Supports multi-participant video calls
• Chat messaging
  • Chat messages are saved in currently saved in local state. Persistent chat history functionality can be added but is not currently included.
• Local device controls
• In-call screen sharing (max. 1 screen)

Daily API interactions

This demo uses the following Daily methods:

• createCallObject()
• join()
• participants()
• localVideo()
• localAudio()
• setLocalVideo()
• setLocalAudio()
• startScreenShare()
• stopScreenShare()
• leave()
• destroy()
• supportedBrowser()

And the following Daily events:

• joining-meeting
• joined-meeting
• participant-joined
• participant-updated
• participant-left
• error
• camera-error
• app-message

Additional information from SvelteKit

Before creating a production version of your app, install an adapter for your target environment. Then:

npm run build

You can preview the built app with npm run preview, regardless of whether you installed an adapter. This should not be used to serve your app in production.