Select which package(s) are affected

@livekit/components-react

Describe the bug

What I'm expecting

I want to be able to set the connection options in LiveKitRoom react component without facing any issues

What happens instead

When connecting, I face the following error:

Reproduction

1 - Use any setup with LiveKitRoom react component

2 - Add options prop to that component. Here's mine (using the simple example in a fresh git clone):

<LiveKitRoom
  token={token}
  serverUrl={process.env.NEXT_PUBLIC_LK_SERVER_URL}
  connect={connect}
  onConnected={() => setIsConnected(true)}
  onDisconnected={handleDisconnect}
  audio={true}
  video={true}
  // HERE vvvv
  options={{
    adaptiveStream: true,
    dynacast: true,
    stopLocalTrackOnUnpublish: true,
    videoCaptureDefaults: {
      resolution: VideoPresets.h360.resolution,
    },
  }}
  ////////////////////
>

...

3 - Start server and connect

4 - Profit

Logs

No response

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M2
    Memory: 113.72 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.20.0/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Safari: 16.4

Severity

serious, but I can work around it

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

Hello!

I ran away with problem that video flashes when I disable or enable audio in PreJoin.

I think i found a problem in file https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/PreJoin.tsx
The video track is recreate when we toggle audio

React.useEffect(() => {
  let trackPromise: Promise<LocalTrack[]> | undefined = undefined;
  let needsCleanup = false;
  if (options.audio || options.video) {

    // Problem is here
    trackPromise = createLocalTracks(options);
    trackPromise
      .then((tracks) => {
        if (needsCleanup) {
          tracks.forEach((tr) => tr.stop());
        } else {
          setTracks(tracks);
        }
      })
      .catch(onError);
  }

  return () => {
    needsCleanup = true;
    trackPromise?.then((tracks) =>
      tracks.forEach((track) => {
        track.stop();
      }),
    );
  };
}, [JSON.stringify(options)]);

Maybe we will divide audio and video tracks? Or is there another solution?

Reproduction

Go to https://meet.livekit.io/
Select "Demo" and Start Meeting
Enable camera and microphone
Try to toggle Microphone button

Logs

No response

System Info

Windows 11 22621
x64 12th Gen Intel(R) Core(TM) i5-12500H
16 GB RAM
Node: 18.18.2
Yarn: 1.22.19
npm: 9.8.1
Chrome: 118.0.5993.89

Severity

annoyance

Additional Information

Select which package(s) are affected

@livekit/components-react

Describe the bug

Started getting this in the latest version (1.1.1), had to roll back to 1.1.0.
Seems to be an issue with the dependency usehooks-ts.

Reproduction

Installing and running with 1.1.1 seems to cause the issue.
Reverting to 1.1.0 solves the issue.

Logs

file:///Users/[user]/[folder]/[project]/[project-package]/node_modules/@livekit/components-react/dist/index.mjs:1966
import { useDebounce, useIntersectionObserver } from "usehooks-ts";
         ^^^^^^^^^^^
SyntaxError: Named export 'useDebounce' not found. The requested module 'usehooks-ts' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'usehooks-ts';
const { useDebounce, useIntersectionObserver } = pkg;

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 122.53 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.11.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
    pnpm: 7.14.0 - /opt/homebrew/bin/pnpm
    Watchman: 2022.10.24.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 115.0.5790.170
    Safari: 16.4
  npmPackages:
    livekit-client: ^1.6.2 => 1.12.0 
    @livekit/components-react: ^1.0.7 => 1.1.1

Severity

blocking all usage of LiveKit

Additional Information

No response

Select which package(s) are affected

@livekit/components-styles, @livekit/components-react

Describe the bug

Livekit meeting creates a blank space in the right and bottom below 390px width devices. E.g. iPhone SE and S8+


Chat window overlaps the control bar on devices below 375px width. E.g. S8+. The control bar should extend fully from left to right as well as the chat window.

Reproduction

Use Chrome developer tools and look for iPhone SE and S8+

Logs

Not needed

System Info

Not needed

Severity

annoyance

Additional Information

No response

Select which package(s) are affected

@livekit/components-core, @livekit/components-react

Describe the bug

I have created room like meet.livekit.io example. But in my case all videos mirrored.

Can you please help me with that?

Reproduction

I have changed my room config like in meet.livekit.io example but also have problem with mirroring.
Also setLogLevel('silent') is not working for me. Whole console is about tracks info or something else related to livekit room.

<LiveKitRoom
    serverUrl={import.meta.env.LIVEKIT_HOST}
    token={streamInfo.token}
    connect={true}
    video={true}
    audio={true}
    options={roomOptions}
>
    <VideoConference chatMessageFormatter={formatChatMessageLinks} />
    <DebugMode logLevel={LogLevel.silent} />
</LiveKitRoom>

Logs

No response

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 87.16 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Firefox: 113.0.2
    Safari: 16.4
  npmPackages:
    livekit-client: ^1.6.5 => 1.6.5

Severity

annoyance

Additional Information

No response

Select which package(s) are affected

@livekit/components-core, @livekit/components-react

Describe the bug

What I'm expecting

When two participants enter a room without any publications, one of them disconnecting should get picked up by the UI.

What happens instead

The participant that left is still present.

Reproduction

open the pre-join and you turn off the camera and microphone, and then you open a new page with the same link, even in private browsing, and you do the same thing: turn off the camera and microphone. You enter the room without touching the control bar, you just close a page or tab of room and then it gets stuck on the other side.

Logs

No response

System Info

cross platform

Severity

annoyance

Additional Information

No response

Describe the problem

If you open the chat window, the only way to close it is by pressing the same button that was used to open it. It is not intuitive for an end user.

Describe the proposed solution

