Solid-livekit NPM

This package provides Solid components that makes it easier to use LiveKit in a Solid app.

Inspired completely by https://github.com/livekit/livekit-react

npm bundle size (scoped) npm bundle size (scoped version) Libraries.io dependency status for latest release, scoped npm package NPM

Installation

This library is available through the npm registry.

NPM

$ npm -i solid-livekit

Yarn

$ yarn add solid-livekit

Demo

https://solid-livekit.netlify.app/

Source available in example

Usage

Video room with built-in UI

Without customization, the component would use a default skin as seen in the demo above.

import { LiveKitRoom } from 'solid-livekit'
// CSS should be explicitly imported if you want to use the default UI
import 'solid-livekit/dist/esm/index.css'

export const RoomPage = () => {
  const url = 'wss://your_host'
  const token = 'your_token'
  return (
    <div className="roomContainer">
      <LiveKitRoom 
        url={url}
        token={token}
        onConnected={room => onConnected(room)}
      />
    </div>
  )
}

async function onConnected(room) {
  await room.localParticipant.setCameraEnabled(true)
  await room.localParticipant.setMicrophoneEnabled(true)
}

Customize rendering

To provide your own rendering, override one or more of stageRenderer, participantRenderer, and controlRenderer. It's possible customize a single renderer and use defaults for the others.

export const RoomPage = () => {
  const url = 'wss://your_host'
  const token = 'your_token'
  return (
    <LiveKitRoom url={url} token={token}
      // stageRenderer renders the entire stage
      stageRenderer={(props: StageProps) => { return <div/> }}
      // participantRenderer renders a single participant
      participantRenderer={(props: ParticipantProps) => { return <div/> }}
      // controlRenderer renders the control bar
      controlRenderer={(props: ControlsProps) => { return <div/> }}
    />
  )
}

Using custom hooks

The provided components make use of two hooks: createRoom and createParticipant, they will help you manage internal LiveKit callbacks and map them into state variables that are ready-to-use from React components.

Using the connect function returned by createRoom will ensure that callbacks are registered automatically and the other state variables are updated when changes take place in the room.

import { createRoom, createParticipant } from 'solid-livekit'

export const MyComponent = () => {
  const room = createRoom();
  // room().connect
  // room().isConnecting
  // room().room
  // room().error
  // room().participants
  // room().audioTracks
  ...
}

export const ParticipantRenderer = ({ participant }) => {
  const participant = createParticipant(participant);
  // participant().isSpeaking
  // participant().subscribedTracks
  // ...
  ...
}

Rendering video and audio

When building your custom UI, it's helpful to use track renderers that are provided in this library. AudioRenderer and VideoRenderer would render an audio and video track, respectively.