livekit-examples / meet Goto Github PK

We use a URL like this:
https://meet.livekit.io/custom?liveKitUrl=wss://our-server.livekit.cloud&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2aWRlbyI6eyJyb29tSm9pbiI6dHJ1ZSwicm9vbSI6ImkyN1lQaDFKVmVKWTZpRnA4Nzc2In0sIm5hbWUiOiJPdHRvIEJyZXR6IiwiaWF0IjoxNjk4MzEwMzU2LCJuYmYiOjE2OTgzMTAzNTYsImV4cCI6MTY5ODMzMTk1NiwiaXNzIjoiQVBJWjlFOHBoamVOOGtDIiwic3ViIjoiOUg2N2xJSU1zdFRIVDlNTzdkNksiLCJqdGkiOiI5SDY3bElJTXN0VEhUOU1PN2Q2SyJ9.npq9KylORSXkVu8oVK1NWb-5M1iaz2Uq-KmAkJZA1tU#dmVyeXNlY3JldA==

Recently the video has stopped working.

We get this message in the develop console.

Unhandled Promise Rejection: Error: cannot publish track, codec not supported by server

Also worth noting a possible regression. In the meet ui now the footer blocks the connect button on the custom tab, and it is not possible to scroll to make it visible:

I'm getting this error when running the latest versions of LiveKit & livekit-examples / meet (on a local dev machine using VM installation), and doing a hard refresh in the browser at url /rooms/10u9-pu2s:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at MediaDeviceMenu (file:///home/ile/src/sc2/aamu-meet-web/node_modules/@livekit/components-react/dist/index.mjs:2512:5)
    at div
    at div
    at div
    at div
    at PreJoin (file:///home/ile/src/sc2/aamu-meet-web/node_modules/@livekit/components-react/dist/index.mjs:2729:5)
    at div
    at main
    at Home (webpack-internal:///./pages/rooms/[name].tsx:29:74)
    at MyApp (webpack-internal:///./pages/_app.tsx:20:18)
    at StyleRegistry (/home/ile/src/sc2/aamu-meet-web/node_modules/styled-jsx/dist/index/index.js:448:36)
    at AppContainer (/home/ile/src/sc2/aamu-meet-web/node_modules/next/dist/server/render.js:298:29)
    at AppContainerWithIsomorphicFiberStructure (/home/ile/src/sc2/aamu-meet-web/node_modules/next/dist/server/render.js:327:57)
    at div
    at Body (/home/ile/src/sc2/aamu-meet-web/node_modules/next/dist/server/render.js:614:21)
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at MediaDeviceMenu (file:///home/ile/src/sc2/aamu-meet-web/node_modules/@livekit/components-react/dist/index.mjs:2512:5)
    at div
    at div
    at div
    at div
    at PreJoin (file:///home/ile/src/sc2/aamu-meet-web/node_modules/@livekit/components-react/dist/index.mjs:2729:5)
    at div
    at main
    at Home (webpack-internal:///./pages/rooms/[name].tsx:29:74)
    at MyApp (webpack-internal:///./pages/_app.tsx:20:18)
    at StyleRegistry (/home/ile/src/sc2/aamu-meet-web/node_modules/styled-jsx/dist/index/index.js:448:36)
    at AppContainer (/home/ile/src/sc2/aamu-meet-web/node_modules/next/dist/server/render.js:298:29)
    at AppContainerWithIsomorphicFiberStructure (/home/ile/src/sc2/aamu-meet-web/node_modules/next/dist/server/render.js:327:57)
    at div
    at Body (/home/ile/src/sc2/aamu-meet-web/node_modules/next/dist/server/render.js:614:21)

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?

I started local livekit and meet servers successfully, and I'm able to join a room from my laptop with camera and microphone.
but when i try to join a room from chrome on my android phone, the camera and microphone is not detected and this error pops up:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'getUserMedia')

Call Stack
getUserMedia
node_modules/livekit-client/src/root/track/create.ts (41:46)
...

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 devDependencies (non-major) (@types/node, eslint, eslint-config-next)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency next to v14.2.4
• Update dependency @datadog/browser-logs to v5.21.0
• Update react monorepo to v18.3.1 (react, react-dom)
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

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

• Update dependency next-seo to v6.5.0

Detected dependencies

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

Through the connection-tester test, livekit services can be connected normally, proving that the server configuration is correct

After the demo is packaged and run on the tomcat environment of the localhost, it is found that localhost:3000, and the interface is displayed as Disconnected

No error when using demo in localhost. However, when the demo is deployed to the server, the state of the Room object generated by the new Room isconnected, but the interface is always displayed Disconnected, never in a connecting state, and it is Disconnected from beginning to end

dev:~/tools/livekit-examples/meet# yarn dev

...

SyntaxError: Unexpected token '??='
at wrapSafe (internal/modules/cjs/loader.js:1029:16)
at Module._compile (internal/modules/cjs/loader.js:1078:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
at Module.load (internal/modules/cjs/loader.js:979:32)
at Function.Module._load (internal/modules/cjs/loader.js:819:12)
at Module.require (internal/modules/cjs/loader.js:1003:19)
at Module.mod.require (/root/tools/livekit-examples/meet/node_modules/next/dist/server/require-hook.js:64:28)
at require (internal/modules/cjs/helpers.js:107:18)
at Object. (/root/tools/livekit-examples/meet/node_modules/next/dist/telemetry/post-payload.js:17:19)
at Module._compile (internal/modules/cjs/loader.js:1114:14)
(Use node --trace-warnings ... to show where the warning was created)
(node:6483) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:6483) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Done in 0.15s.

I need your help, thank you very much!

I'm sorry to put this simple issue, but i'm really got no way to figure it, the WSS need https to keep security, after I pull the code and successfully run it with the livekit server i' build by myself. I find out when i run the client on the node.js with nginx proxy a https port to original http, the wss couldn't make a connection to meet client port, thus the remotely vedio could not show content . In the client code ,I can not find place to correct the http to https.
I am very grateful for your help in solving this problem. thank you very much !

While meet works fine locally, when cloning it and setting env variables on Netlify, I get a 500 and "A client-side exception has occurred". Before digging in further, am I facing a foundational error of the client on Netlify simply unable to function with Livekit (cloud)'s websocket? Thanks!

When pressing leave button in custom room an error occurs, and onLeave function doesn't execute, so there is no redirect with router.push.

How to reproduce:
start livekit-server in dev mode
create token and enter custom room on livekit.meet.io (or on localhost)
press Leave button

I am running Livekit and Egress on EKS, and using your demo web(meet.livekit.io) as a tester. It has been working nicely so far until I started test Egress features. if I join room with the jwt, the demo page crashes and the browser console shows error logs as below,

framework-7751730b10fa0f74.js:9 TypeError: Cannot read properties of undefined (reading 'matchAll')
    at 590-005945d272d18427.js:1:101542
    at Array.map (<anonymous>)
    at 590-005945d272d18427.js:1:101514
    at rx (590-005945d272d18427.js:1:101958)
    at 590-005945d272d18427.js:1:100800
    at Object.useMemo (framework-7751730b10fa0f74.js:9:67913)
    at n.useMemo (framework-7751730b10fa0f74.js:25:5985)
    at rE (590-005945d272d18427.js:1:100786)
    at aD (framework-7751730b10fa0f74.js:9:61583)
    at i (framework-7751730b10fa0f74.js:9:119731)

main-cca64c2bc7b52412.js:1 TypeError: Cannot read properties of undefined (reading 'matchAll')
    at 590-005945d272d18427.js:1:101542
    at Array.map (<anonymous>)
    at 590-005945d272d18427.js:1:101514
    at rx (590-005945d272d18427.js:1:101958)
    at 590-005945d272d18427.js:1:100800
    at Object.useMemo (framework-7751730b10fa0f74.js:9:67913)
    at n.useMemo (framework-7751730b10fa0f74.js:25:5985)
    at rE (590-005945d272d18427.js:1:100786)
    at aD (framework-7751730b10fa0f74.js:9:61583)
    at i (framework-7751730b10fa0f74.js:9:119731)

Below is how I trigger egress recording with my application

• Whenever my application receive Room_Started Webhook, it requests RoomComposite Egress
• Whenever my application receive Track_Published Webhook, it requests TrackComposite Egress

Hi, I noticed in https://github.com/livekit/components-js/blob/c6d6f3784b0e7fef0e745b76edf421bcace44047/examples/nextjs/pages/e2ee.tsx#L20 that there is some kind of e2ee support in the components library. Could support for this be added to this meet app as well?
Maybe a e2ee key input field could be added to https://meet.livekit.io/?tab=custom and if it was set it would create a url like:
https://meet.livekit.io/custom?liveKitUrl=wss://test.livekit.cloud&token=mytoken&e2eeKey=verysecret and if it is set e2ee encryption would be enabled.

Is the e2ee functionality documented anywhere?

How is encryption handle by default in this meet app? I couldn't find that explained in the docs. I assume the video/audio data in a meeting is send via https (encrypted).

What's happening?

node -v
v20.11.0
npm -v
10.2.4
pnpm -v
8.14.1

MacOS
brew install livekit-server
livekit-server --dev

.env.local
LIVEKIT_URL=ws://127.0.0.1:7880

pnpm i
pnpm run dev

Unhandled Runtime Error
Error: Authentication Error. Code 25683

Call Stack
yI.rE
node_modules/.pnpm/@[email protected][email protected]/node_modules/@livekit/krisp-noise-filter/dist/index.js (16609:0)
yI.setEnabled
node_modules/.pnpm/@[email protected][email protected]/node_modules/@livekit/krisp-noise-filter/dist/index.js (16586:0)
o.B
node_modules/.pnpm/@[email protected][email protected]/node_modules/@livekit/krisp-noise-filter/dist/index.js (16569:0)
o._onWasmWorkerMessage
node_modules/.pnpm/@[email protected][email protected]/node_modules/@livekit/krisp-noise-filter/dist/index.js (15970:0)

Using Meet with Chrome on Android, the camera popup has no texts. Clicking the options in it still works (can switch to rear camera and back to front).

Virtual camera devices like NVIDIA Broadcast does not work with Meet. Video shows up as blank.
However, it does appear to work with example.livekit.io
Since they use the same underlying components, it seems that something with how Meets handles tracks isn't working correctly.

How do I get a livekit agent to connet into a meet room?

Tricky to reproduce, but 3/10 times the camera doesn't get released after clicking the Leave button

Hi,

I can build and run the demo on localhost, but when attempting to access the demo site on a LAN, I encounter the following error:

Unhandled Runtime Error
Error: Accessing media devices is available only in secure contexts (HTTPS and localhost), in some or all supporting browsers. 

I have set the URL in the .env.local file as follows:

# URL pointing to the LiveKit server.
LIVEKIT_URL=ws://192.168.1.42:7880

Could you please advise on how I can access the server on the LAN (without https)? I attempted to use a reverse proxy (nginx), but I may have made an error in the setup.

Thank you for your assistance.

Best regards,

Alex

I am using Python SDK to send JSON content '{"message": "content", "timestamp":1703472095098}' to the frontend, but I am not able to display my message in the frontend Chat component.

The code is as follows:

    @room.on("data_received")
    def on_data_received(
        data: bytes, kind: rtc.DataPacketKind, participant: rtc.Participant
    ):
        logging.info("received data from %s: %s", participant.identity, data)

        now_timestamp = int(time.time() * 1000)
        payload = {
            "message": "User: Hello livekit!",
            "timestamp": now_timestamp
        }
        payload_str = json.dumps(payload)
        print(f"payload: {payload_str.encode('utf8')}")
        asyncio.create_task(room.local_participant.publish_data(payload_str.encode("utf8")))