Adding a 'X' button or '->' to signal that you can close the chat by pressing there will greatly improve UI experience.

Alternatives considered

Adding the button.

Importance

would make my life easier

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

What I'm expecting

The RTCEngine.isClosed state which is held in localParticipant's instance returned by useLocalParticipant is correctly synchronised with the room state.

What happens instead

The RTCEngine.isClosed state which is held in localParticipant's instance returned by useLocalParticipant is not correctly synchronised with the room state.
We can avoid this issue by getting localParticipant from room which was returned by useRoomContext. However, I believe that is not expected behavior.

Reproduction

This is what it looks like if you extract the relevant section from my code.

const room = useLiveKitRoom(/* some options*/);

return <RoomContext.Provider>{children}</RoomContext.Provider>

// inside of the RoomContext
const { localParticipant } = useLocalParticipant();
const [stream, setStream] = useState<MediaStream | false>(false);

useEffect(() => {
  if (typeof stream === 'boolean') {
    localParticipant.setScreenShareEnabled(false);
    return;
  }
  const [track] = stream.getVideoTracks();
  // debug: value of isClosed is true even if the localParticipant was connected to the room.
  console.log('isClosed', localParticipant.engine.isClosed);
  // track publishing was failed by error "cannot publish track when not connected"
  localParticipant.publishTrack(track, { source: Track.Source.ScreenShare });
}, [stream])

Logs

No response

System Info

Not needed

Severity

serious, but I can work around it

Additional Information

No response

Describe the problem

I want to have functionality that change user active speaker when user is already joined the meet

Describe the proposed solution

There is another hook (useMediaDeviceSelect) that can change audio input and camera i want this hook support audio ouput too or other function or hook provided for doing that

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

Select which package(s) are affected

@livekit/components-core

Describe the bug

There seems to be a bug with multiple users screen sharing, which was noticed in the meet app. When the second person starts a screenshare it just starts another feed of their webcam and either when stopping the screenshare or sometimes immediately you see a black screen in the middle of the window.

Reproduction

• Start a demo meeting with https://meet.livekit.io/
• Join the room
• Copy and paste the url in the address bar into another tab to join the room as a second user
• Start a screen share from one of the users
• Start a screen share from the other user

Logs

No response

System Info

System:
    OS: macOS 13.4
    CPU: (12) arm64 Apple M2 Pro
    Memory: 68.19 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.asdf/installs/nodejs/18.12.1/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.12.1/bin/yarn
    npm: 8.19.2 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Brave Browser: 113.1.51.114
    Chrome: 113.0.5672.126
    Edge: 112.0.1722.46
    Firefox: 111.0.1
    Safari: 16.5
  npmPackages:
    livekit-client: 1.9.1 => 1.9.1

Severity

annoyance

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

Currently i am using v0.1.8 and i have no problems when i try to enter to room. But after upgrading @livekit/components-react to v0.2.0 or v0.2.1 but i get disconnected from room as soon as enter to room. Example log:

I just want to work with latest version but i couldn't manage it to work right now. In the mean i will work with v0.1.8.

Reproduction

Logs

No response

System Info

System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 5.63 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.2.0 - ~/.nvm/versions/node/v18.2.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.9.0 - ~/.nvm/versions/node/v18.2.0/bin/npm
  Browsers:
    Brave Browser: 108.1.46.153
    Chrome: 109.0.5414.87
    Firefox Developer Edition: 109.0
    Safari: 16.2
  npmPackages:
    livekit-client: ^1.6.2 => 1.6.2

Severity

serious, but I can work around it

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

Steps to reproduce:

Clone components-js
yarn install
yarn build
yarn dev:next
open client 1 chrome -> run simple example with a random name
open client 2 chrome (incognito) -> run simple example with another random name
following error shows:

Unhandled Runtime Error
Error: No participant provided, make sure you are inside a participant context or pass the participant explicitly

../../packages/react/dist/index.mjs (175:22) @ useEnsureParticipant

173 | export { sampleTime } from './internal/operators/sampleTime';
174 | export { scan } from './internal/operators/scan';

175 | export { sequenceEqual } from './internal/operators/sequenceEqual';
| ^
176 | export { share, ShareConfig } from './internal/operators/share';
177 | export { shareReplay, ShareReplayConfig } from './internal/operators/shareReplay';
178 | export { single } from './internal/operators/single';

Reproduction

Written above

Logs

No response

System Info

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M2
    Memory: 96.20 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn
    npm: 8.19.1 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Safari: 16.3

Severity

blocking an upgrade

Additional Information

No response

Describe the problem

Encountered an issue where there was no button for sharing sound from a specific window through screen sharing.

Describe the proposed solution

It will be good if having this feature

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

Describe the problem

I would like to be able to change camera facing mode by clicking on button. Now the only way to change facing mode is via device selector dropdown, but iphone has like five back cameras and one front.

Describe the proposed solution

Adding a facing mode swap button will improve UX.

Alternatives considered

No response

Importance

I cannot use LiveKit without it

Additional Information

No response

Describe the problem

I think this project really requires this feature to be implemented because it has many usecases considering the applications made using LiveKit

Describe the proposed solution

I would love to see the speaker/host screen/cam as PIP.
https://developer.chrome.com/blog/watch-video-using-picture-in-picture/

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

details are in #496
thanks @richthegxd for the report!

Reproduction

see #496

Logs

No response

System Info

*

Severity

annoyance

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

localParticipant?.setScreenShareEnabled(true); is not working on mobile phone

Reproduction

Try to join on meeting in https://meet.livekit.io/ from phone

Logs

No response

System Info

Windows 11

Severity

blocking all usage of LiveKit

Additional Information

No response

Describe the problem

When a participant has roomAdmin permissions, that participant should be able to mute the audio and/or video track of other participants, or even remove them from the room.

