{
const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null;
const roomName = params?.get('room') ?? 'test-room';
const userIdentity = params?.get('user') ?? generateRandomUserId();
- const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, {
- userInfo: {
- identity: userIdentity,
- name: userIdentity,
- },
- });
const [room] = useState(new Room());
+ const tokenSource = useMemo(() => {
+ return TokenSource.endpoint(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT!);
+ }, []);
+
+ const session = useSession(tokenSource, {
+ roomName,
+ participantIdentity: userIdentity,
+ participantName: userIdentity,
+ room,
+ });
+
const [connect, setConnect] = useState(false);
const [isConnected, setIsConnected] = useState(false);
const handleDisconnect = () => {
@@ -41,6 +46,26 @@ const CustomizeExample: NextPage = () => {
setIsConnected(false);
};
+ useEffect(() => {
+ if (connect) {
+ session.start({
+ tracks: {
+ microphone: { enabled: true },
+ },
+ });
+ } else {
+ session.end();
+ }
+ }, [connect, session]);
+
+ useEffect(() => {
+ if (session.connectionState === 'connected') {
+ setIsConnected(true);
+ } else {
+ setIsConnected(false);
+ }
+ }, [session.connectionState]);
+
return (
-
+
+
);
};
diff --git a/examples/nextjs/pages/minimal.tsx b/examples/nextjs/pages/minimal.tsx
index 06442a7bf..cb2a3ebf7 100644
--- a/examples/nextjs/pages/minimal.tsx
+++ b/examples/nextjs/pages/minimal.tsx
@@ -1,43 +1,47 @@
'use client';
-import { LiveKitRoom, useToken, VideoConference, setLogLevel } from '@livekit/components-react';
+import { SessionProvider, useSession, VideoConference, setLogLevel } from '@livekit/components-react';
import type { NextPage } from 'next';
import { generateRandomUserId } from '../lib/helper';
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
+import { TokenSource } from 'livekit-client';
const MinimalExample: NextPage = () => {
const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null;
const roomName = params?.get('room') ?? 'test-room';
setLogLevel('debug', { liveKitClientLogLevel: 'info' });
- const tokenOptions = useMemo(() => {
- const userId = params?.get('user') ?? generateRandomUserId();
- return {
- userInfo: {
- identity: userId,
- name: userId,
- },
- };
+ const userIdentity = useMemo(
+ () => params?.get('user') ?? generateRandomUserId(),
+ [params],
+ );
+
+ const tokenSource = useMemo(() => {
+ return TokenSource.endpoint(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT!);
}, []);
- const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, tokenOptions);
+ const session = useSession(tokenSource, {
+ roomName,
+ participantIdentity: userIdentity,
+ participantName: userIdentity,
+ });
+
+ useEffect(() => {
+ session.start({
+ tracks: {
+ microphone: { enabled: false },
+ },
+ });
+ return () => {
+ session.end();
+ };
+ }, [session]);
return (
- {
- console.error(e);
- alert(
- 'Error acquiring camera or microphone permissions. Please make sure you grant the necessary permissions in your browser and reload the tab',
- );
- }}
- >
+
+
);
};
diff --git a/examples/nextjs/pages/processors.tsx b/examples/nextjs/pages/processors.tsx
index 44f3712ce..12a2cb953 100644
--- a/examples/nextjs/pages/processors.tsx
+++ b/examples/nextjs/pages/processors.tsx
@@ -4,16 +4,16 @@ import * as React from 'react';
import { setLogLevel } from '@livekit/components-core';
import {
GridLayout,
- LiveKitRoom,
+ SessionProvider,
+ useSession,
ParticipantTile,
TrackRefContext,
useLocalParticipant,
- useToken,
useTracks,
} from '@livekit/components-react';
import type { NextPage } from 'next';
import { ControlBarControls } from '@livekit/components-react';
-import { LocalVideoTrack, Track, TrackProcessor } from 'livekit-client';
+import { LocalVideoTrack, Track, TrackProcessor, TokenSource } from 'livekit-client';
import { BackgroundBlur } from '@livekit/track-processors';
function Stage() {
@@ -23,14 +23,18 @@ function Stage() {
const [blurEnabled, setBlurEnabled] = React.useState(false);
const [processorPending, setProcessorPending] = React.useState(false);
const { cameraTrack } = useLocalParticipant();
- const [blur] = React.useState(BackgroundBlur());
+ const [blur, setBlur] = React.useState
-
+
+
);
};
diff --git a/examples/nextjs/pages/simple.tsx b/examples/nextjs/pages/simple.tsx
index 7e9e981ab..7b7e3bd49 100644
--- a/examples/nextjs/pages/simple.tsx
+++ b/examples/nextjs/pages/simple.tsx
@@ -4,17 +4,17 @@ import {
ConnectionState,
ControlBar,
GridLayout,
- LiveKitRoom,
+ SessionProvider,
+ useSession,
ParticipantTile,
RoomAudioRenderer,
RoomName,
TrackRefContext,
- useToken,
useTracks,
} from '@livekit/components-react';
-import { Track } from 'livekit-client';
+import { Track, TokenSource } from 'livekit-client';
import type { NextPage } from 'next';
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useEffect } from 'react';
import styles from '../styles/Simple.module.css';
import { generateRandomUserId } from '../lib/helper';
@@ -25,16 +25,35 @@ const SimpleExample: NextPage = () => {
const [connect, setConnect] = useState(false);
const [isConnected, setIsConnected] = useState(false);
- const userInfo = useMemo(() => {
- return {
- userInfo: {
- identity: userIdentity,
- name: userIdentity,
- },
- };
+ const tokenSource = useMemo(() => {
+ return TokenSource.endpoint(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT!);
}, []);
- const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, userInfo);
+ const session = useSession(tokenSource, {
+ roomName,
+ participantIdentity: userIdentity,
+ participantName: userIdentity,
+ });
+
+ useEffect(() => {
+ if (connect) {
+ session.start({
+ tracks: {
+ microphone: { enabled: true },
+ },
+ });
+ } else {
+ session.end();
+ }
+ }, [connect, session]);
+
+ useEffect(() => {
+ if (session.connectionState === 'connected') {
+ setIsConnected(true);
+ } else {
+ setIsConnected(false);
+ }
+ }, [session.connectionState]);
const handleDisconnect = () => {
setConnect(false);
@@ -52,21 +71,13 @@ const SimpleExample: NextPage = () => {
{connect ? 'Disconnect' : 'Connect'}
)}
- 