# Build a video chat app with the Zoom Video SDK & SvelteKit

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

The [Zoom Video SDK](/docs/video-sdk/) provides video, audio, screen sharing, chat, and more with an easy to use SDK. In this blog we'll showcase adding video chat to a SvelteKit web application.

If you're building a Svelte application without SvelteKit you can skip to [Build the Videocall Component](#step-5-build-the-videocall-component) section, and use your own backend logic to generate JWTs. You can find the code for this blog on [GitHub](https://github.com/zoom/VideoSDK-SvelteKit-Quickstart/).

Prerequisites:

-   Node LTS & NPM
-   A Zoom [Video SDK Account](/docs/video-sdk/get-credentials/)

## Step 1: Scaffold the application

If you already have a [SvelteKit](https://kit.svelte.dev/) project, you can skip this step.

Open a terminal and execute:

```bash
$ npm create svelte@latest <project-name>
$ cd <project-name>
```

You can use the package manager of your choice.

## Step 2: Configuring the project

### Install the dependencies

We will install the [Zoom Video SDK](https://www.npmjs.com/package/@zoom/videosdk) and [jsrsasign](https://www.npmjs.com/package/jsrsasign) a library to generate JWTs. You can use the following command for installation:

```bash
$ npm install @zoom/videosdk jsrsasign
```

### Enable shared array buffer support

To leverage the full power of the Zoom Video SDK including features like rendering multiple videos, virtual background, & background noise suppression, we need to enable support for Shared Array Buffers (SAB) in the browser.

Simply, download this [file](https://github.com/gzuidhof/coi-serviceworker/blob/master/coi-serviceworker.js) and place it in the `public` folder of your project as `public/coi-serviceworker.js`. Later we'll import this file to enable SAB support using a service worker. You can read more about SAB [in our documentation](/docs/meeting-sdk/web/sharedarraybuffer/).

### Add environment variables

To complete the setup, create a `.env` file in the root of our project and add the Zoom Video SDK Key and Secret to it. You can find your SDK Key and Secret in the [Video SDK Dashboard](https://marketplace.zoom.us), by clicking on the _Develop_ button and selecting _Build Video SDK_. Make sure you're logged in to your Video SDK account.

```bash
ZOOM_SDK_KEY="Your Zoom SDK Key"
ZOOM_SDK_SECRET="Your Zoom SDK Secret"
```

You can start the SvelteKit development server with `npm run dev`. The app will be available at `http://localhost:5173/`.

## Step 3: Authenticate a session

The Zoom Video SDK uses JWTs to authenticate a session. We can create a new directory `routes/call/[slug]/`, this will create a dynamic route for `example.com/call/<slug>`. Users on the same link will be able to join the same session. Before we create the svelte component, let's define the [load](https://kit.svelte.dev/docs/load) function in the `routes/call/[slug]/+page.server.ts` module.

The `load` function is called before the component is rendered, we can use this to generate the JWT. Creating a JWT requires the SDK Key and Secret. We're using a server only `load` function to keep our SDK key and secret secure.

```js
import { ZOOM_SDK_KEY, ZOOM_SDK_SECRET } from '$env/static/private';

export const load = async ({ params }) => {
  const JWT = generateSignature(params.slug, 1);
  return { JWT }
};

function generateSignature(sessionName: string, role: number) {
  ...
}
```

We can access the `ZOOM_SDK_KEY` and `ZOOM_SDK_SECRET` using the `$env/static/private` import. The `generateSignature` function will use the `jsrsasign` library and the session name to generate the JWT:

```js
import { KJUR } from 'jsrsasign';
...
function generateSignature(sessionName: string, role: number) {
  const sdkKey = ZOOM_SDK_KEY;
  const sdkSecret = ZOOM_SDK_SECRET;
  if (!sdkKey || !sdkSecret) {
    throw new Error("Missing ZOOM_SDK_KEY or ZOOM_SDK_SECRET");
  }
  const iat = Math.round(new Date().getTime() / 1000) - 30;
  const exp = iat + 60 * 60 * 2;
  const oHeader = { alg: "HS256", typ: "JWT" };
  const oPayload = {
    app_key: sdkKey, tpc: sessionName, role_type: role, version: 1, iat: iat, exp: exp,
  };
  const sHeader = JSON.stringify(oHeader);
  const sPayload = JSON.stringify(oPayload);
  const sdkJWT = KJUR.jws.JWS.sign("HS256", sHeader, sPayload, sdkSecret);
  return sdkJWT;
}
```

## Step 4: Dynamic route for video chat

We'll create a new Svelte component as `routes/call/[slug]/+page.svelte`. We can access the `JWT` using the `data` prop and the `slug` from the `$page` store. We'll export these to expose them as a component prop.

```html
<script lang="ts">
    import type { PageData } from "./$types";
    import { page } from "$app/stores";

    export let data: PageData;
    const JWT = data.JWT;
    export const slug = $page.url.pathname.split("/")[2];
</script>
```

We'll import the `coi-serviceworker.js` script to enable SAB support. We can add a Videocall component to the markup that will render the video chat UI. We'll pass it the `JWT` and `slug` props.

```html
...

<script src="/coi-serviceworker.js"></script>
<h1>Session: {slug}</h1>
<Videocall {JWT} {slug} />
```

## Step 5: Build the videocall component

Now for the fun part of building the video call component. We'll create a new file as `routes/call/[slug]/Videocall.svelte` that will render the video call UI.

#### Script

We'll import the Zoom Video SDK and define the props for the component, `slug` and `JWT` for authentication. We'll create a username for the user and we'll create a zoom video client with the `ZoomVideo.createClient()` method.

```html
<script lang="ts">
  import { onMount } from 'svelte';
  import ZoomVideo, { type VideoPlayer, VideoQuality } from '@zoom/videosdk';

  export let JWT: string;
  export let slug: string;

  const username = `User-${String(new Date().getTime()).slice(6)}`;
  const client = ZoomVideo.createClient();
```

We'll create mutable variable for the video container in the DOM & our application state: `inSession` for rendering the UI based on the current session state and `audioMuted` & `videoMuted` for the mute state for camera/microphone. We'll use the `onMount` function to initialize the Video SDK client when the component is mounted.

```js
  let videoContainer: HTMLElement;
  let inSession = false;
  let audioMuted = false;
  let videoMuted = false;

  onMount(async () => {
    await client.init('en-US', 'Global', { patchJsMedia: true });
  });
```

#### Start a video session

To start a video sessions, we'll define the `startCall` function. We'll setup an event listener for the `peer-video-state-change` event, which will be triggered when a new user joins or leaves the session. We'll pass the event payload to the `renderVideo` function to update the UI based on the new state, we'll define this function later.
We can use the `join` method to join a video session passing in the `topic`, `token` and `username` as arguments. We can start the audio and video by calling the `startVideo` and `startAudio` methods on the `mediaStream` object.

```js
...
const startCall = async () => {
  client.on("peer-video-state-change", renderVideo);
  await client.join(topic, token, username);
  const mediaStream = client.getMediaStream();
  await mediaStream.startAudio();
  await mediaStream.startVideo();
```

We'll call the `renderVideo` function again after starting the video to update the UI for the local user. Finally, we'll update the application state by setting `inSession` variable to `true` and `audioMuted` & `videoMuted` variables to the current state of the camera/microphone.

```js
...
  await renderVideo({ action: 'Start', userId: client.getCurrentUserInfo().userId });
  inSession = true;
  audioMuted = mediaStream.isAudioMuted();
  videoMuted = !mediaStream.isCapturingVideo();
};
```

#### Rendering videos

We model the `renderVideo` function to take the `event` data from the `peer-video-state-change` event. It'll update the videos in the DOM based on the `action` from the event. If the action is `Stop`, we'll remove the video element by calling the `detachVideo` method and then removing the element from the DOM using the `remove` method on the element. If the action is `Start`, we'll add the video to the DOM by first calling the `attachVideo` method and adding it to the DOM using the `appendChild` method on the `videoContainerRef` element.

```js
...
const renderVideo = async (event: { action: "Start" | "Stop"; userId: number; }) => {
  const mediaStream = client.getMediaStream();
  if (event.action === 'Stop') {
    const element = await mediaStream.detachVideo(event.userId);
    Array.isArray(element) ? element.forEach((el) => el.remove()) : element.remove();
  } else {
    const userVideo = await mediaStream.attachVideo(event.userId, VideoQuality.Video_360P);
    videoContainer.value?.appendChild(userVideo);
  }
};
```

#### Leaving the session

Finally, we'll create a function `leaveSession` to leave the call. We'll remove all the videos from the DOM by calling the `detachVideo` method on the `mediaStream` object for each user in the session and then remove the element from the DOM using the `remove` method on the element. We'll remove the event listener and call the `leave` method to leave the session, we can then update the application state by setting the `inSession` variable to `false`.

```js
...
const leaveCall = async () => {
  const mediaStream = client.getMediaStream();
  for (const user of client.getAllUser()) {
    const element = await mediaStream.detachVideo(user.userId);
    Array.isArray(element) ? element.forEach((el) => el.remove()) : element.remove();
  }
  client.off("peer-video-state-change", renderVideo);
  await client.leave();
  inSession = false;
}
```

#### Mute/Unmute buttons

We'll define `toggleVideo` and `toggleAudio` functions to mute/unmute the camera/microphone.
We can access the `mediaStream` object and call the `startVideo` and `stopVideo` methods to start/stop the video. We'll update the UI by calling the `renderVideo` function with the `action` set to `Start` or `Stop` based on the current state of the camera/microphone with the current user's userId. We'll also update the `videoMuted` ref with the current state of the camera/microphone.

```js
...
const toggleVideo = async () => {
  const mediaStream = client.getMediaStream();
  if (mediaStream.isCapturingVideo()) {
    await mediaStream.stopVideo();
    await renderVideo({ action: 'Stop', userId: client.getCurrentUserInfo().userId });
  } else {
    await mediaStream.startVideo();
    await renderVideo({ action: 'Start', userId: client.getCurrentUserInfo().userId });
  }
  videoMuted = !mediaStream.isCapturingVideo();
};
```

For the `toggleAudio` function, we can call the `unmuteAudio` and `muteAudio` methods on the `mediaStream` object to mute/unmute the microphone and update the `audioMuted` ref with the current state of the microphone.

```js
...
const toggleAudio = async () => {
  const mediaStream = client.getMediaStream();
  if (client.getCurrentUserInfo().muted) {
    await mediaStream.unmuteAudio();
  } else {
    await mediaStream.muteAudio();
  }
  audioMuted = mediaStream.isAudioMuted();
};
</script>
```

#### Template for the videocall

We're omitting the styling to make the code more readable, you can check out the styling on [GitHub](https://github.com/zoom/videosdk-sveltekit-quickstart/blob/main/src/app.css).
We render the video container with the `video-player-container` tag, we'll use `bind:this` to create a binding of the DOM node to the `videoContainer`. We wrap it in a `div` with a conditional `style` to only display it when the video session is active.

```html
...

  <div style={!inSession ? display: none;' : 'display: flex;'}>
    <video-player-container bind:this={videoContainer}></video-player-container>

```

We'll render the start call button with the `startCall` function only when the video session is not active using the `#if` expression and the `inSession` state. When the session is active, we'll render buttons to mute/unmute the camera/microphone and leave the call. We'll use the `videoMuted` and `audioMuted` refs to render the button text based on the current state of the camera/microphone.

```html
...
  {#if !inSession}



  {:else}

      <div>




    </div>
  {/if}
</div>
```

That's all the code we need to build a video conferencing app using the Zoom Video SDK & SvelteKit. You can launch the app by running `npm run dev`. You can navigate to `http://localhost:5173/call/test` to create/join the video session.

![demo videocall screen](/img/blog/ekaansharora/sveltekit-quickstart/conclusion.jpg)

## Conclusion

We hope this quick guide has given you a good starting point to build your own video conferencing app using the Zoom Video SDK & Svelte. We've covered the basics of setting up the project, configuring the app, and building the video chat features, you can visit our documentation for adding more features like screen sharing, chat, and recording.

You can also read our blogs for the same project built with [React/Next.js](/blog/nextjs-video-conferencing-app-using-the-zoom-video-sdk/) and [Vue/Nuxt](/blog/vue-nuxt-video-conferencing-app-using-the-zoom-video-sdk). We'll be posting more guides for creating video chat apps with the Zoom Video SDK for different web technologies in the future. Stay tuned for more updates on our blog!

---

_For further community discussion and insight from Zoom Developer Advocates and other developers, please check out the [Zoom Developer Forum](https://devforum.zoom.us/). For prioritized assistance and troubleshooting, take advantage of [Premier Developer Support](https://explore.zoom.us/en/support-plans/developer/) and [submit a ticket](https://support.zoom.com/hc/en/new-request?id=new_request&sys_id=7a69170f87cee15089a37408dabb3591)._