Tailwind Resources Logo Tailwind Resources
LiveKit Svelte Exploration screenshot

LiveKit Svelte Exploration

Author Avatar Theme by Itsmebriand
Updated: 18 Jul 2021
9 Stars

A simple voip application built with SvelteKit, LiveKit, and TailwindCSS

Github

Categories

Svelte

Overview

This repo contains a small VOIP application built using SvelteKit, LiveKit, and TailwindCSS. The application allows users to set up and connect to a LiveKit instance for video and voice communication. In order to get started, there are a few setup steps involved.

Features

  • SvelteKit integration: The application is built using SvelteKit, a modern frontend framework that provides an easy and efficient development experience.
  • LiveKit integration: LiveKit is used as the underlying infrastructure for video and voice communication. It provides powerful features for real-time communication.
  • TailwindCSS styling: The application’s UI is styled using TailwindCSS, a utility-first CSS framework that allows for easy customization and responsiveness.

Installation

To install and set up the application, follow these steps:

  1. Place the IP for the host you are running on into the docker-compose.yml and config.json files. This IP should be added to the command property for the sfu service in the docker-compose.yml file.
  2. Generate an access token/secret pair by running the following command:
docker run --rm livekit/livekit-server generate-keys
  1. Place the generated access token into /secret/lk_access_token and the secret key into /secret/lk_access_key.
  2. Add both the access token and secret key as a key-value pair (access_token: secret_key) in the /server-config.yml file.
  3. Run docker-compose up and connect to the instance at localhost:3000.
  4. If you want to make changes to the Svelte code, you can use docker-compose up sfu and npm run dev to start the sfu in Docker and the frontend in development mode.
  5. If you are connecting to a local instance (e.g., from one machine to another via LAN), you will need to configure your browser to allow access to your microphone and camera on a specific insecure host. For Google Chrome, you can do this with the --unsafely-treat-insecure-origin-as-secure flag, followed by the insecure host URL (e.g., http://x.x.x.x:3000).

Summary

This VOIP application is built using SvelteKit, LiveKit, and TailwindCSS. It provides users with a simple interface for video and voice communication. The installation process involves setting up the necessary IP configurations, generating access tokens, and running the application through Docker. This application offers an efficient and customizable solution for real-time communication needs.