livekit-examples / meet Goto Github PK
View Code? Open in Web Editor NEWOpen source video conferencing app built on LiveKit Components, LiveKit Cloud, and Next.js.
Home Page: https://meet.livekit.io
License: Apache License 2.0
Open source video conferencing app built on LiveKit Components, LiveKit Cloud, and Next.js.
Home Page: https://meet.livekit.io
License: Apache License 2.0
How do I get a livekit agent to connet into a meet room?
my org want's to use the livekit for the form's for that we were testing but we were not be able to find the update code for the frontend to see the implementaion
thank you
Tricky to reproduce, but 3/10 times the camera doesn't get released after clicking the Leave
button
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).
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)
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
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.
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)
...
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!
Is the backend for https://meet.livekit.io/api/ open source?
If yes, where is the codes?
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")))
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are awaiting their schedule. Click on a checkbox to get an update now.
@types/node
, eslint
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
package.json
@datadog/browser-logs ^5.10.0
@livekit/components-react 2.4.3
@livekit/components-styles 1.0.12
@livekit/krisp-noise-filter ^0.2.0
livekit-client 2.4.2
livekit-server-sdk 2.6.0
next 14.2.5
next-seo ^6.0.0
react 18.3.1
react-dom 18.3.1
tinykeys ^2.1.0
@types/node 20.14.13
@types/react 18.3.3
@types/react-dom 18.3.0
eslint 9.8.0
eslint-config-next 14.2.5
source-map-loader ^5.0.0
typescript 5.5.4
node >=18
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!
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)
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'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 !
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.