Describe the proposed solution

Given that <LiveKitRoom/> already receives a token with embedded grants (VideoGrant.roomAdmin), there shouldn't be much need for configuration:

<LiveKitRoom token={token} {...etc}>
  <VideoConference />
</LiveKitRoom>

When that grant is present, the <ParticipantTile/> should provide either additional buttons next to the <FocusToggle/>, or add them to the .lk-participant-metadata (e.g. turning the <TrackMutedIndicator/> into a button).

I'm not entirely sure as whether the JS client is allowed to issue commands directly to the LiveKit server, but if not, the <LiveKitRoom/> or <VideoConference/> should provide callback options:

async function muteParticipant(p: Participant, trackRef: TrackPublication) {
  // use custom API client and instruct server to perform participant muting
  await myApi.rooms(room).participants(p.identity).mute(trackRef.trackSid)
}

async function removeParticipant(p: Participant) {
  // use custom API client and instruct server to remove participant from room
  await myApi.rooms(room).participants(p.identity).remove()
}

<LiveKitRoom room={room} token={token} {...etc}>
  <VideoConference
    onParticipantMute={muteParticipant}
    onParticipantRemove={removeParticipant}
  />
</LiveKitRoom>

Alternatives considered

I currently have a bit of a "hacky" implementation:

  return <LiveKitRoom token={props.token.token} serverUrl={props.token.url} ...etc>
    <VideoConference />
    {isAdmin && <AdminControls/>}
  </LiveKitRoom>

with the following implementations of

const isAdmin = useMemo(() => {
  const tok = decodeJwt<{ video: { roomAdmin?: boolean } }>(props.token.token)
  return tok.video.roomAdmin ?? false
}, [props.token])

import { useParticipants, useRoomInfo } from "@livekit/components-react"
import { LocalParticipant, RemoteParticipant, RoomEvent } from "livekit-client"
import { useState } from "react"

import { api } from "../lib/api"
import BS from "./bootstrap"
import { FaCircleXmark } from "./icons/FaCircleXmark.tsx"
import { FaMicrophoneSlash } from "./icons/FaMicrophoneSlash.tsx"
import { FaUsersGear } from "./icons/FaUsersGear.tsx"
import { FaVideoSlash } from "./icons/FaVideoSlash.tsx"

interface ToggleProps {
  room: string
  p: RemoteParticipant | LocalParticipant
}

function MicToggle({ room, p }: ToggleProps) {
  function mute() {
    for (const sid of p.audioTracks.keys()) {
      api.rooms.mute({
        room_name: room,
        identity:  p.identity,
        track:     sid,
      })
    }
  }
  return p.isMicrophoneEnabled
    ? <BS.Button size="sm" variant="light" onClick={mute}>
      <FaMicrophoneSlash/>
    </BS.Button>
    : <BS.Button size="sm" variant="dark" disabled>
      <FaMicrophoneSlash className="text-muted" />
    </BS.Button>
}

function CamToggle({ room, p }: ToggleProps) {
  function mute() {
    for (const sid of p.videoTracks.keys()) {
      api.rooms.mute({
        room_name: room,
        identity:  p.identity,
        track:     sid,
      })
    }
  }
  return p.isCameraEnabled
    ? <BS.Button size="sm" variant="light" onClick={mute}>
      <FaVideoSlash/>
    </BS.Button>
    : <BS.Button size="sm" variant="dark" disabled>
      <FaVideoSlash className="text-muted" />
    </BS.Button>
}

function KickButton({ room, p }: ToggleProps) {
  function kick() {
    api.rooms.kick({
      room_name: room,
      identity:  p.identity,
    })
  }
  return <BS.Button size="sm" variant="dark" onClick={kick}>
    <FaCircleXmark className="text-danger"/>
  </BS.Button>
}

export function AdminControls() {
  const room = useRoomInfo()
  const pcts = useParticipants({
    updateOnlyOn: [
      RoomEvent.Connected,
      RoomEvent.ParticipantConnected,
      RoomEvent.ParticipantDisconnected,
      RoomEvent.TrackPublished,
      RoomEvent.TrackUnpublished,
      RoomEvent.TrackMuted,
      RoomEvent.TrackUnmuted,
    ],
  })

  const [open, setOpen] = useState(false)

  return <div className="admin-controls">
    {open && <div className="popover show">
      <div className="popover-body">
        <table className="table table-sm">
          <tbody>
            {pcts.map(p => <tr key={p.sid}>
              <td className="pe-3">
                {p.name || <em>unbekannt</em>}
              </td>
              <td className="text-center">
                <MicToggle room={room.name} p={p} />
              </td>
              <td className="text-center">
                <CamToggle room={room.name} p={p} />
              </td>
              <td className="text-center">
                <KickButton room={room.name} p={p} />
              </td>
            </tr>)}
          </tbody>
        </table>
      </div>
    </div>}

    <BS.Button
      id="toggle-user-control"
      variant="dark"
      size="lg"
      onClick={() => setOpen(cur => !cur)}
    >
      <FaUsersGear/>
    </BS.Button>
  </div>
}

