Solid component and library for LiveKit (unofficial)

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)
}

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/> }}
    />
  )
}

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
  // ...
  ...
}