import { ControlBar, GridLayout, LiveKitRoom, ParticipantTile, RoomAudioRenderer, useTracks, } from "@livekit/components-react"; import "@livekit/components-styles"; import { Track } from "livekit-client";

const serverUrl = 'wss://andrewiris-tyb751ns.livekit.cloud'; const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3Mjc0NDM2NTAsImlzcyI6IkFQSXFCb25BWjNBcmMzbiIsIm5iZiI6MTcyNzQzNjQ1MCwic3ViIjoicXVpY2tzdGFydCB1c2VyIDd6NTFyMiIsInZpZGVvIjp7ImNhblB1Ymxpc2giOnRydWUsImNhblB1Ymxpc2hEYXRhIjp0cnVlLCJjYW5TdWJzY3JpYmUiOnRydWUsInJvb20iOiJxdWlja3N0YXJ0IHJvb20iLCJyb29tSm9pbiI6dHJ1ZX19.ZytCXBqKyZhtVHEnjojneCTpivj4rhz_8s_Jvt390Wk';

export default function App() { return ( <LiveKitRoom video={true} audio={true} token={token} serverUrl={process.env.NEXT_PUBLIC_LK_SERVER_URL} // Use the default LiveKit theme for nice styles. data-lk-theme="default" style={{ height: '100vh' }} > {/* Your custom component with basic video conferencing functionality. /} {/ The RoomAudioRenderer takes care of room-wide audio for you. /} {/ Controls for the user to start/stop audio, video, and screen share tracks and to leave the room. */} ); }

function MyVideoConference() { // useTracks returns all camera and screen share tracks. If a user // joins without a published camera track, a placeholder track is returned. const tracks = useTracks( [ { source: Track.Source.Camera, withPlaceholder: true }, { source: Track.Source.ScreenShare, withPlaceholder: false }, ], { onlySubscribed: false }, ); return ( <GridLayout tracks={tracks} style={{ height: 'calc(100vh - var(--lk-control-bar-height))' }}> {/* The GridLayout accepts zero or one child. The child is used as a template to render all passed in tracks. */} ); }