With some additional CSS (absolute positioning of the AdminControl's container), this renders as:

Importance

would make my life easier

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

In a running meet, if we want to make changes in the room options at the moment (such as changing the codec or changing the audio and video bitrate by using remote configs), those changes will not be applied. I searched through previous PRs and found that the following change in the useEffect dependencies in the useLiveKitRoom hook caused this to happen:
The PR link

Describe the proposed solution

I think reverting this change can fix the problem.

Reproduction

Consider this code:

const meetOptions = useMeetOptions(); //* Getting options from server

const { room } = useLiveKitRoom({ ...someRoomOptions, options: meetOptions })

If meetOptions changes due to a server update (or other methods of changing the options), the room will not change.

Logs

No response

System Info

Not needed

Severity

blocking an upgrade

Additional Information

No response

Describe the problem

If we use useRemoteParticipants hook without adding any prop to it gives typescript error.

// Gives Error
 const remoteParticipants = useRemoteParticipants();

// Works
 const remoteParticipants = useRemoteParticipants({});

Describe the proposed solution

I think it should work like useParticipants hook.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

What is expected

If a user starts sharing his screen and then ends his screen sharing, the screenshare indicator should update with the proper state.

Currently happening

Once a user starts a screenshare, even if he ends his screenshare, the indicator never changes

Reproduction

Have 2 participants in a room and test the screensharing feature.

Logs

No response

System Info

JS-SDK

Severity

annoyance

Additional Information

No response

Select which package(s) are affected

@livekit/components-core, @livekit/components-react

Describe the bug

What I'm expecting

unrelated data messages should not show up in the chat.

What actually happens

It seems like data messages without a topic are generating empty ghost messages in the chat component

Reproduction

User reported the issue on slack https://livekit-users.slack.com/archives/C01KVTJH6BX/p1685575390807229?thread_ts=1685575350.386999&cid=C01KVTJH6BX

I'm sending data channel messages (without a topic if that matters because of the above issue I'm having), and any time I send one, it results in an empty chat message being added to the chat prefab looking like this:

Logs

No response

System Info

-

Severity

serious, but I can work around it

Additional Information

No response

Select which package(s) are affected

@livekit/components-core

Describe the bug

I have this warning on console.

MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 101 dataReceived listeners added. Use emitter.setMaxListeners() to increase limit

Is there a way to fix this?

And is it related to this line

Reproduction

I am just using useChat hook.

Logs

MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 101 dataReceived listeners added. Use emitter.setMaxListeners() to increase limit
    at _addListener (http://localhost:5173/node_modules/.vite/deps/chunk-NVZ5I4PU.js?v=14542586:11556:15)
    at Room.addListener (http://localhost:5173/node_modules/.vite/deps/chunk-NVZ5I4PU.js?v=14542586:11567:10)
    at Observable2._subscribe (http://localhost:5173/node_modules/.vite/deps/chunk-DHBW7L4I.js?v=14542586:5563:10)
    at Observable2._trySubscribe (http://localhost:5173/node_modules/.vite/deps/chunk-DHBW7L4I.js?v=14542586:3331:19)
    at http://localhost:5173/node_modules/.vite/deps/chunk-DHBW7L4I.js?v=14542586:3325:115
    at errorContext (http://localhost:5173/node_modules/.vite/deps/chunk-DHBW7L4I.js?v=14542586:3107:5)
    at Observable2.subscribe (http://localhost:5173/node_modules/.vite/deps/chunk-DHBW7L4I.js?v=14542586:3323:5)
    at Observable2._subscribe (http://localhost:5173/node_modules/.vite/deps/chunk-DHBW7L4I.js?v=14542586:6141:51)
    at Observable2._trySubscribe (http://localhost:5173/node_modules/.vite/deps/chunk-DHBW7L4I.js?v=14542586:3331:19)
    at http://localhost:5173/node_modules/.vite/deps/chunk-DHBW7L4I.js?v=14542586:3325:115

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (6) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 7.32 GB / 11.69 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - /home/linuxbrew/.linuxbrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  npmPackages:
    livekit-client: ^1.6.5 => 1.6.5

Severity

annoyance

Additional Information

No response

Select which package(s) are affected

@livekit/components-core

Describe the bug

I need to show 2 separate chats on a page in the same livekit room.

What I'm expecting

When I message in one of them, i want to see my message in both chats.

What happens instead

When I message in one chat, it doesn't share that message with other one.

I'm using "useChat" hook in both chat components to interact with livekit api.
After some investigations I found a function "setupChat", that creates a new chat setup for every "useChat" hook usage, and passes a message of localParticipant to "messageSubject" after it was successfully sent.
"messageSubject" is scoped in "setupChat" function, so can't share messages of localParticipants with other chats in the livekit room.

I think that solution here could be a creation of one more rxjs Subject, that would be sharing a messages across the room.
Ex.:

  const send = async (message: string) => {
    const timestamp = Date.now();
    const encodedMsg = finalMessageEncoder({ message, timestamp });
    isSending$.next(true);
    try {
      await sendMessage(room.localParticipant, encodedMsg, DataTopic.CHAT, {
        kind: DataPacket_Kind.RELIABLE,
      });
-> sharedMessageSubject.next({ <-
        payload: encodedMsg,
        topic: DataTopic.CHAT,
        from: room.localParticipant,
      });
    } finally {
      isSending$.next(false);
    }
  };

Maybe you have better idea how to solve this issue?

Reproduction

Create 2 chats components using "useChat" hook in one livekit room -> type in one chat and send message -> you see that, chatMessages updated with what you've typed -> check other chat data, there will be no update of chatMessages

Logs

No response

System Info

System:
    OS: macOS 13.4.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 11.14 MB / 16.00 GB
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.1/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.110

Severity

serious, but I can work around it

Additional Information

No response

Describe the problem

I wanted to be able to publish 2 videos devices for a project but i am not able to, exept by instanciate 2 LiveKitRoom and publish a video in each LiveKitRoom.
But this cause problemes in order to use the sdk properly

Describe the proposed solution

I would suggest to take a list of video devices and a list of audio devices instead of just 1
Each video devices could be a participant

Alternatives considered

No response

Importance

I cannot use LiveKit without it

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

unable to switch layout

Reproduction

Go to the Livekit Meet at https://meet.livekit.io/?tab=custom.
Connect with two users.
Turn off the microphone and camera for both users on the prejoin page.
Click on the toggle button to switch from grid view to focus view. Observe that nothing happens.
Click on the camera button. Observe that the issue is resolved or changes.

Logs

No response

System Info

Chrome linux

Severity

annoyance

Additional Information

No response

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Update Rush stack (non-major) (@rushstack/eslint-config, @rushstack/heft, @rushstack/heft-node-rig, @rushstack/node-core-library, @rushstack/ts-command-line)
• Update dependency @floating-ui/dom to v1.6.5
• Update dependency @microsoft/api-extractor-model to v7.28.19
• Update devDependencies (non-major) (@babel/core, @changesets/cli, @microsoft/api-extractor, @size-limit/file, @size-limit/webpack, @testing-library/react, @types/node, @types/react, @vitejs/plugin-react, jsdom, nodemon, rimraf, sass, size-limit, tsx, vitest)
• Update dependency @rushstack/node-core-library to v5
• Update dependency eslint to v9
• Update dependency eslint-plugin-n to v17
• Update dependency usehooks-ts to v3
• Update dependency vite to v5
• Update storybook monorepo to v8 (major) (@storybook/addon-docs, @storybook/addon-essentials, @storybook/addon-interactions, @storybook/addon-links, @storybook/react, @storybook/react-vite, storybook)
• Update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update dependency eslint-config-prettier to v9
• Update dependency glob to v10
• Update dependency husky to v9
• Update dependency js-yaml to v4 (js-yaml, @types/js-yaml)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Describe the problem

Hope there have i18n entry.

Describe the proposed solution

Maintain a json file that contain i18n KV context / translate, for example: https://react.i18next.com/

export const useTranslate = () => {
    const { i18nProvider } = useContext("path/to/json.json");

    const fn = useMemo(() => {
        function translate(
            key: string,
            options?: any,
            defaultMessage?: string,
        ): string;
        function translate(key: string, defaultMessage?: string): string;

        function translate(
            key: string,
            options?: string | any,
            defaultMessage?: string,
        ) {
            return (
                i18nProvider?.translate(key, options, defaultMessage) ??
                defaultMessage ??
                (typeof options === "string" &&
                typeof defaultMessage === "undefined"
                    ? options
                    : key)
            );
        }

        return translate;
    }, [i18nProvider]);

    return fn;
};

Alternatives considered

No response

Importance

I cannot use LiveKit without it

Additional Information

No response

Describe the problem

I wanted to implement the screenshot function of a single participant. At first, I implemented it by outsourcing a layer of divs, but there was a problem that I could not detect the camera status of the participants.

I currently put it in the upper right corner, I hope it can be defined to the lower right corner

I went to inherit and implement participants, but some hooks or references were not exposed.

Describe the proposed solution

It would be better if there is a child with a custom button, and more buttons for individual participants can be customized.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

What I'm expecting

I expect remote users correct value of connection quality level when remote user enters to room without publishing tracks.

What happens instead

When remote user enters to room without publishing any track, connection quality indicator doesn't return correct value. When remote user starts to publishing a track then it started to returning correct value of connection quality. But for local user, it showed correct value without publishing track too.

Reproduction

function ParticipantConnectionQuality() {
  const { colors } = useTheme();
  const participant = useParticipantContext();
  const { quality } = useConnectionQualityIndicator({ participant });

  const qualityColors = {
    excellent: colors.primary,
    good: colors.warning,
    poor: colors.danger,
    unknown: colors.grayScale.gray700,
  };

  return (
    <ConnectionQualityIndicator
      participant={participant}
      style={{ color: qualityColors[quality] }}
    />
  );
}

Logs

No response

System Info

-

Severity

annoyance

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

On Firefox mobile the permission prompt is shown multiple times. This happens on meet.livekit.io and in the project I am using the sdk for.

Reproduction

go to meet.livekit.io on firefox android. Start a video call. Approve the camera/microfone permission -> you will get prompted with another permission request.

Logs

No response

System Info

firefox android (and occasionally firefox desktop. I dont know in which cases however)

Severity

annoyance

Additional Information

My idea is, that this is a firefox implementation issue of getUserMedia.
getUserMedia is called multiple times (for each call of getPreviewDevices) because of react rerenders.
The getUserMedia call should be skipped until the promise is resolved if it is called with the same options multiple times to work around the behaviour of firefox.

Describe the problem

Currently we're trying to produce a discord like application using NextJS. Ideally what we would like to do is have the TrackToggle controls accessible from outside of where the room is. Ideally so you can mute the mic and switch your camera on and off from a tool bar that isnt in the room itself if you're chatting from a different room. I understand as it is so far if you put the tracktoggles outside of the livekitroom it errors as its outside of context.

Describe the proposed solution

Ideally for this idea to work in our heads at the present moment would be that you could put the LivekitRoom in the index of the nextJS application and have it wrap everything else, but give it a ref tag that we could use in tandem with react useRef, and store that as a context to serve to the component that will launch the LiveKitRoom from that component, but still have the control of the livekitroom from tracktoggles from other components of the application.

Something sort of like this

<LiveKitRoom ref={liveKitRef}>
  <LiveKitContext.Provider value={{room: liveKitRef}}>
    <RenderDesktopView>
      ...
        <Stream>
          const room = useLiveKitRoom(); // Where useLiveKitRoom serves as a getter from the LiveKitContext to return the liveKitRef

          const token = useToken();

          room.token = token; 
        </Stream>
    </RenderDesktopView>
  </LiveKitContext.Provider>
</LiveKitRoom>```

### Alternatives considered

_No response_

### Importance

would make my life easier

### Additional Information

_No response_

Select which package(s) are affected

@livekit/components-core

Describe the bug

I have disconnected or not connected to room in Windows Firefox browser.
Similar like this on MacOS, but it is disconnected after 2-3 page refresh.

Reproduction

Just create room and try to connect with Firefox browser.

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa) -> it is WSL2
    CPU: (6) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 7.32 GB / 11.69 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - /home/linuxbrew/.linuxbrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  npmPackages:
    livekit-client: ^1.6.5 => 1.6.5

Severity

blocking all usage of LiveKit

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

In our Vite + React project, I expect that when I'm building with "moduleResolution": "bundler"in typescript, it should build the project.

What happens now, it fails because it can't find type declarations.

However, if I change the moduleResolution to "node" or add "skipLibCheck": true in my tsconfig.json, it builds the project.

Reproduction

Packages:

 "livekit-client": "^1.13.4",
 "@livekit/components-react": "^1.2.2",

My tsconfig.json:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ES2022",
    "moduleResolution": "bundler",
    "removeComments": true,
    "sourceMap": false,
    "strict": true,
    "target": "ES2020",
    "useDefineForClassFields": true,
    "verbatimModuleSyntax": false,
    "jsx": "react-jsx",
    "lib": ["DOM", "DOM.Iterable", "ES2023"],
    "outDir": "build/",
    "noEmit": true
  },
  "include": ["src"]
}

Components that I use from the library:

import { useLocalParticipant, useRoomContext } from '@livekit/components-react';
import { Track } from 'livekit-client';

Logs

../node_modules/@livekit/components-core/dist/observables/room.d.ts:4:41 - error TS2307: Cannot find module 'livekit-client/dist/src/room/Room' or its corresponding type declarations.

4 import type { RoomEventCallbacks } from 'livekit-client/dist/src/room/Room';
                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../node_modules/@livekit/components-core/dist/observables/participant.d.ts:4:48 - error TS2307: Cannot find module 'livekit-client/dist/src/room/participant/Participant' or its corresponding type declarations.

4 import type { ParticipantEventCallbacks } from 'livekit-client/dist/src/room/participant/Participant';
                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../node_modules/@livekit/components-core/dist/observables/participant.d.ts:41:100 - error TS2307: Cannot find module 'livekit-client/dist/src/proto/livekit_models_pb' or its corresponding type declarations.

41 export declare function participantPermissionObserver(participant: Participant): Observable<import("livekit-client/dist/src/proto/livekit_models_pb").ParticipantPermission | undefined>;
                                                                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../node_modules/@livekit/components-react/dist/hooks/useLocalParticipantPermissions.d.ts:10:66 - error TS2307: Cannot find module 'livekit-client/dist/src/proto/livekit_models_pb' or its corresponding type declarations.

ion | undefined;
                                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../node_modules/@livekit/components-react/dist/hooks/useParticipantPermissions.d.ts:15:103 - error TS2307: Cannot find module 'livekit-client/dist/src/proto/livekit_models_pb' or its corresponding type declarations.

15 export declare function useParticipantPermissions(options?: UseParticipantPermissionsOptions): import("livekit-client/dist/src/proto/livekit_models_pb").ParticipantPermission | undefined;

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1255U
    Memory: 15.80 GB / 31.64 GB
  Binaries:
    Node: 20.0.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 117.0.5938.134
    Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.47)
    Internet Explorer: 11.0.19041.1566

Severity

serious, but I can work around it

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

After upgrading to 0.1.20 i have this error. And i am unable enter to room entirely. This error is not present on version 0.1.18.

Reproduction

Logs

No response

System Info

System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 5.63 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.2.0 - ~/.nvm/versions/node/v18.2.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.9.0 - ~/.nvm/versions/node/v18.2.0/bin/npm
  Browsers:
    Brave Browser: 108.1.46.153
    Chrome: 109.0.5414.87
    Firefox Developer Edition: 109.0
    Safari: 16.2
  npmPackages:
    livekit-client: ^1.6.2 => 1.6.2

Severity

blocking all usage of LiveKit

Additional Information

No response

Select which package(s) are affected

@livekit/components-styles, @livekit/components-core

Describe the bug

Reproduction

Cloned and install dependency using yarn. Then hit the build command.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
    Memory: 8.48 GB / 15.86 GB
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.6.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 112.0.5615.138
    Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.58)
    Internet Explorer: 11.0.19041.1566

Severity

annoyance

Additional Information

No response

Describe the problem

Hello guys, When there are too many users, it will not fit on the screen. I think a pagination structure can be made. For example, when it exceeds 6 people, it needs to be posted on the 2nd page, in this way, the cost can be reduced and it can be more efficient.

Describe the proposed solution

We added manually but you should do this for library

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

Describe the problem

In order to use useDataChannelMessage we have to specify channelId twice. First when we initialize the hook, second when we send message with payload like this:

const { send } = useDataChannelMessages({ channelId: 'say_hello' });

const sentRegards = async () => {
    await send({
      channelId: 'say_hello',
      payload: 'Hi mate',
   });
 };

I know that this is not important and has no impact of our usage of this beautiful library but i think adding channelId twice feels weird to me. :D

Describe the proposed solution

Either after initializing hook with channelId, i think send shouldn't require me channelId anymore and should only accept payload or we should add channelId within send method.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

The "StartAudio" button is intended to appear only when the browser blocks audio playback. However, there are instances where this button appears even if the user has already successfully connected with audio.

Expected behavior:

The "StartAudio" button should only display if the browser is blocking audio playback.

Actual behavior:

The "StartAudio" button sometimes displays even when the user can hear and talk to other participants.

Reproduction

The issue doesn't consistently reproduce. However, the most common way to reproduce it is:

1. Use various browsers.
2. Disable audio permissions.
3. Connect to the meeting and subsequently allow the audio settings.
4. Observe that even though you can communicate with other participants, the "StartAudio" button is still visible.

Users have reported encountering this issue on Chrome, Brave, Firefox, Microsoft Edge, and Safari.

Logs

No response

System Info

OS: Ubuntu 20.04.6
Browsers tested: Chrome, Brave, Microsoft Edge, Firefox

Severity

annoyance

Additional Information

Here's an example of the "StartAudio" button being visible before I allowed audio:

After clicking "Allow", I was able to communicate with other participants, but the button remained visible:

Select which package(s) are affected

@livekit/components-react

Describe the bug

When creating a component to screenshare with audio, I expect to be able to use the ScreenShareAudio source as documented, likewise as it exists in the Track.Source enum.

In practice however, this yields no ParticipantTile for the media share, nor does the track toggle have an icon.
It does allow me to select a media source when the component is rendered, however it does not seem to allow the button to function after that as clicking on it does nothing. It also does not seem to share it as it appears on neither the clientside nor the receiving end.

Is this feature unsupported, or am I doing something incorrectly?

Reproduction

Component for sample:

export default function Stream({ user_id, username, channel_id }: { user_id: string; username: string, channel_id: number }) {
  const token = useToken(
    process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT,
    channel_id.toString(), {
      userInfo: {
        identity: user_id,
        name: username
      },
    }
  );

  return (
    <div className={'bg-gray-800'}>
      <div className='flex flex-row justify-center'>
        <LiveKitRoom
          video={true}
          audio={true}
          screen={{ audio: true }}
          token={token}
          serverUrl={process.env.NEXT_PUBLIC_LK_SERVER_URL}
          connect={true}
          className='flex flex-col w-full justify-center'
        >
          <RoomAudioRenderer/>
          <div className='ml-13 flex flex-row'>
            <ParticipantLoop>
              <ParticipantTile className={'w-11 mb-5 mr-4'}>
                <MediaTrack source={Track.Source.Camera} className={'rounded-xl mb-4'}/>
                <MediaTrack source={Track.Source.ScreenShareAudio} className={'rounded-xl'}/>
                <MediaTrack source={Track.Source.Microphone}/>
              </ParticipantTile>
            </ParticipantLoop>
          </div>
          <div className='flex flex-row justify-evenly'>
            <TrackToggle showIcon={false} className={'w-7 h-7 bg-grey-900 rounded-lg text-lg'} source={Track.Source.Microphone} initialState={false}>
              Mic
            </TrackToggle>
            <TrackToggle className={'w-7 h-7'} source={Track.Source.Camera} initialState={false}/>
            <TrackToggle className={'w-7 h-7'} source={Track.Source.ScreenShareAudio} initialState={false}>
              Screenshare + Audio
            </TrackToggle>
          </div>
        </LiveKitRoom>
      </div>
    </div>
  );
};

We have been working with Supabase in our app to get user ids and other info, but for the sake of simplicity and reproducability, I have somewhat refactored the above to be easily dropped into a React app with arbitrary values passed in.

The token endpoint follows the same design as the documentation, just adapted for a NextJS serverless function.
The livekit server running is the dev server on windows.

Ideally when loading a project with this component even as a single user, the site should initially prompt for a screen/application to share, however nothing will be even if the browser states it is sharing.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 30.82 GB / 63.91 GB
  Binaries:
    Node: 19.7.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.1.2 - C:\Program Files\nodejs\npm.CMD

Firefox 111.0, Edge 111.0.1661.41

Severity

serious, but I can work around it

Additional Information

Note, workaround is simply foregoing screenshare with audio. While it's not ideal, if we must we will.

Select which package(s) are affected

@livekit/components-react

Describe the bug

There should be no error in the console when you pin a participant from the carousel. Dieser Fehler scheint weder die Funktion des Karussells noch den Rest der App zu beeinträchtigen.

Reproduction

When one participant is focused, focus another participant from the carousel.

Logs

System Info

System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.28 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - ~/Library/pnpm/yarn
    npm: 9.6.6 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 112.1.50.119
    Chrome: 112.0.5615.137
    Firefox: 114.0
    Firefox Developer Edition: 105.0
    Safari: 16.5

Severity

annoyance

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

If we add filter prop to useParticipants hook like in code snippet, it causes rerender.

const participantList = useParticipants({
    filter: participant => participant.isSpeaking,
  });

Reproduction

• Import useParticipants hook from @livekit/components-react
• Paste this code snippet to your hook or component:

   const participantList = useParticipants({
    filter: participant => participant.isSpeaking,
  });
  console.log(participantList);

• You should see rerender error logs on your console.

Logs

-

System Info

-

Severity

serious, but I can work around it

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

Hello everyone, I have encountered a bug in my and your application. The demo window or the user's camera does not decrease by clicking on the button.

I fixed this bug in my application by removing the focusTrack?.publication?.trackSid property from the useEffect dependencies in VideoConference.tsx.

I also ran into another problem, when focusing on another window, an error appears in the console and the focus window does not work as it should.

I attach a video with these bugs:
https://www.awesomescreenshot.com/video/17791574?key=becb61b26ece2ccc3dabc3dfec1e87a6

Reproduction

https://www.awesomescreenshot.com/video/17791574?key=becb61b26ece2ccc3dabc3dfec1e87a6

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (2) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 2.67 GB / 4.81 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  npmPackages:
    livekit-client: 1.9.7 => 1.9.7
    @livekit/components-react: 1.0.3 => 1.0.3
    @livekit/components-styles: 1.0.0 => 1.0.0

Severity

annoyance

Additional Information

No response

Select which package(s) are affected

@livekit/components-styles

Describe the bug

When importing styles from @livekit/components-styles, styles shouldn't be polluting the global scope.

Because of this, styles imported conflict with other packages like @mui

This is the example with the style conflicting with the textfield

This is the example with the livekit style disabled:

Reproduction

Use @mui and @livekit in a project -> implement textfield

Logs

No response

System Info

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M2
    Memory: 200.45 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - ~/Documents/xxxx/node_modules/.bin/yarn
    npm: 8.19.1 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Safari: 16.3
  npmPackages:
    livekit-client: ^1.7.1 => 1.7.1

Severity

blocking an upgrade

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

Expected

useMediaDevice and relating hooks should not return nullables (default to empty array)

Actual

Returns undefined when browser blocks device permission.
This is at least an error in the typing, but seems to result in runtime errors aswell in livekit internals

Reproduction

• Set mic/camera permissions to "Block" in the browser and call useMediaDevices
• Some livekit internals seem to expect non nullable devices aswell so we get a lot of random errors with long stack traces
• Happened after upgrade 1.3.0 -> 1.5.3

Logs

Example Stack trace:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'find')
Call Stack
eval
javascript/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@livekit/components-react/dist/index.mjs (3286:0)
commitHookEffectListMount
../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js (23150:0)
commitPassiveMountOnFiber
../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js (24926:0)
commitPassiveMountEffects_complete
../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js (24891:0)
commitPassiveMountEffects_begin
../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js (24878:0)
commitPassiveMountEffects
../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js (24866:0)
flushPassiveEffectsImpl
../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js (27039:0)
flushPassiveEffects
../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js (26984:0)
eval
../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js (26769:0)
workLoop
../node_modules/.pnpm/[email protected]/node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
../node_modules/.pnpm/[email protected]/node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
../node_modules/.pnpm/[email protected]/node_modules/scheduler/cjs/scheduler.development.js (533:0)

System Info

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 249.61 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 
    Yarn: 1.22.19 
    npm: 10.1.0 
    pnpm: 8.10.2 
  Browsers:
    Brave Browser: 121.1.62.153
    Safari: 17.2.1
    Firefox: 122.0

Severity

blocking an upgrade

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

When dealing with a large number of chat messages, the scroll functionality does not operate as expected. However, disabling justify-content: flex-end within the CSS allows for scrolling but disrupts the order of the messages.

Reproduction

1. Connect to LiveKit.

2. Send numerous messages until the ability to scroll is necessitated.

3. Attempt to scroll through the messages.
   The user should be able to scroll through all chat messages without any issue.

Scrolling is not possible unless justify-content: flex-end is disabled, which in turn disrupts the message order.

Logs

No response

System Info

OS: Linux
Browser: Google Chrome
Version: 116.0.5845.96

Severity

annoyance

Additional Information

No response

Describe the bug
SDK not working with next@14. It's working fine in next@13

Server

  "dependencies": {
    "@livekit/components-react": "^1.4.0",
    "@livekit/components-styles": "^1.0.7",
    "livekit-client": "^1.15.0",
    "livekit-server-sdk": "^1.2.7",
    "next": "14.0.2",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.2",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }

Client

• SDK: js

To Reproduce
Steps to reproduce the behavior:

1. SDK not working with next@14. It's working fine in next@13

./node_modules/@livekit/components-core/dist/index.mjs
Attempted import error: 'LocalParticipant' is not exported from 'livekit-client' (imported as 'LocalParticipant').

Expected behavior
SDK should work in next@14.

Screenshots

Select which package(s) are affected

@livekit/components-react

Describe the bug

I'am excepting to have no errors in console.

Reproduction

1. open https://meet.livekit.io/ with chrome incognito tab having only microphone device
2. Try to join meeting
3. Open up console and check the errors

Logs

error while setting up prejoin DOMException: Requested device not found
Uncaught (in promise) DOMException: Requested device not found

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
    Memory: 8.36 GB / 15.56 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 3.6.3 - ~/.yarn/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  Browsers:
    Chrome: 115.0.5790.170
  npmPackages:
    livekit-client: ^1.15.8 => 1.15.8

Severity

annoyance

Additional Information

No response

Describe the problem

As a participant, I would like to control the local volume of other participants.

Some users don't realize that they're too loud, or have some background noise above the activation level. In those cases I would like to reduce their volume a bit.

Describe the proposed solution

Jitsi has a volume slider on each of (their version of) their <ParticipantTile/>. I don't have current screenshots, but in 2017 it looked like this:

(from https://jitsi.org/blog/control-the-volume-for-every-meet-participant/)

Alternatives considered

I tried to influence the <audio/> element in <AudioTrack/> (@livekit/components-react/src/components/participant/AudioTrack.tsx) but couldn't get it working, since the controls would probably live in the <ParticipantTile/>, and I'm not familiar enough with React itself.

Importance

would make my life easier

Additional Information

No response

Select which package(s) are affected

@livekit/components-react

Describe the bug

When we use room props in <LiveKitRoom/> it gives typescript error.

Reproduction

Import LiveKitRoom from @livekit/components-react

Paste this code snippet:

const onParticipantDisconnected = (room: Room) => (
    room.on(RoomEvent.ParticipantDisconnected, (participant: RemoteParticipant) => { 
      console.log(participant) 
    })
);
return (
    <LiveKitRoom 
      video={false} 
      token={token} 
      serverUrl={url} 
      connect={true} 
      room={onParticipantDisconnected}
    >
      <RoomAudioRenderer />
      <CustomControlBar />
    </LiveKitRoom>
);

You should see the typescript error.

Logs

No response

System Info

"@livekit/components-react": "^0.4.1",
"@livekit/react-components": "^1.0.3",
"livekit-client": "^1.3.2",
"react": "^18.1.0",
"react-aspect-ratio": "^1.0.50",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0"
`"typescript": "^4.2.3"`

Severity

serious, but I can work around it

Additional Information

No response